diff --git a/client/constants.js b/client/constants.js index 608a31a0f9..1a05665a51 100644 --- a/client/constants.js +++ b/client/constants.js @@ -131,10 +131,7 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE'; export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING'; export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING'; -export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION'; -export const SET_SORTING = 'SET_SORTING'; export const SET_SORT_PARAMS = 'SET_SORT_PARAMS'; -export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL'; export const START_SAVING_PROJECT = 'START_SAVING_PROJECT'; diff --git a/client/modules/IDE/actions/sorting.js b/client/modules/IDE/actions/sorting.js index b9aa0354cb..0a2da6ad66 100644 --- a/client/modules/IDE/actions/sorting.js +++ b/client/modules/IDE/actions/sorting.js @@ -1,39 +1,18 @@ -import * as ActionTypes from '../../../constants'; +import { setSorting } from '../reducers/sorting'; +import { setSearchTerm } from '../reducers/search'; + +export { setSearchTerm } from '../reducers/search'; +export { toggleDirectionForField } from '../reducers/sorting'; export const DIRECTION = { ASC: 'ASCENDING', DESC: 'DESCENDING' }; -export function setSorting(field, direction) { - return { - type: ActionTypes.SET_SORTING, - payload: { - field, - direction - } - }; -} - export function resetSorting() { return setSorting('createdAt', DIRECTION.DESC); } -export function toggleDirectionForField(field) { - return { - type: ActionTypes.TOGGLE_DIRECTION, - field - }; -} - -export function setSearchTerm(scope, searchTerm) { - return { - type: ActionTypes.SET_SEARCH_TERM, - query: searchTerm, - scope - }; -} - export function resetSearchTerm(scope) { return setSearchTerm(scope, ''); } diff --git a/client/modules/IDE/reducers/search.js b/client/modules/IDE/reducers/search.js index 67d352433e..052a1b2778 100644 --- a/client/modules/IDE/reducers/search.js +++ b/client/modules/IDE/reducers/search.js @@ -1,15 +1,24 @@ -import * as ActionTypes from '../../../constants'; +import { createSlice } from '@reduxjs/toolkit'; const initialState = { collectionSearchTerm: '', sketchSearchTerm: '' }; -export default (state = initialState, action) => { - switch (action.type) { - case ActionTypes.SET_SEARCH_TERM: - return { ...state, [`${action.scope}SearchTerm`]: action.query }; - default: - return state; +const searchSlice = createSlice({ + name: 'search', + initialState, + reducers: { + setSearchTerm: { + reducer: (state, action) => { + const { scope, query } = action.payload; + state[`${scope}SearchTerm`] = query; + }, + prepare: (scope, query) => ({ payload: { scope, query } }) + } } -}; +}); + +export const { setSearchTerm } = searchSlice.actions; + +export default searchSlice.reducer; diff --git a/client/modules/IDE/reducers/sorting.js b/client/modules/IDE/reducers/sorting.js index 747d16c80a..3713d40829 100644 --- a/client/modules/IDE/reducers/sorting.js +++ b/client/modules/IDE/reducers/sorting.js @@ -1,4 +1,4 @@ -import * as ActionTypes from '../../../constants'; +import { createSlice } from '@reduxjs/toolkit'; import { DIRECTION } from '../actions/sorting'; const initialState = { @@ -6,28 +6,30 @@ const initialState = { direction: DIRECTION.DESC }; -const sorting = (state = initialState, action) => { - switch (action.type) { - case ActionTypes.TOGGLE_DIRECTION: - if (action.field && action.field !== state.field) { - if (action.field === 'name') { - return { ...state, field: action.field, direction: DIRECTION.ASC }; - } - return { ...state, field: action.field, direction: DIRECTION.DESC }; +const sortingSlice = createSlice({ + name: 'sorting', + initialState, + reducers: { + toggleDirectionForField: (state, action) => { + const { field } = action.payload; + if (field && field !== state.field) { + const direction = field === 'name' ? DIRECTION.ASC : DIRECTION.DESC; + return { ...state, field, direction }; } - if (state.direction === DIRECTION.ASC) { - return { ...state, direction: DIRECTION.DESC }; - } - return { ...state, direction: DIRECTION.ASC }; - case ActionTypes.SET_SORTING: - return { - ...state, - field: action.payload.field, - direction: action.payload.direction - }; - default: - return state; + const direction = + state.direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC; + return { ...state, direction }; + }, + setSorting: { + reducer: (state, action) => { + const { field, direction } = action.payload; + return { ...state, field, direction }; + }, + prepare: (field, direction) => ({ payload: { field, direction } }) + } } -}; +}); + +export const { toggleDirectionForField, setSorting } = sortingSlice.actions; -export default sorting; +export default sortingSlice.reducer;