Commit fcbfcb51 authored by Eugen Rochko's avatar Eugen Rochko

Add more prompts for empty results cases

parent c16fa9e0
...@@ -99,8 +99,9 @@ hr { ...@@ -99,8 +99,9 @@ hr {
p.lead { p.lead {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #fff; color: $darker;
margin-bottom: 20px; margin-bottom: 30px;
text-align: center;
} }
.flash-message { .flash-message {
......
...@@ -5,8 +5,10 @@ require 'twitter' ...@@ -5,8 +5,10 @@ require 'twitter'
class FriendsController < ApplicationController class FriendsController < ApplicationController
before_action :authenticate_user! before_action :authenticate_user!
MAX_INSTANCES = 20 MAX_INSTANCES = 20
MIN_INSTANCES = 4 MIN_INSTANCES = 4
helper_method :default_domains
def index def index
session[:job_id] = FindFriendsWorker.perform_async(current_user.id) unless job_exists? session[:job_id] = FindFriendsWorker.perform_async(current_user.id) unless job_exists?
...@@ -51,7 +53,7 @@ class FriendsController < ApplicationController ...@@ -51,7 +53,7 @@ class FriendsController < ApplicationController
def friends_domains def friends_domains
data = Rails.cache.fetch("#{current_user.id}/friends") 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)) Authorization.where(provider: 'mastodon', user_id: data.map(&:first))
.map(&:uid) .map(&:uid)
...@@ -76,7 +78,7 @@ class FriendsController < ApplicationController ...@@ -76,7 +78,7 @@ class FriendsController < ApplicationController
mastodon.sdf.org mastodon.sdf.org
x0r.be x0r.be
toot.cafe toot.cafe
) ).sample(MIN_INSTANCES).map { |k| fetch_instance_info(k) }.compact
end end
def fetch_instance_info(host) def fetch_instance_info(host)
......
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; 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'> <div className='connect-prompt'>
<h3><i className='fa fa-check' /> Almost there!</h3> <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> <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 }) => ( ...@@ -11,6 +18,7 @@ const ConnectPrompt = ({ domains }) => (
); );
ConnectPrompt.propTypes = { ConnectPrompt.propTypes = {
isPioneer: PropTypes.bool,
domains: PropTypes.array.isRequired, domains: PropTypes.array.isRequired,
}; };
......
...@@ -15,6 +15,7 @@ export default class HelloWorld extends React.PureComponent { ...@@ -15,6 +15,7 @@ export default class HelloWorld extends React.PureComponent {
fetchProgress: PropTypes.func.isRequired, fetchProgress: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired, fetchResults: PropTypes.func.isRequired,
mastodonIsConnected: PropTypes.bool.isRequired, mastodonIsConnected: PropTypes.bool.isRequired,
defaultDomains: PropTypes.array.isRequired,
}; };
componentDidMount () { componentDidMount () {
...@@ -23,7 +24,7 @@ export default class HelloWorld extends React.PureComponent { ...@@ -23,7 +24,7 @@ export default class HelloWorld extends React.PureComponent {
} }
render () { render () {
const { status, inProgress, at, total, results, domains, mastodonIsConnected } = this.props; const { status, inProgress, at, total, results, domains, defaultDomains, mastodonIsConnected } = this.props;
if (inProgress) { if (inProgress) {
const pct = total > 0 ? (at / total).toFixed(2) * 100 : 10; const pct = total > 0 ? (at / total).toFixed(2) * 100 : 10;
...@@ -47,6 +48,12 @@ export default class HelloWorld extends React.PureComponent { ...@@ -47,6 +48,12 @@ export default class HelloWorld extends React.PureComponent {
</div> </div>
</div> </div>
); );
} else if (results.length === 0 && !mastodonIsConnected) {
return (
<div>
<ConnectPrompt isPioneer domains={defaultDomains} />
</div>
);
} }
return ( return (
...@@ -56,9 +63,13 @@ export default class HelloWorld extends React.PureComponent { ...@@ -56,9 +63,13 @@ export default class HelloWorld extends React.PureComponent {
Your friends Your friends
<small>Here are your Twitter friends who are on Mastodon:</small> <small>Here are your Twitter friends who are on Mastodon:</small>
</h3> </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 return i == 0
? { scale: spring(1, presets.wobbly) } ? { scale: spring(1, presets.wobbly) }
: { scale: spring(prevInterpolatedStyles[i - 1].scale, presets.wobbly) }; : { scale: spring(prevInterpolatedStyles[i - 1].scale, presets.wobbly) };
...@@ -81,7 +92,7 @@ export default class HelloWorld extends React.PureComponent { ...@@ -81,7 +92,7 @@ export default class HelloWorld extends React.PureComponent {
))} ))}
</div> </div>
)} )}
</StaggeredMotion> </StaggeredMotion>}
<div className='page-heading'> <div className='page-heading'>
<h3> <h3>
...@@ -91,7 +102,7 @@ export default class HelloWorld extends React.PureComponent { ...@@ -91,7 +102,7 @@ export default class HelloWorld extends React.PureComponent {
</div> </div>
<div className='grid' id='domains'> <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})` }}> <a target='_blank' className='instance-card' href={`https://${domain.uri}/about`} key={domain.uri} style={{ backgroundImage: `url(${domain.thumbnail})` }}>
<div className='info'> <div className='info'>
<span className='title'>{domain.title}</span> <span className='title'>{domain.title}</span>
......
...@@ -5,7 +5,10 @@ import HelloWorld from '../components/HelloWorld'; ...@@ -5,7 +5,10 @@ import HelloWorld from '../components/HelloWorld';
import * as actions from '../actions/finderActionCreators'; import * as actions from '../actions/finderActionCreators';
// Which part of the Redux global state does our component want to receive as props? // 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! // Don't forget to actually use connect!
// Note that we don't export HelloWorld, but the redux "connected" version of it. // 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