From 1ab3a837f96b75530c1eb40124ff1add45f8a866 Mon Sep 17 00:00:00 2001
From: Nabarun <nabarun@deepstacksoft.com>
Date: Tue, 12 Nov 2024 11:32:53 +0530
Subject: [PATCH] Fix duplicate component rendering in project create flow

---
 .../components/projects/create/Configure.tsx  |  11 +-
 .../pages/org-slug/projects/create/layout.tsx | 126 +++++++++---------
 2 files changed, 69 insertions(+), 68 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 6c500d30..a179ba92 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@@ -581,11 +581,6 @@ const Configure = () => {
                   onAccountChange={onAccountChange}
                   isDataReceived={isAccountsDataReceived}
                 />
-                <IFrameModal
-                  setAccounts={setAccounts}
-                  setIsDataReceived={setIsAccountsDataReceived}
-                  isVisible={isFrameVisible}
-                />
                 {accounts.length > 0 && (
                   <div>
                     <Button
@@ -617,6 +612,12 @@ const Configure = () => {
             )}
           </form>
         </FormProvider>
+
+        <IFrameModal
+          setAccounts={setAccounts}
+          setIsDataReceived={setIsAccountsDataReceived}
+          isVisible={isFrameVisible}
+        />
       </div>
     </div>
   );
diff --git a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
index 32c13b78..ab63c951 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
@@ -1,12 +1,14 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Link, Outlet, useParams } from 'react-router-dom';
+import { useMediaQuery } from 'usehooks-ts';
+
+import * as Dialog from '@radix-ui/react-dialog';
 
 import { Heading } from 'components/shared/Heading';
 import { WavyBorder } from 'components/shared/WavyBorder';
 import { Button } from 'components/shared/Button';
 import { CrossIcon } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
-import * as Dialog from '@radix-ui/react-dialog';
 
 export interface CreateProjectLayoutProps
   extends ComponentPropsWithoutRef<'section'> {}
@@ -16,6 +18,7 @@ export const CreateProjectLayout = ({
   ...props
 }: CreateProjectLayoutProps) => {
   const { orgSlug } = useParams();
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
 
   const closeBtnLink = `/${orgSlug}`;
 
@@ -28,72 +31,69 @@ export const CreateProjectLayout = ({
     </Heading>
   );
 
-  return (
-    <>
-      {/* Desktop */}
-      <section
-        {...props}
-        className={cn(
-          'dark:bg-background h-full flex-col hidden md:flex',
-          className,
-        )}
-      >
-        <div className="sticky top-0">
-          <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
-            {heading}
+  return isDesktopView ? (
+    // Desktop
+    <section
+      {...props}
+      className={cn(
+        'dark:bg-background h-full flex-col hidden md:flex',
+        className,
+      )}
+    >
+      <div className="sticky top-0">
+        <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
+          {heading}
 
-            {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
-            <Link to={closeBtnLink}>
-              <Button
-                iconOnly
-                variant="primary"
-                leftIcon={<CrossIcon />}
-                aria-label="close"
-              />
-            </Link>
-          </div>
-          <WavyBorder />
+          {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
+          <Link to={closeBtnLink}>
+            <Button
+              iconOnly
+              variant="primary"
+              leftIcon={<CrossIcon />}
+              aria-label="close"
+            />
+          </Link>
         </div>
-
-        <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
-          <Outlet />
-        </section>
+        <WavyBorder />
+      </div>
+      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+        <Outlet />
       </section>
+    </section>
+  ) : (
+    // Mobile
+    // Setting modal={false} so even if modal is active on desktop, it doesn't block clicks
+    <Dialog.Root modal={false} open={true}>
+      <Dialog.Portal>
+        {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
+        <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
+          <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
+            {/* Heading */}
+            <div className="flex px-6 py-4 h-20 items-center gap-4">
+              {heading}
+              <Dialog.Close asChild>
+                <Link to={closeBtnLink}>
+                  <Button
+                    iconOnly
+                    variant="tertiary"
+                    leftIcon={<CrossIcon />}
+                    aria-label="close"
+                    size="sm"
+                  />
+                </Link>
+              </Dialog.Close>
+            </div>
 
-      {/* Mobile */}
-      {/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
-      <Dialog.Root modal={false} open={true}>
-        <Dialog.Portal>
-          {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
-          <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
-            <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
-              {/* Heading */}
-              <div className="flex px-6 py-4 h-20 items-center gap-4">
-                {heading}
-                <Dialog.Close asChild>
-                  <Link to={closeBtnLink}>
-                    <Button
-                      iconOnly
-                      variant="tertiary"
-                      leftIcon={<CrossIcon />}
-                      aria-label="close"
-                      size="sm"
-                    />
-                  </Link>
-                </Dialog.Close>
-              </div>
+            {/* Border */}
+            <WavyBorder />
 
-              {/* Border */}
-              <WavyBorder />
-
-              {/* Page content */}
-              <div className="px-4 py-6">
-                <Outlet />
-              </div>
-            </Dialog.Content>
-          </div>
-        </Dialog.Portal>
-      </Dialog.Root>
-    </>
+            {/* Page content */}
+            <div className="px-4 py-6">
+              <Outlet />
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 };