Progress: Fix refresh auth flow

Asadaaaaa · Jun 30, 2023 · d39b522 · d39b522
1 parent 8e66a68
commit d39b522
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 77 deletions.
diff --git 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
@@ -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" };
   }
+}
 
diff --git 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 ? (<div className="flex pt-7 justify-center"><Loading /></div>) : (
             <>
-          <div className="flex flex-col gap-6 items-start">
-              {dataProjectEven.map((item, index) => (
-              <ContainerProject index={index} data={item} refs={dataProject.length % 2 === 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}}/>
-              ))}
-            </div>
-            <div className="flex flex-col gap-6 items-start">
-              {dataProjectOdd.map((item, index) => (
-                <ContainerProject index={index} data={item} refs={dataProject.length % 2 !== 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}}/>
-              ))}
-            </div>
+              <div className="flex flex-col gap-6 items-start">
+                {
+                  dataProjectEven.map((item, index) => (
+                    <ContainerProject index={index} data={item} refs={dataProject.length % 2 === 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}}/>
+                  ))
+                }
+              </div>
+              <div className="flex flex-col gap-6 items-start">
+                {
+                  dataProjectOdd.map((item, index) => (
+                    <ContainerProject index={index} data={item} refs={dataProject.length % 2 !== 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}}/>
+                  ))
+                }
+              </div>
             </>
             )
           }

diff --git 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 ? (<div className="flex pt-7 justify-center"><Loading /></div>) : (
           <>
             <div className="flex flex-col gap-6 items-start">
-              {dataProjectEven.map((item, index) => (
-                <ContainerProject index={index} data={item} refs={dataProject.length % 2 === 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}}/>
-              ))}
-
+              {
+                dataProjectEven.map((item, index) => (
+                  <ContainerProject index={index} data={item} refs={dataProject.length % 2 === 0 && dataProjectEven.length === index + 1 ? lastProjectRef : {}} />
+                ))
+              }
             </div>
             <div className="flex flex-col gap-6 items-start">
-              {dataProjectOdd.map((item, index) => (
-                <ContainerProject index={index} data={item} refs={dataProject.length % 2 !== 0 && dataProjectOdd.length === index + 1 ? lastProjectRef : {}}/>
-              ))}
-
+              {
+                dataProjectOdd.map((item, index) => (
+                  <ContainerProject index={index} data={item} refs={dataProject.length % 2 !== 0 && dataProjectOdd.length === index + 1 ? lastProjectRef : {}} />
+                ))
+              }
             </div>
           </>
           )

diff --git a/src/handlers/refreshAuth.js 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;
+  }
+};