moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

typescript 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-13 16:07:50 +02:00
parent 7a36837585
commit 50797119ff
12 changed files with 371 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
app/soapbox/features/list_timeline/index.js
View File

@ -1,158 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { Button, Spinner } from 'soapbox/components/ui';
import Column from 'soapbox/features/ui/components/column';
import { fetchList, deleteList } from '../../actions/lists';
import { openModal } from '../../actions/modals';
import { connectListStream } from '../../actions/streaming';
import { expandListTimeline } from '../../actions/timelines';
import MissingIndicator from '../../components/missing_indicator';
import StatusListContainer from '../ui/containers/status_list_container';
const messages = defineMessages({
deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
});
const mapStateToProps = (state, props) => ({
list: state.getIn(['lists', props.params.id]),
// hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
});
export default @connect(mapStateToProps)
@injectIntl
@withRouter
class ListTimeline extends React.PureComponent {
static propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
// hasUnread: PropTypes.bool,
list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
intl: PropTypes.object.isRequired,
history: PropTypes.object,
};
componentDidMount() {
this.handleConnect(this.props.params.id);
}
componentWillUnmount() {
this.handleDisconnect();
}
componentDidUpdate(prevProps) {
if (this.props.params.id !== prevProps.params.id) {
this.handleDisconnect();
this.handleConnect(this.props.params.id);
}
}
handleConnect(id) {
const { dispatch } = this.props;
dispatch(fetchList(id));
dispatch(expandListTimeline(id));
this.disconnect = dispatch(connectListStream(id));
}
handleDisconnect() {
if (this.disconnect) {
this.disconnect();
this.disconnect = null;
}
}
handleLoadMore = maxId => {
const { id } = this.props.params;
this.props.dispatch(expandListTimeline(id, { maxId }));
}
handleEditClick = () => {
this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id }));
}
handleDeleteClick = () => {
const { dispatch, intl } = this.props;
const { id } = this.props.params;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/trash.svg'),
heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm),
onConfirm: () => {
dispatch(deleteList(id));
this.props.history.push('/lists');
},
}));
}
render() {
const { list } = this.props;
const { id } = this.props.params;
const title = list ? list.get('title') : id;
if (typeof list === 'undefined') {
return (
<Column>
<div>
<Spinner />
</div>
</Column>
);
} else if (list === false) {
return (
<MissingIndicator />
);
}
const emptyMessage = (
<div>
<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
<br /><br />
<Button onClick={this.handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
</div>
);
return (
<Column label={title} heading={title} transparent>
{/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
<div className='column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
<Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button>
<hr />
<Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
<Icon id='arrow-right' />
</Link>
</div>
</HomeColumnHeader> */}
<StatusListContainer
scrollKey='list_timeline'
timelineId={`list:${id}`}
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
divideType='space'
/>
</Column>
);
}
}

125
app/soapbox/features/list_timeline/index.tsx Normal file
View File

