From 988fb33b093bee1a346eb201fd9efe41cf893bf0 Mon Sep 17 00:00:00 2001 From: nochill Date: Wed, 16 Aug 2023 15:05:02 +0700 Subject: [PATCH] add rtk --- package.json | 4 ++ src/App.jsx | 9 ++- src/constants/action_type.js | 2 + src/{data => datas}/articles.json | 0 src/{data => datas}/dashboard.json | 0 src/{data => datas}/users.json | 0 src/features/auth/authSlice.js | 20 +++++++ src/pages/Dashboard/index.jsx | 9 +++ src/pages/Login/index.jsx | 11 +++- src/pages/index.js | 4 +- src/reducers/index.js | 18 ++++++ src/routes/index.jsx | 5 ++ src/stores/configureStore.js | 23 ++++++++ yarn.lock | 93 +++++++++++++++++++++++++++++- 14 files changed, 192 insertions(+), 6 deletions(-) create mode 100644 src/constants/action_type.js rename src/{data => datas}/articles.json (100%) rename src/{data => datas}/dashboard.json (100%) rename src/{data => datas}/users.json (100%) create mode 100644 src/features/auth/authSlice.js create mode 100644 src/pages/Dashboard/index.jsx create mode 100644 src/reducers/index.js create mode 100644 src/stores/configureStore.js diff --git a/package.json b/package.json index f474ee4..659ecf9 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,13 @@ "preview": "vite preview" }, "dependencies": { + "@reduxjs/toolkit": "^1.9.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-redux": "^8.1.2", "react-router-dom": "^6.15.0", + "redux-persist": "^6.0.0", + "redux-thunk": "^2.4.2", "validator": "^13.11.0" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index 5106fe4..c26321e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,18 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import routes from './routes'; +import { Provider } from 'react-redux'; +import { PersistGate } from 'redux-persist/integration/react'; +import { persistore, store } from './stores/configureStore'; const router = createBrowserRouter(routes) function App() { return ( - + + + + + ) } diff --git a/src/constants/action_type.js b/src/constants/action_type.js new file mode 100644 index 0000000..e7b86b2 --- /dev/null +++ b/src/constants/action_type.js @@ -0,0 +1,2 @@ +export const LOGIN = 'LOGIN'; +export const LOGOUT = 'LOGOUT'; \ No newline at end of file diff --git a/src/data/articles.json b/src/datas/articles.json similarity index 100% rename from src/data/articles.json rename to src/datas/articles.json diff --git a/src/data/dashboard.json b/src/datas/dashboard.json similarity index 100% rename from src/data/dashboard.json rename to src/datas/dashboard.json diff --git a/src/data/users.json b/src/datas/users.json similarity index 100% rename from src/data/users.json rename to src/datas/users.json diff --git a/src/features/auth/authSlice.js b/src/features/auth/authSlice.js new file mode 100644 index 0000000..85794f7 --- /dev/null +++ b/src/features/auth/authSlice.js @@ -0,0 +1,20 @@ +import { createSlice, current } from "@reduxjs/toolkit"; + +const initialState = [] + +const authSlice = createSlice({ + name: 'auth', + initialState, + reducers: { + authAdded(state, action) { + const { current_user } = action.payload; + let newState = { ...state } + newState = current_user + return newState + } + } +}) + +export const { authAdded } = authSlice.actions; + +export default authSlice.reducer; \ No newline at end of file diff --git a/src/pages/Dashboard/index.jsx b/src/pages/Dashboard/index.jsx new file mode 100644 index 0000000..19fb638 --- /dev/null +++ b/src/pages/Dashboard/index.jsx @@ -0,0 +1,9 @@ +const Dashboard = () => { + return ( + <> +

Dashboard

+ + ) +} + +export default Dashboard; \ No newline at end of file diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx index fd25441..35bdd47 100644 --- a/src/pages/Login/index.jsx +++ b/src/pages/Login/index.jsx @@ -1,5 +1,7 @@ import { useState } from "react"; -import user from "../../data/users.json"; +import user from "../../datas/users.json"; +import { useDispatch, useSelector } from "react-redux"; +import { authAdded } from "../../features/auth/authSlice"; const Login = () => { const [authForm, setAuthForm] = useState({ @@ -12,6 +14,9 @@ const Login = () => { message: '' }); + const dispatch = useDispatch(); + const auth = useSelector(state => state.auth); + const handleAuthForm = (e) => { if(err.err) { setErr({ ...err, err: false}) @@ -36,8 +41,8 @@ const Login = () => { setErr({ err: true, message: "User not found with this Email / Password"}) return; } - - console.log(current_user); + dispatch(authAdded({current_user})); + console.log(auth); } return ( diff --git a/src/pages/index.js b/src/pages/index.js index 326cc83..8df7dad 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,7 +1,9 @@ import Login from './Login'; import Notfound404 from './Notfound404'; +import Dashboard from './Dashboard'; export { Login, - Notfound404 + Notfound404, + Dashboard, } \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..e461e9f --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,18 @@ +import { combineReducers } from "@reduxjs/toolkit"; +import { LOGOUT } from "../constants/action_type"; +import authSlice from "../features/auth/authSlice"; + +const appReducer = combineReducers({ + auth: authSlice +}); + +const rootReducer = (state, action) => { + if (action.type === LOGOUT) { + // remove token + state = undefined + } + + return appReducer(state, action); +} + +export default rootReducer; diff --git a/src/routes/index.jsx b/src/routes/index.jsx index 214ff7f..8fff3d6 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -1,4 +1,5 @@ import { + Dashboard, Login, Notfound404 } from "../pages"; @@ -8,6 +9,10 @@ const routes = [ path: "/", element: , errorElement: + }, + { + path: "/dashboard", + element: } ] diff --git a/src/stores/configureStore.js b/src/stores/configureStore.js new file mode 100644 index 0000000..6e7d599 --- /dev/null +++ b/src/stores/configureStore.js @@ -0,0 +1,23 @@ +import { applyMiddleware, configureStore, createStore, compose } from '@reduxjs/toolkit' +import storage from 'redux-persist/lib/storage' +import persistReducer from 'redux-persist/es/persistReducer'; +import rootReducer from '../reducers'; +import thunk from 'redux-thunk'; +import { persistStore } from 'redux-persist'; + +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose + +const persistConfig = { + key: 'root', + blacklist: [], + whitelist: [ + "auth" + ], + storage +} + +const persistedReducer = persistReducer(persistConfig, rootReducer); + +export const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(thunk))) + +export const persistore = persistStore(store) diff --git a/yarn.lock b/yarn.lock index 3e5de13..eec43ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -184,6 +184,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2": + version "7.22.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682" + integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec" @@ -432,6 +439,16 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@reduxjs/toolkit@^1.9.5": + version "1.9.5" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4" + integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ== + dependencies: + immer "^9.0.21" + redux "^4.2.1" + redux-thunk "^2.4.2" + reselect "^4.1.8" + "@remix-run/router@1.8.0": version "1.8.0" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc" @@ -444,6 +461,14 @@ dependencies: mini-svg-data-uri "^1.2.3" +"@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/prop-types@*": version "15.7.5" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" @@ -470,6 +495,11 @@ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5" integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ== +"@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== + "@vitejs/plugin-react@^4.0.3": version "4.0.4" resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.0.4.tgz#31c3f779dc534e045c4b134e7cf7b150af0a7646" @@ -1299,11 +1329,23 @@ has@^1.0.3: dependencies: function-bind "^1.1.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" + ignore@^5.2.0: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== +immer@^9.0.21: + version "9.0.21" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176" + integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA== + import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -1861,11 +1903,28 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: 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.1.2: + version "8.1.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188" + integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw== + 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-refresh@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" @@ -1907,6 +1966,28 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +redux-persist@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8" + integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ== + +redux-thunk@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b" + integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q== + +redux@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" + integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w== + dependencies: + "@babel/runtime" "^7.9.2" + +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb" @@ -1916,6 +1997,11 @@ regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0: define-properties "^1.2.0" functions-have-names "^1.2.3" +reselect@^4.1.8: + version "4.1.8" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524" + integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== + resolve-from@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" @@ -2247,6 +2333,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.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== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"