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