@ -0,0 +1,125 @@
import React from 'react';
import { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom';
import { fetchList } from 'soapbox/actions/lists';
import { openModal } from 'soapbox/actions/modals';
import { connectListStream } from 'soapbox/actions/streaming';
import { expandListTimeline } from 'soapbox/actions/timelines';
import MissingIndicator from 'soapbox/components/missing_indicator';
import { Button, Spinner } from 'soapbox/components/ui';
import Column from 'soapbox/features/ui/components/column';
import { useAppSelector } from 'soapbox/hooks';
import StatusListContainer from '../ui/containers/status_list_container';
// const messages = defineMessages({
// deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
// deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
// deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
// });
const ListTimeline: React.FC = () => {
const dispatch = useDispatch();
const { id } = useParams<{ id: string }>();
// const intl = useIntl();
// const history = useHistory();
const list = useAppSelector((state) => state.lists.get(id));
// const hasUnread = useAppSelector((state) => state.timelines.getIn([`list:${props.params.id}`, 'unread']) > 0);
useEffect(() => {
const disconnect = handleConnect(id);
return () => {
disconnect();
};
}, [id]);
const handleConnect = (id: string) => {
dispatch(fetchList(id));
dispatch(expandListTimeline(id));
return dispatch(connectListStream(id));
};
const handleLoadMore = (maxId: string) => {
dispatch(expandListTimeline(id, { maxId }));
};
const handleEditClick = () => {
dispatch(openModal('LIST_EDITOR', { listId: id }));
};
// const handleDeleteClick = () => {
// dispatch(openModal('CONFIRM', {
// icon: require('@tabler/icons/icons/trash.svg'),
// heading: intl.formatMessage(messages.deleteHeading),
// message: intl.formatMessage(messages.deleteMessage),
// confirm: intl.formatMessage(messages.deleteConfirm),
// onConfirm: () => {
// dispatch(deleteList(id));
// history.push('/lists');
// },
// }));
// };
const title = list ? list.get('title') : id;
if (typeof list === 'undefined') {
return (
<Column>
<div>
<Spinner />
</div>
</Column>
);
} else if (list === false) {
return (
<MissingIndicator />
);
}
const emptyMessage = (
<div>
<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.' />
<br /><br />
<Button onClick={handleEditClick}><FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' /></Button>
</div>
);
return (
<Column label={title} heading={title} transparent>
{/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
<div className='column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleDeleteClick}>
<Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button>
<hr />
<Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
<Icon id='arrow-right' />
</Link>
</div>
</HomeColumnHeader> */}
<StatusListContainer
scrollKey='list_timeline'
timelineId={`list:${id}`}
onLoadMore={handleLoadMore}
emptyMessage={emptyMessage}
divideType='space'
/>
</Column>
);
};
export default ListTimeline;

82
app/soapbox/features/lists/components/new_list_form.js
View File

@ -1,82 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
import { Button } from '../../../components/ui';
const messages = defineMessages({
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
title: { id: 'lists.new.create', defaultMessage: 'Add list' },
create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
});
const mapStateToProps = state => ({
value: state.getIn(['listEditor', 'title']),
disabled: state.getIn(['listEditor', 'isSubmitting']),
});
const mapDispatchToProps = dispatch => ({
onChange: value => dispatch(changeListEditorTitle(value)),
onSubmit: () => dispatch(submitListEditor(true)),
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class NewListForm extends React.PureComponent {
static propTypes = {
value: PropTypes.string.isRequired,
disabled: PropTypes.bool,
intl: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
};
handleChange = e => {
this.props.onChange(e.target.value);
}
handleSubmit = e => {
e.preventDefault();
this.props.onSubmit();
}
handleClick = e => {
e.preventDefault();
this.props.onSubmit();
}
render() {
const { value, disabled, intl } = this.props;
const label = intl.formatMessage(messages.label);
const create = intl.formatMessage(messages.create);
return (
<form className='column-inline-form' method='post' onSubmit={this.handleSubmit}>
<label>
<span style={{ display: 'none' }}>{label}</span>
<input
className='setting-text new-list-form__input'
value={value}
disabled={disabled}
onChange={this.handleChange}
placeholder={label}
/>
</label>
<Button
className='new-list-form__btn'
disabled={disabled}
onClick={this.handleClick}
>
{create}
</Button>
</form>
);
}
}

59
app/soapbox/features/lists/components/new_list_form.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
import { Button } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
const messages = defineMessages({
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
title: { id: 'lists.new.create', defaultMessage: 'Add list' },
create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
});
const NewListForm: React.FC = () => {
const dispatch = useDispatch();
const intl = useIntl();
const value = useAppSelector((state) => state.listEditor.get('title'));
const disabled = useAppSelector((state) => !!state.listEditor.get('isSubmitting'));
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
dispatch(changeListEditorTitle(e.target.value));
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement | HTMLButtonElement>) => {
e.preventDefault();
dispatch(submitListEditor(true));
};
const label = intl.formatMessage(messages.label);
const create = intl.formatMessage(messages.create);
return (
<form className='column-inline-form' method='post' onSubmit={handleSubmit}>
<label>
<span style={{ display: 'none' }}>{label}</span>
<input
className='setting-text new-list-form__input'
value={value}
disabled={disabled}
onChange={handleChange}
placeholder={label}
/>
</label>
<Button
// className='new-list-form__btn'
disabled={disabled}
onClick={handleSubmit}
>
{create}
</Button>
</form>
);
};
export default NewListForm;

89
app/soapbox/features/lists/index.js
View File

@ -1,89 +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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchLists } from 'soapbox/actions/lists';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link';
import NewListForm from './components/new_list_form';
const messages = defineMessages({
heading: { id: 'column.lists', defaultMessage: 'Lists' },
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
add: { id: 'lists.new.create', defaultMessage: 'Add list' },
});
const getOrderedLists = createSelector([state => state.get('lists')], lists => {
if (!lists) {
return lists;
}
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
});
const mapStateToProps = state => ({
lists: getOrderedLists(state),
});
export default @connect(mapStateToProps)
@injectIntl
class Lists extends ImmutablePureComponent {
static propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
lists: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
};
componentDidMount() {
this.props.dispatch(fetchLists());
}
render() {
const { intl, lists } = this.props;
if (!lists) {
return (
<Column>
<Spinner />
</Column>
);
}
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
return (
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
<br />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.add)} />
</CardHeader>
<NewListForm />
<br />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading)} />
</CardHeader>
<ScrollableList
scrollKey='lists'
emptyMessage={emptyMessage}
>
{lists.map(list =>
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
)}
</ScrollableList>
</Column>
);
}
}

