kojdm · kojdm · Jun 24, 2022 · Jun 24, 2022 · Jun 24, 2022 · Jun 24, 2022
diff --git a/package.json b/package.json
@@ -4,11 +4,13 @@
   "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",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^8.0.2",
     "react-scripts": "3.4.1"
   },
   "scripts": {
@@ -37,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/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() {
         <SpoopiContainer
           current_page={pageState.current_page}
           pageTraversal={pageTraversal}
-          categories={categories} setCategories={setCategories}
+          categories={categories}
           duration={duration} setDuration={setDuration}
           tracks={tracks} setTracks={setTracks}
           name={name} setName={setName}
@@ -59,4 +59,8 @@ function App() {
   )
 }
 
-export default App;
+const mapStateToProps = (state) => {
+  return { categories: state.categories }
+}
+
+export default connect(mapStateToProps)(App);
diff --git a/src/actions/index.js 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/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(
     <div className="SpoopiContainer">
-      { current_page === "categories" && <CategoriesContainer countryCode={countryCode} setCountryCode={setCountryCode} handleCategories={handleCategories} selectedCategories={categories} pageTraversal={pageTraversal}/> }
+      { current_page === "categories" && <CategoriesContainer countryCode={countryCode} setCountryCode={setCountryCode} selectedCategories={categories} pageTraversal={pageTraversal}/> }
       { current_page === "timer" && <TimerContainer duration={duration} handleDuration={handleDuration} pageTraversal={pageTraversal}/> }
       { current_page === "tracks" && <TracksContainer duration={duration} categories={categories} countryCode={countryCode} tracks={tracks} handleTracks={setTracks} pageTraversal={pageTraversal} setBackable={setBackable} name={name} setName={setName} accessToken={accessToken} setPlaylist={setPlaylist}/> }
       { current_page === "playlist" && <PlaylistContainer playlist={playlist} pageTraversal={pageTraversal}/> }

diff --git a/src/components/categories/CategoriesContainer.js b/src/components/categories/CategoriesContainer.js
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react'
 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)
+  const catCount = selectedCategories.length
 
   useEffect(() => {
     const local_categories = JSON.parse(localStorage.getItem("allCategories"))
@@ -45,15 +44,6 @@ function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pa
       )
   }, [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"
@@ -74,9 +64,8 @@ function CategoriesContainer({ countryCode, setCountryCode, handleCategories, pa
           id={cat.id}
           name={cat.name}
           image_url={cat.image_url}
-          handleCatCount={handleCatCount}
-          handleCategories={handleCategories}
           isSelected={selectedCategories.indexOf(cat.id) >= 0}
+          catCount={catCount}
         />
       ))}
     </div>

diff --git a/src/components/categories/CategoryBox.js b/src/components/categories/CategoryBox.js
@@ -1,13 +1,13 @@
 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, isSelected, catCount, toggleCategory }) {
   const handleClick = () => {
-    const increment = isSelected ? -1 : 1
-    const current_count = handleCatCount(increment)
-
-    if (current_count <= 5) {
-      handleCategories(id)
+    if (catCount < 5 || isSelected) {
+      toggleCategory(id)
     }
   }
 
@@ -19,4 +19,6 @@ function CategoryBox({ id, name, image_url, handleCatCount, handleCategories, is
   )
 }
 
-export default CategoryBox
+const mapDispatchToProps = { toggleCategory }
+
+export default connect(null, mapDispatchToProps)(CategoryBox)
diff --git a/src/index.js b/src/index.js
@@ -1,15 +1,24 @@
 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';
 import * as serviceWorker from './serviceWorker';
+import reducers from './reducers';
 
+const root =
+  <Provider store={createStore(reducers, composeWithDevTools())}>
+    <App/>
+  </Provider>
 const rootElement = document.getElementById("root")
 
 if (rootElement.hasChildNodes()) {
-  ReactDOM.hydrate(<App />, rootElement)
+  ReactDOM.hydrate(root, rootElement)
 } else {
-  ReactDOM.render(<App />, 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
@@ -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,
+})
diff --git a/yarn.lock b/yarn.lock
@@ -1005,6 +1005,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@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==
+  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"
@@ -1299,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"
@@ -1506,6 +1523,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 +1624,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 +5251,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"
@@ -5469,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"
@@ -8988,11 +9030,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"
@@ -9172,6 +9231,23 @@ 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"
+  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"
@@ -9350,6 +9426,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"
@@ -10731,6 +10812,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"