Skip to content

Commit

Permalink
Refactor/i m reading the doc (#28)
Browse files Browse the repository at this point in the history
* remove <head> tag added manually, use <Script> and add favicon in Metadata

* remove unused code file and rename others

* remove onLogin props by using <Link> tag on landing page and rename feature by logic

* refactor(front): update every components

* fix: error on build baseUrl fixed
  • Loading branch information
dorian-grst authored Oct 28, 2024
1 parent 576bb0f commit 2c69429
Show file tree
Hide file tree
Showing 39 changed files with 1,048 additions and 1,235 deletions.
8 changes: 4 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 23 additions & 29 deletions src/app/(gistLayout)/layout-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { TeamListFeature } from '@/components/feature/team-list-feature'
import { OrgListFeature } from '@/components/logic/org-list-logic'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
import { Button } from '@/components/shadcn/button'
import { Codearea } from '@/components/shadcn/codearea'
import { Input } from '@/components/shadcn/input'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/shadcn/tooltip'
import MenuButton from '@/components/ui/menu-button'
import { Modal } from '@/components/ui/modal'
import { ProfileDropdown } from '@/components/ui/profile-dropdown'
import Shortcut from '@/components/ui/shortcut'
import TooltipShortcut, { TooltipShortcutTrigger } from '@/components/ui/tooltip-shortcut'
import { getLanguage } from '@/lib/language'
import { FileCodeIcon, LucidePencil, Menu, PlusIcon } from 'lucide-react'
import { useState } from 'react'
Expand All @@ -16,21 +16,21 @@ interface GistLayoutProps {
username: string
avatar: string
children: React.ReactNode
onMyGistsClick: () => void
onCreateTeamClick: (name: string) => void
onCreateGistClick: (name: string, content: string) => void
onLogoutClick: () => void
onMyGists: () => void
onCreateOrg: (name: string) => void
onCreateGist: (name: string, content: string) => void
onLogout: () => void
}

export default function GistLayout({ avatar, children, username, onMyGistsClick, onCreateTeamClick, onCreateGistClick, onLogoutClick }: GistLayoutProps) {
export default function GistLayout({ avatar, children, username, onMyGists, onCreateOrg, onCreateGist, onLogout }: GistLayoutProps) {
const [gistName, setGistName] = useState('')
const [gistContent, setGistContent] = useState('')
const [teamName, setTeamName] = useState('')
const [orgName, setOrgName] = useState('')

const language = getLanguage(gistName)

const handleCreateGistClick = () => {
onCreateGistClick(gistName, gistContent)
onCreateGist(gistName, gistContent)
setGistName('')
setGistContent('')
}
Expand All @@ -44,26 +44,20 @@ export default function GistLayout({ avatar, children, username, onMyGistsClick,
<AvatarImage src={avatar} />
<AvatarFallback className="bg-muted-foreground">{username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
<ProfileDropdown username={username} onLogoutClick={onLogoutClick} />
<ProfileDropdown username={username} onLogout={onLogout} />
</div>

<Modal
title="New Gist"
trigger={
<div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
<LucidePencil className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent className="flex flex-row gap-2 justify-center items-center">
<span>Create a new Gist</span>
<Shortcut letter="C" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipShortcut tooltip="Create a new Gist" shortcuts={['C']}>
<TooltipShortcutTrigger>
<Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
<LucidePencil className="w-4 h-4" />
</Button>
</TooltipShortcutTrigger>
</TooltipShortcut>
</div>
}
content={
Expand All @@ -80,29 +74,29 @@ export default function GistLayout({ avatar, children, username, onMyGistsClick,
></Modal>
</div>
<div className="flex flex-col gap-2">
<MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGistsClick} href="/mygist" className="w-full">
<MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGists} href="/mygist" className="w-full">
My Gists
</MenuButton>
<Modal
trigger={
<MenuButton icon={<PlusIcon />} variant="menu" size="menu" letter="T" className="w-full">
Create team
Create org
</MenuButton>
}
title="Create Team"
title="Create Org"
content={
<div className="flex flex-col gap-3">
<Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Team name" value={teamName} onChange={(e) => setTeamName(e.target.value)} />
<Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Org name" value={orgName} onChange={(e) => setOrgName(e.target.value)} />
</div>
}
footer={
<MenuButton variant="default" size="sm" onClick={() => onCreateTeamClick(teamName)} className="">
<MenuButton variant="default" size="sm" onClick={() => onCreateOrg(orgName)} className="">
Create
</MenuButton>
}
></Modal>
</div>
<TeamListFeature />
<OrgListFeature />
</div>
{children}
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/app/(gistLayout)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,27 @@ export default function GistLayoutFeature({
},
});

const { mutate: createTeam } = useCreateOrg({
const { mutate: createOrg } = useCreateOrg({
onSuccess: () => {
toast({
title: "Team Created",
description: "Your team has been created successfully",
title: "Org Created",
description: "Your org has been created successfully",
});
},
});

const onMyGistsClick = () => {};
const onMyGists = () => {};

const onCreateTeamClick = useCallback(
const onCreateOrg = useCallback(
(name: string) => {
createTeam(name);
createOrg(name);
},
[toast, createTeam],
[toast, createOrg],
);

const onLogoutClick = () => {};
const onLogout = () => {};

const onCreateGistClick = (name: string, content: string) => {
const onCreateGist = (name: string, content: string) => {
createGist({
content,
name,
Expand All @@ -52,12 +52,12 @@ export default function GistLayoutFeature({

return (
<GistLayout
onLogoutClick={onLogoutClick}
onLogout={onLogout}
username={data?.name ?? ""}
avatar={data?.picture ?? ""}
onCreateTeamClick={onCreateTeamClick}
onMyGistsClick={onMyGistsClick}
onCreateGistClick={onCreateGistClick}
onCreateOrg={onCreateOrg}
onMyGists={onMyGists}
onCreateGist={onCreateGist}
>
{children}
</GistLayout>
Expand Down
10 changes: 6 additions & 4 deletions src/app/(gistLayout)/mygist/[gistId]/page-ui.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import { Gist } from '@/types'

interface MyGistIdPageProps {
gist: Gist
onDownloadClick: () => void
onSaveClick: (name: string, code: string) => void
onDownload: () => void
onSave: (name: string, code: string) => void
onDelete: (id: string) => void
onShare: () => void
}

export default function MyGistIdPage({ gist, onDownloadClick, onSaveClick }: MyGistIdPageProps) {
return <GistDetails folder={'My Gists'} gist={gist} redirect={true} onDownloadClick={onDownloadClick} onSaveClick={onSaveClick} />
export default function MyGistIdPage({ gist, onDownload, onSave, onDelete, onShare }: MyGistIdPageProps) {
return <GistDetails orgName={'My Gists'} gist={gist} redirect={true} onDownload={onDownload} onSave={onSave} onDelete={onDelete} onShare={onShare} />
}
84 changes: 42 additions & 42 deletions src/app/(gistLayout)/mygist/[gistId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
"use client";
import React from "react";
import MyGistIdPage from "./page-ui";
import {
useGist,
usePatchGistContent,
usePatchGistName,
} from "@/lib/queries/gists.queries";
import { useToast } from "@/components/shadcn/use-toast";
'use client'
import React from 'react'
import MyGistIdPage from './page-ui'
import { useGist, usePatchGistContent, usePatchGistName } from '@/lib/queries/gists.queries'
import { useToast } from '@/components/shadcn/use-toast'
import { useKeyPress } from '@/lib/hook/use-key-press'

interface MyGistIdFeaturePageProps {
params: {
gistId: string;
};
gistId: string
}
}

export default function MyGistIdFeaturePage({
params,
}: MyGistIdFeaturePageProps) {
const { gistId } = params;
const { data } = useGist(gistId);
const { toast } = useToast();
export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps) {
const { gistId } = params
const { data } = useGist(gistId)
const { toast } = useToast()

const { mutate: updateName } = usePatchGistName({
onSuccess: () => {
toast({
title: "Gist Saved",
description: "Your gist has been saved successfully",
});
title: 'Gist Saved',
description: 'Your gist has been saved successfully',
})
},
});
})

const { mutate: updateContent } = usePatchGistContent({
onSuccess: () => {
},
});
onSuccess: () => {},
})

const onDownloadClick = () => {
const onDownload = () => {
toast({
title: "Gist Downloaded",
description: "Your gist has been downloaded successfully",
});
};
const onSaveClick = (name: string, code: string) => {
updateContent({ id: gistId, content: code });

updateName({ id: gistId, name });
};
title: 'Gist Downloaded',
description: 'Your gist has been downloaded successfully',
})
}
const onSave = (name: string, code: string) => {
updateContent({ id: gistId, content: code })
updateName({ id: gistId, name })
toast({
title: 'Gist Saved',
description: 'Your gist has been saved successfully',
})
}

const onDelete = (id: string) => {
console.log(`Deleting gist with ID: ${id}`)
}

const onShare = () => {
console.log('Share')
}

if (!data) {
return null;
return null
}
return (
<MyGistIdPage
gist={data}
onDownloadClick={onDownloadClick}
onSaveClick={onSaveClick}
/>
);
return <MyGistIdPage gist={data} onDownload={onDownload} onSave={onSave} onDelete={onDelete} onShare={onShare} />
}
25 changes: 9 additions & 16 deletions src/app/(gistLayout)/mygist/page-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { MyGistListFeature } from '@/components/feature/mygist-list-feature'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/shadcn/tooltip'
import { MyGistListFeature } from '@/components/logic/mygist-list-logic'
import MenuButton from '@/components/ui/menu-button'
import { PaginationComponent } from '@/components/ui/pagination'
import Shortcut from '@/components/ui/shortcut'
import TooltipShortcut, { TooltipShortcutTrigger } from '@/components/ui/tooltip-shortcut'
import { TornadoIcon } from 'lucide-react'

interface MyGistPageProps {}
Expand All @@ -12,19 +11,13 @@ export default function MyGistsPage({}: MyGistPageProps) {
<div className="flex flex-col flex-grow border-border rounded-lg border">
<div className="py-4 px-6 flex flex-row justify-between items-center">
<span>My Gists</span>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<MenuButton icon={<TornadoIcon className="w-4 h-4" />} variant={'menu'}>
<span>Sort by</span>
</MenuButton>
</TooltipTrigger>
<TooltipContent className="flex flex-row gap-2 justify-center items-center">
<span>Sort your gists</span>
<Shortcut letter="S" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipShortcut tooltip="Sort your gists" shortcuts={['S']}>
<TooltipShortcutTrigger>
<MenuButton icon={<TornadoIcon className="w-4 h-4" />} variant={'menu'}>
<span>Sort by</span>
</MenuButton>
</TooltipShortcutTrigger>
</TooltipShortcut>
</div>
<div className="h-[1px] bg-border"></div>
<MyGistListFeature />
Expand Down
15 changes: 15 additions & 0 deletions src/app/(gistLayout)/org/[orgId]/gist/[gistId]/page-ui.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import GistDetails from '@/components/ui/gist-details'
import { Gist } from '@/types'

interface MyOrgGistIdPageProps {
gist: Gist
orgName: string
onDownload: () => void
onSave: () => void
onDelete: (id: string) => void
onShare: () => void
}

export default function MyOrgGistIdPage({ orgName, gist, onDownload, onSave, onDelete, onShare }: MyOrgGistIdPageProps) {
return <GistDetails orgName={orgName} gist={gist} onDownload={onDownload} onSave={onSave} onDelete={onDelete} onShare={onShare} />
}
Loading

0 comments on commit 2c69429

Please sign in to comment.