77
app/soapbox/features/lists/index.tsx Normal file
View File

@ -0,0 +1,77 @@
import React from 'react';
import { useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchLists } from 'soapbox/actions/lists';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link';
import NewListForm from './components/new_list_form';
import type { RootState } from 'soapbox/store';
const messages = defineMessages({
heading: { id: 'column.lists', defaultMessage: 'Lists' },
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
add: { id: 'lists.new.create', defaultMessage: 'Add list' },
});
const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
if (!lists) {
return lists;
}
return lists.toList().filter((item) => !!item).sort((a: any, b: any) => a.get('title').localeCompare(b.get('title')));
});
const Lists: React.FC = () => {
const dispatch = useDispatch();
const intl = useIntl();
const lists = useAppSelector((state) => getOrderedLists(state));
useEffect(() => {
dispatch(fetchLists());
}, []);
if (!lists) {
return (
<Column>
<Spinner />
</Column>
);
}
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
return (
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
<br />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.add)} />
</CardHeader>
<NewListForm />
<br />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading)} />
</CardHeader>
<ScrollableList
scrollKey='lists'
emptyMessage={emptyMessage}
>
{lists.map((list: any) =>
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
)}
</ScrollableList>
</Column>
);
};
export default Lists;

1
app/soapbox/normalizers/index.ts
View File

@ -5,6 +5,7 @@ export { ChatRecord, normalizeChat } from './chat';
export { ChatMessageRecord, normalizeChatMessage } from './chat_message';
export { EmojiRecord, normalizeEmoji } from './emoji';
export { InstanceRecord, normalizeInstance } from './instance';
export { ListRecord, normalizeList } from './list';
export { MentionRecord, normalizeMention } from './mention';
export { NotificationRecord, normalizeNotification } from './notification';
export { PollRecord, PollOptionRecord, normalizePoll } from './poll';

19
app/soapbox/normalizers/list.ts Normal file
View File

@ -0,0 +1,19 @@
/**
* List normalizer:
* Converts API lists into our internal format.
* @see {@link https://docs.joinmastodon.org/entities/list/}
*/
import { Record as ImmutableRecord, Map as ImmutableMap, fromJS } from 'immutable';
// https://docs.joinmastodon.org/entities/list/
export const ListRecord = ImmutableRecord({
id: '',
title: '',
replies_policy: null as 'followed' | 'list' | 'none' | null,
});
export const normalizeList = (list: Record<string, any>) => {
return ListRecord(
ImmutableMap(fromJS(list)),
);
};

29
app/soapbox/reducers/list_adder.js → app/soapbox/reducers/list_adder.ts
View File

