-

src/api/auth/refresh-token.js

@@ -1,11 +1,11 @@
-export default async function RefreshToken(refreshAuth) {
+export default async function RefreshToken(auth, refreshAuth) {
   try {
-    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/auth/refresh-token", {
+    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/auth/refresh-token?refreshToken=" + refreshAuth, {
       method: 'GET',
       headers: {
         'Accept': '*/*',
         'Content-Type': 'application/json',
-        'refreshToken': refreshAuth,
+        'Authorization': auth,
       }
     }).then((res) => res.json());
 

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" };
           }

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" };
   }
+}
 

src/api/project/project-featured.js

@@ -0,0 +1,19 @@
+export default async function ProjectFeatured() {
+  try {
+    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/project/featured/project", {
+      method: 'GET',
+      headers: {
+        'Accept': '*/*',
+        'Content-Type': 'application/json',
+      },
+    }).then((res) => res.json());
+
+    if (res.status === 200) {
+      return {status: "200", data: res.data};
+    } else {
+      return {status: "err"};
+    }
+  } catch {
+    return {status: "err"};
+  }
+};

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,44 +15,52 @@ 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() {
       const res = await getFollowing(getCookie("auth"), offSet);
 
       if (res) {
         if (res.status === "200") {
-          if(res.data.length === 0) {
+          if (res.data.length === 0) {
             setIsLoadMore(false);
             return;
           }
           setdataProject([...dataProject,...res.data]);
+        } else if (res.status === "unauth") {
+          location.reload();
+        } else if (res.status === "expired") {
+          getNewToken(fetchData);
         }
       }
     }
@@ -62,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>
             </>
             )
           }

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") {
@@ -50,6 +60,10 @@ export default function Foryou() {
             return;
           } 
           setdataProject([...dataProject, ...res.data]);
+        } else if (res.status === "unauth") {
+          location.reload();
+        } else if (res.status === "expired") {
+          getNewToken(fetchData);
         }
       }
     }
@@ -63,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>
           </>
           )

src/app/(main)/layout.js

@@ -17,8 +17,8 @@ export default async function MainLayout(props) {
   const [isLogin, setIsLogin] = useState(null);
 
   useEffect(() => {
-    async function getNewToken(refreshToken) {
-      const res = await RefreshToken(refreshToken);
+    async function getNewToken(auth, refreshAuth) {
+      const res = await RefreshToken(auth, refreshAuth);
 
       if (res.status === "200") {
         setCookie("auth", res.data.token);
@@ -40,7 +40,7 @@ export default async function MainLayout(props) {
         if (res.status === "200") {
           return res;
         } else if (res.status === "-3") {
-          await getNewToken(getCookie("refreshAuth"));
+          await getNewToken(getCookie("auth"), getCookie("refreshAuth"));
 
           return await getLoginData();
         } else {

src/app/Credits.js

@@ -9,7 +9,7 @@ export default function Credits() {
         <h4 className={`${font.Clash_display_d4bold} text-white`}>Meet the masterminds</h4>
         <div className="px-2 py-1">
           <Link href="/credits">
-            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-cyan-400 to-sky-500 rounded-xl lg:px-6 lg:py-3 md:px-4 md:py-2 sm:px-4 sm:py-2 ss:px-4 ss:py-2`}>Open Credits</button>
+            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-cyan-400 to-sky-500 rounded-xl ss:px-6 ss:py-3`}>Open Credits</button>
           </Link>
         </div>
       </div>

src/app/Faqs.js

@@ -39,8 +39,8 @@ export default function Faqs() {
   ]
 
   return (
-    <div className="p-24" id="faqs">
-      <h4 className={`${font.Clash_display_d4bold} text-white text-center mb-12`}>FAQS</h4>
+    <div className="md:p-24 px-4 pb-16" id="faqs">
+      <h4 className={`${font.Clash_display_d4bold} text-white text-center md:mb-12 mb-6`}>FAQS</h4>
       <div>
         {content.map((item, index) => (
           <div key={index}>
@@ -51,9 +51,14 @@ export default function Faqs() {
               </div>
             </div>
             {activeIndices.includes(index) && (
-              <div className={`${font.Satoshi_b1regular} text-slate-400 px-8 pb-8 select-none`}>
-                {item.desc}
-              </div>
+              <>
+                <div className={`${font.Satoshi_b1regular} text-slate-400 px-8 pb-8 select-none hidden md:block`}>
+                  {item.desc}
+                </div>
+                <div className={`${font.Satoshi_b4regular} text-slate-400 px-8 pb-8 select-none block md:hidden`}>
+                  {item.desc}
+                </div>
+              </>
             )}
             <hr />
           </div>