From d39b522c9cbf94eceb7088c2e9cd4adaf52f3c83 Mon Sep 17 00:00:00 2001 From: zkazharan Date: Sat, 1 Jul 2023 00:51:30 +0700 Subject: [PATCH] Progress: Fix refresh auth flow --- src/api/project/following.js | 6 ++- src/api/project/forYou.js | 60 ++++++++++++++++-------------- src/app/(main)/home/Following.js | 63 +++++++++++++++++++------------- src/app/(main)/home/Foryou.js | 60 ++++++++++++++++++------------ src/handlers/refreshAuth.js | 25 +++++++++++++ 5 files changed, 137 insertions(+), 77 deletions(-) create mode 100644 src/handlers/refreshAuth.js diff --git a/src/api/project/following.js b/src/api/project/following.js index b57bbd1..784e2ad 100644 --- a/src/api/project/following.js +++ b/src/api/project/following.js @@ -20,7 +20,11 @@ export default async function getFollowing( auth = null, offset) { } else { if (res.err) { if (res.err.type === "token") { - return { status: "unauth" }; + if (res.err.data.code === -3 ) { + return { status: "expired" }; + } else { + return { status: "unauth" }; + } } else if (res.err.type === "service") { return { status: "notfound" }; } diff --git a/src/api/project/forYou.js b/src/api/project/forYou.js index 55f1f91..71ab237 100644 --- a/src/api/project/forYou.js +++ b/src/api/project/forYou.js @@ -1,35 +1,39 @@ -export default async function getForyou(auth = null, offset) { - try { - const res = await fetch( - process.env.NEXT_PUBLIC_HOST + - "/" + - process.env.NEXT_PUBLIC_VERSION + - `/project/get/foryou?offset=${offset}&limit=2`, - { - method: "GET", - headers: { - Accept: "*/*", - "Content-Type": "application/json", - ...(auth ? { Authorization: auth } : {}), - }, - } - ).then((res) => res.json()); - - if (res.status === 200) { - return { status: "200", data: res.data }; - } else { - if (res.err) { - if (res.err.type === "token") { +export default async function GetForyou(auth = null, offset) { + try { + const res = await fetch( + process.env.NEXT_PUBLIC_HOST + + "/" + + process.env.NEXT_PUBLIC_VERSION + + `/project/get/foryou?offset=${offset}&limit=2`, + { + method: "GET", + headers: { + Accept: "*/*", + "Content-Type": "application/json", + ...(auth ? { Authorization: auth } : {}), + }, + } + ).then((res) => res.json()); + + if (res.status === 200) { + return { status: "200", data: res.data }; + } else { + if (res.err) { + if (res.err.type === "token") { + if (res.err.data.code === -3 ) { + return { status: "expired" }; + } else { return { status: "unauth" }; - } else if (res.err.type === "service") { - return { status: "notfound" }; } - } else { - return { status: "err" }; + } else if (res.err.type === "service") { + return { status: "notfound" }; } + } else { + return { status: "err" }; } - } catch { - return { status: "err" }; } + } catch { + return { status: "err" }; } +} \ No newline at end of file diff --git a/src/app/(main)/home/Following.js b/src/app/(main)/home/Following.js index 1fae213..c8b6925 100644 --- a/src/app/(main)/home/Following.js +++ b/src/app/(main)/home/Following.js @@ -1,9 +1,12 @@ -import { getCookie } from "cookies-next"; -import { useState, useEffect, useRef, useCallback } from "react"; -import { Loading } from "@nextui-org/react"; +import { getCookie } from 'cookies-next'; +import { Loading } from '@nextui-org/react'; +import { useState, useEffect, useRef, useCallback } from 'react'; -import getFollowing from "@/api/project/following"; -import ContainerProject from "@/components/main/card/Project/ContainerProject"; +import ContainerProject from '@/components/main/card/Project/ContainerProject'; + +import { getNewToken } from '@/handlers/refreshAuth'; + +import getFollowing from '@/api/project/following'; export default function Following() { const [dataProject, setdataProject] = useState([]); @@ -12,32 +15,36 @@ export default function Following() { const [isLoadMore, setIsLoadMore] = useState(true); const [offSet, setOffSet] = useState(1); + const observer = useRef(); - const observer = useRef() const lastProjectRef = useCallback(node => { - if (isLoadMore === false) return - if (observer.current) observer.current.disconnect() + if (isLoadMore === false) return; + if (observer.current) observer.current.disconnect(); + observer.current = new IntersectionObserver(entries => { if (entries[0].isIntersecting ) { setOffSet(offSet => offSet + 1) } - }) - if (node) observer.current.observe(node) - }, [isLoadMore]) + }); + + if (node) observer.current.observe(node); + }, [isLoadMore]); useEffect(() => { const ProjectOdd = []; const ProjectEven = []; + dataProject.map((item, index) => { index % 2 !== 0 ? ( ProjectOdd.push(item) ) : ( ProjectEven.push(item) ) - }) - setdataProjectOdd([...ProjectOdd]) - setdataProjectEven([...ProjectEven]) - }, [dataProject]) + }); + + setdataProjectOdd([...ProjectOdd]); + setdataProjectEven([...ProjectEven]); + }, [dataProject]); useEffect(() => { async function fetchData() { @@ -52,6 +59,8 @@ export default function Following() { setdataProject([...dataProject,...res.data]); } else if (res.status === "unauth") { location.reload(); + } else if (res.status === "expired") { + getNewToken(fetchData); } } } @@ -64,16 +73,20 @@ export default function Following() { { dataProject.length === 0 ? (
) : ( <> -
- {dataProjectEven.map((item, index) => ( - - ))} -
-
- {dataProjectOdd.map((item, index) => ( - - ))} -
+
+ { + dataProjectEven.map((item, index) => ( + + )) + } +
+
+ { + dataProjectOdd.map((item, index) => ( + + )) + } +
) } diff --git a/src/app/(main)/home/Foryou.js b/src/app/(main)/home/Foryou.js index 8a0ab5f..459c6b7 100644 --- a/src/app/(main)/home/Foryou.js +++ b/src/app/(main)/home/Foryou.js @@ -1,9 +1,13 @@ -import { getCookie } from "cookies-next"; -import { useState, useEffect, useRef, useCallback } from "react"; -import { Loading } from "@nextui-org/react"; +import { getCookie } from 'cookies-next'; +import { Loading } from '@nextui-org/react'; +import { useState, useEffect, useRef, useCallback } from 'react'; + +import ContainerProject from '@/components/main/card/Project/ContainerProject'; + +import { getNewToken } from '@/handlers/refreshAuth'; + +import GetForyou from '@/api/project/forYou'; -import getForyou from "@/api/project/forYou"; -import ContainerProject from "@/components/main/card/Project/ContainerProject"; export default function Foryou() { @@ -13,35 +17,41 @@ export default function Foryou() { const [isLoadMore, setIsLoadMore] = useState(true); const [offSet, setOffSet] = useState(1); - const observer = useRef() + const observer = useRef(); + const lastProjectRef = useCallback(node => { - if (isLoadMore === false) return - if (observer.current) observer.current.disconnect() + if (isLoadMore === false) return; + if (observer.current) observer.current.disconnect(); + observer.current = new IntersectionObserver(entries => { if (entries[0].isIntersecting ) { setOffSet(offSet => offSet + 1) } - }) - if (node) observer.current.observe(node) + }); + + if (node) observer.current.observe(node); }, [isLoadMore]) useEffect(() => { const ProjectOdd = []; const ProjectEven = []; + dataProject.map((item, index) => { index % 2 !== 0 ? ( ProjectOdd.push(item) ) : ( ProjectEven.push(item) ) - }) - setdataProjectOdd([...ProjectOdd]) - setdataProjectEven([...ProjectEven]) - }, [dataProject,]) + }); + + setdataProjectOdd([...ProjectOdd]); + setdataProjectEven([...ProjectEven]); + + }, [dataProject]) useEffect(() => { async function fetchData() { - const res = await getForyou(getCookie("auth"), offSet); + const res = await GetForyou(getCookie("auth"), offSet); if (res) { if (res.status === "200") { @@ -52,6 +62,8 @@ export default function Foryou() { setdataProject([...dataProject, ...res.data]); } else if (res.status === "unauth") { location.reload(); + } else if (res.status === "expired") { + getNewToken(fetchData); } } } @@ -65,16 +77,18 @@ export default function Foryou() { dataProject.length === 0 ? (
) : ( <>
- {dataProjectEven.map((item, index) => ( - - ))} - + { + dataProjectEven.map((item, index) => ( + + )) + }
- {dataProjectOdd.map((item, index) => ( - - ))} - + { + dataProjectOdd.map((item, index) => ( + + )) + }
) diff --git a/src/handlers/refreshAuth.js b/src/handlers/refreshAuth.js new file mode 100644 index 0000000..ca24ff0 --- /dev/null +++ b/src/handlers/refreshAuth.js @@ -0,0 +1,25 @@ +"use client"; + +import { getCookie, setCookie, deleteCookie } from 'cookies-next'; + +import RefreshToken from '@/api/auth/refresh-token'; + +export async function getNewToken(event) { + const res = await RefreshToken(getCookie("auth"), getCookie("refreshAuth")); + + if (res.status === "200") { + setCookie("auth", res.data.token); + setCookie("refreshAuth", res.data.refreshToken); + + event(); + + return; + } else { + deleteCookie("auth"); + deleteCookie("refreshAuth"); + + location.reload(); + + return; + } +}; \ No newline at end of file