feat(GIST-105): change mygist url to username (#47)

src/app/(gistLayout)/mygist/[gistId]/page-ui.tsx → src/app/(gistLayout)/[username]/[gistId]/page-ui.tsx

@@ -3,6 +3,7 @@ import { Gist } from "@/types"
 
 interface MyGistIdPageProps {
   gist: Gist
+  username?: string
   onDownload: () => void
   onSave: (name: string, code: string) => void
   onDelete: (id: string) => void
@@ -13,6 +14,7 @@ interface MyGistIdPageProps {
 
 export default function MyGistIdPage({
   gist,
+  username,
   onDownload,
   onSave,
   onDelete,
@@ -22,6 +24,7 @@ export default function MyGistIdPage({
 }: MyGistIdPageProps) {
   return (
     <GistDetails
+      username={username ? username : ""}
       orgName={"My Gists"}
       gist={gist}
       redirect={true}

src/app/(gistLayout)/mygist/[gistId]/page.tsx → src/app/(gistLayout)/[username]/[gistId]/page.tsx

@@ -16,7 +16,7 @@ export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps
   const { gistId } = params
   const { data } = useGist(gistId)
   const { toast } = useToast()
-  const { data: me } = useMe()
+  const { data: user } = useMe()
 
   const { mutate: updateName } = usePatchGistName({
     onSuccess: () => {
@@ -55,7 +55,7 @@ export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps
       visibility: "public",
       org_id: null,
       language: "plaintext",
-      owner_id: me?.id || "",
+      owner_id: user?.id || "",
     })
   }
 
@@ -96,6 +96,7 @@ export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps
   }
   return (
     <MyGistIdPage
+      username={user?.name}
       gist={data}
       onDownload={onDownload}
       onSave={onSave}

src/app/(gistLayout)/layout-ui.tsx

@@ -101,7 +101,6 @@ function AppSidebar({
   isOrgModalOpen,
   setIsOrgModalOpen,
   onCreateOrg,
-  onMyGists,
   gistContent,
   setGistContent,
   language,
@@ -137,8 +136,7 @@ function AppSidebar({
               variant="menu"
               size="menu"
               letter="M"
-              onClick={onMyGists}
-              href="/mygist"
+              href={`/${username}`}
               className="w-full"
             >
               My Gists

src/app/(gistLayout)/org/[orgId]/gist/[gistId]/page-ui.tsx

@@ -3,6 +3,7 @@ import { Gist } from "@/types"
 
 interface MyOrgGistIdPageProps {
   gist: Gist
+  username: string
   orgName: string
   onDownload: () => void
   onSave: () => void
@@ -14,6 +15,7 @@ interface MyOrgGistIdPageProps {
 
 export default function MyOrgGistIdPage({
   orgName,
+  username,
   gist,
   onDownload,
   onSave,
@@ -24,6 +26,7 @@ export default function MyOrgGistIdPage({
 }: MyOrgGistIdPageProps) {
   return (
     <GistDetails
+      username={username}
       orgName={orgName}
       gist={gist}
       onDownload={onDownload}

src/app/(gistLayout)/org/[orgId]/gist/[gistId]/page.tsx

@@ -3,6 +3,7 @@ import { useToast } from "@/components/shadcn/use-toast"
 import GistDetails from "@/components/ui/gist-details"
 import { useEditGist, useGist, usePatchGistContent, usePatchGistName } from "@/lib/queries/gists.queries"
 import { useOrg } from "@/lib/queries/orgs.queries"
+import { useMe } from "@/lib/queries/user.queries"
 import { getRawGistURL } from "@/lib/utils"
 import React from "react"
 
@@ -15,6 +16,7 @@ interface MyOrgGistIdFeaturePageProps {
 
 export default function MyOrgGistIdFeaturePage({ params }: MyOrgGistIdFeaturePageProps) {
   const { orgId, gistId } = params
+  const { data: user } = useMe()
   const { data: orgData } = useOrg(orgId)
   const { data: gistData } = useGist(gistId)
   const { toast } = useToast()
@@ -101,6 +103,7 @@ export default function MyOrgGistIdFeaturePage({ params }: MyOrgGistIdFeaturePag
 
   return (
     <GistDetails
+      username={user?.name || ""}
       orgName={orgData ? orgData.name : "My Gists"}
       gist={gistData}
       onDownload={onDownload}

src/app/login/page.tsx

@@ -8,6 +8,7 @@ import { useLocalAuth, useLocalAuthVerify } from "@/lib/queries/auth.queries"
 import Login from "./page-ui"
 import { redirect, useRouter } from "next/navigation"
 import { useKeyPress } from "@/lib/hook/use-key-press"
+import { useMe } from "@/lib/queries/user.queries"
 
 interface FormData {
   email: string
@@ -18,6 +19,7 @@ export default function LoginFeature() {
   const [otpValue, setOtpValue] = useState("")
   const { toast } = useToast()
   const router = useRouter()
+  const { data: user } = useMe()
 
   const { mutate: sendEmail } = useLocalAuth()
   const { mutate: verifyEmail, data: verified } = useLocalAuthVerify()
@@ -105,7 +107,7 @@ export default function LoginFeature() {
         title: "You have been verified.",
       })
 
-      redirect("/mygist")
+      redirect(`/${user?.name}`)
     }
   }, [verified, toast])
 

src/components/logic/mygist-list-logic.tsx

@@ -4,8 +4,10 @@ import { useContext, useEffect } from "react"
 import MyGistList from "../ui/mygist-list"
 import { useDeleteGist, useGists } from "@/lib/queries/gists.queries"
 import { PaginationContext } from "../contexts/pagination"
+import { useMe } from "@/lib/queries/user.queries"
 
 export function MyGistListFeature() {
+  const { data: user } = useMe()
   const { offset, limit, setNbPages } = useContext(PaginationContext)
   const { data, nb_pages } = useGists({
     limit,
@@ -26,5 +28,5 @@ export function MyGistListFeature() {
     deleteGist(id)
   }
 
-  return <MyGistList gists={data || []} onDeleteGist={handleDeleteGist} />
+  return <MyGistList gists={data || []} username={user?.name} onDeleteGist={handleDeleteGist} />
 }

src/components/ui/gist-details.tsx

@@ -22,6 +22,7 @@ import { Button } from "../shadcn/button"
 
 interface GistDetailsProps {
   gist: Gist
+  username: string
   orgName: string
   redirect?: boolean
   onDownload: (name: string, code: string) => void
@@ -34,6 +35,7 @@ interface GistDetailsProps {
 
 export default function GistDetails({
   gist,
+  username,
   orgName,
   redirect,
   onDownload,
@@ -71,6 +73,7 @@ export default function GistDetails({
     <div className="flex flex-col w-full h-full p-2">
       <Header
         gist={gistState}
+        username={username}
         orgName={orgName}
         redirect={redirect}
         onDownload={() => onDownload(gistName, gistCode)}
@@ -138,6 +141,7 @@ export default function GistDetails({
 
 interface HeaderProps {
   gist: Gist
+  username?: string
   orgName: string
   redirect?: boolean
   onDownload: (name: string, code: string) => void
@@ -146,15 +150,15 @@ interface HeaderProps {
   onOpenPlainText?: (gistID: string) => void
 }
 
-function Header({ gist, orgName, redirect, onDownload, onCopy, onCopyCurl, onOpenPlainText }: HeaderProps) {
+function Header({ gist, username, orgName, redirect, onDownload, onCopy, onCopyCurl, onOpenPlainText }: HeaderProps) {
   return (
     <div className="py-4 px-6 flex flex-row justify-between items-center rounded-t-lg border-border border-l border-t border-r">
       <div className="flex flex-row gap-6 items-center h-full">
         <SidebarTrigger className="w-4 h-4" />
         <div className="w-[1px] h-2/3 bg-border"></div>
         <div className="flex flex-row gap-2 justify-center items-center">
           {redirect ? (
-            <Link href="/mygist" className="hover:underline">
+            <Link href={`/${username}`} className="hover:underline">
               {orgName}
             </Link>
           ) : (

src/components/ui/mygist-list.tsx

@@ -4,9 +4,10 @@ import Card from "./card"
 interface MyGistListProps {
   gists: Gist[]
   onDeleteGist: (id: string) => void
+  username?: string
 }
 
-export default function MyGistList({ gists, onDeleteGist }: MyGistListProps) {
+export default function MyGistList({ gists, onDeleteGist, username }: MyGistListProps) {
   if (gists.length === 0) {
     return (
       <div className="p-4 h-full flex items-center justify-center border-border border-r border-l">
@@ -18,7 +19,7 @@ export default function MyGistList({ gists, onDeleteGist }: MyGistListProps) {
   return (
     <div className="p-4 h-full grid grid-cols-3 grid-rows-3 gap-4 border-border border-r border-l">
       {gists.map((gist) => (
-        <Card key={gist.id} gist={gist} href={`/mygist/${gist.id}`} onDeleteGist={() => onDeleteGist(gist.id)} />
+        <Card key={gist.id} gist={gist} href={`/${username}/${gist.id}`} onDeleteGist={() => onDeleteGist(gist.id)} />
       ))}
     </div>
   )