From fc00f9124cc9090dc001ca2575ad9011389e2652 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Thu, 27 Oct 2022 09:24:07 +0200
Subject: [PATCH] added redux to the setup (in src/ts/*), made webpack resolve
 also .ts files

---
 package.json         |  2 ++
 src/index.tsx        | 15 +++++++++------
 src/ts/emailSlice.ts | 31 +++++++++++++++++++++++++++++++
 src/ts/hooks.ts      |  6 ++++++
 src/ts/store.ts      | 13 +++++++++++++
 tsconfig.json        |  3 ++-
 webpack.config.js    |  2 +-
 7 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 src/ts/emailSlice.ts
 create mode 100644 src/ts/hooks.ts
 create mode 100644 src/ts/store.ts

diff --git a/package.json b/package.json
index 342c66f..bb0f18e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.10.4",
     "@hookform/resolvers": "^2.9.10",
     "@mui/material": "^5.10.9",
+    "@reduxjs/toolkit": "^1.8.6",
     "@types/jest": "^29.1.1",
     "@types/node": "^18.8.2",
     "@types/node-sass": "^4.11.3",
@@ -29,6 +30,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
+    "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",
diff --git a/src/index.tsx b/src/index.tsx
index 4c12442..c668446 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
-import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions, AuthComponent } from "@components";
-
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components";
+import { store } from '@ts/store'
+import { Provider } from 'react-redux'
 
 const router = createBrowserRouter([
   {
@@ -40,7 +41,9 @@ const router = createBrowserRouter([
 ]);
 
 createRoot(document.querySelector("#root")).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>
+    <React.StrictMode>
+        <Provider store={store}>
+            <RouterProvider router={router} />
+        </Provider>
+    </React.StrictMode>
 );
diff --git a/src/ts/emailSlice.ts b/src/ts/emailSlice.ts
new file mode 100644
index 0000000..b9a33b3
--- /dev/null
+++ b/src/ts/emailSlice.ts
@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { RootState } from '@ts/store'
+
+// Define a type for the slice state
+interface EmailState {
+  value: string
+}
+
+// Define the initial state using that type
+const initialState: EmailState = {
+  value: "",
+}
+
+export const emailSlice = createSlice({
+  name: 'email',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    set: (state, action: PayloadAction<string>) => {
+      state.value = action.payload
+    },
+  },
+})
+
+export const { set } = emailSlice.actions
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectEmail = (state: RootState) => state.email.value
+
+export default emailSlice.reducer
diff --git a/src/ts/hooks.ts b/src/ts/hooks.ts
new file mode 100644
index 0000000..26d2236
--- /dev/null
+++ b/src/ts/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from '@ts/store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/src/ts/store.ts b/src/ts/store.ts
new file mode 100644
index 0000000..5640dd9
--- /dev/null
+++ b/src/ts/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit'
+import emailReducer  from '@ts/emailSlice';
+
+export const store = configureStore({
+  reducer: {
+      email: emailReducer
+  },
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch
diff --git a/tsconfig.json b/tsconfig.json
index 9165b22..5f8fed1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
             "@components": ["components"],
             "@components/*": ["components/*"],
             "@scss/*": ["scss/*"],
+            "@ts/*": ["ts/*"],
         }
     }
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
index b29965e..a93cf91 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ module.exports = (env, argv) => {
             ]
         },
         resolve: {
-            extensions: [".tsx", ".jsx", ".js"],
+            extensions: [".tsx", ".ts", ".jsx", ".js"],
             alias: {
                 "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
             },