refactor(sidebar): clean props

moeru-ai · Jan 29, 2025 · 430820f · 430820f
1 parent 07a7cb8
commit 430820f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/src/components/sidebar-new-character.tsx b/src/components/sidebar-new-character.tsx
@@ -2,12 +2,47 @@ import { Icon } from '@iconify/react'
 import { Button, Dialog, Flex, IconButton, Separator, TextField, Tooltip } from '@radix-ui/themes'
 import { useState } from 'react'
 import { FileTrigger } from 'react-aria-components'
+import { toast } from 'sonner'
+import { v7 } from 'uuid'
 
+import { useUpdateCharacters } from '../context/characters'
+import { db } from '../db'
+import { charactersTable } from '../db/schema'
+import { processAvatarPNG } from '../utils/ccv3/avatar'
+import { parseCharacterCardPNG } from '../utils/ccv3/parse'
 import { Button as AriaButton } from './aria/button'
 import { DropZone } from './aria/drop-zone'
 
-export const SidebarNewCharacter = ({ handleSelect }: { handleSelect: (e: FileList | null) => Promise<void> }) => {
+export const SidebarNewCharacter = () => {
   const [open, setOpen] = useState(false)
+  const updateCharacters = useUpdateCharacters()
+
+  const handleSelect = async (e: FileList | null) => {
+    if (!e)
+      return
+
+    const file = e[0]
+    // TODO: is-png
+    const buffer = await file.arrayBuffer()
+    // eslint-disable-next-line @masknet/array-prefer-from
+    const png = new Uint8Array(buffer)
+    const json = parseCharacterCardPNG(png)
+
+    if (json !== undefined) {
+      await db
+        .insert(charactersTable)
+        .values({
+          avatar: await processAvatarPNG(png),
+          data: json.data,
+          id: v7(),
+          name: json.data.name,
+        })
+
+      toast.success(`${json.data.name} has been created`)
+
+      void updateCharacters()
+    }
+  }
 
   return (
     <Dialog.Root onOpenChange={setOpen} open={open}>

diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
@@ -1,51 +1,17 @@
 import { Icon } from '@iconify/react'
 import { Avatar, Box, Flex, IconButton, ScrollArea, Tooltip } from '@radix-ui/themes'
 import { useMatch } from 'react-router-dom'
-import { toast } from 'sonner'
-import { v7 } from 'uuid'
 
-import { useCharacters, useUpdateCharacters } from '../context/characters'
+import { useCharacters } from '../context/characters'
 import { useSidebarActive } from '../context/sidebar-active'
-import { db } from '../db'
-import { charactersTable } from '../db/schema'
 import { Link } from '../router'
-import { processAvatarPNG } from '../utils/ccv3/avatar'
-import { parseCharacterCardPNG } from '../utils/ccv3/parse'
 import { SidebarNewCharacter } from './sidebar-new-character'
 
 export const Sidebar = () => {
   const characters = useCharacters()
-  const updateCharacters = useUpdateCharacters()
   const match = useMatch('/room/:uuid')
   const active = useSidebarActive()
 
-  const handleSelect = async (e: FileList | null) => {
-    if (!e)
-      return
-
-    const file = e[0]
-    // TODO: is-png
-    const buffer = await file.arrayBuffer()
-    // eslint-disable-next-line @masknet/array-prefer-from
-    const png = new Uint8Array(buffer)
-    const json = parseCharacterCardPNG(png)
-
-    if (json !== undefined) {
-      await db
-        .insert(charactersTable)
-        .values({
-          avatar: await processAvatarPNG(png),
-          data: json.data,
-          id: v7(),
-          name: json.data.name,
-        })
-
-      toast.success(`${json.data.name} has been created`)
-
-      void updateCharacters()
-    }
-  }
-
   const isActive = (uuid: string) =>
     match?.params.uuid === uuid
       ? {
@@ -80,7 +46,7 @@ export const Sidebar = () => {
               </Link>
             </Tooltip>
           ))}
-          <SidebarNewCharacter handleSelect={handleSelect} />
+          <SidebarNewCharacter />
         </Flex>
       </ScrollArea>
     </Box>