* create FilterBar componer and its container, unstyled * introduce basic styling for FilterBar * add selection css * allow FilterBar to display active CSS with js * connect the FilterBar to the Redux state * change getNotifications to use filter * remove temporary comments * add an option to turn the FilterBar off in settings * fix showFilterBar data type to boolean * fix eslint errors * add English and Polish translations * allowed filter bar overflow to accomodate for longer languages * fix mispelled translation key * add unified CSS look * replace text in FilterBar with icons * add tooltips * replace text @ with an icon * introduce simple and advanced filtering view * add ability to toggle the advanced view * add Polish translations * change Advanced View description to be more clear * make each filter flush notifications and load new ones, fixing pagination * simplify getNotifications once frontend filtering is not needed for FilterBar * add a semicolon * Revert "simplify getNotifications once frontend filtering is not needed for FilterBar" This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc. * reset filter to 'all' when turning off FilterBar
		
			
				
	
	
		
			150 lines
		
	
	
	
		
			4.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			150 lines
		
	
	
	
		
			4.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings';
 | |
| import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
 | |
| import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE, COLUMN_PARAMS_CHANGE } from '../actions/columns';
 | |
| import { STORE_HYDRATE } from '../actions/store';
 | |
| import { EMOJI_USE } from '../actions/emojis';
 | |
| import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
 | |
| import { Map as ImmutableMap, fromJS } from 'immutable';
 | |
| import uuid from '../uuid';
 | |
| 
 | |
| const initialState = ImmutableMap({
 | |
|   saved: true,
 | |
| 
 | |
|   onboarded: false,
 | |
| 
 | |
|   skinTone: 1,
 | |
| 
 | |
|   home: ImmutableMap({
 | |
|     shows: ImmutableMap({
 | |
|       reblog: true,
 | |
|       reply: true,
 | |
|     }),
 | |
| 
 | |
|     regex: ImmutableMap({
 | |
|       body: '',
 | |
|     }),
 | |
|   }),
 | |
| 
 | |
|   notifications: ImmutableMap({
 | |
|     alerts: ImmutableMap({
 | |
|       follow: true,
 | |
|       favourite: true,
 | |
|       reblog: true,
 | |
|       mention: true,
 | |
|     }),
 | |
| 
 | |
|     quickFilter: ImmutableMap({
 | |
|       active: 'all',
 | |
|       show: true,
 | |
|       advanced: false,
 | |
|     }),
 | |
| 
 | |
|     shows: ImmutableMap({
 | |
|       follow: true,
 | |
|       favourite: true,
 | |
|       reblog: true,
 | |
|       mention: true,
 | |
|     }),
 | |
| 
 | |
|     sounds: ImmutableMap({
 | |
|       follow: true,
 | |
|       favourite: true,
 | |
|       reblog: true,
 | |
|       mention: true,
 | |
|     }),
 | |
|   }),
 | |
| 
 | |
|   community: ImmutableMap({
 | |
|     regex: ImmutableMap({
 | |
|       body: '',
 | |
|     }),
 | |
|   }),
 | |
| 
 | |
|   public: ImmutableMap({
 | |
|     regex: ImmutableMap({
 | |
|       body: '',
 | |
|     }),
 | |
|   }),
 | |
| 
 | |
|   direct: ImmutableMap({
 | |
|     regex: ImmutableMap({
 | |
|       body: '',
 | |
|     }),
 | |
|   }),
 | |
| 
 | |
|   trends: ImmutableMap({
 | |
|     show: true,
 | |
|   }),
 | |
| });
 | |
| 
 | |
| const defaultColumns = fromJS([
 | |
|   { id: 'COMPOSE', uuid: uuid(), params: {} },
 | |
|   { id: 'HOME', uuid: uuid(), params: {} },
 | |
|   { id: 'NOTIFICATIONS', uuid: uuid(), params: {} },
 | |
| ]);
 | |
| 
 | |
| const hydrate = (state, settings) => state.mergeDeep(settings).update('columns', (val = defaultColumns) => val);
 | |
| 
 | |
| const moveColumn = (state, uuid, direction) => {
 | |
|   const columns  = state.get('columns');
 | |
|   const index    = columns.findIndex(item => item.get('uuid') === uuid);
 | |
|   const newIndex = index + direction;
 | |
| 
 | |
|   let newColumns;
 | |
| 
 | |
|   newColumns = columns.splice(index, 1);
 | |
|   newColumns = newColumns.splice(newIndex, 0, columns.get(index));
 | |
| 
 | |
|   return state
 | |
|     .set('columns', newColumns)
 | |
|     .set('saved', false);
 | |
| };
 | |
| 
 | |
| const changeColumnParams = (state, uuid, path, value) => {
 | |
|   const columns = state.get('columns');
 | |
|   const index   = columns.findIndex(item => item.get('uuid') === uuid);
 | |
| 
 | |
|   const newColumns = columns.update(index, column => column.updateIn(['params', ...path], () => value));
 | |
| 
 | |
|   return state
 | |
|     .set('columns', newColumns)
 | |
|     .set('saved', false);
 | |
| };
 | |
| 
 | |
| const updateFrequentEmojis = (state, emoji) => state.update('frequentlyUsedEmojis', ImmutableMap(), map => map.update(emoji.id, 0, count => count + 1)).set('saved', false);
 | |
| 
 | |
| const filterDeadListColumns = (state, listId) => state.update('columns', columns => columns.filterNot(column => column.get('id') === 'LIST' && column.get('params').get('id') === listId));
 | |
| 
 | |
| export default function settings(state = initialState, action) {
 | |
|   switch(action.type) {
 | |
|   case STORE_HYDRATE:
 | |
|     return hydrate(state, action.state.get('settings'));
 | |
|   case NOTIFICATIONS_FILTER_SET:
 | |
|   case SETTING_CHANGE:
 | |
|     return state
 | |
|       .setIn(action.path, action.value)
 | |
|       .set('saved', false);
 | |
|   case COLUMN_ADD:
 | |
|     return state
 | |
|       .update('columns', list => list.push(fromJS({ id: action.id, uuid: uuid(), params: action.params })))
 | |
|       .set('saved', false);
 | |
|   case COLUMN_REMOVE:
 | |
|     return state
 | |
|       .update('columns', list => list.filterNot(item => item.get('uuid') === action.uuid))
 | |
|       .set('saved', false);
 | |
|   case COLUMN_MOVE:
 | |
|     return moveColumn(state, action.uuid, action.direction);
 | |
|   case COLUMN_PARAMS_CHANGE:
 | |
|     return changeColumnParams(state, action.uuid, action.path, action.value);
 | |
|   case EMOJI_USE:
 | |
|     return updateFrequentEmojis(state, action.emoji);
 | |
|   case SETTING_SAVE:
 | |
|     return state.set('saved', true);
 | |
|   case LIST_FETCH_FAIL:
 | |
|     return action.error.response.status === 404 ? filterDeadListColumns(state, action.id) : state;
 | |
|   case LIST_DELETE_SUCCESS:
 | |
|     return filterDeadListColumns(state, action.id);
 | |
|   default:
 | |
|     return state;
 | |
|   }
 | |
| };
 |