From 331889e71924ccb2f29e3173fb4d3afceabbaf8a Mon Sep 17 00:00:00 2001 From: Piyush Date: Thu, 16 May 2024 16:33:54 +0530 Subject: [PATCH 1/5] refactor search && sorting reducers && actions using redux toolkit --- client/constants.js | 3 -- client/modules/IDE/actions/sorting.js | 20 ++--------- client/modules/IDE/reducers/search.js | 25 +++++++++----- client/modules/IDE/reducers/sorting.js | 46 +++++++++++++------------- 4 files changed, 43 insertions(+), 51 deletions(-) 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..ffff803840 100644 --- a/client/modules/IDE/actions/sorting.js +++ b/client/modules/IDE/actions/sorting.js @@ -1,31 +1,17 @@ import * as ActionTypes from '../../../constants'; +import { sortingActions } from '../reducers/sorting'; + +export const { toggleDirection, setSorting } = sortingActions; 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, diff --git a/client/modules/IDE/reducers/search.js b/client/modules/IDE/reducers/search.js index 67d352433e..4caef655c6 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: (state, action) => { + const { scope, query } = action.payload; + return { + ...state, + [`${scope}SearchTerm`]: 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..33ebdd37f1 100644 --- a/client/modules/IDE/reducers/sorting.js +++ b/client/modules/IDE/reducers/sorting.js @@ -1,33 +1,33 @@ -import * as ActionTypes from '../../../constants'; +import { createSlice } from '@reduxjs/toolkit'; import { DIRECTION } from '../actions/sorting'; +import * as ActionTypes from '../../../constants'; const initialState = { field: 'createdAt', 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 }; - } - if (state.direction === DIRECTION.ASC) { - return { ...state, direction: DIRECTION.DESC }; +const sortingSlice = createSlice({ + name: 'sorting', + initialState, + reducers: { + toggleDirection: (state, action) => { + const { field } = action.payload; + if (field && field !== state.field) { + const direction = field === 'name' ? DIRECTION.ASC : DIRECTION.DESC; + return { ...state, field, direction }; } - 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: (state, action) => { + const { field, direction } = action.payload; + return { ...state, field, direction }; + } } -}; +}); + +export const sortingActions = sortingSlice.actions; -export default sorting; +export default sortingSlice.reducer; From 64a4bbb39731b93fbcbc48f65b12779c74c85e8d Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 15 Jun 2024 12:38:07 +0530 Subject: [PATCH 2/5] fix few stuff --- client/constants.js | 2 ++ client/modules/IDE/actions/sorting.js | 4 ++-- .../modules/IDE/components/CollectionList/CollectionList.jsx | 1 + client/modules/IDE/reducers/sorting.js | 5 ++--- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/client/constants.js b/client/constants.js index 1a05665a51..f31699cc2d 100644 --- a/client/constants.js +++ b/client/constants.js @@ -138,3 +138,5 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT'; export const END_SAVING_PROJECT = 'END_SAVING_PROJECT'; export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT'; + +export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; diff --git a/client/modules/IDE/actions/sorting.js b/client/modules/IDE/actions/sorting.js index ffff803840..887239b654 100644 --- a/client/modules/IDE/actions/sorting.js +++ b/client/modules/IDE/actions/sorting.js @@ -1,7 +1,7 @@ import * as ActionTypes from '../../../constants'; -import { sortingActions } from '../reducers/sorting'; +import { setSorting } from '../reducers/sorting'; -export const { toggleDirection, setSorting } = sortingActions; +export { toggleDirectionForField } from '../reducers/sorting'; export const DIRECTION = { ASC: 'ASCENDING', diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index 9d641f5e66..9c4516d13d 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx @@ -119,6 +119,7 @@ class CollectionList extends React.Component { _renderFieldHeader = (fieldName, displayName) => { const { field, direction } = this.props.sorting; + console.log(field); const headerClass = classNames({ 'sketches-table__header': true, 'sketches-table__header--selected': field === fieldName diff --git a/client/modules/IDE/reducers/sorting.js b/client/modules/IDE/reducers/sorting.js index 33ebdd37f1..a9c4e23b6b 100644 --- a/client/modules/IDE/reducers/sorting.js +++ b/client/modules/IDE/reducers/sorting.js @@ -1,6 +1,5 @@ import { createSlice } from '@reduxjs/toolkit'; import { DIRECTION } from '../actions/sorting'; -import * as ActionTypes from '../../../constants'; const initialState = { field: 'createdAt', @@ -11,7 +10,7 @@ const sortingSlice = createSlice({ name: 'sorting', initialState, reducers: { - toggleDirection: (state, action) => { + toggleDirectionForField: (state, action) => { const { field } = action.payload; if (field && field !== state.field) { const direction = field === 'name' ? DIRECTION.ASC : DIRECTION.DESC; @@ -28,6 +27,6 @@ const sortingSlice = createSlice({ } }); -export const sortingActions = sortingSlice.actions; +export const { toggleDirectionForField, setSorting } = sortingSlice.actions; export default sortingSlice.reducer; From 8f4e8fdc42d3deec76060376ad929645affed57e Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 15 Jun 2024 13:10:31 +0530 Subject: [PATCH 3/5] refactor few things --- client/constants.js | 2 -- client/modules/IDE/actions/sorting.js | 10 +--------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/client/constants.js b/client/constants.js index f31699cc2d..1a05665a51 100644 --- a/client/constants.js +++ b/client/constants.js @@ -138,5 +138,3 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT'; export const END_SAVING_PROJECT = 'END_SAVING_PROJECT'; export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT'; - -export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; diff --git a/client/modules/IDE/actions/sorting.js b/client/modules/IDE/actions/sorting.js index 887239b654..618bbb5d71 100644 --- a/client/modules/IDE/actions/sorting.js +++ b/client/modules/IDE/actions/sorting.js @@ -1,5 +1,5 @@ -import * as ActionTypes from '../../../constants'; import { setSorting } from '../reducers/sorting'; +import { setSearchTerm } from '../reducers/search'; export { toggleDirectionForField } from '../reducers/sorting'; @@ -12,14 +12,6 @@ export function resetSorting() { return setSorting('createdAt', DIRECTION.DESC); } -export function setSearchTerm(scope, searchTerm) { - return { - type: ActionTypes.SET_SEARCH_TERM, - query: searchTerm, - scope - }; -} - export function resetSearchTerm(scope) { return setSearchTerm(scope, ''); } From 680c242569916ede03a555bc35e049329f353f8e Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 15 Jun 2024 13:32:29 +0530 Subject: [PATCH 4/5] fix --- client/modules/IDE/actions/sorting.js | 1 + client/modules/IDE/components/CollectionList/CollectionList.jsx | 1 - client/modules/IDE/reducers/sorting.js | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/actions/sorting.js b/client/modules/IDE/actions/sorting.js index 618bbb5d71..0a2da6ad66 100644 --- a/client/modules/IDE/actions/sorting.js +++ b/client/modules/IDE/actions/sorting.js @@ -1,6 +1,7 @@ import { setSorting } from '../reducers/sorting'; import { setSearchTerm } from '../reducers/search'; +export { setSearchTerm } from '../reducers/search'; export { toggleDirectionForField } from '../reducers/sorting'; export const DIRECTION = { diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index 9c4516d13d..9d641f5e66 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx @@ -119,7 +119,6 @@ class CollectionList extends React.Component { _renderFieldHeader = (fieldName, displayName) => { const { field, direction } = this.props.sorting; - console.log(field); const headerClass = classNames({ 'sketches-table__header': true, 'sketches-table__header--selected': field === fieldName diff --git a/client/modules/IDE/reducers/sorting.js b/client/modules/IDE/reducers/sorting.js index a9c4e23b6b..9b2c7bca39 100644 --- a/client/modules/IDE/reducers/sorting.js +++ b/client/modules/IDE/reducers/sorting.js @@ -22,6 +22,7 @@ const sortingSlice = createSlice({ }, setSorting: (state, action) => { const { field, direction } = action.payload; + console.log(field); return { ...state, field, direction }; } } From 45968e3c7a02f8836ab383058035e3d5973819f9 Mon Sep 17 00:00:00 2001 From: Piyush Date: Mon, 17 Jun 2024 23:52:45 +0530 Subject: [PATCH 5/5] added prepare feature to accept two args --- client/modules/IDE/reducers/search.js | 12 ++++++------ client/modules/IDE/reducers/sorting.js | 10 ++++++---- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/client/modules/IDE/reducers/search.js b/client/modules/IDE/reducers/search.js index 4caef655c6..052a1b2778 100644 --- a/client/modules/IDE/reducers/search.js +++ b/client/modules/IDE/reducers/search.js @@ -9,12 +9,12 @@ const searchSlice = createSlice({ name: 'search', initialState, reducers: { - setSearchTerm: (state, action) => { - const { scope, query } = action.payload; - return { - ...state, - [`${scope}SearchTerm`]: query - }; + setSearchTerm: { + reducer: (state, action) => { + const { scope, query } = action.payload; + state[`${scope}SearchTerm`] = query; + }, + prepare: (scope, query) => ({ payload: { scope, query } }) } } }); diff --git a/client/modules/IDE/reducers/sorting.js b/client/modules/IDE/reducers/sorting.js index 9b2c7bca39..3713d40829 100644 --- a/client/modules/IDE/reducers/sorting.js +++ b/client/modules/IDE/reducers/sorting.js @@ -20,10 +20,12 @@ const sortingSlice = createSlice({ state.direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC; return { ...state, direction }; }, - setSorting: (state, action) => { - const { field, direction } = action.payload; - console.log(field); - return { ...state, field, direction }; + setSorting: { + reducer: (state, action) => { + const { field, direction } = action.payload; + return { ...state, field, direction }; + }, + prepare: (field, direction) => ({ payload: { field, direction } }) } } });