From 331889e71924ccb2f29e3173fb4d3afceabbaf8a Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
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 <chandra.piyush17@gmail.com>
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 <chandra.piyush17@gmail.com>
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 <chandra.piyush17@gmail.com>
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 <chandra.piyush17@gmail.com>
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 } })
}
}
});