From 861a86bfcbece007d62e736cdf4ff4f1c2a6f9ec Mon Sep 17 00:00:00 2001 From: Rapidement Date: Thu, 17 Oct 2024 13:32:14 +0200 Subject: [PATCH] fix(ui): add border, remove console.log & console errors (#23) --- src/app/(gistLayout)/layout-ui.tsx | 66 +++++++++---------- src/app/(gistLayout)/layout.tsx | 4 -- src/app/(gistLayout)/mygist/[gistId]/page.tsx | 4 -- src/app/(gistLayout)/mygist/page-ui.tsx | 2 +- .../team/[teamId]/gist/[gistId]/page.tsx | 5 -- src/app/layout.tsx | 1 - src/app/login/login-feature.tsx | 8 --- src/app/page.tsx | 2 +- .../feature/gist-details-wrapper.tsx | 1 - src/components/theme/theme-switch.tsx | 2 - src/components/ui/gist-details.tsx | 10 +-- src/components/ui/gist-landing.tsx | 50 +++++++------- src/components/ui/menu-button.tsx | 54 +++++++++------ src/components/ui/modal.tsx | 4 +- 14 files changed, 101 insertions(+), 112 deletions(-) diff --git a/src/app/(gistLayout)/layout-ui.tsx b/src/app/(gistLayout)/layout-ui.tsx index eb168ef..d60b897 100644 --- a/src/app/(gistLayout)/layout-ui.tsx +++ b/src/app/(gistLayout)/layout-ui.tsx @@ -47,41 +47,37 @@ export default function GistLayout({ avatar, children, username, onMyGistsClick, - - - - - - - } - content={ -
- setGistName(e.target.value)} /> - setGistContent(e.target.value)} - /> -
- } - footer={ - - Create - - } - > - - - Create a new Gist - - - - + + + + + + + + Create a new Gist + + + + + + } + content={ +
+ setGistName(e.target.value)} /> + setGistContent(e.target.value)} /> +
+ } + footer={ + + Create + + } + >
} variant="menu" size="menu" letter="M" onClick={onMyGistsClick} href="/mygist" className="w-full"> diff --git a/src/app/(gistLayout)/layout.tsx b/src/app/(gistLayout)/layout.tsx index 00e0d28..5622287 100644 --- a/src/app/(gistLayout)/layout.tsx +++ b/src/app/(gistLayout)/layout.tsx @@ -29,23 +29,19 @@ export default function GistLayoutFeature({ children }: { children: ReactNode }) }) const onMyGistsClick = () => { - console.log('My Gists clicked') } const onCreateTeamClick = useCallback( (name: string) => { createTeam(name) - console.log('Creating team with name:', name) }, [toast, createTeam] ) const onLogoutClick = () => { - console.log('/logout') } const onCreateGistClick = (name: string, content: string) => { - console.log(`Creating gist with name: ${name} \nand content: ${content}`) createGist({ content, name, diff --git a/src/app/(gistLayout)/mygist/[gistId]/page.tsx b/src/app/(gistLayout)/mygist/[gistId]/page.tsx index 4c77b28..b377d96 100644 --- a/src/app/(gistLayout)/mygist/[gistId]/page.tsx +++ b/src/app/(gistLayout)/mygist/[gistId]/page.tsx @@ -32,20 +32,16 @@ export default function MyGistIdFeaturePage({ const { mutate: updateContent } = usePatchGistContent({ onSuccess: () => { - console.log("Gist content updated"); }, }); const onDownloadClick = () => { - console.log("Downloading gist"); toast({ title: "Gist Downloaded", description: "Your gist has been downloaded successfully", }); }; const onSaveClick = (name: string, code: string) => { - console.log("Saving gist with name:", name, "and code:", code); - updateContent({ id: gistId, content: code }); updateName({ id: gistId, name }); diff --git a/src/app/(gistLayout)/mygist/page-ui.tsx b/src/app/(gistLayout)/mygist/page-ui.tsx index 4673b3e..1269081 100644 --- a/src/app/(gistLayout)/mygist/page-ui.tsx +++ b/src/app/(gistLayout)/mygist/page-ui.tsx @@ -14,7 +14,7 @@ export default function MyGistsPage({}: MyGistPageProps) { My Gists - + } variant={'menu'}> Sort by diff --git a/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx b/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx index 37c2f24..af7a3f8 100644 --- a/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx +++ b/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx @@ -34,12 +34,10 @@ export default function MyTeamGistIdFeaturePage({ const { mutate: updateContent } = usePatchGistContent({ onSuccess: () => { - console.log("Gist content updated"); }, }); const onDownloadClick = () => { - console.log("Downloading gist"); toast({ title: "Gist Downloaded", description: "Your gist has been downloaded successfully", @@ -47,10 +45,7 @@ export default function MyTeamGistIdFeaturePage({ }; const onSaveClick = (name: string, code: string) => { - console.log("Saving gist with name:", name, "and code:", code); - updateContent({ id: gistId, content: code }); - updateName({ id: gistId, name }); }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3e5ba0b..069c062 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,7 +20,6 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - console.log(getBackendURL()); return ( diff --git a/src/app/login/login-feature.tsx b/src/app/login/login-feature.tsx index a390eb3..db237fd 100644 --- a/src/app/login/login-feature.tsx +++ b/src/app/login/login-feature.tsx @@ -40,7 +40,6 @@ export default function LoginFeature() { const onSubmit = useCallback( (data: FormData) => { - console.log(data) sendEmail(data.email) localStorage.setItem('email', data.email) setStep('otpInput') @@ -57,13 +56,10 @@ export default function LoginFeature() { }, [step, isValid, handleSubmit, onSubmit]) const handleGitHubClick = useCallback(() => { - console.log('GitHub') window.location.href = getBackendURL() + '/auth/github' }, []) const handleGoogleClick = useCallback(() => { - console.log('CGoogle') - window.location.href = getBackendURL() + '/auth/google' }, []) @@ -72,7 +68,6 @@ export default function LoginFeature() { }, []) const handleContinueClick = useCallback(() => { - console.log('OTP:', otpValue) const email = localStorage.getItem('email') if (!email) { console.error('Email not found in local storage.') @@ -83,7 +78,6 @@ export default function LoginFeature() { }, [otpValue, verifyEmail]) const handleTryAgainClick = useCallback(() => { - console.log('A new OTP has been sent.') toast({ title: 'A new one time password has been sent.', description: 'Please check your email.', @@ -97,7 +91,6 @@ export default function LoginFeature() { const handleEscapeKeyPress = useCallback( (e: KeyboardEvent) => { - console.log('Delete key pressed') e.preventDefault() router.push('/') }, @@ -108,7 +101,6 @@ export default function LoginFeature() { useEffect(() => { if (verified) { - console.log('Verified:', verified) toast({ title: 'You have been verified.', }) diff --git a/src/app/page.tsx b/src/app/page.tsx index 58136c3..e4ef384 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -30,7 +30,7 @@ export const metadata: Metadata = { export default function HomePage() { return ( -
+
diff --git a/src/components/feature/gist-details-wrapper.tsx b/src/components/feature/gist-details-wrapper.tsx index 12aa801..a695348 100644 --- a/src/components/feature/gist-details-wrapper.tsx +++ b/src/components/feature/gist-details-wrapper.tsx @@ -41,7 +41,6 @@ export default function GistDetailsWrapper() { }, []) const handleShare = useCallback(() => { - console.log('Share') }, []) const handleLogin = useCallback(() => { diff --git a/src/components/theme/theme-switch.tsx b/src/components/theme/theme-switch.tsx index e859f45..bb32617 100644 --- a/src/components/theme/theme-switch.tsx +++ b/src/components/theme/theme-switch.tsx @@ -19,7 +19,6 @@ export default function ThemeSwitch() { className="h-6 w-6" onClick={() => { setTheme('light') - console.log('light') }} /> ) @@ -31,7 +30,6 @@ export default function ThemeSwitch() { className="h-6 w-6 text-gray-900" onClick={() => { setTheme('dark') - console.log('dark') }} /> ) diff --git a/src/components/ui/gist-details.tsx b/src/components/ui/gist-details.tsx index 020d85a..c3a53cb 100644 --- a/src/components/ui/gist-details.tsx +++ b/src/components/ui/gist-details.tsx @@ -55,8 +55,8 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o Code
-
1
- setGistCode(e.target.value)} className="rounded-none h-full border-l-0" language={language} /> + {/*
1
*/} + setGistCode(e.target.value)} className="rounded-none h-full" language={language} />
@@ -64,7 +64,7 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o
- + } variant={'menu'}> Delete @@ -78,7 +78,7 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o
- + } variant={'menu'}> Share @@ -95,7 +95,7 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o - + onSaveClick(gistName, gistCode)}> Save diff --git a/src/components/ui/gist-landing.tsx b/src/components/ui/gist-landing.tsx index 98b7995..8cf047a 100644 --- a/src/components/ui/gist-landing.tsx +++ b/src/components/ui/gist-landing.tsx @@ -5,7 +5,7 @@ import MenuButton from '@/components/ui/menu-button' import Shortcut from '@/components/ui/shortcut' import { Gist } from '@/types' import { ChevronRightIcon, DownloadIcon, FolderOpen, LogIn, ShareIcon } from 'lucide-react' -import { useRef } from 'react' +import { useRef, useState } from 'react' import { Codearea } from '../shadcn/codearea' import { getLanguage } from '@/lib/language' import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '../shadcn/dialog' @@ -56,7 +56,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
- + } variant={'header'}> Login @@ -71,7 +71,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar - + onDownload(gist.name, gist.code)} icon={} variant={'header'}> Download @@ -100,15 +100,15 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
{/*
1
*/} - + {showLandingInformations && ( -
+

GISTS

-

All your data is saved locally in your browser, so just start typing.

+

All your data is saved locally in your browser, so just start typing.

@@ -135,7 +135,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
- + onDownload(gist.name, gist.code)} icon={} variant={'header'}> Download @@ -149,24 +149,26 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar - - - - - } variant={'menu'}> + +
+ + + + } variant={'menu'}> + Share + + + Share - - - - Share your gist - - + - - + - - - - + + + + + + + + + + +
Share you code with friends ! diff --git a/src/components/ui/menu-button.tsx b/src/components/ui/menu-button.tsx index f0d1ede..ad6e116 100644 --- a/src/components/ui/menu-button.tsx +++ b/src/components/ui/menu-button.tsx @@ -1,8 +1,8 @@ import React from 'react' import { cn } from '@/lib/utils' -import { Button } from '../shadcn/button' import Shortcut from './shortcut' import Link from 'next/link' +import { Button } from '../shadcn/button' interface MenuButtonProps extends React.ButtonHTMLAttributes { href?: string @@ -14,25 +14,39 @@ interface MenuButtonProps extends React.ButtonHTMLAttributes size?: 'default' | 'no-padding' | 'sm' | 'lg' | 'menu' | 'icon' } -export default function MenuButton({ href, icon, children, letter, className, variant, size, ...props }: MenuButtonProps) { - const ButtonContent = ( - - ) - - if (href) { - return ( - - {ButtonContent} - +const MenuButton = React.forwardRef( + ({ href, icon, children, letter, className, variant = 'default', size = 'default', ...props }, ref) => { + const ButtonContent = ( + ) + + if (href) { + return ( + + {ButtonContent} + + ) + } + + return ButtonContent } +) - return ButtonContent -} +MenuButton.displayName = 'MenuButton' + +export default MenuButton \ No newline at end of file diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx index 598ac58..879c34a 100644 --- a/src/components/ui/modal.tsx +++ b/src/components/ui/modal.tsx @@ -13,7 +13,9 @@ interface ModalProps { export function Modal({ trigger, title, content, footer }: ModalProps) { return ( - {trigger} + + {trigger} + {title}