@ -1,4 +1,5 @@
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
import { AnyAction } from 'redux';
import {
LIST_ADDER_RESET,
@ -10,20 +11,24 @@ import {
LIST_EDITOR_REMOVE_SUCCESS,
} from '../actions/lists';
const initialState = ImmutableMap({
accountId: null,
lists: ImmutableMap({
items: ImmutableList(),
const ListsRecord = ImmutableRecord({
items: ImmutableList<string>(),
loaded: false,
isLoading: false,
}),
});
export default function listAdderReducer(state = initialState, action) {
const ReducerRecord = ImmutableRecord({
accountId: null as string | null,
lists: ListsRecord(),
});
type State = ReturnType<typeof ReducerRecord>;
export default function listAdderReducer(state: State = ReducerRecord(), action: AnyAction) {
switch(action.type) {
case LIST_ADDER_RESET:
return initialState;
return ReducerRecord();
case LIST_ADDER_SETUP:
return state.withMutations(map => {
map.set('accountId', action.account.get('id'));
@ -36,12 +41,12 @@ export default function listAdderReducer(state = initialState, action) {
return state.update('lists', lists => lists.withMutations(map => {
map.set('isLoading', false);
map.set('loaded', true);
map.set('items', ImmutableList(action.lists.map(item => item.id)));
map.set('items', ImmutableList(action.lists.map((item: { id: string }) => item.id)));
}));
case LIST_EDITOR_ADD_SUCCESS:
return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).unshift(action.listId));
case LIST_EDITOR_REMOVE_SUCCESS:
return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
return state.updateIn(['lists', 'items'], list => (list as ImmutableList<string>).filterNot(item => item === action.listId));
default:
return state;
}

43
app/soapbox/reducers/list_editor.js → app/soapbox/reducers/list_editor.ts
View File

@ -1,4 +1,5 @@
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
import { AnyAction } from 'redux';
import {
LIST_CREATE_REQUEST,
@ -20,28 +21,34 @@ import {
LIST_EDITOR_REMOVE_SUCCESS,
} from '../actions/lists';
const initialState = ImmutableMap({
listId: null,
const AccountsRecord = ImmutableRecord({
items: ImmutableList<string>(),
loaded: false,
isLoading: false,
});
const SuggestionsRecord = ImmutableRecord({
value: '',
items: ImmutableList<string>(),
});
const ReducerRecord = ImmutableRecord({
listId: null as string | null,
isSubmitting: false,
isChanged: false,
title: '',
accounts: ImmutableMap({
items: ImmutableList(),
loaded: false,
isLoading: false,
}),
accounts: AccountsRecord(),
suggestions: ImmutableMap({
value: '',
items: ImmutableList(),
}),
suggestions: SuggestionsRecord(),
});
export default function listEditorReducer(state = initialState, action) {
type State = ReturnType<typeof ReducerRecord>;
export default function listEditorReducer(state: State = ReducerRecord(), action: AnyAction) {
switch(action.type) {
case LIST_EDITOR_RESET:
return initialState;
return ReducerRecord();
case LIST_EDITOR_SETUP:
return state.withMutations(map => {
map.set('listId', action.list.get('id'));
@ -76,21 +83,21 @@ export default function listEditorReducer(state = initialState, action) {
return state.update('accounts', accounts => accounts.withMutations(map => {
map.set('isLoading', false);
map.set('loaded', true);
map.set('items', ImmutableList(action.accounts.map(item => item.id)));
map.set('items', ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
}));
case LIST_EDITOR_SUGGESTIONS_CHANGE:
return state.setIn(['suggestions', 'value'], action.value);
case LIST_EDITOR_SUGGESTIONS_READY:
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map((item: { id: string }) => item.id)));
case LIST_EDITOR_SUGGESTIONS_CLEAR:
return state.update('suggestions', suggestions => suggestions.withMutations(map => {
map.set('items', ImmutableList());
map.set('value', '');
}));
case LIST_EDITOR_ADD_SUCCESS:
return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId));
return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).unshift(action.accountId));
case LIST_EDITOR_REMOVE_SUCCESS:
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
return state.updateIn(['accounts', 'items'], list => (list as ImmutableList<string>).filterNot((item) => item === action.accountId));
default:
return state;
}

38
app/soapbox/reducers/lists.js
View File

@ -1,38 +0,0 @@
import { Map as ImmutableMap, fromJS } from 'immutable';
import {
LIST_FETCH_SUCCESS,
LIST_FETCH_FAIL,
LISTS_FETCH_SUCCESS,
LIST_CREATE_SUCCESS,
LIST_UPDATE_SUCCESS,
LIST_DELETE_SUCCESS,
} from '../actions/lists';
const initialState = ImmutableMap();
const normalizeList = (state, list) => state.set(list.id, fromJS(list));
const normalizeLists = (state, lists) => {
lists.forEach(list => {
state = normalizeList(state, list);
});
return state;
};
export default function lists(state = initialState, action) {
switch(action.type) {
case LIST_FETCH_SUCCESS:
case LIST_CREATE_SUCCESS:
case LIST_UPDATE_SUCCESS:
return normalizeList(state, action.list);
case LISTS_FETCH_SUCCESS:
return normalizeLists(state, action.lists);
case LIST_DELETE_SUCCESS:
case LIST_FETCH_FAIL:
return state.set(action.id, false);
default:
return state;
}
}

46
app/soapbox/reducers/lists.ts Normal file
View File

@ -0,0 +1,46 @@
import { Map as ImmutableMap } from 'immutable';
import { AnyAction } from 'redux';
import {
LIST_FETCH_SUCCESS,
LIST_FETCH_FAIL,
LISTS_FETCH_SUCCESS,
LIST_CREATE_SUCCESS,
LIST_UPDATE_SUCCESS,
LIST_DELETE_SUCCESS,
} from 'soapbox/actions/lists';
import { normalizeList } from 'soapbox/normalizers';
type ListRecord = ReturnType<typeof normalizeList>;
type APIEntity = Record<string, any>;
type APIEntities = Array<APIEntity>;
type State = ImmutableMap<string, ListRecord | false>;
const initialState: State = ImmutableMap();
const importList = (state: State, list: APIEntity) => state.set(list.id, normalizeList(list));
const importLists = (state: State, lists: APIEntities) => {
lists.forEach(list => {
state = importList(state, list);
});
return state;
};
export default function lists(state: State = initialState, action: AnyAction) {
switch(action.type) {
case LIST_FETCH_SUCCESS:
case LIST_CREATE_SUCCESS:
case LIST_UPDATE_SUCCESS:
return importList(state, action.list);
case LISTS_FETCH_SUCCESS:
return importLists(state, action.lists);
case LIST_DELETE_SUCCESS:
case LIST_FETCH_FAIL:
return state.set(action.id, false);
default:
return state;
}
}