Show modal with banner code everytime someone launch new tool

ninjavic · Sep 1, 2023 · 2cacc72 · 2cacc72
1 parent cba39c3
commit 2cacc72
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/app/account/tools/new/page.tsx b/app/account/tools/new/page.tsx
@@ -160,7 +160,7 @@ export default () => {
             comments_count: 0,
             votes_count: 0,
             demo_video_url: demo_video,
-            launch_date: weekData?.startDate,
+            launch_date: weekData?.startDate as string,
             launch_start: weekData?.startDate,
             launch_end: weekData?.endDate,
             week: parseInt(week),
@@ -169,20 +169,18 @@ export default () => {
         )
         .then(async res => {
           const DISCORD_TOOL_WEBHOOK = process.env.DISCOR_TOOL_WEBHOOK as string;
-          const content = `**${res?.name}** by ${profile?.full_name} [open the tool](https://devhunt.org/tool/${res?.slug})`;
-          if (DISCORD_TOOL_WEBHOOK) await axios.post(DISCORD_TOOL_WEBHOOK, { content });
-          // await usermaven.id({
-          //   id: profile?.id,
-          //   company: {
-          //     id: res?.id + '',
-          //     name: res?.name as string,
-          //     created_at: new Date().toLocaleString(),
-          //     custom: {
-          //       url: `https://devhunt.org/tool/${res?.slug}`,
-          //     }, // Add the 'custom' property
-          //   },
-          // });
+          const toolURL = `https://devhunt.org/tool/${res?.slug}`;
+          const content = `**${res?.name}** by ${profile?.full_name} [open the tool](${toolURL})`;
+          DISCORD_TOOL_WEBHOOK ? await axios.post(DISCORD_TOOL_WEBHOOK, { content }) : '';
           setLaunching(false);
+          localStorage.setItem(
+            'last-tool',
+            JSON.stringify({
+              toolSlug: res?.slug,
+              launchDate: res?.launch_date,
+              launchEnd: res?.launch_end,
+            }),
+          );
           window.open(`/tool/${res?.slug}`);
           router.push('/account/tools');
         });

diff --git a/app/account/tools/page.tsx b/app/account/tools/page.tsx
@@ -3,6 +3,7 @@
 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';
 
@@ -26,12 +27,22 @@ export default () => {
   const [isLoad, setLoad] = useState(true);
   const [tools, setTools] = useState([]);
   const [isModalOpen, setModalOpen] = useState(false);
+  const [toolSlug, setToolSlug] = useState('');
 
   useEffect(() => {
     toolsList.then(data => {
       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) => {
@@ -43,6 +54,11 @@ export default () => {
     }
   };
 
+  const copyDone = () => {
+    localStorage.removeItem('last-tool');
+    setModalOpen(false);
+  };
+
   return (
     <section className="container-custom-screen min-h-screen mt-14">
       <div className="items-start justify-between py-4 md:flex">
@@ -93,7 +109,13 @@ export default () => {
                       >
                         <IconTrash />
                       </button>
-                      <button onClick={() => setModalOpen(true)} className="inline-block text-slate-400 hover:text-slate-500 duration-150">
+                      <button
+                        onClick={() => {
+                          setToolSlug(tool.slug);
+                          setModalOpen(true);
+                        }}
+                        className="inline-block text-slate-400 hover:text-slate-500 duration-150"
+                      >
                         <IconCodeBracket />
                       </button>
                     </div>
@@ -108,23 +130,26 @@ export default () => {
                   </div>
                 </div>
               </li>
-              <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>
-                    {`<script defer data-url="https://devhunt.org/tool/${tool.slug}" src="https://cdn.jsdelivr.net/gh/sidiDev/devhunt-banner/index.js" />`}
-                  </CodeBlock>
-                </div>
-              </Modal>
             </>
           ))
         ) : (
           <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>
     </section>
   );
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -74,7 +74,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             />
           </>
         )}
-        {/* <Script defer data-url="https://devhunt.org/tool/maige" src="https://cdn.jsdelivr.net/gh/sidiDev/devhunt-banner/index.js" /> */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
       </head>

diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
@@ -5,10 +5,11 @@ import { IconClipboard } from './Icons';
 
 type Props = {
   children?: string;
+  onCopy?: () => void;
 };
 
 export default (props: Props) => {
-  const { children } = props;
+  const { children, onCopy = () => {} } = props;
 
   const [copyState, setCopyState] = useState<boolean>(false);
 
@@ -17,6 +18,7 @@ export default (props: Props) => {
     navigator.clipboard.writeText(children || '').then(
       function () {
         setCopyState(true);
+        onCopy();
       },
       function (err) {
         console.error('Async: Could not copy text: ', err);

diff --git a/components/supabase/listener.tsx b/components/supabase/listener.tsx
@@ -8,7 +8,7 @@ import { useSupabase } from './provider';
 // this method avoids the need to pass a session down to child components
 // in order to re-render when the user's session changes
 // #elegant!
-export default function SupabaseListener({ serverAccessToken }: { serverAccessToken?: string }): void {
+export default function SupabaseListener({ serverAccessToken }: { serverAccessToken?: string }): any {
   const { supabase } = useSupabase();
   const router = useRouter();
-Original file line number
+Diff line change
@@ Expand Up @@
                 />
               </>
             )}
-            {/* <Script defer data-url="https://devhunt.org/tool/maige" src="https://cdn.jsdelivr.net/gh/sidiDev/devhunt-banner/index.js" /> */}
             <meta name="twitter:card" content="summary_large_image" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
           </head>
@@ Expand Down @@