From 1a69c8a8c6c2f0965a18ff7530046f8ef04b0fb8 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 24 Jun 2022 16:13:26 +0800 Subject: [PATCH 1/7] yarn add react-redux --- package.json | 1 + yarn.lock | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e3821d9..6299c00 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^7.1.2", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-redux": "^8.0.2", "react-scripts": "3.4.1" }, "scripts": { diff --git a/yarn.lock b/yarn.lock index 8a5595b..1e7946c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1005,6 +1005,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.1": + version "7.18.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" + integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.4": version "7.10.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839" @@ -1506,6 +1513,14 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -1599,6 +1614,11 @@ "@types/testing-library__dom" "*" pretty-format "^25.1.0" +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/yargs-parser@*": version "15.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d" @@ -5221,6 +5241,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" @@ -8988,11 +9015,28 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== -react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + +react-redux@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad" + integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" + react-scripts@3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a" @@ -10731,6 +10775,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-sync-external-store@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 77958c0ce565310a1fb4d554782c2023723624a7 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 24 Jun 2022 17:33:27 +0800 Subject: [PATCH 2/7] yarn add @reduxjs/toolkit --- package.json | 1 + yarn.lock | 34 +++++++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6299c00..daedc1f 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^1.8.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/yarn.lock b/yarn.lock index 1e7946c..6342b26 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1005,7 +1005,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.12.1": +"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2": version "7.18.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== @@ -1306,6 +1306,16 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@reduxjs/toolkit@^1.8.2": + version "1.8.2" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.2.tgz#352fd17bc858af51d21ce8d28183a930cab9e638" + integrity sha512-CtPw5TkN1pHRigMFCOS/0qg3b/yfPV5qGCsltVnIz7bx4PKTJlGHYfIxm97qskLknMzuGfjExaYdXJ77QTL0vg== + dependencies: + immer "^9.0.7" + redux "^4.1.2" + redux-thunk "^2.4.1" + reselect "^4.1.5" + "@sheerun/mutationobserver-shim@^0.3.2": version "0.3.3" resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25" @@ -5496,6 +5506,11 @@ immer@1.10.0: resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== +immer@^9.0.7: + version "9.0.15" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.15.tgz#0b9169e5b1d22137aba7d43f8a81a495dd1b62dc" + integrity sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -9216,6 +9231,18 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" + integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q== + +redux@^4.1.2: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" @@ -9394,6 +9421,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +reselect@^4.1.5: + version "4.1.6" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.6.tgz#19ca2d3d0b35373a74dc1c98692cdaffb6602656" + integrity sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" From 267ec04c38c9f400bc3c6890f212eda36d811050 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 24 Jun 2022 17:59:06 +0800 Subject: [PATCH 3/7] Setup initial redux usage. Provider, actions, reducers, etc. --- src/actions/index.js | 10 ++++++++++ .../categories/CategoriesContainer.js | 7 ++++++- src/index.js | 12 ++++++++++-- src/reducers/index.js | 18 ++++++++++++++++++ 4 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 src/actions/index.js create mode 100644 src/reducers/index.js diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 0000000..829910f --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,10 @@ +export const CATEGORY_ACTIONS = { + TOGGLED: "CATEGORY_TOGGLED", +} + +export const toggleCategory = (category) => { + return { + type: CATEGORY_ACTIONS.TOGGLED, + payload: category + } +} diff --git a/src/components/categories/CategoriesContainer.js b/src/components/categories/CategoriesContainer.js index 6752740..4cc123c 100644 --- a/src/components/categories/CategoriesContainer.js +++ b/src/components/categories/CategoriesContainer.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react' +import { connect } from 'react-redux' import "./CategoriesContainer.css" import CategoryBox from "./CategoryBox" @@ -85,4 +86,8 @@ function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pa ) } -export default CategoriesContainer +const mapStateToProps = (state) => { + return { categories: state.categories } +} + +export default connect(mapStateToProps)(CategoriesContainer) diff --git a/src/index.js b/src/index.js index 8adeec0..681c469 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,23 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { Provider } from 'react-redux'; +import { createStore } from 'redux'; + import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import reducers from './reducers'; +const root = + + + const rootElement = document.getElementById("root") if (rootElement.hasChildNodes()) { - ReactDOM.hydrate(, rootElement) + ReactDOM.hydrate(root, rootElement) } else { - ReactDOM.render(, rootElement) + ReactDOM.render(root, rootElement) } // If you want your app to work offline and load faster, you can change diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..41a7088 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,18 @@ +import { combineReducers } from 'redux' +import { CATEGORY_ACTIONS } from '../actions' + +const categoriesReducer = (selectedCategories = [], action) => { + switch(action.type) { + case CATEGORY_ACTIONS.TOGGLED: + if (selectedCategories.includes(action.payload)) { + return selectedCategories.filter(c => c !== action.payload) + } + return [...selectedCategories, action.payload] + default: + return selectedCategories + } +} + +export default combineReducers({ + categories: categoriesReducer, +}) From baa07873f035fb6b25510a6fe3aaca31e8065528 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 24 Jun 2022 19:12:13 +0800 Subject: [PATCH 4/7] Add toggleCategory action to CategoryBox --- src/components/categories/CategoriesContainer.js | 8 +------- src/components/categories/CategoryBox.js | 9 +++++++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/categories/CategoriesContainer.js b/src/components/categories/CategoriesContainer.js index 4cc123c..6591bf8 100644 --- a/src/components/categories/CategoriesContainer.js +++ b/src/components/categories/CategoriesContainer.js @@ -1,7 +1,5 @@ import React, { useState, useEffect } from 'react' -import { connect } from 'react-redux' import "./CategoriesContainer.css" - import CategoryBox from "./CategoryBox" import NextButton from "../NextButton" @@ -86,8 +84,4 @@ function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pa ) } -const mapStateToProps = (state) => { - return { categories: state.categories } -} - -export default connect(mapStateToProps)(CategoriesContainer) +export default CategoriesContainer diff --git a/src/components/categories/CategoryBox.js b/src/components/categories/CategoryBox.js index defdc8c..44ef949 100644 --- a/src/components/categories/CategoryBox.js +++ b/src/components/categories/CategoryBox.js @@ -1,13 +1,16 @@ import React from 'react' +import { connect } from 'react-redux' +import { toggleCategory } from '../../actions' import "./CategoryBox.css" -function CategoryBox({ id, name, image_url, handleCatCount, handleCategories, isSelected }) { +function CategoryBox({ id, name, image_url, handleCatCount, handleCategories, isSelected, toggleCategory }) { const handleClick = () => { const increment = isSelected ? -1 : 1 const current_count = handleCatCount(increment) if (current_count <= 5) { handleCategories(id) + toggleCategory(id) } } @@ -19,4 +22,6 @@ function CategoryBox({ id, name, image_url, handleCatCount, handleCategories, is ) } -export default CategoryBox +const mapDispatchToProps = { toggleCategory } + +export default connect(null, mapDispatchToProps)(CategoryBox) From 0e3bce8c375b41baac7a95b263827fb2441931bc Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 1 Jul 2022 15:10:44 +0800 Subject: [PATCH 5/7] yarn add --dev redux-devtools-extension --- package.json | 3 ++- src/index.js | 3 ++- yarn.lock | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index daedc1f..933b356 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "devDependencies": { "gh-pages": "^3.0.0", - "react-snap": "^1.23.0" + "react-snap": "^1.23.0", + "redux-devtools-extension": "^2.13.9" } } diff --git a/src/index.js b/src/index.js index 681c469..0c44499 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension'; import './index.css'; import App from './App'; @@ -9,7 +10,7 @@ import * as serviceWorker from './serviceWorker'; import reducers from './reducers'; const root = - + const rootElement = document.getElementById("root") diff --git a/yarn.lock b/yarn.lock index 6342b26..f25085e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9231,6 +9231,11 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-devtools-extension@^2.13.9: + version "2.13.9" + resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7" + integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A== + redux-thunk@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" From f33c6c3eea1d45bf48d35262b669ffe56018b7d6 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 1 Jul 2022 15:57:05 +0800 Subject: [PATCH 6/7] Use redux store for categories --- src/App.js | 12 ++++++++---- src/components/SpoopiContainer.js | 19 ++----------------- .../categories/CategoriesContainer.js | 3 +-- src/components/categories/CategoryBox.js | 3 +-- 4 files changed, 12 insertions(+), 25 deletions(-) diff --git a/src/App.js b/src/App.js index b9e3daf..9443e54 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React, { useState, useReducer } from 'react'; +import { connect} from 'react-redux'; import './App.css'; import SpoopiNav from "./components/SpoopiNav" @@ -23,9 +24,8 @@ const pageReducer = (state, action) => { } } -function App() { +function App({ categories }) { const [pageState, pageTraversal] = useReducer(pageReducer, initialPageState) - const [categories, setCategories] = useState([]) const [duration, setDuration] = useState(0) const [tracks, setTracks] = useState([]) const [name, setName] = useState("") @@ -45,7 +45,7 @@ function App() { { + return { categories: state.categories } +} + +export default connect(mapStateToProps)(App); diff --git a/src/components/SpoopiContainer.js b/src/components/SpoopiContainer.js index 6abc163..841820f 100644 --- a/src/components/SpoopiContainer.js +++ b/src/components/SpoopiContainer.js @@ -11,7 +11,7 @@ import SpoopiTip from "./SpoopiTip" function SpoopiContainer({ current_page, pageTraversal, - categories, setCategories, + categories, duration, setDuration, tracks, setTracks, name, setName, @@ -42,21 +42,6 @@ function SpoopiContainer({ } }, []) - const handleCategories = (category_id) => { - let new_categories = categories - const cat_index = new_categories.indexOf(category_id) - - if (cat_index >= 0) { - // category already in array so remove it - new_categories.splice(cat_index, 1) - } - else { - new_categories.push(category_id) - } - - setCategories(new_categories) - } - const handleDuration = (hours, mins) => { const h_in_s = parseInt(hours || 0) * 60 * 60 const m_in_s = parseInt(mins || 0) * 60 @@ -67,7 +52,7 @@ function SpoopiContainer({ return(
- { current_page === "categories" && } + { current_page === "categories" && } { current_page === "timer" && } { current_page === "tracks" && } { current_page === "playlist" && } diff --git a/src/components/categories/CategoriesContainer.js b/src/components/categories/CategoriesContainer.js index 6591bf8..61645d8 100644 --- a/src/components/categories/CategoriesContainer.js +++ b/src/components/categories/CategoriesContainer.js @@ -3,7 +3,7 @@ import "./CategoriesContainer.css" import CategoryBox from "./CategoryBox" import NextButton from "../NextButton" -function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pageTraversal, selectedCategories }) { +function CategoriesContainer({ countryCode, setCountryCode, pageTraversal, selectedCategories }) { const [allCategories, setAllCategories] = useState([]) const [catCount, setCatCount] = useState(selectedCategories.length) @@ -74,7 +74,6 @@ function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pa name={cat.name} image_url={cat.image_url} handleCatCount={handleCatCount} - handleCategories={handleCategories} isSelected={selectedCategories.indexOf(cat.id) >= 0} /> ))} diff --git a/src/components/categories/CategoryBox.js b/src/components/categories/CategoryBox.js index 44ef949..9100b23 100644 --- a/src/components/categories/CategoryBox.js +++ b/src/components/categories/CategoryBox.js @@ -3,13 +3,12 @@ import { connect } from 'react-redux' import { toggleCategory } from '../../actions' import "./CategoryBox.css" -function CategoryBox({ id, name, image_url, handleCatCount, handleCategories, isSelected, toggleCategory }) { +function CategoryBox({ id, name, image_url, handleCatCount, isSelected, toggleCategory }) { const handleClick = () => { const increment = isSelected ? -1 : 1 const current_count = handleCatCount(increment) if (current_count <= 5) { - handleCategories(id) toggleCategory(id) } } From e2a5c21853e0ee6b8cf24a08cd1401a41a38bcf1 Mon Sep 17 00:00:00 2001 From: kojidelmundo Date: Fri, 1 Jul 2022 16:07:33 +0800 Subject: [PATCH 7/7] Use store to calculate category count --- src/components/categories/CategoriesContainer.js | 13 ++----------- src/components/categories/CategoryBox.js | 8 +++----- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/components/categories/CategoriesContainer.js b/src/components/categories/CategoriesContainer.js index 61645d8..6aee79f 100644 --- a/src/components/categories/CategoriesContainer.js +++ b/src/components/categories/CategoriesContainer.js @@ -5,7 +5,7 @@ import NextButton from "../NextButton" function CategoriesContainer({ countryCode, setCountryCode, pageTraversal, selectedCategories }) { const [allCategories, setAllCategories] = useState([]) - const [catCount, setCatCount] = useState(selectedCategories.length) + const catCount = selectedCategories.length useEffect(() => { const local_categories = JSON.parse(localStorage.getItem("allCategories")) @@ -44,15 +44,6 @@ function CategoriesContainer({ countryCode, setCountryCode, pageTraversal, selec ) }, [countryCode, setCountryCode]) - const handleCatCount = (increment) => { - const new_count = catCount + increment - if (new_count <= 5) { - setCatCount(new_count) - } - - return new_count - } - const nextButtonContent = () => { if (catCount === 5) { return "5 of 5 selected" @@ -73,8 +64,8 @@ function CategoriesContainer({ countryCode, setCountryCode, pageTraversal, selec id={cat.id} name={cat.name} image_url={cat.image_url} - handleCatCount={handleCatCount} isSelected={selectedCategories.indexOf(cat.id) >= 0} + catCount={catCount} /> ))}
diff --git a/src/components/categories/CategoryBox.js b/src/components/categories/CategoryBox.js index 9100b23..b64c87e 100644 --- a/src/components/categories/CategoryBox.js +++ b/src/components/categories/CategoryBox.js @@ -1,14 +1,12 @@ import React from 'react' import { connect } from 'react-redux' + import { toggleCategory } from '../../actions' import "./CategoryBox.css" -function CategoryBox({ id, name, image_url, handleCatCount, isSelected, toggleCategory }) { +function CategoryBox({ id, name, image_url, isSelected, catCount, toggleCategory }) { const handleClick = () => { - const increment = isSelected ? -1 : 1 - const current_count = handleCatCount(increment) - - if (current_count <= 5) { + if (catCount < 5 || isSelected) { toggleCategory(id) } }