first working state

pages/_app.js

@@ -1,9 +1,11 @@
 import "../styles/globals.css";
 import { SessionProvider } from "next-auth/react";
+import { Alert } from "../components/alert";
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <SessionProvider session={session}>
+      <Alert fade={true} />
       <Component {...pageProps} />
     </SessionProvider>
   );

pages/api/auth/[...nextauth].js

@@ -12,6 +12,20 @@ export default NextAuth({
     }),
   ],
   callbacks: {
+    async signIn({ user, account, profile, email, credentials }) {
+      console.log(user, account, profile, email, credentials);
+      if (user.image != profile.image_url) {
+        await prisma.user.update({
+          data: {
+            image: profile.image_url,
+          },
+          where: {
+            id: user.id,
+          },
+        });
+      }
+      return true;
+    },
     async session({ session, token, user }) {
       session.user.id = user.id;
       // console.log(JSON.stringify(user));

pages/api/border/all.js

@@ -1,7 +1,9 @@
-import { getAllBorders } from "../../../lib/borders";
+import { getAllBorders, countAllBorders } from "../../../lib/borders";
 
 export default function handler(req, res) {
-  getAllBorders().then((result) => {
-    return res.status(200).json(result);
+  getAllBorders(req.query?.limit, req.query?.cursor).then((result) => {
+    countAllBorders().then((count) => {
+      return res.status(200).json({ data: result, count });
+    });
   });
 }

pages/api/hello.js

@@ -1,5 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({
+    ok: "ok",
+  });
 }

pages/api/user/border/@me.js

@@ -1,11 +1,21 @@
-import { getUserBorders } from "../../../../lib/borders";
+import { getUserBorders, setUserBorder } from "../../../../lib/borders";
 
 export default function handler(req, res) {
-  getUserBorders(req).then((result) => {
-    if (result) {
-      return res.status(200).json(result);
-    } else {
-      return res.status(404).json({ error: "Not Found" });
-    }
-  });
+  if (req.method === "POST") {
+    setUserBorder(req, req.body).then((result) => {
+      if (result) {
+        return res.status(200).json(result);
+      } else {
+        return res.status(500).json({ error: "could not update border" });
+      }
+    });
+  } else {
+    getUserBorders(req).then((result) => {
+      if (result) {
+        return res.status(200).json(result);
+      } else {
+        return res.status(404).json({ error: "Not Found" });
+      }
+    });
+  }
 }

pages/index.js

@@ -1,35 +1,91 @@
 import Head from "next/head";
 import Image from "next/image";
+import Router from "next/router";
 import styles from "../styles/Home.module.css";
 import UserInfo from "../components/userInfo";
+import Preview from "../components/borderPreview";
 import Select from "../components/select";
+import { alertService } from "../services";
 import { useEffect, useState } from "react";
 
 export default function Home() {
-  const [data, setData] = useState(null);
+  const [data, setData] = useState([]);
+  const [total, setTotal] = useState(0);
   const [borderData, setBorderData] = useState(null);
   const [selected, setSelected] = useState(0);
 
-  useEffect(() => {
-    fetch("api/border/all")
+  // const pageSize = 36;
+
+  const [cursor, setCursor] = useState(0);
+
+  // const fetchMore = () => {
+  //   console.log("fetch more");
+  //   fetch(`api/border/all?limit=${pageSize}&cursor=${cursor}`)
+  //     .then((res) => res.json())
+  //     .then((res) => {
+  //       setData([...data, ...res.data]);
+  //       setTotal(res.count);
+  //     });
+  // };
+
+  const applyBorder = () => {
+    console.log("apply");
+    fetch("api/user/border/@me", { method: "POST", body: selected })
       .then((res) => res.json())
-      .then((data) => setData(data));
-  }, []);
+      .then((res) => {
+        console.log(res);
+        if (res.error) {
+          alertService.error(`error: ${res.error}`);
+        } else {
+          setBorderData(res);
+        }
+      });
+  };
 
   useEffect(() => {
     fetch("api/user/border/@me")
+      .then((res) => res.json())
+      .then((dat) => {
+        console.log("border data", dat);
+        setBorderData(dat);
+        setSelected(dat?.borderId || 0);
+      });
+  }, [data]);
+
+  useEffect(() => {
+    fetch(`api/border/all`)
       .then((res) => res.json())
       .then((data) => {
-        setBorderData(data);
-        setSelected(data?.borderId || 0);
+        setData(data.data);
+        setTotal(data.count);
       });
   }, []);
 
+  // useEffect(() => {
+  //   let final = data?.[data?.length - 1];
+  //   if (final) {
+  //     setCursor(parseInt(final.id) + 1);
+  //     console.log(cursor);
+  //   }
+  // }, [data, cursor]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // if data has not loaded in 5 seconds
+      if (!data || !borderData) {
+        console.log(data, borderData);
+        Router.reload();
+      } else {
+        console.log("data loaded properly, not reloading.");
+      }
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [data, borderData]);
+
   return (
     <div className={styles.container}>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>Borders</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <header>
@@ -39,7 +95,18 @@ export default function Home() {
         </div>
       </header>
       <main>
-        <Select data={data} onSelect={setSelected} selected={selected} />
+        <Preview
+          data={data}
+          current={borderData?.borderId}
+          selected={selected}
+          apply={applyBorder}
+        />
+        <Select
+          data={data}
+          total={total}
+          onSelect={setSelected}
+          selected={selected}
+        />
       </main>
     </div>
   );