refactor: improve frontend code (#405)

* refactor: refactored frontend code for improve maintenanceability

* fix: layout corruption in asset list view due to upgrading shadcn/ui Card component

* refactor: adjust layout and text selection availability and colors

* refactor: improve useEffect deps

* fix: unable to open edit asset dialog

* refactor: delete debug code

Author: siloneco

eslint.config.mjs

@@ -1,57 +1,61 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import unusedImports from "eslint-plugin-unused-imports";
+import eslint from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import unusedImports from 'eslint-plugin-unused-imports'
+import reactHooks from 'eslint-plugin-react-hooks'
 
 export default tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.recommended,
   {
-    files: ["**/*.ts", "**/*.js", "**/*.tsx"],
+    files: ['**/*.ts', '**/*.js', '**/*.tsx'],
 
     plugins: {
-      "unused-imports": unusedImports,
+      'unused-imports': unusedImports,
+      'react-hooks': reactHooks,
     },
 
     languageOptions: {
       parserOptions: {
         ecmaVersion: 2019,
-        sourceType: "module",
+        sourceType: 'module',
       },
     },
 
     rules: {
       semi: [
-        "error",
-        "never",
+        'error',
+        'never',
         {
-          beforeStatementContinuationChars: "never",
+          beforeStatementContinuationChars: 'never',
         },
       ],
 
-      "semi-spacing": [
-        "error",
+      'semi-spacing': [
+        'error',
         {
           after: true,
           before: false,
         },
       ],
 
-      "semi-style": ["error", "first"],
-      "no-extra-semi": "error",
-      "no-unexpected-multiline": "error",
-      "no-unreachable": "error",
-      "no-unused-vars": "off",
-      "unused-imports/no-unused-imports": "error",
+      'semi-style': ['error', 'first'],
+      'no-extra-semi': 'error',
+      'no-unexpected-multiline': 'error',
+      'no-unreachable': 'error',
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
 
-      "unused-imports/no-unused-vars": [
-        "error",
+      'unused-imports/no-unused-vars': [
+        'error',
         {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
-          argsIgnorePattern: "^_",
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
         },
       ],
     },
-  }
-);
+  },
+)

package.json

@@ -75,6 +75,7 @@
     "@vitest/coverage-v8": "3.1.1",
     "eslint": "9.25.0",
     "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-unused-imports": "4.1.4",
     "globals": "16.0.0",
     "husky": "9.1.7",

pnpm-lock.yaml

