From a6a7db01c7f8c951c1be51c10b7d2c0aacd8e148 Mon Sep 17 00:00:00 2001 From: mniegrzybowska Date: Thu, 19 Sep 2024 10:43:15 +0200 Subject: [PATCH 1/2] improve state handling --- package.json | 2 +- src/App.tsx | 36 ++++++++++++++++++-------- src/providers/AuthProvider.tsx | 14 +++++++--- src/providers/authenticationActions.ts | 2 +- src/providers/authenticationReducer.ts | 6 +++-- src/views/Login.tsx | 26 +++++++++---------- 6 files changed, 53 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 91c4272..2e04b0d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite --port 3000", "dev4container": "vite --port 3000 --host 0.0.0.0", - "start": "vite --port 3000 --host 0.0.0.0", + "start": "vite --port 3001 --host 0.0.0.0", "build": "tsc && vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview --host 0.0.0.0 --port 3000", diff --git a/src/App.tsx b/src/App.tsx index ffba632..fa1f5f2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,11 @@ import AwardsView from './views/Award/AwardsView.tsx'; import ConsequencesView from './views/ConsequencesView'; import SettingsView from './views/SettingsView'; import Head from './Head'; -import { AWARDS_SUB_ROUTES, BASE_ROUTES_NAME, SUB_ROUTES_NAME } from './const/routing.const'; +import { + AWARDS_SUB_ROUTES, + BASE_ROUTES_NAME, + SUB_ROUTES_NAME, +} from './const/routing.const'; import Login from './views/Login.tsx'; import AuthProvider from './providers/AuthProvider.tsx'; import AddAward from './views/Award/AddAward.tsx'; @@ -17,27 +21,37 @@ import GrantAward from './views/Award/GrantAward.tsx'; function App(): React.ReactNode { return ( -
- - + +
+ + } /> } /> } /> - } /> - } /> - + } + /> + } + /> + } /> - } /> + } + /> } /> - } /> @@ -47,8 +61,8 @@ function App(): React.ReactNode { /> - -
+
+ ); } diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx index 55b4873..0e898dd 100644 --- a/src/providers/AuthProvider.tsx +++ b/src/providers/AuthProvider.tsx @@ -8,7 +8,7 @@ import { } from './authenticationReducer.ts'; export const AuthenticationContext = createContext({ - token: "", + token: '', }); export const TokenDispatchContext = createContext>( {} as React.Dispatch @@ -23,9 +23,9 @@ const AuthProvider = ({ children }: { children: React.ReactNode }) => { const [authentication, dispatch] = useReducer( authenticationReducer, - { - token: "" - } + { + token: '', + } ); useEffect(() => { @@ -33,11 +33,17 @@ const AuthProvider = ({ children }: { children: React.ReactNode }) => { axios.defaults.headers.common['Authorization'] = 'Bearer ' + authentication.token; localStorage.setItem(localStorageKey, authentication.token); + console.log('Have token'); } else if (localStorage.getItem(localStorageKey)) { + console.log(localStorage.getItem(localStorageKey), 'token'); axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem(localStorageKey); + + console.log('going to local storage '); } else { navigate('/login'); + + console.log('redirecting'); } }, [authentication, localStorageKey]); diff --git a/src/providers/authenticationActions.ts b/src/providers/authenticationActions.ts index b77f990..d9a7bc6 100644 --- a/src/providers/authenticationActions.ts +++ b/src/providers/authenticationActions.ts @@ -14,6 +14,6 @@ export const setToken = ( export const clearToken = (dispatch: React.Dispatch) => { dispatch({ type: 'clear', - token: null, + token: '', }); }; diff --git a/src/providers/authenticationReducer.ts b/src/providers/authenticationReducer.ts index 1e8dac1..68d7231 100644 --- a/src/providers/authenticationReducer.ts +++ b/src/providers/authenticationReducer.ts @@ -12,8 +12,10 @@ export const authenticationReducer: AuthenticationReducer = ( switch (action.type) { case 'set': return { token: action.token }; - case 'clear': - return { token: "" }; + case 'clear': { + localStorage.setItem(localStorageKey); + return { token: '' }; + } default: // eslint-disable-next-line @typescript-eslint/restrict-template-expressions throw new Error(`Invalid action type ${action.type}`); diff --git a/src/views/Login.tsx b/src/views/Login.tsx index cb83c90..06ae3cc 100644 --- a/src/views/Login.tsx +++ b/src/views/Login.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Heading } from '../components/atoms/Heading/Heading.ts'; import MainBox from '../components/atoms/Sections/MainBox.ts'; @@ -12,7 +12,7 @@ import { type User } from '../api/Authentication/userTypes.ts'; import Button from '../components/atoms/Buttons/Button.ts'; import useAuthenticateUser from '../api/Authentication/authenticateUser.ts'; import { useTokenDispatch } from '../providers/AuthProvider.tsx'; -import { setToken } from '../providers/authenticationActions.ts'; +import { clearToken, setToken } from '../providers/authenticationActions.ts'; const Login = () => { const [formData, setFormData] = useState({ @@ -25,9 +25,13 @@ const Login = () => { const { trigger, isMutating, error } = useAuthenticateUser(); const navigate = useNavigate(); - const handleSubmit = async ( - event: React.MouseEvent - ) => { + useEffect(() => { + clearToken(dispatch); + + console.log(); + }, []); + + const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); const response = await trigger({ username: formData.userName, @@ -42,13 +46,12 @@ const Login = () => { Zaloguj się - handleSubmit}> + Nazwa użytkownika: setFormData({ ...formData, userName: event.target.value }) } @@ -56,21 +59,16 @@ const Login = () => { /> Hasło: setFormData({ ...formData, password: event.target.value }) } required /> {error &&
Błąd logowania. Spróbuj ponownie.
} - From 9d6b6c2ef9fd0ed1748a81595becdb4df2b2c7cf Mon Sep 17 00:00:00 2001 From: mniegrzybowska Date: Tue, 24 Sep 2024 13:39:43 +0200 Subject: [PATCH 2/2] improve-authorisation --- package.json | 2 +- src/components/atoms/Heading/Heading.ts | 10 +++++----- src/components/atoms/Paragraph/Paragraph.ts | 10 +++++----- src/components/modules/StudentCard/StudentCard.tsx | 2 +- src/constants.ts | 1 + src/providers/AuthProvider.tsx | 2 +- src/providers/authenticationReducer.ts | 3 ++- 7 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 src/constants.ts diff --git a/package.json b/package.json index 2e04b0d..91c4272 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite --port 3000", "dev4container": "vite --port 3000 --host 0.0.0.0", - "start": "vite --port 3001 --host 0.0.0.0", + "start": "vite --port 3000 --host 0.0.0.0", "build": "tsc && vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview --host 0.0.0.0 --port 3000", diff --git a/src/components/atoms/Heading/Heading.ts b/src/components/atoms/Heading/Heading.ts index 2cdf2d3..b7da1d5 100644 --- a/src/components/atoms/Heading/Heading.ts +++ b/src/components/atoms/Heading/Heading.ts @@ -3,18 +3,18 @@ import { ThemeTypes } from '../../../theme/appTheme'; interface HeadingPropsInterface { theme: ThemeTypes; - big?: boolean; + $big?: boolean; } export const Heading = styled.h1` - font-size: ${({ theme, big }) => - big ? theme.fontSize.xl : theme.fontSize.lg}; + font-size: ${({ theme, $big }) => + $big ? theme.fontSize.xl : theme.fontSize.lg}; font-weight: ${({ theme }) => theme.bold}; margin: 0 0 10px; @media only screen and (max-width: ${({ theme }) => theme.mediaMaxSize.xs}) { - font-size: ${({ theme, big }) => - big ? theme.fontSize.md : theme.fontSize.sm}; + font-size: ${({ theme, $big }) => + $big ? theme.fontSize.md : theme.fontSize.sm}; } `; diff --git a/src/components/atoms/Paragraph/Paragraph.ts b/src/components/atoms/Paragraph/Paragraph.ts index 9f9d05c..0c9e02a 100644 --- a/src/components/atoms/Paragraph/Paragraph.ts +++ b/src/components/atoms/Paragraph/Paragraph.ts @@ -3,17 +3,17 @@ import type { ThemeTypes } from '../../../theme/appTheme'; interface ParagraphInterface { theme: ThemeTypes; - big?: boolean; + $big?: boolean; } const Paragraph = styled.p` - font-size: ${({ theme, big }) => - big ? theme.fontSize.md : theme.fontSize.sm}; + font-size: ${({ theme, $big }) => + $big ? theme.fontSize.md : theme.fontSize.sm}; margin: 0 0 10px; @media only screen and (max-width: ${({ theme }) => theme.mediaMaxSize.xs}) { - font-size: ${({ theme, big }) => - big ? theme.fontSize.sm : theme.fontSize.xs}; + font-size: ${({ theme, $big }) => + $big ? theme.fontSize.sm : theme.fontSize.xs}; } `; diff --git a/src/components/modules/StudentCard/StudentCard.tsx b/src/components/modules/StudentCard/StudentCard.tsx index 3bbf5ad..07c4bc2 100644 --- a/src/components/modules/StudentCard/StudentCard.tsx +++ b/src/components/modules/StudentCard/StudentCard.tsx @@ -40,7 +40,7 @@ const StudentCard = ({ name, studentId, image }: PropTypesStudentCard) => { return ( - {name} + {name} ); }; diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..8a4a49f --- /dev/null +++ b/src/constants.ts @@ -0,0 +1 @@ +export const localStorageKey = 'token'; diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx index 0e898dd..e5e73e6 100644 --- a/src/providers/AuthProvider.tsx +++ b/src/providers/AuthProvider.tsx @@ -6,6 +6,7 @@ import { authenticationReducer, type AuthenticationReducer, } from './authenticationReducer.ts'; +import { localStorageKey } from '../constants.ts'; export const AuthenticationContext = createContext({ token: '', @@ -18,7 +19,6 @@ export const useAuthenticationData = () => useContext(AuthenticationContext); export const useTokenDispatch = () => useContext(TokenDispatchContext); const AuthProvider = ({ children }: { children: React.ReactNode }) => { - const localStorageKey = 'token'; const navigate = useNavigate(); const [authentication, dispatch] = useReducer( diff --git a/src/providers/authenticationReducer.ts b/src/providers/authenticationReducer.ts index 68d7231..f1aee09 100644 --- a/src/providers/authenticationReducer.ts +++ b/src/providers/authenticationReducer.ts @@ -1,4 +1,5 @@ import { type Authentication, type TokenAction } from './types.ts'; +import { localStorageKey } from '../constants.ts'; export type AuthenticationReducer = ( token: Authentication, @@ -13,7 +14,7 @@ export const authenticationReducer: AuthenticationReducer = ( case 'set': return { token: action.token }; case 'clear': { - localStorage.setItem(localStorageKey); + localStorage.setItem(localStorageKey, ''); return { token: '' }; } default: