Commit fcbfcb51 authored by Eugen Rochko's avatar Eugen Rochko

Add more prompts for empty results cases

parent c16fa9e0
......@@ -99,8 +99,9 @@ hr {
p.lead {
font-size: 16px;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
color: $darker;
margin-bottom: 30px;
text-align: center;
}
.flash-message {
......
......@@ -5,8 +5,10 @@ require 'twitter'
class FriendsController < ApplicationController
before_action :authenticate_user!
MAX_INSTANCES = 20
MIN_INSTANCES = 4
MAX_INSTANCES = 20
MIN_INSTANCES = 4
helper_method :default_domains
def index
session[:job_id] = FindFriendsWorker.perform_async(current_user.id) unless job_exists?
......@@ -51,7 +53,7 @@ class FriendsController < ApplicationController
def friends_domains
data = Rails.cache.fetch("#{current_user.id}/friends")
return default_domains.sample(MIN_INSTANCES) if data.empty?
return default_domains if data.empty?
Authorization.where(provider: 'mastodon', user_id: data.map(&:first))
.map(&:uid)
......@@ -76,7 +78,7 @@ class FriendsController < ApplicationController
mastodon.sdf.org
x0r.be
toot.cafe
)
).sample(MIN_INSTANCES).map { |k| fetch_instance_info(k) }.compact
end
def fetch_instance_info(host)
......
import PropTypes from 'prop-types';
import React from 'react';
const ConnectPrompt = ({ domains }) => (
const ConnectPrompt = ({ isPioneer, domains }) => isPioneer ? (
<div className='connect-prompt'>
<h3><i className='fa fa-binoculars' /> You are a pioneer!</h3>
<p>You might be the first among your Twitter friends to explore Mastodon. Be sure to connect your Mastodon account so they see you when they join.</p>
<a target='_blank' href='/users/auth/mastodon'>Login via Mastodon</a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}>Create Mastodon account</a>}
</div>
) : (
<div className='connect-prompt'>
<h3><i className='fa fa-check' /> Almost there!</h3>
<p>For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, <a href='#domains'>see where your friends have signed up</a> or click the button below.</p>
......@@ -11,6 +18,7 @@ const ConnectPrompt = ({ domains }) => (
);
ConnectPrompt.propTypes = {
isPioneer: PropTypes.bool,
domains: PropTypes.array.isRequired,
};
......
......@@ -15,6 +15,7 @@ export default class HelloWorld extends React.PureComponent {
fetchProgress: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired,
mastodonIsConnected: PropTypes.bool.isRequired,
defaultDomains: PropTypes.array.isRequired,
};
componentDidMount () {
......@@ -23,7 +24,7 @@ export default class HelloWorld extends React.PureComponent {
}
render () {
const { status, inProgress, at, total, results, domains, mastodonIsConnected } = this.props;
const { status, inProgress, at, total, results, domains, defaultDomains, mastodonIsConnected } = this.props;
if (inProgress) {
const pct = total > 0 ? (at / total).toFixed(2) * 100 : 10;
......@@ -47,6 +48,12 @@ export default class HelloWorld extends React.PureComponent {
</div>
</div>
);
} else if (results.length === 0 && !mastodonIsConnected) {
return (
<div>
<ConnectPrompt isPioneer domains={defaultDomains} />
</div>
);
}
return (
......@@ -56,9 +63,13 @@ export default class HelloWorld extends React.PureComponent {
Your friends
<small>Here are your Twitter friends who are on Mastodon:</small>
</h3>
</div>) : <ConnectPrompt domains={domains} />}
</div>) : <ConnectPrompt domains={defaultDomains} />}
{results.length === 0 && <p className='lead'>
Right now, there are no results to be shown here. But maybe your friends haven't used this tool yet! Or maybe you are the trendsetter!
</p>}
<StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
{results.length > 0 && <StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
return i == 0
? { scale: spring(1, presets.wobbly) }
: { scale: spring(prevInterpolatedStyles[i - 1].scale, presets.wobbly) };
......@@ -81,7 +92,7 @@ export default class HelloWorld extends React.PureComponent {
))}
</div>
)}
</StaggeredMotion>
</StaggeredMotion>}
<div className='page-heading'>
<h3>
......@@ -91,7 +102,7 @@ export default class HelloWorld extends React.PureComponent {
</div>
<div className='grid' id='domains'>
{domains.map(domain => (
{(domains.length > 0 ? domains : defaultDomains).map(domain => (
<a target='_blank' className='instance-card' href={`https://${domain.uri}/about`} key={domain.uri} style={{ backgroundImage: `url(${domain.thumbnail})` }}>
<div className='info'>
<span className='title'>{domain.title}</span>
......
......@@ -5,7 +5,10 @@ import HelloWorld from '../components/HelloWorld';
import * as actions from '../actions/finderActionCreators';
// Which part of the Redux global state does our component want to receive as props?
const mapStateToProps = (state) => ({ ...state.finder, mastodonIsConnected: state.user.mastodonIsConnected });
const mapStateToProps = (state) => ({
...state.finder,
...state.user,
});
// Don't forget to actually use connect!
// Note that we don't export HelloWorld, but the redux "connected" version of it.
......
= react_component("HelloWorldApp", props: { user: { mastodonIsConnected: !current_user.mastodon.nil? } }, prerender: false)
= react_component("HelloWorldApp", props: { user: { mastodonIsConnected: !current_user.mastodon.nil?, defaultDomains: default_domains } }, prerender: false)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment