feat: Removed getServerSide props call to handle localhost deployme…

…nts (#453)
implerhq · Dec 27, 2023 · 7d48477 · 7d48477
2 parents b4e0bd1 + 6efb831
commit 7d48477
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 112 deletions.
diff --git a/apps/web/hooks/useImportDetails.tsx b/apps/web/hooks/useImportDetails.tsx
@@ -11,52 +11,56 @@ import { UpdateImportForm } from '@components/imports/forms/UpdateImportForm';
 import { API_KEYS, MODAL_KEYS, MODAL_TITLES, NOTIFICATION_KEYS, ROUTES } from '@config';
 
 interface useImportDetailProps {
-  template: ITemplate;
+  templateId: string;
 }
 
-export function useImportDetails({ template }: useImportDetailProps) {
+export function useImportDetails({ templateId }: useImportDetailProps) {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { profileInfo } = useAppState();
-  const { refetch: refetchTemplateData, data: templateData } = useQuery(
-    [API_KEYS.TEMPLATE_DETAILS, template._id],
-    () => commonApi<ITemplate>(API_KEYS.TEMPLATE_DETAILS as any, { parameters: [template._id] }),
+  const {
+    data: templateData,
+    refetch: refetchTemplateData,
+    isLoading: isTemplateDataLoading,
+  } = useQuery(
+    [API_KEYS.TEMPLATE_DETAILS, templateId],
+    () => commonApi<ITemplate>(API_KEYS.TEMPLATE_DETAILS as any, { parameters: [templateId] }),
     {
-      initialData: template,
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
+      onError() {
+        router.push(ROUTES.IMPORTS);
+      },
     }
   );
   const { data: columns, isLoading: isColumnListLoading } = useQuery<unknown, IErrorObject, IColumn[], string[]>(
-    [API_KEYS.TEMPLATE_COLUMNS_LIST, template._id],
-    () => commonApi<IColumn[]>(API_KEYS.TEMPLATE_COLUMNS_LIST as any, { parameters: [template._id] })
+    [API_KEYS.TEMPLATE_COLUMNS_LIST, templateId],
+    () => commonApi<IColumn[]>(API_KEYS.TEMPLATE_COLUMNS_LIST as any, { parameters: [templateId] })
   );
 
   const { mutate: updateImport } = useMutation<ITemplate, IErrorObject, IUpdateTemplateData, (string | undefined)[]>(
-    [API_KEYS.TEMPLATE_UPDATE, template._id],
+    [API_KEYS.TEMPLATE_UPDATE, templateId],
     (data) =>
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      commonApi<ITemplate>(API_KEYS.TEMPLATE_UPDATE as any, { parameters: [template._id], body: { ...data } }),
+      commonApi<ITemplate>(API_KEYS.TEMPLATE_UPDATE as any, { parameters: [templateId], body: { ...data } }),
     {
       onSuccess: (data) => {
         modals.close(MODAL_KEYS.IMPORT_UPDATE);
         queryClient.setQueryData<ITemplate[]>([API_KEYS.TEMPLATES_LIST, profileInfo!._projectId], (oldData) =>
           oldData?.map((item) => (item._id === data._id ? data : item))
         );
-        queryClient.setQueryData<ITemplate>([API_KEYS.TEMPLATE_DETAILS, template._id], data);
+        queryClient.setQueryData<ITemplate>([API_KEYS.TEMPLATE_DETAILS, templateId], data);
         notify(NOTIFICATION_KEYS.IMPORT_UPDATED);
       },
     }
   );
   const { mutate: deleteImport } = useMutation<ITemplate, IErrorObject, void, (string | undefined)[]>(
-    [API_KEYS.TEMPLATE_DELETE, template._id],
-    () => commonApi<ITemplate>(API_KEYS.TEMPLATE_DELETE as any, { parameters: [template._id] }),
+    [API_KEYS.TEMPLATE_DELETE, templateId],
+    () => commonApi<ITemplate>(API_KEYS.TEMPLATE_DELETE as any, { parameters: [templateId] }),
     {
       onSuccess: () => {
         queryClient.setQueryData<ITemplate[]>([API_KEYS.TEMPLATES_LIST, profileInfo!._projectId], (oldData) =>
-          oldData?.filter((item) => item._id !== template._id)
+          oldData?.filter((item) => item._id !== templateId)
         );
-        queryClient.removeQueries([API_KEYS.TEMPLATE_DETAILS, template._id]);
+        queryClient.removeQueries([API_KEYS.TEMPLATE_DETAILS, templateId]);
         notify(NOTIFICATION_KEYS.IMPORT_DELETED);
         router.replace(ROUTES.IMPORTS);
       },
@@ -74,12 +78,13 @@ export function useImportDetails({ template }: useImportDetailProps) {
   };
 
   const onUpdateClick = () => {
-    modals.open({
-      modalId: MODAL_KEYS.IMPORT_UPDATE,
-      title: MODAL_TITLES.IMPORT_UPDATE,
+    if (templateData)
+      modals.open({
+        modalId: MODAL_KEYS.IMPORT_UPDATE,
+        title: MODAL_TITLES.IMPORT_UPDATE,
 
-      children: <UpdateImportForm onSubmit={updateImport} data={templateData} />,
-    });
+        children: <UpdateImportForm onSubmit={updateImport} data={templateData} />,
+      });
   };
 
   const onSpreadsheetImported = () => {
@@ -97,6 +102,7 @@ export function useImportDetails({ template }: useImportDetailProps) {
     onUpdateClick,
     onDeleteClick,
     isColumnListLoading,
+    isTemplateDataLoading,
     onSpreadsheetImported,
   };
 }
diff --git a/apps/web/pages/imports/[id].tsx b/apps/web/pages/imports/[id].tsx
@@ -1,13 +1,11 @@
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
-import { GetServerSideProps } from 'next';
-import { ActionIcon, Flex, Group, Title, useMantineTheme } from '@mantine/core';
+import { useRouter } from 'next/router';
+import { ActionIcon, Flex, Group, LoadingOverlay, Title, useMantineTheme } from '@mantine/core';
 
-import { commonApi } from '@libs/api';
-import { ITemplate } from '@impler/shared';
+import { ROUTES, colors } from '@config';
 import { useImpler } from '@impler/react';
 import { useImportDetails } from '@hooks/useImportDetails';
-import { API_KEYS, CONSTANTS, ROUTES, colors } from '@config';
 
 import { Tabs } from '@ui/Tabs';
 import { Button } from '@ui/button';
@@ -32,32 +30,38 @@ const Validator = dynamic(() => import('@components/imports/validator').then((mo
   ssr: false,
 });
 
-interface ImportDetailProps {
-  template: ITemplate;
-}
-
-export default function ImportDetails({ template }: ImportDetailProps) {
+export default function ImportDetails({}) {
+  const router = useRouter();
   const { colorScheme } = useMantineTheme();
-  const { onUpdateClick, onDeleteClick, templateData, profileInfo, onSpreadsheetImported, columns } = useImportDetails({
-    template,
+  const {
+    columns,
+    templateData,
+    profileInfo,
+    onUpdateClick,
+    onDeleteClick,
+    isTemplateDataLoading,
+    onSpreadsheetImported,
+  } = useImportDetails({
+    templateId: router.query.id as string,
   });
   const { showWidget, isImplerInitiated } = useImpler({
-    templateId: template._id,
-    projectId: template._projectId,
-    accessToken: profileInfo?.accessToken,
     primaryColor: colors.blue,
+    templateId: templateData?._id,
+    projectId: templateData?._projectId,
+    accessToken: profileInfo?.accessToken,
     onUploadComplete: onSpreadsheetImported,
   });
 
   return (
-    <Flex gap="sm" direction="column" h="100%">
+    <Flex gap="sm" direction="column" h="100%" style={{ position: 'relative' }}>
+      <LoadingOverlay visible={isTemplateDataLoading} />
       <Flex justify="space-between">
         <Group spacing="xs">
           <Button variant="outline" component={Link} href={ROUTES.IMPORTS} color="invariant">
             <LeftArrowIcon />
           </Button>
           <Group spacing={0}>
-            <Title order={2}>{templateData.name}</Title>
+            <Title order={2}>{templateData?.name}</Title>
             <ActionIcon onClick={onUpdateClick} p={0}>
               <EditIcon color={colors.blue} size="sm" />
             </ActionIcon>
@@ -66,7 +70,7 @@ export default function ImportDetails({ template }: ImportDetailProps) {
         <Group spacing="xs">
           <Button
             // eslint-disable-next-line no-magic-numbers
-            disabled={!isImplerInitiated || columns?.length === 0}
+            disabled={!isImplerInitiated || columns?.length === 0 || isTemplateDataLoading}
             color="green"
             onClick={() => showWidget({ colorScheme })}
           >
@@ -77,79 +81,52 @@ export default function ImportDetails({ template }: ImportDetailProps) {
           </Button>
         </Group>
       </Flex>
-      <Tabs
-        keepMounted={false}
-        items={[
-          {
-            value: 'schema',
-            title: 'Schema',
-            icon: <OneIcon size="xs" />,
-            content: <Schema templateId={template._id} />,
-          },
-          {
-            value: 'destination',
-            title: 'Destination',
-            icon: <TwoIcon size="xs" />,
-            content: <Destination template={template} accessToken={profileInfo?.accessToken} />,
-          },
-          {
-            value: 'snippet',
-            title: 'Snippet',
-            icon: <ThreeIcon size="xs" />,
-            content: (
-              <Snippet
-                templateId={template._id}
-                projectId={template._projectId}
-                accessToken={profileInfo?.accessToken}
-              />
-            ),
-          },
-          {
-            value: 'validator',
-            title: 'Validator',
-            icon: <FourIcon size="xs" />,
-            content: <Validator templateId={template._id} />,
-          },
-          {
-            value: 'output',
-            title: 'Output',
-            icon: <FiveIcon size="xs" />,
-            content: <Editor templateId={template._id} />,
-          },
-        ]}
-        defaultValue="schema"
-      />
+      {templateData && (
+        <Tabs
+          keepMounted={false}
+          items={[
+            {
+              value: 'schema',
+              title: 'Schema',
+              icon: <OneIcon size="xs" />,
+              content: <Schema templateId={templateData._id} />,
+            },
+            {
+              value: 'destination',
+              title: 'Destination',
+              icon: <TwoIcon size="xs" />,
+              content: <Destination template={templateData} accessToken={profileInfo?.accessToken} />,
+            },
+            {
+              value: 'snippet',
+              title: 'Snippet',
+              icon: <ThreeIcon size="xs" />,
+              content: (
+                <Snippet
+                  templateId={templateData._id}
+                  projectId={templateData._projectId}
+                  accessToken={profileInfo?.accessToken}
+                />
+              ),
+            },
+            {
+              value: 'validator',
+              title: 'Validator',
+              icon: <FourIcon size="xs" />,
+              content: <Validator templateId={templateData._id} />,
+            },
+            {
+              value: 'output',
+              title: 'Output',
+              icon: <FiveIcon size="xs" />,
+              content: <Editor templateId={templateData._id} />,
+            },
+          ]}
+          defaultValue="schema"
+        />
+      )}
     </Flex>
   );
 }
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
-  try {
-    const templateId = context.params?.id as string | undefined;
-    const authenticationToken = context.req.cookies[CONSTANTS.AUTH_COOKIE_NAME];
-    if (!templateId || !authenticationToken) throw new Error();
-    const template = await commonApi<ITemplate>(API_KEYS.TEMPLATE_DETAILS as any, {
-      parameters: [templateId],
-      cookie: `${CONSTANTS.AUTH_COOKIE_NAME}=${authenticationToken}`,
-    });
-
-    if (!template) throw new Error();
-
-    return {
-      props: {
-        title: template.name,
-        template,
-      },
-    };
-  } catch (error) {
-    return {
-      redirect: {
-        permanent: false,
-        destination: ROUTES.IMPORTS,
-      },
-      props: {},
-    };
-  }
-};
-
 ImportDetails.Layout = AppLayout;
diff --git a/packages/react/src/hooks/useImpler.ts b/packages/react/src/hooks/useImpler.ts
@@ -12,8 +12,8 @@ interface ShowWidgetProps {
 }
 
 interface UseImplerProps {
-  projectId: string;
   title?: string;
+  projectId?: string;
   templateId?: string;
   accessToken?: string;
   primaryColor?: string;