wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Created slice, store, and hooks. Started adding them into the calender component.

Browse Source
This commit is contained in:
Lucid Kobold
2022-06-12 20:52:42 -05:00
parent 4208134553
commit 1f596f8f1c
7 changed files with 222 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -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",

5
src/app/hooks.ts Normal file
View File

@@ -0,0 +1,5 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "./store";
export const useAppDiscpatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

11
src/app/store.ts Normal file
View File

@@ -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<typeof store.getState>;

10
src/components/calender/index.tsx
View File

@@ -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}`
}
/>
);

46
src/features/calender/calender.ts Normal file
View File

@@ -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<Date>) {
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;

10
src/pages/index.tsx
View File

@@ -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<UpdateCalendarProps>({
@@ -16,7 +18,9 @@ const IndexPage = (): JSX.Element => {
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<StickersContextProvider>
<CalenderContextProvider>
<Calender {...date.current} />
<Provider store={store}>
<Calender {...date.current} />
</Provider>
</CalenderContextProvider>
</StickersContextProvider>
</Box>

143
yarn.lock
View File

@@ -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"