cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix duplicate component rendering in project create flow

Browse Source
This commit is contained in:
Nabarun 2024-11-12 11:32:53 +05:30
parent e0890a72b5
commit 1ab3a837f9
2 changed files with 69 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -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>
);

126
packages/frontend/src/pages/org-slug/projects/create/layout.tsx
View File

@ -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>
);
};