Removed redux and added useContext

This commit is contained in:
Arnaud Fauconnet 2022-10-27 10:12:58 +02:00
parent fc00f9124c
commit 99b63d95fd
8 changed files with 52 additions and 83 deletions

View File

@ -16,7 +16,6 @@
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@hookform/resolvers": "^2.9.10", "@hookform/resolvers": "^2.9.10",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
"@reduxjs/toolkit": "^1.8.6",
"@types/jest": "^29.1.1", "@types/jest": "^29.1.1",
"@types/node": "^18.8.2", "@types/node": "^18.8.2",
"@types/node-sass": "^4.11.3", "@types/node-sass": "^4.11.3",
@ -30,7 +29,6 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.38.0", "react-hook-form": "^7.38.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2", "react-router-dom": "^6.4.2",
"sass": "^1.55.0", "sass": "^1.55.0",
"sass-loader": "^13.1.0", "sass-loader": "^13.1.0",

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

6
src/ts/userContext.ts Normal file
View File

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