From 19f7f6f07bb5f7bf2c729465eefa9fc60f36ad74 Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Wed, 27 Sep 2023 21:54:58 +0700 Subject: [PATCH] add logout service and adjust axios client --- src/actions/LogoutAction.ts | 5 +++++ src/actions/index.ts | 1 + src/components/Header/index.tsx | 23 ++++++++++++++++++----- src/constants/api.ts | 6 +++++- src/constants/default.ts | 2 ++ src/pages/Login/index.tsx | 28 ++++++++++++++++++++++------ src/services/auth.ts | 22 +++++++++++++++++----- src/services/config.ts | 3 ++- src/services/index.ts | 7 +++++-- src/utils/common.ts | 5 +++++ src/utils/index.ts | 4 +++- 11 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 src/actions/LogoutAction.ts create mode 100644 src/actions/index.ts create mode 100644 src/constants/default.ts diff --git a/src/actions/LogoutAction.ts b/src/actions/LogoutAction.ts new file mode 100644 index 0000000..397f294 --- /dev/null +++ b/src/actions/LogoutAction.ts @@ -0,0 +1,5 @@ +import { LOGOUT } from "../constants/actions"; + +export const logout = () => ({ + type: LOGOUT +}); \ No newline at end of file diff --git a/src/actions/index.ts b/src/actions/index.ts new file mode 100644 index 0000000..5a2522e --- /dev/null +++ b/src/actions/index.ts @@ -0,0 +1 @@ +export * from "./LogoutAction"; \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 6029602..1982ad0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,8 +1,10 @@ -import React from "preact/compat"; +import React, { TargetedEvent } from "preact/compat"; import { useState } from "preact/hooks"; -import './style.css'; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { UserRootState } from "../../store/type"; +import { logout } from '../../actions'; +import './style.css'; +import { logoutService } from "../../services"; function Header() { @@ -12,6 +14,7 @@ function Header() { profileMenu: false }) + const dispatch = useDispatch(); const user = useSelector((state: UserRootState) => state.auth) const onInput = (e: React.ChangeEvent): void => { @@ -19,6 +22,16 @@ function Header() { setSearchVal(val.value) } + const handleLogout = async (): Promise => { + try { + await logoutService() + dispatch(logout()) + location.reload() + } catch (error) { + alert(error) + } + } + const onSearchSubmit = (e: React.TargetedEvent): void => { e.preventDefault(); } @@ -52,7 +65,7 @@ function Header() {
Profile
Feed
Add location
 -
Logout
 +
Logout
 {/*
Halo
*/} {/*
Halo
*/} @@ -89,7 +102,7 @@ function Header() {
Profile
Feed
Add location
 -
Logout
 +
Logout
 {/*
Halo
*/} {/*
Halo
*/} diff --git a/src/constants/api.ts b/src/constants/api.ts index 28576ee..056e52c 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -2,7 +2,7 @@ const BASE_URL = "http://localhost:8888" const SIGNUP_URI = `${BASE_URL}/user/signup` const LOGIN_URI = `${BASE_URL}/user/login` - +const LOGOUT_URI = `${BASE_URL}/user/logout` const GET_LIST_LOCATIONS_URI = `${BASE_URL}/locations`; const GET_LIST_TOP_LOCATIONS = `${BASE_URL}/locations/top-ratings` @@ -12,14 +12,18 @@ const GET_LOCATION_TAGS_URI = `${BASE_URL}/location/tags` const GET_IMAGES_BY_LOCATION_URI = `${BASE_URL}/images/location` +const POST_REVIEW_LOCATION_URI = `${BASE_URL}/review/location` + export { BASE_URL, SIGNUP_URI, LOGIN_URI, + LOGOUT_URI, GET_LIST_RECENT_LOCATIONS_RATING_URI, GET_LIST_TOP_LOCATIONS, GET_LIST_LOCATIONS_URI, GET_LOCATION_URI, GET_LOCATION_TAGS_URI, GET_IMAGES_BY_LOCATION_URI, + POST_REVIEW_LOCATION_URI } \ No newline at end of file diff --git a/src/constants/default.ts b/src/constants/default.ts new file mode 100644 index 0000000..f9d1cf7 --- /dev/null +++ b/src/constants/default.ts @@ -0,0 +1,2 @@ +export const DEFAULT_AVATAR_IMG = 'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'; + diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index a47ba43..25931ba 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -1,12 +1,13 @@ import { ChangeEvent, TargetedEvent, useState } from "preact/compat"; import { createAccountService, loginService } from "../../services"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; import { authAdded } from "../../features/auth/authSlice/authSlice"; import './index.css'; function Login() { const dispatch = useDispatch(); + const { state } = useLocation() const [form, setFrom] = useState({ username: '', password: '' @@ -22,15 +23,22 @@ function Login() { async function handleSignIn(e: TargetedEvent) { e.preventDefault(); try { - const res = await loginService({username: form.username, password: form.password}) + const res = await loginService({ username: form.username, password: form.password }) if (res.error) { setErrorMsg(res.error.response.data.errors) return } + dispatch(authAdded(res.data)) - // localStorage.setItem("user", JSON.stringify(res.data)) + + if (state) { + navigation(state.from) + return + } + navigation("/") - } catch(err) { + + } catch (err) { console.log(err) } } @@ -43,11 +51,19 @@ function Login() { password: form.password }) - if(res.error) { + if (res.error) { setErrorMsg(res.error.response.data.errors) return; } - console.log(res.data) + + dispatch(authAdded(res.data)) + + if (state) { + navigation(state.from) + return + } + navigation("/") + } catch (err) { alert(err) } diff --git a/src/services/auth.ts b/src/services/auth.ts index 7b1a43e..c678ac2 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -14,9 +14,8 @@ interface IAuthentication { async function createAccountService({ username, password }: IAuthentication) { const newState = { ...initialState }; - const url = `${SIGNUP_URI}` try { - const response = await client({ method: 'POST', url: url, data: { username, password } }) + const response = await client({ method: 'POST', url: SIGNUP_URI, data: { username, password } }) newState.data = response.data newState.error = null return newState @@ -28,9 +27,8 @@ async function createAccountService({ username, password }: IAuthentication) { async function loginService({ username, password }: IAuthentication) { const newState = { ...initialState }; - const url = `${LOGIN_URI}` try { - const response = await client({ method: 'POST', url: url, data: { username, password } }) + const response = await client({ method: 'POST', url: LOGIN_URI, data: { username, password }, withCredentials: true }) newState.data = response.data newState.error = null return newState @@ -41,7 +39,21 @@ async function loginService({ username, password }: IAuthentication) { } +async function logoutService() { + const newState = { ...initialState }; + try { + const response = await client({ method: 'POST', url: LOGIN_URI}) + newState.data = response.data + newState.error = null + return newState + } catch (error) { + newState.error = error + return newState + } +} + export { loginService, - createAccountService + createAccountService, + logoutService }; \ No newline at end of file diff --git a/src/services/config.ts b/src/services/config.ts index 1752435..62e757c 100644 --- a/src/services/config.ts +++ b/src/services/config.ts @@ -6,7 +6,8 @@ export const client = (props: AxiosRequestConfig): AxiosPromise => axios({ baseURL: `${BASE_URL}`, url: props.url, headers: props.headers, - data: props.data + data: props.data, + ...props }) // export const authClient = (props: AxiosRequestConfig) => axios({ diff --git a/src/services/index.ts b/src/services/index.ts index 1339cf7..8604652 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -5,13 +5,14 @@ import { getLocationService, getLocationTagsService, } from "./locations"; - import { getImagesByLocationService } from "./images" -import { createAccountService, loginService } from "./auth"; +import { createAccountService, loginService, logoutService } from "./auth"; +import { postReviewLocation } from "./review"; export { createAccountService, loginService, + logoutService, getListLocationsService, getListRecentLocationsRatingsService, @@ -19,4 +20,6 @@ export { getLocationService, getLocationTagsService, getImagesByLocationService, + + postReviewLocation } \ No newline at end of file diff --git a/src/utils/common.ts b/src/utils/common.ts index e69de29..12ef603 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -0,0 +1,5 @@ +import { AxiosError } from "axios"; + +export function handleAxiosError(error: AxiosError) { + return error.response?.data +} \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts index eb08360..cb8b8a0 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,7 @@ import useAutosizeTextArea from "./useAutosizeTextArea"; +import { handleAxiosError } from "./common"; export { - useAutosizeTextArea + useAutosizeTextArea, + handleAxiosError } \ No newline at end of file