@@ -41,7 +41,7 @@ pub async fn get_asset(
 
 #[tauri::command]
 #[specta::specta]
-pub async fn get_sorted_assets_for_display(
+pub async fn get_sorted_asset_summaries(
     basic_store: State<'_, Arc<Mutex<StoreProvider>>>,
     sort_by: SortBy,
 ) -> Result<Vec<AssetSummary>, String> {

src-tauri/src/command/asset/get.rs

@@ -14,7 +14,7 @@ pub fn generate_tauri_specta_builder() -> Builder<tauri::Wry> {
     Builder::<tauri::Wry>::new().commands(collect_commands![
         // アセット関連
         asset::get::get_asset,
-        asset::get::get_sorted_assets_for_display,
+        asset::get::get_sorted_asset_summaries,
         asset::get::get_asset_displays_by_booth_id,
         asset::create::request_avatar_import,
         asset::create::request_avatar_wearable_import,

src-tauri/src/command/mod.rs

@@ -0,0 +1,48 @@
+import { AssetSummary } from '@/lib/bindings'
+import { AssetContextType } from '.'
+import { useCallback, useContext, useEffect, useState } from 'react'
+import { refreshAssets } from './logic'
+import { PersistentContext } from '../PersistentContext'
+
+type ReturnProps = {
+  value: AssetContextType
+}
+
+export const useAssetContext = (): ReturnProps => {
+  const [assetDisplaySortedList, setAssetDisplaySortedList] = useState<
+    AssetSummary[]
+  >([])
+  const [filteredIds, setFilteredIds] = useState<string[] | null>(null)
+
+  const { sortBy } = useContext(PersistentContext)
+
+  const refresh = useCallback(async () => {
+    const result = await refreshAssets(sortBy)
+
+    if (result !== null) {
+      setAssetDisplaySortedList(result)
+    }
+  }, [sortBy])
+
+  useEffect(() => {
+    refresh()
+  }, [refresh])
+
+  const value: AssetContextType = {
+    assetDisplaySortedList,
+    setAssetDisplaySortedList: setAssetDisplaySortedList,
+
+    filteredIds: filteredIds,
+    setFilteredIds: setFilteredIds,
+
+    deleteAssetById: async (id: string) => {
+      setAssetDisplaySortedList((prev) =>
+        prev.filter((asset) => asset.id !== id),
+      )
+    },
+
+    refreshAssets: refresh,
+  }
+
+  return { value }
+}

src/components/context/AssetContext/hook.ts

@@ -1,5 +1,6 @@
-import { AssetSummary, AssetType } from '@/lib/bindings'
-import { createContext } from 'react'
+import { AssetSummary } from '@/lib/bindings'
+import { createContext, FC } from 'react'
+import { useAssetContext } from './hook'
 
 export type AssetContextType = {
   assetDisplaySortedList: AssetSummary[]
@@ -10,7 +11,7 @@ export type AssetContextType = {
 
   deleteAssetById: (id: string) => void
 
-  refreshAssets: (assetType?: AssetType) => Promise<void>
+  refreshAssets: () => Promise<void>
 }
 
 export const AssetContext = createContext<AssetContextType>({
@@ -24,3 +25,13 @@ export const AssetContext = createContext<AssetContextType>({
 
   refreshAssets: async () => {},
 })
+
+type Props = {
+  children: React.ReactNode
+}
+
+export const AssetContextProvider: FC<Props> = ({ children }) => {
+  const { value } = useAssetContext()
+
+  return <AssetContext.Provider value={value}>{children}</AssetContext.Provider>
+}

src/components/context/AssetContext/index.tsx

@@ -0,0 +1,14 @@
+import { AssetSummary, commands, SortBy } from '@/lib/bindings'
+
+export const refreshAssets = async (
+  sortBy: SortBy,
+): Promise<AssetSummary[] | null> => {
+  const result = await commands.getSortedAssetSummaries(sortBy)
+
+  if (result.status === 'error') {
+    console.error(result.error)
+    return null
+  }
+
+  return result.data
+}

src/components/context/AssetContext/logic.ts

@@ -18,7 +18,7 @@ type ReturnProps = {
 
 const DEFAULT_PRIORITY = 100
 
-const useDragDropContext = (): ReturnProps => {
+export const useDragDropContext = (): ReturnProps => {
   const [fnList, setFnList] = useState<StateType[]>([])
 
   const register = useCallback(
@@ -85,7 +85,7 @@ const useDragDropContext = (): ReturnProps => {
       isCancelled = true
       unlistenFn?.()
     }
-  }, [fnList, setFnList])
+  }, [fnList])
 
   const dragDropContextValue: DragDropContextType = {
     register,
@@ -95,5 +95,3 @@ const useDragDropContext = (): ReturnProps => {
     dragDropContextValue,
   }
 }
-
-export default useDragDropContext

src/components/context/DragDropContext/hook/index.ts

@@ -1,12 +1,13 @@
 import { createContext, FC } from 'react'
-import useDragDropContext from './hook'
+import { useDragDropContext } from './hook'
 import { Event } from '@tauri-apps/api/event'
 import { DragDropEvent } from '@tauri-apps/api/window'
 
 export type DragDropRegisterConfig = {
   uniqueId: string
   priority?: number
 }
+
 export type DragDropHandlingFn = (
   event: Event<DragDropEvent>,
 ) => Promise<boolean>
@@ -23,7 +24,7 @@ type Props = {
   children: React.ReactNode
 }
 
-const DragDropContextProvider: FC<Props> = ({ children }) => {
+export const DragDropContextProvider: FC<Props> = ({ children }) => {
   const { dragDropContextValue } = useDragDropContext()
 
   return (
@@ -32,5 +33,3 @@ const DragDropContextProvider: FC<Props> = ({ children }) => {
     </DragDropContext.Provider>
   )
 }
-
-export default DragDropContextProvider