diff --git a/apps/extension/src/pages/content/elements/action.component.tsx b/apps/extension/src/pages/content/elements/action.component.tsx index d959c06e..07025f28 100644 --- a/apps/extension/src/pages/content/elements/action.component.tsx +++ b/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<{
{modal && ( - showModal(false)} /> + showModal(false)} /> )}
); diff --git a/apps/frontend/src/app/(modal)/layout.tsx b/apps/frontend/src/app/(modal)/layout.tsx index 3af59544..b3a3a33e 100644 --- a/apps/frontend/src/app/(modal)/layout.tsx +++ b/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 ( -
- - {children} -
- ); +export default async function AppLayoutIn({ + children, +}: { + children: ReactNode; +}) { + return {children}; } diff --git a/apps/frontend/src/app/(modal)/modal/[style]/page.tsx b/apps/frontend/src/app/(modal)/modal/[style]/[platform]/page.tsx similarity index 79% rename from apps/frontend/src/app/(modal)/modal/[style]/page.tsx rename to apps/frontend/src/app/(modal)/modal/[style]/[platform]/page.tsx index f3fa9c07..73978fb5 100644 --- a/apps/frontend/src/app/(modal)/modal/[style]/page.tsx +++ b/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 ( diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index 26768c06..9c79be98 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/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(); }, diff --git a/apps/frontend/src/components/launches/layout.standalone.tsx b/apps/frontend/src/components/launches/layout.standalone.tsx new file mode 100644 index 00000000..a151d686 --- /dev/null +++ b/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 ( +
+ + {children} +
+ ); +} diff --git a/apps/frontend/src/components/standalone-modal/standalone.modal.tsx b/apps/frontend/src/components/standalone-modal/standalone.modal.tsx index 05e59015..cac6438e 100644 --- a/apps/frontend/src/components/standalone-modal/standalone.modal.tsx +++ b/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
Loading...
; + 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()} /> ); };