From 257800f5d961df49ed04ff17064736ed09060e4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E7=A7=8B=E6=97=AD?= Date: Mon, 20 Feb 2023 16:50:36 +0800 Subject: [PATCH] home page --- package.json | 1 + pnpm-lock.yaml | 20 ++++++++++++++++++++ src/api/auth.ts | 2 +- src/api/user.ts | 2 +- src/pages/index.tsx | 31 +++++++++---------------------- src/utils/axios.ts | 2 +- src/utils/useUser.ts | 20 ++++++++++++++++++++ 7 files changed, 53 insertions(+), 25 deletions(-) create mode 100644 src/utils/useUser.ts diff --git a/package.json b/package.json index 5626a53..043f07c 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", + "swr": "^2.0.3", "yup": "^1.0.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index befaa3d..6d3cc25 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,7 @@ specifiers: prettier: 2.8.4 react: 18.2.0 react-dom: 18.2.0 + swr: ^2.0.3 typescript: ^4.9.5 yup: ^1.0.0 @@ -38,6 +39,7 @@ dependencies: next: 13.1.6_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 + swr: 2.0.3_react@18.2.0 yup: 1.0.0 devDependencies: @@ -2955,6 +2957,16 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /swr/2.0.3_react@18.2.0: + resolution: {integrity: sha512-sGvQDok/AHEWTPfhUWXEHBVEXmgGnuahyhmRQbjl9XBYxT/MSlAzvXEKQpyM++bMPaI52vcWS2HiKNaW7+9OFw==} + engines: {pnpm: '7'} + peerDependencies: + react: ^16.11.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + use-sync-external-store: 1.2.0_react@18.2.0 + dev: false + /synckit/0.8.5: resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==} engines: {node: ^14.18.0 || >=16.0.0} @@ -3083,6 +3095,14 @@ packages: punycode: 2.3.0 dev: true + /use-sync-external-store/1.2.0_react@18.2.0: + resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /which-boxed-primitive/1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} dependencies: diff --git a/src/api/auth.ts b/src/api/auth.ts index 822c9a6..02f7b15 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -20,5 +20,5 @@ export async function login(data: LoginInputDto) { } export async function refreshToken(data: TokenRefreshPayload) { - return axios.post('/api/auth/token', data) + return axios.put('/api/auth/token', data) } diff --git a/src/api/user.ts b/src/api/user.ts index fa6650c..43c9f25 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -12,5 +12,5 @@ export interface UserEntity { } export async function getUserInfo() { - return axios.get('/api/user/profile') + return axios.get('/api/users/me') } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1363ca1..285f44b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,28 +1,11 @@ -import { useEffect, useState } from 'react' -import * as api from '@/api' -import type { UserEntity } from '@/api/user' import CircularProgress from '@mui/material/CircularProgress' -import { AxiosError } from 'axios' -import { useRouter } from 'next/router' +import { useUser } from '@/utils/useUser' +import Alert from '@mui/material/Alert' export default function Home() { - const router = useRouter() + const { user, isLoading, errMsg } = useUser() - const [user, setUser] = useState() - useEffect(() => { - console.log('useEffect') - api.user - .getUserInfo() - .then((res) => { - setUser(res.data) - }) - .catch((err: AxiosError) => { - console.error(err.response) - router.push('/login') - }) - }, [router]) - - if (!user) { + if (isLoading) { return ( hello {user.email} + if (errMsg) { + return {errMsg} + } + + return <>hello {user!.email} } diff --git a/src/utils/axios.ts b/src/utils/axios.ts index 7a2e4dc..be6639c 100644 --- a/src/utils/axios.ts +++ b/src/utils/axios.ts @@ -18,7 +18,7 @@ axios.interceptors.response.use( if ( error.config && error.config.url === '/api/auth/token' && - error.config.method === 'post' + error.config.method === 'put' ) { Router.push('/login') return Promise.reject(error) diff --git a/src/utils/useUser.ts b/src/utils/useUser.ts new file mode 100644 index 0000000..f4c8b74 --- /dev/null +++ b/src/utils/useUser.ts @@ -0,0 +1,20 @@ +import useSWR from 'swr' +import * as api from '@/api' +import type { AxiosError, AxiosResponse } from 'axios' +import { UserEntity } from '@/api/user' + +export function useUser() { + const { data, error, isLoading } = useSWR< + AxiosResponse, + AxiosError + >(`user`, api.user.getUserInfo) + + const user = data?.data ?? null + const errMsg = error?.message ?? '' + + return { + user, + isLoading, + errMsg, + } +}