feat: chrome extension

apps/extension/src/pages/content/elements/action.component.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, useCallback, useEffect, useState } from 'react';
 import { ProviderInterface } from '@gitroom/extension/providers/provider.interface';
 
-const Comp: FC<{ removeModal: () => void; style: string }> = (props) => {
+const Comp: FC<{ removeModal: () => void; platform: string, style: string }> = (props) => {
   useEffect(() => {
     if (document.querySelector('iframe#modal-postiz')) {
       return;
@@ -23,7 +23,7 @@ const Comp: FC<{ removeModal: () => void; style: string }> = (props) => {
     iframe.style.backgroundColor = 'transparent';
     // @ts-ignore
     iframe.allowTransparency = 'true';
-    iframe.src = import.meta.env.FRONTEND_URL + `/modal/${props.style}`;
+    iframe.src = import.meta.env.FRONTEND_URL + `/modal/${props.style}/${props.platform}`;
     iframe.id = 'modal-postiz';
     iframe.style.width = '100%';
     iframe.style.height = '100%';
@@ -62,24 +62,26 @@ export const ActionComponent: FC<{
   }, []);
 
   useEffect(() => {
+    const blockingDiv = document.createElement('div');
     if (document.querySelector('#blockingDiv')) {
       return;
     }
 
-    // @ts-ignore
-    const targetInformation = target.getBoundingClientRect();
-    const blockingDiv = document.createElement('div');
-    blockingDiv.style.position = 'absolute';
-    blockingDiv.id = 'blockingDiv';
-    blockingDiv.style.cursor = 'pointer';
-    blockingDiv.style.top = `${targetInformation.top}px`;
-    blockingDiv.style.left = `${targetInformation.left}px`;
-    blockingDiv.style.width = `${targetInformation.width}px`;
-    blockingDiv.style.height = `${targetInformation.height}px`;
-    blockingDiv.style.zIndex = '9999';
+    setTimeout(() => {
+      // @ts-ignore
+      const targetInformation = target.getBoundingClientRect();
+      blockingDiv.style.position = 'absolute';
+      blockingDiv.id = 'blockingDiv';
+      blockingDiv.style.cursor = 'pointer';
+      blockingDiv.style.top = `${targetInformation.top}px`;
+      blockingDiv.style.left = `${targetInformation.left}px`;
+      blockingDiv.style.width = `${targetInformation.width}px`;
+      blockingDiv.style.height = `${targetInformation.height}px`;
+      blockingDiv.style.zIndex = '9999';
 
-    document.body.appendChild(blockingDiv);
-    blockingDiv.addEventListener('click', handle);
+      document.body.appendChild(blockingDiv);
+      blockingDiv.addEventListener('click', handle);
+    }, 1000);
     return () => {
       blockingDiv.removeEventListener('click', handle);
       blockingDiv.remove();
@@ -90,7 +92,7 @@ export const ActionComponent: FC<{
     <div className="g-wrapper" style={{ position: 'relative' }}>
       <div className="absolute left-0 top-0 z-[9999] w-full h-full" />
       {modal && (
-        <Comp style={provider.style} removeModal={() => showModal(false)} />
+        <Comp platform={provider.identifier} style={provider.style} removeModal={() => showModal(false)} />
       )}
     </div>
   );

apps/frontend/src/app/(modal)/layout.tsx

@@ -1,28 +1,10 @@
-'use client';
-
 import { ReactNode } from 'react';
-import { PreviewWrapper } from '@gitroom/frontend/components/preview/preview.wrapper';
-import { usePathname } from 'next/navigation';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-dayjs.extend(utc);
+import { AppLayout } from '@gitroom/frontend/components/launches/layout.standalone';
 
-export default async function AppLayout({ children }: { children: ReactNode, params: any }) {
-  const params = usePathname();
-  const style = params.split('/').pop();
-  return (
-    <div className={`hideCopilot ${style} h-[100vh] !padding-[50px] w-full text-textColor flex flex-col !bg-none`}>
-      <style>
-        {`
-          #add-edit-modal, .hideCopilot {
-            background: transparent !important;
-          }
-          html body.dark, html {
-            background: transparent !important;
-          }
-        `}
-      </style>
-      <PreviewWrapper>{children}</PreviewWrapper>
-    </div>
-  );
+export default async function AppLayoutIn({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <AppLayout>{children}</AppLayout>;
 }

apps/frontend/src/app/(modal)/modal/[style]/[platform]/page.tsx

@@ -1,4 +1,6 @@
+'use client';
 import { StandaloneModal } from '@gitroom/frontend/components/standalone-modal/standalone.modal';
+import { usePathname } from 'next/navigation';
 
 export default async function Modal() {
   return (

apps/frontend/src/components/launches/add.edit.model.tsx

@@ -459,7 +459,7 @@ export const AddEditModal: FC<{
       if (customClose) {
         setTimeout(() => {
           customClose();
-        }, 5000);
+        }, 2000);
       }
       modal.closeAll();
     },

apps/frontend/src/components/launches/layout.standalone.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { ReactNode, useMemo } from 'react';
+import { PreviewWrapper } from '@gitroom/frontend/components/preview/preview.wrapper';
+import { usePathname } from 'next/navigation';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+export const AppLayout = ({ children }: { children: ReactNode }) => {
+  const params = usePathname();
+  const style = useMemo(() => {
+    const all = params.split('/');
+    all.pop();
+    return all.pop();
+  }, [params]);
+
+  return (
+    <div className={`hideCopilot ${style} h-[100vh] !padding-[50px] w-full text-textColor flex flex-col !bg-none`}>
+      <style>
+        {`
+          #add-edit-modal, .hideCopilot {
+            background: transparent !important;
+          }
+          html body.dark, html {
+            background: transparent !important;
+          }
+        `}
+      </style>
+      <PreviewWrapper>{children}</PreviewWrapper>
+    </div>
+  );
+}

apps/frontend/src/components/standalone-modal/standalone.modal.tsx

@@ -6,13 +6,20 @@ import useSWR from 'swr';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { AddEditModal } from '@gitroom/frontend/components/launches/add.edit.model';
 import dayjs from 'dayjs';
+import { usePathname } from 'next/navigation';
 
 export const StandaloneModal: FC = () => {
   const fetch = useFetch();
+  const params = usePathname();
+  const style = params.split('/').pop();
   const load = useCallback(async (path: string) => {
     return (await (await fetch(path)).json()).integrations;
   }, []);
 
+  const loadDate = useCallback(async () => {
+    return (await (await fetch('/posts/find-slot')).json()).date;
+  }, []);
+
   const {
     isLoading,
     data: integrations,
@@ -21,8 +28,15 @@ export const StandaloneModal: FC = () => {
     fallbackData: [],
   });
 
-  if (isLoading) {
-    return <div className="w-full h-full flex items-center justify-center">Loading...</div>;
+  const {
+    isLoading: isLoading2,
+    data,
+  } = useSWR('/posts/find-slot', loadDate, {
+    fallbackData: [],
+  });
+
+  if (isLoading || isLoading2) {
+    return null;
   }
 
   return (
@@ -35,7 +49,8 @@ export const StandaloneModal: FC = () => {
       integrations={integrations}
       reopenModal={() => {}}
       allIntegrations={integrations}
-      date={dayjs()}
+      onlyValues={[{ content: 'asd', id: integrations[0].id, image: [] }]}
+      date={dayjs.utc(data).local()}
     />
   );
 };