✨ Final Fixes

chrome_extension/src/popup/components/App.tsx

@@ -2,17 +2,26 @@ import Spinner from "./Common/Spinner";
 import logo from "../images/logo.png";
 import { useEffect, useState } from "react";
 import { useUser } from "../context/AuthContext";
-import { getNotionInfo, tweetNotionPage } from "../services/apiService";
+import {
+  getNotionInfo,
+  isPageTweeted,
+  tweetNotionPage,
+} from "../services/apiService";
 
 const App = () => {
   const [error, setError] = useState("");
-  const [message, setMessage] = useState(false);
+  const [message, setMessage] = useState<boolean | string>(false);
+  const [appError, setAppError] = useState<string | null>("");
+  const [appSuccess, setAppSuccess] = useState(false);
   const [tweeted, setTweeted] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [isPageLoading, setIsPageLoading] = useState(false);
   const [path, setPath] = useState("");
+  const [code, setCode] = useState<number>();
   const user = useUser();
 
   useEffect(() => {
+    setIsPageLoading(true);
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       chrome.tabs.sendMessage(
         tabs[0].id!,
@@ -43,17 +52,31 @@ const App = () => {
 
             setPath(path);
             try {
-              const data = await getNotionInfo(path);
+              const [notionInfo, isTweeted] = await Promise.all([
+                getNotionInfo(path),
+                isPageTweeted(path),
+              ]);
 
-              setError(data.error);
-              setMessage(data.message);
+              setTweeted(isTweeted.isTweeted);
+              setCode(notionInfo.code);
+              setError(notionInfo.error);
+              setMessage(notionInfo.message);
             } catch (error) {
               setError("Error Ocurred");
+
+              setCode((error as any).response.status === 401 ? 401 : 500);
+              if ((error as any).response.status === 401 ? 401 : 500) {
+                setError("Login To Twotion Before Continuing");
+              }
+            } finally {
+              setIsPageLoading(false);
             }
           } else {
             setError(
               "You're not inside notion. Please open notion before proceeding"
             );
+            setCode(10);
+            setIsPageLoading(false);
           }
         }
       );
@@ -66,8 +89,12 @@ const App = () => {
     try {
       await tweetNotionPage(path);
       setTweeted(true);
+      setAppSuccess(true);
+      setAppError(null);
     } catch (error) {
       console.log(error);
+      setAppError((error as any).response.data.message);
+      setAppSuccess(false);
     } finally {
       setLoading(false);
     }
@@ -80,12 +107,12 @@ const App = () => {
       </div>
 
       <div className="w-full">
-        {user.isLoading ? (
+        {user.isLoading || isPageLoading ? (
           <div className="h-[400px] flex justify-center items-center">
             <Spinner />
           </div>
         ) : (
-          <div className="mt-12 h-full justify-center items-center flex">
+          <div className="mt-12 h-full justify-center items-center flex flex-col">
             {error && (
               <p className="capitalize text-center text-red-500 text-lg">
                 {error}
@@ -98,6 +125,28 @@ const App = () => {
               </p>
             )}
 
+            {code === 10 && (
+              <button
+                className="flex items-center justify-center space-x-2 rounded-md border-2 py-[0.45rem] px-4 transition-all hover:bg-zinc-50 mt-4 text-[1.1rem]"
+                onClick={() => {
+                  window.open("https://notion.so/");
+                }}
+              >
+                Open Notion
+              </button>
+            )}
+
+            {code === 401 && (
+              <button
+                className="flex items-center justify-center space-x-2 rounded-md border-2 py-[0.45rem] px-4 transition-all hover:bg-zinc-50 mt-4 text-[1.1rem]"
+                onClick={() => {
+                  window.open("https://twotion.osadavidath.com/");
+                }}
+              >
+                Open Twotion
+              </button>
+            )}
+
             {!error && !message && (
               <div className="flex flex-col justify-center items-center">
                 <button
@@ -126,6 +175,16 @@ const App = () => {
                 <p className="mt-1 text-center">
                   Tweets that exceeds the character limit are highlighted in red
                 </p>
+
+                {appError && (
+                  <p className="mt-1 text-center text-red-500">{appError}</p>
+                )}
+
+                {appSuccess && (
+                  <p className="mt-1 text-center text-green-500">
+                    Successfully Tweeted
+                  </p>
+                )}
               </div>
             )}
           </div>

chrome_extension/src/popup/services/apiService.ts

@@ -28,6 +28,16 @@ export const getNotionInfo = async (pageId: string) => {
   return data;
 };
 
+export const isPageTweeted = async (pageId: string) => {
+  const { data } = await client.get("/notion/isTweeted", {
+    params: {
+      pageId,
+    },
+  });
+
+  return data;
+};
+
 export const tweetNotionPage = async (pageId: string) => {
   const { data } = await client.post("/notion/tweet", {
     pageId,

client/prisma/schema.prisma

@@ -31,15 +31,16 @@ model NotionOAuthOptions {
 }
 
 model TwitterThreads {
-  id           String   @id
-  User         User     @relation(fields: [id], references: [id])
+  id           String    @id @default(cuid())
+  User         User      @relation(fields: [id], references: [id])
   tweets       Tweet[]
-  notionPageId String?  @unique
-  postedTime   DateTime @default(now())
+  notionPageId String?   @unique
+  postedTime   DateTime? @default(now())
 }
 
 model Tweet {
-  id     String        @id @default(cuid())
+  itemId String        @id @default(cuid())
+  id     String
   text   String
   images TweetImages[]
 
@@ -50,6 +51,6 @@ model Tweet {
 model TweetImages {
   id      String  @id @default(cuid())
   imageId String
-  tweet   Tweet?  @relation(fields: [tweetId], references: [id])
+  tweet   Tweet?  @relation(fields: [tweetId], references: [itemId])
   tweetId String?
 }

client/src/components/Home/Footer.tsx

@@ -1,25 +1,27 @@
 const Footer = () => {
   return (
-    <div className="mx-auto mt-16 max-w-7xl border-t py-8 text-center">
-      <p>
-        Made For{" "}
-        <a
-          href="https://townhall.hashnode.com/planetscale-hackathon"
-          target="_blank"
-          className="bg-gradient-to-br from-pink-600 to-purple-600 bg-clip-text text-transparent"
-        >
-          Hashnode X PlanetScale
-        </a>{" "}
-        Hackathon By{" "}
-        <a
-          href="https://github.com/osadavc"
-          target="_blank"
-          className="bg-gradient-to-br from-pink-600 to-purple-600 bg-clip-text text-transparent"
-        >
-          Osada Vidath
-        </a>{" "}
-        With ❤️{" "}
-      </p>
+    <div className="mt-16 border-t">
+      <div className="mx-auto max-w-7xl py-8 text-center">
+        <p>
+          Made For{" "}
+          <a
+            href="https://townhall.hashnode.com/planetscale-hackathon"
+            target="_blank"
+            className="bg-gradient-to-br from-pink-600 to-purple-600 bg-clip-text text-transparent"
+          >
+            Hashnode X PlanetScale
+          </a>{" "}
+          Hackathon By{" "}
+          <a
+            href="https://github.com/osadavc"
+            target="_blank"
+            className="bg-gradient-to-br from-pink-600 to-purple-600 bg-clip-text text-transparent"
+          >
+            Osada Vidath
+          </a>{" "}
+          With ❤️{" "}
+        </p>
+      </div>
     </div>
   );
 };

client/src/components/Home/HowTwotion.tsx

@@ -85,7 +85,7 @@ const HowTwotion = () => {
         {why.map((item, index) => (
           <div
             key={index}
-            className="flex w-full flex-col items-center rounded-xl border py-10 px-2 text-center"
+            className="flex w-full flex-col items-center rounded-xl border py-10 px-4 text-center md:px-10"
           >
             <h1 className="text-4xl font-bold">{index + 1}</h1>
             <h2 className="mt-7 mb-3 text-center text-xl font-extrabold capitalize lg:text-2xl">

client/src/pages/api/notion/info.ts

@@ -43,13 +43,15 @@ router.get(async (req, res) => {
       message:
         "You're in the correct database. Create a new page inside it to start creating new twitter thread",
       error: false,
+      code: 1,
     });
   }
 
   if (!notionResponse?.accessToken) {
     return res.status(200).json({
       message: "You need to authorize Notion first",
       error: true,
+      code: 2,
     });
   }
 
@@ -76,6 +78,7 @@ router.get(async (req, res) => {
       message:
         "You're not in the correct database. Please open the connected database",
       error: true,
+      code: 3,
     });
   }
 
@@ -85,8 +88,9 @@ router.get(async (req, res) => {
   ) {
     return res.status(200).json({
       message:
-        "Your page is not in the correct database. Please open a page in the correct database",
+        "Your page is not in the correct database. Please open a page in the correct database to tweet",
       error: true,
+      code: 4,
     });
   }
 

client/src/pages/api/notion/isTweeted.ts

@@ -0,0 +1,72 @@
+import { Client } from "@notionhq/client";
+import prisma from "lib/prisma";
+import { NextApiResponse } from "next";
+import { createRouter } from "next-connect";
+
+import {
+  auth,
+  onError,
+  onNoMatch,
+  NextApiRequestWithUser,
+} from "utils/apiUtils";
+
+const router = createRouter<NextApiRequestWithUser, NextApiResponse>();
+
+router.use(auth);
+
+router.get(async (req, res) => {
+  const pageId = req.query.pageId;
+
+  if (typeof pageId !== "string") {
+    return res.status(200).json({
+      isTweeted: false,
+    });
+  }
+
+  const { notion: notionResponse } = (await prisma.user.findUnique({
+    where: {
+      id: req.user.id,
+    },
+    include: {
+      notion: true,
+    },
+  }))!;
+
+  if (!notionResponse) {
+    return res.status(400).json({ error: "Notion is not configured" });
+  }
+
+  const notion = new Client({
+    auth: notionResponse?.accessToken,
+  });
+
+  const { id } = (
+    await notion.search({
+      page_size: 1,
+      query: pageId,
+    })
+  ).results[0];
+
+  const notionPageId = (
+    await prisma.twitterThreads.findUnique({
+      where: {
+        notionPageId: id,
+      },
+    })
+  )?.notionPageId;
+
+  if (notionPageId) {
+    return res.status(200).json({
+      isTweeted: true,
+    });
+  }
+
+  return res.status(200).json({
+    isTweeted: false,
+  });
+});
+
+export default router.handler({
+  onError,
+  onNoMatch,
+});

client/src/pages/dashboard.tsx

@@ -33,7 +33,9 @@ const Dashboard: NextPage<DashboardProps> = ({
         )}
 
         <InstallExtension />
-        <TwitterThreadList twitterThreads={twitterThreads} />
+        {user.notion?.accessToken && (
+          <TwitterThreadList twitterThreads={twitterThreads} />
+        )}
       </div>
     </div>
   );