Removed redux and added useContext

package.json

@@ -16,7 +16,6 @@
     "@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",
@@ -30,7 +29,6 @@
     "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",

src/components/Login.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Card, Button, TextField } from "@mui/material";
 import "@scss/login.scss";
 import { Link, useNavigate } from "react-router-dom";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { useForm } from "react-hook-form";
+import userContext from "@ts/userContext"
 
 type Inputs = {
     email: string;
@@ -23,6 +24,7 @@ const schema = yup
     .required();
 
 export default function Login() {
+    const user = useContext(userContext);
     const navigate = useNavigate();
     const {
         register,
@@ -65,6 +67,7 @@ export default function Login() {
     function onSubmit(data: Inputs) {
         console.log("There will be an API call now with the following data");
         data = { ...data, password: hash(data.password) };
+        user.setName(data.email);
         console.table(data);
         setTimeout(() => navigate("/?logged"), 3000);
     }

src/components/Transactions.tsx

@@ -1,17 +1,19 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import "@scss/transactions.scss";
 import Table from "@components/Transactions/Table"
+import userContext from "@ts/userContext"
 
 
 
 export default function Transactions() {
+    const user = useContext(userContext)
+
     return (
         <div id="tablePage">
             <header>
-                header
+                Hello {user.name}
             </header>
             <aside>
-                sidebar
             </aside>
             <main>
                 <Table />

src/index.tsx

@@ -1,49 +1,59 @@
-import * as React from "react";
+import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 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'
+import UserContext from '@ts/userContext'
 
 const router = createBrowserRouter([
   {
     path: "/",
     element:
-        <MetadataSetter title="Transactions" bodyClass="transactions" needsAuth>
-          <Transactions />
-        </MetadataSetter>,
-    errorElement: 
-    <MetadataSetter title="Error" bodyClass="error">
-      <ErrorPage />
-    </MetadataSetter>
+      <MetadataSetter title="Transactions" bodyClass="transactions" needsAuth>
+        <Transactions />
+      </MetadataSetter>,
+    errorElement:
+      <MetadataSetter title="Error" bodyClass="error">
+        <ErrorPage />
+      </MetadataSetter>
   },
   {
     path: "/login",
-    element: 
-    <MetadataSetter title="Login" bodyClass="login">
-      <Login />
-    </MetadataSetter>
+    element:
+      <MetadataSetter title="Login" bodyClass="login">
+        <Login />
+      </MetadataSetter>
   },
   {
     path: "/forgot",
-    element: 
-    <MetadataSetter title="Forgot Password" bodyClass="forgot">
-      <ForgotPassword />
-    </MetadataSetter>
+    element:
+      <MetadataSetter title="Forgot Password" bodyClass="forgot">
+        <ForgotPassword />
+      </MetadataSetter>
   },
   {
     path: "/reset",
-    element: 
-    <MetadataSetter title="Reset Password" bodyClass="reset">
-      <Reset />
-    </MetadataSetter>
+    element:
+      <MetadataSetter title="Reset Password" bodyClass="reset">
+        <Reset />
+      </MetadataSetter>
   },
 ]);
 
+
+const App = function () {
+  const [name, setName] = useState("John Smith")
+  const userContextValue = { name, setName }
+  return (
+    <UserContext.Provider value={userContextValue}>
+      <RouterProvider router={router} />
+    </UserContext.Provider>
+  )
+}
+
+
+
 createRoot(document.querySelector("#root")).render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <RouterProvider router={router} />
-        </Provider>
-    </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );

src/ts/emailSlice.ts

@@ -1,31 +0,0 @@
-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

src/ts/hooks.ts

@@ -1,6 +0,0 @@
-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

src/ts/store.ts

@@ -1,13 +0,0 @@
-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

src/ts/userContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+
+export default createContext({
+  name : "Unknown",
+  setName: (name: string) => {}
+})