diff --git a/package.json b/package.json
index bb0f18e..342c66f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index db689cd..b5eafeb 100644
--- a/src/components/Login.tsx
+++ b/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);
}
diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx
index 1d6968e..c21ba35 100644
--- a/src/components/Transactions.tsx
+++ b/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 (
- header
+ Hello {user.name}
diff --git a/src/index.tsx b/src/index.tsx
index c668446..8606d7e 100644
--- a/src/index.tsx
+++ b/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:
-
-
- ,
- errorElement:
-
-
-
+
+
+ ,
+ errorElement:
+
+
+
},
{
path: "/login",
- element:
-
-
-
+ element:
+
+
+
},
{
path: "/forgot",
- element:
-
-
-
+ element:
+
+
+
},
{
path: "/reset",
- element:
-
-
-
+ element:
+
+
+
},
]);
+
+const App = function () {
+ const [name, setName] = useState("John Smith")
+ const userContextValue = { name, setName }
+ return (
+
+
+
+ )
+}
+
+
+
createRoot(document.querySelector("#root")).render(
-
-
-
-
-
+
+
+
);
diff --git a/src/ts/emailSlice.ts b/src/ts/emailSlice.ts
deleted file mode 100644
index b9a33b3..0000000
--- a/src/ts/emailSlice.ts
+++ /dev/null
@@ -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) => {
- 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
deleted file mode 100644
index 26d2236..0000000
--- a/src/ts/hooks.ts
+++ /dev/null
@@ -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 = useSelector
diff --git a/src/ts/store.ts b/src/ts/store.ts
deleted file mode 100644
index 5640dd9..0000000
--- a/src/ts/store.ts
+++ /dev/null
@@ -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
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
diff --git a/src/ts/userContext.ts b/src/ts/userContext.ts
new file mode 100644
index 0000000..c22201d
--- /dev/null
+++ b/src/ts/userContext.ts
@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+
+export default createContext({
+ name : "Unknown",
+ setName: (name: string) => {}
+})
\ No newline at end of file