typescript, FC
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
b5ae9adf63
commit
7a36837585
11 changed files with 212 additions and 279 deletions
|
|
@ -1,84 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import Icon from 'soapbox/components/icon';
|
|
||||||
import { Button } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from '../../../actions/aliases';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
|
|
||||||
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
|
||||||
value: state.getIn(['aliases', 'suggestions', 'value']),
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
|
||||||
onSubmit: value => dispatch(fetchAliasesSuggestions(value)),
|
|
||||||
onClear: () => dispatch(clearAliasesSuggestions()),
|
|
||||||
onChange: value => dispatch(changeAliasesSuggestions(value)),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
|
||||||
@injectIntl
|
|
||||||
class Search extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
value: PropTypes.string.isRequired,
|
|
||||||
onChange: PropTypes.func.isRequired,
|
|
||||||
onSubmit: PropTypes.func.isRequired,
|
|
||||||
onClear: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = e => {
|
|
||||||
this.props.onChange(e.target.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleKeyUp = e => {
|
|
||||||
if (e.keyCode === 13) {
|
|
||||||
this.props.onSubmit(this.props.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubmit = () => {
|
|
||||||
this.props.onSubmit(this.props.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClear = () => {
|
|
||||||
this.props.onClear();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { value, intl } = this.props;
|
|
||||||
const hasValue = value.length > 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='aliases_search search'>
|
|
||||||
<label>
|
|
||||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
|
||||||
|
|
||||||
<input
|
|
||||||
className='search__input'
|
|
||||||
type='text'
|
|
||||||
value={value}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
onKeyUp={this.handleKeyUp}
|
|
||||||
placeholder={intl.formatMessage(messages.search)}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
|
||||||
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
|
||||||
</div>
|
|
||||||
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
65
app/soapbox/features/aliases/components/search.tsx
Normal file
65
app/soapbox/features/aliases/components/search.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
|
import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
|
||||||
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import { Button } from 'soapbox/components/ui';
|
||||||
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
|
||||||
|
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const Search: React.FC = () => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const value = useAppSelector(state => state.aliases.getIn(['suggestions', 'value'])) as string;
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
dispatch(changeAliasesSuggestions(e.target.value));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
dispatch(fetchAliasesSuggestions(value));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
dispatch(fetchAliasesSuggestions(value));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
dispatch(clearAliasesSuggestions());
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasValue = value.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='aliases_search search'>
|
||||||
|
<label>
|
||||||
|
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
className='search__input'
|
||||||
|
type='text'
|
||||||
|
value={value}
|
||||||
|
onChange={handleChange}
|
||||||
|
onKeyUp={handleKeyUp}
|
||||||
|
placeholder={intl.formatMessage(messages.search)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||||
|
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Search;
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import Avatar from 'soapbox/components/avatar';
|
|
||||||
import DisplayName from 'soapbox/components/display_name';
|
|
||||||
import Permalink from 'soapbox/components/permalink';
|
|
||||||
import ActionButton from 'soapbox/features/ui/components/action_button';
|
|
||||||
import { makeGetAccount } from 'soapbox/selectors';
|
|
||||||
|
|
||||||
const makeMapStateToProps = () => {
|
|
||||||
const getAccount = makeGetAccount();
|
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => ({
|
|
||||||
account: getAccount(state, props.id),
|
|
||||||
});
|
|
||||||
|
|
||||||
return mapStateToProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getFirstSentence = str => {
|
|
||||||
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
|
||||||
|
|
||||||
return arr[0];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(makeMapStateToProps)
|
|
||||||
class Account extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
account: ImmutablePropTypes.record.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { account } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='account follow-recommendations-account'>
|
|
||||||
<div className='account__wrapper'>
|
|
||||||
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
|
||||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
|
||||||
|
|
||||||
<DisplayName account={account} />
|
|
||||||
|
|
||||||
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
|
||||||
</Permalink>
|
|
||||||
|
|
||||||
<div className='account__relationship'>
|
|
||||||
<ActionButton account={account} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Avatar from 'soapbox/components/avatar';
|
||||||
|
import DisplayName from 'soapbox/components/display_name';
|
||||||
|
import Permalink from 'soapbox/components/permalink';
|
||||||
|
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||||||
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
|
import { makeGetAccount } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const getAccount = makeGetAccount();
|
||||||
|
|
||||||
|
const getFirstSentence = (str: string) => {
|
||||||
|
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
||||||
|
|
||||||
|
return arr[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IAccount {
|
||||||
|
id: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const Account: React.FC<IAccount> = ({ id }) => {
|
||||||
|
const account = useAppSelector((state) => getAccount(state, id));
|
||||||
|
|
||||||
|
if (!account) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='account follow-recommendations-account'>
|
||||||
|
<div className='account__wrapper'>
|
||||||
|
<Permalink className='account__display-name account__display-name--with-note' title={account.acct} href={account.url} to={`/@${account.get('acct')}`}>
|
||||||
|
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||||
|
|
||||||
|
<DisplayName account={account} />
|
||||||
|
|
||||||
|
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
||||||
|
</Permalink>
|
||||||
|
|
||||||
|
<div className='account__relationship'>
|
||||||
|
<ActionButton account={account} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Account;
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
|
|
||||||
import { Button } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
import FollowRecommendationsList from './follow_recommendations_list';
|
|
||||||
|
|
||||||
export default class FollowRecommendationsContainer extends React.Component {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
onDone: PropTypes.func.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDone = () => {
|
|
||||||
this.props.onDone();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='scrollable follow-recommendations-container'>
|
|
||||||
<div className='column-title'>
|
|
||||||
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
|
|
||||||
<h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let's get started!' /></h2>
|
|
||||||
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don't be afraid to make mistakes; you can unfollow people at any time.' /></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FollowRecommendationsList />
|
|
||||||
|
|
||||||
<div className='column-actions'>
|
|
||||||
<Button onClick={this.handleDone}>
|
|
||||||
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
import { Button } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
import FollowRecommendationsList from './follow_recommendations_list';
|
||||||
|
|
||||||
|
interface IFollowRecommendationsContainer {
|
||||||
|
onDone: () => void,
|
||||||
|
}
|
||||||
|
|
||||||
|
const FollowRecommendationsContainer: React.FC<IFollowRecommendationsContainer> = ({ onDone }) => (
|
||||||
|
<div className='scrollable follow-recommendations-container'>
|
||||||
|
<div className='column-title'>
|
||||||
|
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
|
||||||
|
<h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let's get started!' /></h2>
|
||||||
|
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don't be afraid to make mistakes; you can unfollow people at any time.' /></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FollowRecommendationsList />
|
||||||
|
|
||||||
|
<div className='column-actions'>
|
||||||
|
<Button onClick={onDone}>
|
||||||
|
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default FollowRecommendationsContainer;
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { fetchSuggestions } from 'soapbox/actions/suggestions';
|
|
||||||
import { Spinner } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
import Account from './account';
|
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
|
||||||
suggestions: state.getIn(['suggestions', 'items']),
|
|
||||||
isLoading: state.getIn(['suggestions', 'isLoading']),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
|
||||||
class FollowRecommendationsList extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
suggestions: ImmutablePropTypes.list,
|
|
||||||
isLoading: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { dispatch, suggestions } = this.props;
|
|
||||||
|
|
||||||
// Don't re-fetch if we're e.g. navigating backwards to this page,
|
|
||||||
// since we don't want followed accounts to disappear from the list
|
|
||||||
if (suggestions.size === 0) {
|
|
||||||
dispatch(fetchSuggestions(true));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { suggestions, isLoading } = this.props;
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className='column-list'>
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='column-list'>
|
|
||||||
{suggestions.size > 0 ? suggestions.map(suggestion => (
|
|
||||||
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
|
|
||||||
)) : (
|
|
||||||
<div className='column-list__empty-message'>
|
|
||||||
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
|
import { fetchSuggestions } from 'soapbox/actions/suggestions';
|
||||||
|
import { Spinner } from 'soapbox/components/ui';
|
||||||
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
import Account from './account';
|
||||||
|
|
||||||
|
const FollowRecommendationsList: React.FC = () => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const suggestions = useAppSelector((state) => state.suggestions.get('items'));
|
||||||
|
const isLoading = useAppSelector((state) => state.suggestions.get('isLoading'));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (suggestions.size === 0) {
|
||||||
|
dispatch(fetchSuggestions());
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className='column-list'>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='column-list'>
|
||||||
|
{suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
|
||||||
|
<Account key={suggestion.account} id={suggestion.account} />
|
||||||
|
)) : (
|
||||||
|
<div className='column-list__empty-message'>
|
||||||
|
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FollowRecommendationsList;
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import Column from 'soapbox/features/ui/components/column';
|
|
||||||
|
|
||||||
import FollowRecommendationsContainer from './components/follow_recommendations_container';
|
|
||||||
|
|
||||||
export default @withRouter
|
|
||||||
class FollowRecommendations extends React.Component {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
history: PropTypes.object.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
onDone = () => {
|
|
||||||
this.props.history.push('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Column>
|
|
||||||
<FollowRecommendationsContainer onDone={this.onDone} />
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
22
app/soapbox/features/follow_recommendations/index.tsx
Normal file
22
app/soapbox/features/follow_recommendations/index.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
import Column from 'soapbox/features/ui/components/column';
|
||||||
|
|
||||||
|
import FollowRecommendationsContainer from './components/follow_recommendations_container';
|
||||||
|
|
||||||
|
const FollowRecommendations: React.FC = () => {
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
|
const onDone = () => {
|
||||||
|
history.push('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column>
|
||||||
|
<FollowRecommendationsContainer onDone={onDone} />
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FollowRecommendations;
|
||||||
|
|
@ -4,10 +4,8 @@ import React from 'react';
|
||||||
* IntentionalError:
|
* IntentionalError:
|
||||||
* For testing logging/monitoring & previewing ErrorBoundary design.
|
* For testing logging/monitoring & previewing ErrorBoundary design.
|
||||||
*/
|
*/
|
||||||
export default class IntentionalError extends React.Component {
|
const IntentionalError: React.FC = () => {
|
||||||
|
throw 'This error is intentional.';
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
export default IntentionalError;
|
||||||
throw 'This error is intentional.';
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue