From ae82184c8e7f43e5be13101ef2954e33a37b69a0 Mon Sep 17 00:00:00 2001 From: ElPastel Date: Sun, 26 Nov 2023 16:11:35 +0400 Subject: [PATCH] fix auth --- src/components/EntryForm.tsx | 6 +++--- src/store/auth/authActions.ts | 23 ++++++++++++++++++----- src/store/auth/authSlice.ts | 2 ++ src/store/auth/extraReducers.ts | 19 +++++++++++++++++++ 4 files changed, 42 insertions(+), 8 deletions(-) diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx index 989cc51..fc7030a 100644 --- a/src/components/EntryForm.tsx +++ b/src/components/EntryForm.tsx @@ -1,6 +1,6 @@ import { Button, Form, Input } from 'antd'; import { ValidateErrorEntity } from 'rc-field-form/es/interface'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { Routes } from '../constants/routes'; import { Login } from '../store/auth/types'; import { useAppDispatch } from '../store'; @@ -13,9 +13,9 @@ type FieldType = { function EntryForm() { const dispatch = useAppDispatch(); + const navigate = useNavigate(); const onFinish = (values: Login) => { - console.log(values); - dispatch(signInUser(values)); + dispatch(signInUser(values)).then(() => navigate(Routes.PROFILE)); }; const onFinishFailed = (errorInfo: ValidateErrorEntity) => { diff --git a/src/store/auth/authActions.ts b/src/store/auth/authActions.ts index 2227ffa..448f6ce 100644 --- a/src/store/auth/authActions.ts +++ b/src/store/auth/authActions.ts @@ -24,12 +24,11 @@ export const signInUser = createAsyncThunk( `${BASE_URL}token/create/`, body, ); - console.log(response); const auth_token = response.data.token; const id = response.data.user_id; dispatch(setUserId(id)); setToken(auth_token); - return dispatch(getUserById(id)); + return dispatch(getUser()); } catch (e) { return rejectWithValue(e); } @@ -62,14 +61,28 @@ export const logOut = createAsyncThunk( }, ); -export const getUserById = createAsyncThunk( +export const getUser = createAsyncThunk( 'auth/getUser', + async (_, { rejectWithValue }) => { + try { + const token = getToken(); + const res = await axios.get(`${BASE_URL}users/me`, { + headers: { Authorization: `Token ${token?.slice(1, -1)}` }, + }); + return res; + } catch (e) { + return rejectWithValue(e); + } + }, +); + +export const getUserById = createAsyncThunk( + 'auth/getUserById', async (id: string, { rejectWithValue }) => { try { const token = getToken(); - console.log(token); const res = await axios.get(`${BASE_URL}users/${id}/`, { - headers: { Authorization: `Token ${token}` }, + headers: { Authorization: `Token ${token?.slice(1, -1)}` }, }); return res; } catch (e) { diff --git a/src/store/auth/authSlice.ts b/src/store/auth/authSlice.ts index 2946d3e..ed77fa7 100644 --- a/src/store/auth/authSlice.ts +++ b/src/store/auth/authSlice.ts @@ -3,6 +3,7 @@ import { RootState } from '..'; import { AuthState } from './types'; import { buildConfirmEmail, + buildGetUser, buildGetUserById, buildLogOut, buildRegistration, @@ -62,6 +63,7 @@ const authSlice = createSlice({ buildLogOut(builder); buildGetUserById(builder); buildConfirmEmail(builder); + buildGetUser(builder); }, }); diff --git a/src/store/auth/extraReducers.ts b/src/store/auth/extraReducers.ts index 3fae75d..4ba9958 100644 --- a/src/store/auth/extraReducers.ts +++ b/src/store/auth/extraReducers.ts @@ -5,6 +5,7 @@ import { registration, signInUser, confirmEmail, + getUser, } from './authActions'; import { AuthState } from './types'; @@ -90,3 +91,21 @@ export const buildGetUserById = (builder: ActionReducerMapBuilder) => state.user = null; state.userError = 'Sorry, something went wrong'; }); + +export const buildGetUser = (builder: ActionReducerMapBuilder) => + builder + .addCase(getUser.pending, (state) => { + state.userStatus = 'pending'; + }) + .addCase(getUser.fulfilled, (state, action) => { + state.userStatus = 'success'; + state.user = action.payload; + state.isAuth = true; + state.userError = null; + }) + .addCase(getUser.rejected, (state) => { + state.userStatus = 'error'; + state.isAuth = false; + state.user = null; + state.userError = 'Sorry, something went wrong'; + });