feat: fetch character via id

Author: VulpoTheDev

apps/web/src/app/(studio)/studio/(general)/characters/[id]/page.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import { fetchCharacterById } from '@/utils/api'
 
-export default function Page() {
-  return (
-    <div>Page</div>
-  )
+export default async function Page({ params }: { params: { id: string } }) {
+  const character = await fetchCharacterById(params.id)
+  return <div>character page</div>
 }

apps/web/src/components/Modals/DropZone.tsx

@@ -13,17 +13,17 @@ const maxFileSize = 10 * 1024 * 1024 // 10 MB
 export default function DropZone({
   setData,
   className = "",
-  value = "",
+  value = null,
   aspectRatio = "1"
 }: {
   setData: (url: string) => void
   className?: string
-  value?: string
+  value?: string | null
   aspectRatio?: string
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [file, setFile] = useState<File | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [imageUrl, setImageUrl] = useState<string | null>(value)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [_success, setSuccess] = useState(false)
@@ -122,7 +122,7 @@ export default function DropZone({
       {imageUrl ? (
         <div className="flex flex-col items-center">
           <Image width={200} height={200} alt="Uploaded" src={imageUrl} />
-          <span className="text-lg font-bold">Uploaded!</span>
+          {/* <span className="text-lg font-bold">Uploaded!</span> */}
         </div>
       ) : uploading ? (
         <span className="text-lg font-bold">Uploading...</span>

apps/web/src/components/layouts/StudioLayout/Sidebar.tsx

@@ -5,15 +5,22 @@ import { motion } from "framer-motion"
 import { LuSettings } from "react-icons/lu"
 import { useSidebarOpenAtom } from "./Sidebar.atom"
 import SidebarItem from "./SidebarItem"
-import { generateSidebarItems } from "./SidebarItems"
+import { generateEditSidebarItems, generateSidebarItems } from "./SidebarItems"
 import { useAuth, User } from "@/app/context/AuthContext"
+import { useRouter, usePathname } from "next/navigation"
 import Image from "next/image"
 import Avatar from "@/components/Avatar"
 import clsx from 'clsx'
 
 export default function Sidebar({ user }: { user: User }) {
   const { sidebarState: isSidebarExpanded } = useSidebarOpenAtom()
-  const sidebarItems = generateSidebarItems()
+  const pathname = usePathname();
+  const isEditingCharacter = pathname.includes('/studio/characters/');
+  const characterId = isEditingCharacter
+    ? pathname.split("/studio/characters/")[1]?.split("/")[0]
+    : null;
+  const sidebarItems = characterId ? generateEditSidebarItems(characterId) : generateSidebarItems();
+
   return (
     <>
       <motion.aside
@@ -42,12 +49,12 @@ export default function Sidebar({ user }: { user: User }) {
           </div>
           <div className="flex flex-col flex-1">
             {Object.entries(sidebarItems)
-              .filter(([sectionKey]) => sectionKey !== "settings")
+              .filter(([key]) => key !== "settings")
               .map(([sectionKey, items]) => (
                 <div key={sectionKey} className="flex flex-col">
                   {isSidebarExpanded && items.length > 0 && (
                     <span className="m-3 text-sm text-subtext capitalize">
-                      {sectionKey}
+                      {sectionKey === "character" ? "Character Editor" : sectionKey}
                     </span>
                   )}
                   {items.map((item) => (

apps/web/src/components/layouts/StudioLayout/SidebarItems.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { LuCat, LuFileQuestion, LuImage, LuKanbanSquare, LuLineChart, LuMessageCircle, LuPaintbrush, LuSettings, LuShield, LuShieldQuestion, LuZap } from "react-icons/lu"
+import { LuCat, LuFileQuestion, LuImage, LuKanbanSquare, LuLayers, LuLineChart, LuList, LuMessageCircle, LuPaintbrush, LuPencil, LuPencilLine, LuSettings, LuShield, LuShieldQuestion, LuZap } from "react-icons/lu"
 
 type SidebarItem = {
   icon: ReactNode
@@ -69,6 +69,27 @@ const generateArtistSidebarItems = (): SidebarItem[] => {
   ]
 }
 
+const generateCharacterEditSidebarItems = (uuid: string): SidebarItem[] => {
+  return [
+    {
+      icon: <LuPencilLine size={20} />,
+      label: "Basic Info",
+      href: `#`
+    },
+    {
+      icon: <LuList size={20} />,
+      label: "Properties",
+      href: `#properties`
+    },
+    {
+      icon: <LuLayers size={20} />,
+      label: "Ref Sheets",
+      href: `#references`
+    }
+  ]
+}
+
+
 const generateStaffSidebarItems = (): SidebarItem[] => {
   // TODO: Call backend to see if user is staff
   return [
@@ -104,3 +125,11 @@ export const generateSidebarItems = (): SidebarItemsByCategory => {
     settings: generateSettingsSidebarItems()
   }
 }
+
+export const generateEditSidebarItems = (characterId: string) => {
+  return {
+    character: generateCharacterEditSidebarItems(characterId),
+    settings: generateSettingsSidebarItems()
+  }
+}
+

apps/web/src/utils/api.ts

@@ -179,6 +179,15 @@ export const fetchCharacter = async (handle: string, characterName: string) => {
   return character
 }
 
+export const fetchCharacterById = async (id: string) => {
+  const character = await apiWithoutAuth<Character>(
+    "GET",
+    `/v1/character/id/${id}`
+  )
+
+  return character
+}
+
 export const fetchArtistRequests = async () => {
   const requests = await apiWithAuth<UserType[]>(
     "GET",