Change design of lists in web UI (#32881)
This commit is contained in:
parent
7385016837
commit
62603508c7
39 changed files with 1395 additions and 1350 deletions
|
@ -17,9 +17,7 @@ import filters from './filters';
|
|||
import followed_tags from './followed_tags';
|
||||
import height_cache from './height_cache';
|
||||
import history from './history';
|
||||
import listAdder from './list_adder';
|
||||
import listEditor from './list_editor';
|
||||
import lists from './lists';
|
||||
import { listsReducer } from './lists';
|
||||
import { markersReducer } from './markers';
|
||||
import media_attachments from './media_attachments';
|
||||
import meta from './meta';
|
||||
|
@ -69,9 +67,7 @@ const reducers = {
|
|||
notificationGroups: notificationGroupsReducer,
|
||||
height_cache,
|
||||
custom_emojis,
|
||||
lists,
|
||||
listEditor,
|
||||
listAdder,
|
||||
lists: listsReducer,
|
||||
filters,
|
||||
conversations,
|
||||
suggestions,
|
||||
|
|
|
@ -1,48 +0,0 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
|
||||
import {
|
||||
LIST_ADDER_RESET,
|
||||
LIST_ADDER_SETUP,
|
||||
LIST_ADDER_LISTS_FETCH_REQUEST,
|
||||
LIST_ADDER_LISTS_FETCH_SUCCESS,
|
||||
LIST_ADDER_LISTS_FETCH_FAIL,
|
||||
LIST_EDITOR_ADD_SUCCESS,
|
||||
LIST_EDITOR_REMOVE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
accountId: null,
|
||||
|
||||
lists: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
});
|
||||
|
||||
export default function listAdderReducer(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case LIST_ADDER_RESET:
|
||||
return initialState;
|
||||
case LIST_ADDER_SETUP:
|
||||
return state.withMutations(map => {
|
||||
map.set('accountId', action.account.get('id'));
|
||||
});
|
||||
case LIST_ADDER_LISTS_FETCH_REQUEST:
|
||||
return state.setIn(['lists', 'isLoading'], true);
|
||||
case LIST_ADDER_LISTS_FETCH_FAIL:
|
||||
return state.setIn(['lists', 'isLoading'], false);
|
||||
case LIST_ADDER_LISTS_FETCH_SUCCESS:
|
||||
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)));
|
||||
}));
|
||||
case LIST_EDITOR_ADD_SUCCESS:
|
||||
return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
|
||||
case LIST_EDITOR_REMOVE_SUCCESS:
|
||||
return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
|
@ -1,99 +0,0 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
|
||||
import {
|
||||
LIST_CREATE_REQUEST,
|
||||
LIST_CREATE_FAIL,
|
||||
LIST_CREATE_SUCCESS,
|
||||
LIST_UPDATE_REQUEST,
|
||||
LIST_UPDATE_FAIL,
|
||||
LIST_UPDATE_SUCCESS,
|
||||
LIST_EDITOR_RESET,
|
||||
LIST_EDITOR_SETUP,
|
||||
LIST_EDITOR_TITLE_CHANGE,
|
||||
LIST_ACCOUNTS_FETCH_REQUEST,
|
||||
LIST_ACCOUNTS_FETCH_SUCCESS,
|
||||
LIST_ACCOUNTS_FETCH_FAIL,
|
||||
LIST_EDITOR_SUGGESTIONS_READY,
|
||||
LIST_EDITOR_SUGGESTIONS_CLEAR,
|
||||
LIST_EDITOR_SUGGESTIONS_CHANGE,
|
||||
LIST_EDITOR_ADD_SUCCESS,
|
||||
LIST_EDITOR_REMOVE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
listId: null,
|
||||
isSubmitting: false,
|
||||
isChanged: false,
|
||||
title: '',
|
||||
isExclusive: false,
|
||||
|
||||
accounts: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default function listEditorReducer(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case LIST_EDITOR_RESET:
|
||||
return initialState;
|
||||
case LIST_EDITOR_SETUP:
|
||||
return state.withMutations(map => {
|
||||
map.set('listId', action.list.get('id'));
|
||||
map.set('title', action.list.get('title'));
|
||||
map.set('isExclusive', action.list.get('is_exclusive'));
|
||||
map.set('isSubmitting', false);
|
||||
});
|
||||
case LIST_EDITOR_TITLE_CHANGE:
|
||||
return state.withMutations(map => {
|
||||
map.set('title', action.value);
|
||||
map.set('isChanged', true);
|
||||
});
|
||||
case LIST_CREATE_REQUEST:
|
||||
case LIST_UPDATE_REQUEST:
|
||||
return state.withMutations(map => {
|
||||
map.set('isSubmitting', true);
|
||||
map.set('isChanged', false);
|
||||
});
|
||||
case LIST_CREATE_FAIL:
|
||||
case LIST_UPDATE_FAIL:
|
||||
return state.set('isSubmitting', false);
|
||||
case LIST_CREATE_SUCCESS:
|
||||
case LIST_UPDATE_SUCCESS:
|
||||
return state.withMutations(map => {
|
||||
map.set('isSubmitting', false);
|
||||
map.set('listId', action.list.id);
|
||||
});
|
||||
case LIST_ACCOUNTS_FETCH_REQUEST:
|
||||
return state.setIn(['accounts', 'isLoading'], true);
|
||||
case LIST_ACCOUNTS_FETCH_FAIL:
|
||||
return state.setIn(['accounts', 'isLoading'], false);
|
||||
case LIST_ACCOUNTS_FETCH_SUCCESS:
|
||||
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)));
|
||||
}));
|
||||
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)));
|
||||
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));
|
||||
case LIST_EDITOR_REMOVE_SUCCESS:
|
||||
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
49
app/javascript/mastodon/reducers/lists.ts
Normal file
49
app/javascript/mastodon/reducers/lists.ts
Normal file
|
@ -0,0 +1,49 @@
|
|||
import type { Reducer } from '@reduxjs/toolkit';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
import { createList, updateList } from 'mastodon/actions/lists_typed';
|
||||
import type { ApiListJSON } from 'mastodon/api_types/lists';
|
||||
import { createList as createListFromJSON } from 'mastodon/models/list';
|
||||
import type { List } from 'mastodon/models/list';
|
||||
|
||||
import {
|
||||
LIST_FETCH_SUCCESS,
|
||||
LIST_FETCH_FAIL,
|
||||
LISTS_FETCH_SUCCESS,
|
||||
LIST_DELETE_SUCCESS,
|
||||
} from '../actions/lists';
|
||||
|
||||
const initialState = ImmutableMap<string, List | null>();
|
||||
type State = typeof initialState;
|
||||
|
||||
const normalizeList = (state: State, list: ApiListJSON) =>
|
||||
state.set(list.id, createListFromJSON(list));
|
||||
|
||||
const normalizeLists = (state: State, lists: ApiListJSON[]) => {
|
||||
lists.forEach((list) => {
|
||||
state = normalizeList(state, list);
|
||||
});
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export const listsReducer: Reducer<State> = (state = initialState, action) => {
|
||||
if (
|
||||
createList.fulfilled.match(action) ||
|
||||
updateList.fulfilled.match(action)
|
||||
) {
|
||||
return normalizeList(state, action.payload);
|
||||
} else {
|
||||
switch (action.type) {
|
||||
case LIST_FETCH_SUCCESS:
|
||||
return normalizeList(state, action.list as ApiListJSON);
|
||||
case LISTS_FETCH_SUCCESS:
|
||||
return normalizeLists(state, action.lists as ApiListJSON[]);
|
||||
case LIST_DELETE_SUCCESS:
|
||||
case LIST_FETCH_FAIL:
|
||||
return state.set(action.id as string, null);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue