Show banner modal code everywhere

ninjavic · Sep 13, 2023 · 27a0bd0 · 27a0bd0
1 parent de79972
commit 27a0bd0
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 28 deletions.
diff --git a/app/account/tools/page.tsx b/app/account/tools/page.tsx
@@ -1,11 +1,9 @@
 'use client';
 
-import CodeBlock from '@/components/CodeBlock';
 import { IconCodeBracket, IconLoading, IconPencilSquare, IconTrash } from '@/components/Icons';
 import { useSupabase } from '@/components/supabase/provider';
-import Button from '@/components/ui/Button/Button';
 import LinkItem from '@/components/ui/Link/LinkItem';
-import Modal from '@/components/ui/Modal';
+import ModalBannerCode from '@/components/ui/ModalBannerCode';
 
 import Logo from '@/components/ui/ToolCard/Tool.Logo';
 import Name from '@/components/ui/ToolCard/Tool.Name';
@@ -34,15 +32,6 @@ export default () => {
       setTools([...(data as [])]);
       setLoad(false);
     });
-    let getToolFromLocalStorage = localStorage.getItem('last-tool');
-
-    if (getToolFromLocalStorage) {
-      const parsedTool = JSON.parse(getToolFromLocalStorage) as { toolSlug: string; launchEnd: string; launchDate: string };
-      if (new Date(parsedTool.launchEnd).getTime() >= Date.now()) {
-        setToolSlug(parsedTool.toolSlug);
-        setModalOpen(true);
-      }
-    }
   }, []);
 
   const handleDeleteConfirm = (id: number, idx: number) => {
@@ -136,20 +125,13 @@ export default () => {
           <div className="font-medium text-slate-400">No launches found.</div>
         )}
       </ul>
-      <Modal variant="custom" isActive={isModalOpen} onCancel={() => setModalOpen(false)}>
-        <h3 className="text-slate-50 font-medium">Add banner</h3>
-        <p className="text-slate-300 text-sm mt-2">
-          Add this code between <b>{'<head>'}</b> tags in your website to show a banner about your launch.
-        </p>
-        <div className="mt-6">
-          <CodeBlock onCopy={copyDone}>
-            {`<script defer data-url="https://devhunt.org/tool/${toolSlug}" src="https://cdn.jsdelivr.net/gh/sidiDev/devhunt-banner/index.js" />`}
-          </CodeBlock>
-        </div>
-        <Button className="mt-3 ring-offset-2 ring-orange-500 focus:ring-2" onClick={copyDone}>
-          I've done this
-        </Button>
-      </Modal>
+      <ModalBannerCode
+        isModalOpen={isModalOpen}
+        toolSlug={toolSlug}
+        setModalOpen={setModalOpen}
+        setToolSlug={setToolSlug}
+        copyDone={copyDone}
+      />
     </section>
   );
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,6 +14,7 @@ import ProfileService from '@/utils/supabase/services/profile';
 import ChatWindow from '@/components/ui/ChatWindow';
 import Banner from '@/components/ui/Banner';
 import ProgressBarClient from '@/components/ui/ProgressBarClient';
+import ModalBannerCodeClient from '@/components/ui/ModalBannerCode/ModalBannerCodeClient';
 
 export type TypedSupabaseClient = SupabaseClient<Database>;
 
@@ -84,6 +85,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             <SupabaseListener serverAccessToken={session?.access_token} />
             <Banner />
             <Navbar />
+            <ModalBannerCodeClient />
             {children}
             <ProgressBarClient />
             <Footer />

diff --git a/components/ui/CommandPalette/CommandPalette.tsx b/components/ui/CommandPalette/CommandPalette.tsx
@@ -53,8 +53,6 @@ export default ({
     setCommandActive(false);
   };
 
-  console.log(trendingTools);
-
   return isCommandActive ? (
     <div className="fixed z-30 w-full h-full inset-0 rounded-xl flex items-center justify-center px-4">
       <BlurBackground isActive={true} setActive={setCommandActive} />

diff --git a/components/ui/ModalBannerCode/ModalBannerCodeClient.tsx b/components/ui/ModalBannerCode/ModalBannerCodeClient.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import ModalBannerCode from '@/components/ui/ModalBannerCode';
+import { useState } from 'react';
+
+export default () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [toolSlug, setToolSlug] = useState('');
+
+  const copyDone = () => {
+    localStorage.removeItem('last-tool');
+    setModalOpen(false);
+  };
+
+  return (
+    <ModalBannerCode
+      isModalOpen={isModalOpen}
+      toolSlug={toolSlug}
+      setModalOpen={setModalOpen}
+      setToolSlug={setToolSlug}
+      copyDone={copyDone}
+    />
+  );
+};
diff --git a/components/ui/ModalBannerCode/index.tsx b/components/ui/ModalBannerCode/index.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import CodeBlock from '@/components/CodeBlock';
+import Button from '@/components/ui/Button/Button';
+import Modal from '@/components/ui/Modal';
+import { useEffect, useState } from 'react';
+
+export default ({
+  toolSlug = '',
+  isModalOpen,
+  setModalOpen,
+  setToolSlug,
+  copyDone,
+}: {
+  toolSlug: string;
+  isModalOpen: boolean;
+  setModalOpen: (val: boolean) => void;
+  setToolSlug: (val: string) => void;
+  copyDone: () => void;
+}) => {
+  useEffect(() => {
+    let getToolFromLocalStorage = localStorage.getItem('last-tool');
+
+    if (getToolFromLocalStorage) {
+      const parsedTool = JSON.parse(getToolFromLocalStorage) as { toolSlug: string; launchEnd: string; launchDate: string };
+      if (new Date(parsedTool.launchEnd).getTime() >= Date.now()) {
+        setToolSlug(parsedTool.toolSlug);
+        setModalOpen(true);
+      }
+    }
+  }, []);
+
+  return (
+    <Modal variant="custom" isActive={isModalOpen}>
+      <h3 className="text-slate-50 font-medium">Add banner</h3>
+      <p className="text-slate-300 text-sm mt-2">
+        Add this code between <b>{'<head>'}</b> tags in your website to show a banner about your launch.
+      </p>
+      <div className="mt-6">
+        <CodeBlock onCopy={copyDone}>
+          {`<script defer data-url="https://devhunt.org/tool/${toolSlug}" src="https://cdn.jsdelivr.net/gh/sidiDev/devhunt-banner/index.js" />`}
+        </CodeBlock>
+      </div>
+      <Button className="mt-3 ring-offset-2 ring-orange-500 focus:ring-2" onClick={copyDone}>
+        I've done this
+      </Button>
+    </Modal>
+  );
+};
+
+// {"toolSlug":"fdsfdsg","launchDate":"2023-10-10","launchEnd":"2023-10-16T23:59:59+00:00"}