cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 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} onAccountChange={onAccountChange}
isDataReceived={isAccountsDataReceived} isDataReceived={isAccountsDataReceived}
/> />
<IFrameModal
setAccounts={setAccounts}
setIsDataReceived={setIsAccountsDataReceived}
isVisible={isFrameVisible}
/>
{accounts.length > 0 && ( {accounts.length > 0 && (
<div> <div>
<Button <Button
@ -617,6 +612,12 @@ const Configure = () => {
)} )}
</form> </form>
</FormProvider> </FormProvider>
<IFrameModal
setAccounts={setAccounts}
setIsDataReceived={setIsAccountsDataReceived}
isVisible={isFrameVisible}
/>
</div> </div>
</div> </div>
); );

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

@ -1,12 +1,14 @@
import { ComponentPropsWithoutRef } from 'react'; import { ComponentPropsWithoutRef } from 'react';
import { Link, Outlet, useParams } from 'react-router-dom'; 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 { Heading } from 'components/shared/Heading';
import { WavyBorder } from 'components/shared/WavyBorder'; import { WavyBorder } from 'components/shared/WavyBorder';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { CrossIcon } from 'components/shared/CustomIcon'; import { CrossIcon } from 'components/shared/CustomIcon';
import { cn } from 'utils/classnames'; import { cn } from 'utils/classnames';
import * as Dialog from '@radix-ui/react-dialog';
export interface CreateProjectLayoutProps export interface CreateProjectLayoutProps
extends ComponentPropsWithoutRef<'section'> {} extends ComponentPropsWithoutRef<'section'> {}
@ -16,6 +18,7 @@ export const CreateProjectLayout = ({
...props ...props
}: CreateProjectLayoutProps) => { }: CreateProjectLayoutProps) => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
const closeBtnLink = `/${orgSlug}`; const closeBtnLink = `/${orgSlug}`;
@ -28,72 +31,69 @@ export const CreateProjectLayout = ({
</Heading> </Heading>
); );
return ( return isDesktopView ? (
<> // Desktop
{/* Desktop */} <section
<section {...props}
{...props} className={cn(
className={cn( 'dark:bg-background h-full flex-col hidden md:flex',
'dark:bg-background h-full flex-col hidden md:flex', className,
className, )}
)} >
> <div className="sticky top-0">
<div className="sticky top-0"> <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
<div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4"> {heading}
{heading}
{/* Cannot save btn as variable since responsive variant don't work with compoundVariant */} {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
<Link to={closeBtnLink}> <Link to={closeBtnLink}>
<Button <Button
iconOnly iconOnly
variant="primary" variant="primary"
leftIcon={<CrossIcon />} leftIcon={<CrossIcon />}
aria-label="close" aria-label="close"
/> />
</Link> </Link>
</div>
<WavyBorder />
</div> </div>
<WavyBorder />
<section className="px-6 h-full flex-1 py-6 overflow-y-auto"> </div>
<Outlet /> <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
</section> <Outlet />
</section> </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 */} {/* Border */}
{/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */} <WavyBorder />
<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 */} {/* Page content */}
<WavyBorder /> <div className="px-4 py-6">
<Outlet />
{/* Page content */} </div>
<div className="px-4 py-6"> </Dialog.Content>
<Outlet /> </div>
</div> </Dialog.Portal>
</Dialog.Content> </Dialog.Root>
</div>
</Dialog.Portal>
</Dialog.Root>
</>
); );
}; };