From 1f596f8f1c246ac2845dabb77a0c9b9aa9946960 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sun, 12 Jun 2022 20:52:42 -0500 Subject: [PATCH] Created slice, store, and hooks. Started adding them into the calender component. --- package.json | 3 + src/app/hooks.ts | 5 ++ src/app/store.ts | 11 +++ src/components/calender/index.tsx | 10 ++- src/features/calender/calender.ts | 46 ++++++++++ src/pages/index.tsx | 10 ++- yarn.lock | 143 +++++++++++++++++++++++++++++- 7 files changed, 222 insertions(+), 6 deletions(-) create mode 100644 src/app/hooks.ts create mode 100644 src/app/store.ts create mode 100644 src/features/calender/calender.ts diff --git a/package.json b/package.json index cc41445..2aa1ef3 100644 --- a/package.json +++ b/package.json @@ -20,17 +20,20 @@ "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@iconify/react": "^3.2.2", + "@reduxjs/toolkit": "^1.8.2", "date-fns": "^2.28.0", "formik": "^2.2.9", "framer-motion": "^6.3.10", "next": "12.1.6", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "sharp": "^0.30.6" }, "devDependencies": { "@types/node": "^17.0.40", "@types/react": "^18.0.12", + "@types/react-redux": "^7.1.24", "@typescript-eslint/eslint-plugin": "^5.27.0", "eslint": "^8.17.0", "eslint-config-next": "^12.1.6", diff --git a/src/app/hooks.ts b/src/app/hooks.ts new file mode 100644 index 0000000..e2a4fed --- /dev/null +++ b/src/app/hooks.ts @@ -0,0 +1,5 @@ +import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; +import { RootState, AppDispatch } from "./store"; + +export const useAppDiscpatch = () => useDispatch(); +export const useAppSelector: TypedUseSelectorHook = useSelector; diff --git a/src/app/store.ts b/src/app/store.ts new file mode 100644 index 0000000..8b88779 --- /dev/null +++ b/src/app/store.ts @@ -0,0 +1,11 @@ +import { configureStore } from "@reduxjs/toolkit"; +import calenderReducer from "../features/calender/calender"; + +export const store = configureStore({ + reducer: { + calender: calenderReducer + } +}); + +export type AppDispatch = typeof store.dispatch; +export type RootState = ReturnType; diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 4d51000..6008304 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -1,13 +1,19 @@ import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import { isSameDay, format } from "date-fns"; +import { useAppDiscpatch, useAppSelector } from "../../app/hooks"; +import { updateCurrDate, updateMonth } from '../../features/calender/calender'; import { CalenderContext } from "../../../contexts/CalenderContext"; import { StickersContext } from "../../../contexts/StickerContext"; import CalenderNav from "./CalenderNav"; import Day from "./Day"; const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { - const { selectedDate, layout, updateDate, currDate, setCurrDate } = + const currDate: Date = useAppSelector(state => state.calender.currDate); + const seletedMonth = useAppSelector(state => state.calender.selectedDateInfo); + + + const { selectedDate, layout, updateDate,/* currDate, */setCurrDate } = useContext(CalenderContext); const { stickersMonth } = useContext(StickersContext); @@ -106,7 +112,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { id.length ? id : format(date, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/features/calender/calender.ts b/src/features/calender/calender.ts new file mode 100644 index 0000000..d8acd6b --- /dev/null +++ b/src/features/calender/calender.ts @@ -0,0 +1,46 @@ +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { format } from "date-fns"; + +interface CalenderSlice { + currDate: Date; + selectedDateInfo: { + selectedDate: Date; + title: string; + layout: MonthLayout; + }; +} + +const getCurrDate = (): Date => new Date(); +const dateFormatter = (date: Date): string => format(date, "LLLL uuuu"); + +const initialState: CalenderSlice = { + currDate: getCurrDate(), + selectedDateInfo: { + selectedDate: getCurrDate(), + title: dateFormatter(new Date()), + layout: {} as MonthLayout + } +}; + +const calenderSlice = createSlice({ + name: "Calender", + initialState, + reducers: { + // Populate month + // Update month info + updateMonth(state: CalenderSlice, action: PayloadAction) { + const { payload: newDate } = action; + + state.selectedDateInfo.selectedDate = newDate; + state.selectedDateInfo.title = dateFormatter(newDate); + // ! Add the layout formatter function + }, + // Update current date + updateCurrDate(state: CalenderSlice) { + state.currDate = new Date(); + } + } +}); + +export const { updateMonth, updateCurrDate } = calenderSlice.actions; +export default calenderSlice.reducer; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ce26844..2b12185 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,11 @@ import React, { useRef } from "react"; import { Box } from "@chakra-ui/react"; -import Calender from "../components/calender"; +import { format } from "date-fns"; +import { Provider } from "react-redux"; +import { store } from "../app/store"; import { StickersContextProvider } from "../../contexts/StickerContext"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; -import { format } from "date-fns"; +import Calender from "../components/calender"; const IndexPage = (): JSX.Element => { const date = useRef({ @@ -16,7 +18,9 @@ const IndexPage = (): JSX.Element => { - + + + diff --git a/yarn.lock b/yarn.lock index 28743f9..6f4bb5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -78,6 +78,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2": + version: 7.18.3 + resolution: "@babel/runtime@npm:7.18.3" + dependencies: + regenerator-runtime: ^0.13.4 + checksum: db8526226aa02cfa35a5a7ac1a34b5f303c62a1f000c7db48cb06c6290e616483e5036ab3c4e7a84d0f3be6d4e2148d5fe5cec9564bf955f505c3e764b83d7f1 + languageName: node + linkType: hard + "@babel/types@npm:^7.16.7": version: 7.17.0 resolution: "@babel/types@npm:7.17.0" @@ -1315,6 +1324,26 @@ __metadata: languageName: node linkType: hard +"@reduxjs/toolkit@npm:^1.8.2": + version: 1.8.2 + resolution: "@reduxjs/toolkit@npm:1.8.2" + dependencies: + immer: ^9.0.7 + redux: ^4.1.2 + redux-thunk: ^2.4.1 + reselect: ^4.1.5 + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.0.0-beta + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + checksum: bd94e6d5c469f841c59e7d74e3fc60681c023ccdc6367005a9b04c252990d103bba438b2aea82f6e3db697486b32f4a5fb0d4bb6208af6119e5028c2ee626198 + languageName: node + linkType: hard + "@rushstack/eslint-patch@npm:^1.1.3": version: 1.1.3 resolution: "@rushstack/eslint-patch@npm:1.1.3" @@ -1329,6 +1358,16 @@ __metadata: languageName: node linkType: hard +"@types/hoist-non-react-statics@npm:^3.3.0, @types/hoist-non-react-statics@npm:^3.3.1": + version: 3.3.1 + resolution: "@types/hoist-non-react-statics@npm:3.3.1" + dependencies: + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719 + languageName: node + linkType: hard + "@types/json-schema@npm:^7.0.9": version: 7.0.11 resolution: "@types/json-schema@npm:7.0.11" @@ -1380,6 +1419,18 @@ __metadata: languageName: node linkType: hard +"@types/react-redux@npm:^7.1.24": + version: 7.1.24 + resolution: "@types/react-redux@npm:7.1.24" + dependencies: + "@types/hoist-non-react-statics": ^3.3.0 + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + redux: ^4.0.0 + checksum: 6582246581331ac7fbbd44aa1f1c136c8a9c8febbcf462432ac81302263308c21e1a2e7868beb7f73bbcb52a8e67935d133cb37f5bdcb6564eaff3a811805101 + languageName: node + linkType: hard + "@types/react@npm:^17.0.38": version: 17.0.44 resolution: "@types/react@npm:17.0.44" @@ -1398,6 +1449,13 @@ __metadata: languageName: node linkType: hard +"@types/use-sync-external-store@npm:^0.0.3": + version: 0.0.3 + resolution: "@types/use-sync-external-store@npm:0.0.3" + checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e + languageName: node + linkType: hard + "@typescript-eslint/eslint-plugin@npm:^5.27.0": version: 5.27.0 resolution: "@typescript-eslint/eslint-plugin@npm:5.27.0" @@ -3168,7 +3226,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": +"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -3237,6 +3295,13 @@ __metadata: languageName: node linkType: hard +"immer@npm:^9.0.7": + version: 9.0.14 + resolution: "immer@npm:9.0.14" + checksum: 17f1365c06d653e672a4f609f08e7203e9ab4b4284818332d6ca9b3f3577a0e3c0066ca7933b636fbae560df79a4b3fde70ed717ce3c6e95c39bf3d5861d5be9 + languageName: node + linkType: hard + "import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -3665,8 +3730,10 @@ __metadata: "@emotion/react": ^11.9.0 "@emotion/styled": ^11.8.1 "@iconify/react": ^3.2.2 + "@reduxjs/toolkit": ^1.8.2 "@types/node": ^17.0.40 "@types/react": ^18.0.12 + "@types/react-redux": ^7.1.24 "@typescript-eslint/eslint-plugin": ^5.27.0 date-fns: ^2.28.0 eslint: ^8.17.0 @@ -3681,6 +3748,7 @@ __metadata: prettier: ^2.6.2 react: ^18.1.0 react-dom: ^18.1.0 + react-redux: ^8.0.2 sharp: ^0.30.6 typescript: ^4.7.3 languageName: unknown @@ -4442,6 +4510,45 @@ __metadata: languageName: node linkType: hard +"react-is@npm:^18.0.0": + version: 18.1.0 + resolution: "react-is@npm:18.1.0" + checksum: d206a0fe6790851bff168727bfb896de02c5591695afb0c441163e8630136a3e13ee1a7ddd59fdccddcc93968b4721ae112c10f790b194b03b35a3dc13a355ef + languageName: node + linkType: hard + +"react-redux@npm:^8.0.2": + version: 8.0.2 + resolution: "react-redux@npm:8.0.2" + 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 + peerDependencies: + "@types/react": ^16.8 || ^17.0 || ^18.0 + "@types/react-dom": ^16.8 || ^17.0 || ^18.0 + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + react-native: ">=0.59" + redux: ^4 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + react-dom: + optional: true + react-native: + optional: true + redux: + optional: true + checksum: 44c1739c45dad04ecc65a290897c73828ff0bf43f2b7618ed5ef6d4ceecedae38e76cecd189a5ecedf579c28ead05427bc000fb45ad30b9fcd5c2be27cd3ac73 + languageName: node + linkType: hard + "react-remove-scroll-bar@npm:^2.3.1": version: 2.3.1 resolution: "react-remove-scroll-bar@npm:2.3.1" @@ -4529,6 +4636,24 @@ __metadata: languageName: node linkType: hard +"redux-thunk@npm:^2.4.1": + version: 2.4.1 + resolution: "redux-thunk@npm:2.4.1" + peerDependencies: + redux: ^4 + checksum: af5abb425fb9dccda02e5f387d6f3003997f62d906542a3d35fc9420088f550dc1a018bdc246c7d23ee852b4d4ab8b5c64c5be426e45a328d791c4586a3c6b6e + languageName: node + linkType: hard + +"redux@npm:^4.0.0, redux@npm:^4.1.2": + version: 4.2.0 + resolution: "redux@npm:4.2.0" + dependencies: + "@babel/runtime": ^7.9.2 + checksum: 75f3955c89b3f18edf5411e5fb482aa2e4f41a416183e8802a6bf6472c4fc3d47675b8b321d147f8af8e0f616436ac507bf5a25f1c4d6180e797b549c7db2c1d + languageName: node + linkType: hard + "regenerator-runtime@npm:^0.13.4": version: 0.13.9 resolution: "regenerator-runtime@npm:0.13.9" @@ -4554,6 +4679,13 @@ __metadata: languageName: node linkType: hard +"reselect@npm:^4.1.5": + version: 4.1.6 + resolution: "reselect@npm:4.1.6" + checksum: 3ea1058422904063ec93c8f4693fe33dcb2178bbf417ace8db5b2c797a5875cf357d9308d11ed3942ee22507dd34ecfbf1f3a21340a4f31c206cab1d36ceef31 + languageName: node + linkType: hard + "resolve-from@npm:^4.0.0": version: 4.0.0 resolution: "resolve-from@npm:4.0.0" @@ -5274,6 +5406,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.0.0": + version: 1.1.0 + resolution: "use-sync-external-store@npm:1.1.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8993a0b642f91d7fcdbb02b7b3ac984bd3af4769686f38291fe7fcfe73dfb73d6c64d20dfb7e5e7fbf5a6da8f5392d6f8e5b00c243a04975595946e82c02b883 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2"