fix(front): fix problem with table selection being in dir mode

SARDONYX-sard · Nov 11, 2024 · 825e079 · 825e079
1 parent b70ed53
commit 825e079
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 32 deletions.
diff --git a/gui/frontend/src/components/organisms/ConvertForm/ConvertForm.tsx b/gui/frontend/src/components/organisms/ConvertForm/ConvertForm.tsx
@@ -5,7 +5,6 @@ import { FormProvider, type SubmitHandler, useForm } from 'react-hook-form';
 
 import { useTranslation } from '@/components/hooks/useTranslation';
 import { ConvertNav, ConvertNavPadding } from '@/components/organisms/ConvertNav';
-import { parseDarPath } from '@/lib/path/parseDarPath';
 import { STORAGE } from '@/lib/storage';
 import { PRIVATE_CACHE_OBJ, PUB_CACHE_OBJ } from '@/lib/storage/cacheKeys';
 import { convertDar2oar } from '@/services/api/convert';
@@ -19,8 +18,6 @@ import { useCheckFields } from './useCheckField';
 import { useInputPathFields } from './useInputPathField';
 import { useModInfoFields } from './useModInfoField';
 
-import type { ComponentPropsWithRef } from 'react';
-
 export type FormProps = {
   src: string;
   dst: string;
@@ -37,7 +34,7 @@ export type FormProps = {
   progress: number;
 };
 
-const getInitialFormValues = (): FormProps => ({
+const defaultFormValues = (): FormProps => ({
   src: STORAGE.getOrDefault(PRIVATE_CACHE_OBJ.src),
   dst: STORAGE.getOrDefault(PRIVATE_CACHE_OBJ.dst),
   modName: STORAGE.getOrDefault(PRIVATE_CACHE_OBJ.modName),
@@ -73,9 +70,9 @@ export function ConvertForm() {
     mode: 'onBlur',
     criteriaMode: 'all',
     shouldFocusError: false,
-    defaultValues: getInitialFormValues(),
+    defaultValues: defaultFormValues(),
   });
-  const { setValue, getValues } = methods;
+  const { setValue } = methods;
 
   const handleAllClear = () => {
     for (const key of PATH_FORM_VALUES) {
@@ -118,26 +115,7 @@ export function ConvertForm() {
           </Button>
 
           {pathFields.map((props) => {
-            let onChange: ComponentPropsWithRef<typeof InputPathField>['onChange'] | undefined;
-            let setPathHook: ((path: string) => void) | undefined;
-
-            if (props.name === 'src') {
-              onChange = (e) => {
-                if (getValues('inferPath')) {
-                  const parsedPath = parseDarPath(e.target.value);
-                  setValue('dst', parsedPath.oarRoot);
-                  setValue('modName', parsedPath.modName ?? '');
-                }
-              };
-              setPathHook = (path: string) => {
-                if (getValues('inferPath')) {
-                  const parsedPath = parseDarPath(path);
-                  setValue('dst', parsedPath.oarRoot);
-                  setValue('modName', parsedPath.modName ?? '');
-                }
-              };
-            }
-            return <InputPathField key={props.name} onChange={onChange} setPathHook={setPathHook} {...props} />;
+            return <InputPathField key={props.name} {...props} />;
           })}
 
           <Grid columnSpacing={1} container={true} gap={2} sx={{ width: '100%' }}>

diff --git a/gui/frontend/src/components/organisms/ConvertForm/InputPathField.tsx b/gui/frontend/src/components/organisms/ConvertForm/InputPathField.tsx
@@ -15,6 +15,7 @@ type Props = {
   placeholder: string;
   helperText: string | ReactNode;
   onChange?: TextFieldProps['onChange'];
+  isDir: boolean;
   setPathHook?: (path: string) => void;
 };
 
@@ -25,6 +26,7 @@ export const InputPathField = ({
   helperText,
   onChange: onChangeOuter,
   setPathHook,
+  isDir,
 }: Props) => {
   const { control, getValues, setValue } = useFormContext<FormProps>();
 
@@ -73,7 +75,7 @@ export const InputPathField = ({
             </Grid>
 
             <Grid size={2}>
-              <SelectPathButton isDir={true} path={path} setPath={handleSetPath} />
+              <SelectPathButton isDir={isDir} path={path} setPath={handleSetPath} />
             </Grid>
           </Grid>
         );

diff --git a/gui/frontend/src/components/organisms/ConvertForm/useInputPathField.tsx b/gui/frontend/src/components/organisms/ConvertForm/useInputPathField.tsx
@@ -1,12 +1,17 @@
+import { useFormContext } from 'react-hook-form';
+
 import { useTranslation } from '@/components/hooks/useTranslation';
+import { parseDarPath } from '@/lib/path/parseDarPath';
 
 import { MappingHelpButton } from './MappingHelpButton';
 
+import type { FormProps } from './ConvertForm';
 import type { InputPathField } from './InputPathField';
 import type { ComponentPropsWithRef } from 'react';
 
 export const useInputPathFields = () => {
   const { t } = useTranslation();
+  const { setValue, getValues } = useFormContext<FormProps>();
 
   return [
     {
@@ -20,6 +25,21 @@ export const useInputPathFields = () => {
       label: t('convert-form-dar-label'),
       name: 'src',
       placeholder: '[...]/<MOD NAME>',
+      isDir: true,
+      onChange(e) {
+        if (getValues('inferPath')) {
+          const parsedPath = parseDarPath(e.target.value);
+          setValue('dst', parsedPath.oarRoot);
+          setValue('modName', parsedPath.modName ?? '');
+        }
+      },
+      setPathHook(path: string) {
+        if (getValues('inferPath')) {
+          const parsedPath = parseDarPath(path);
+          setValue('dst', parsedPath.oarRoot);
+          setValue('modName', parsedPath.modName ?? '');
+        }
+      },
     },
     {
       helperText: (
@@ -31,19 +51,22 @@ export const useInputPathFields = () => {
       label: t('convert-form-oar-label'),
       name: 'dst',
       placeholder: '[...]/<MOD NAME>',
+      isDir: true,
     },
 
     {
       helperText: <MappingHelpButton />,
       label: t('convert-form-mapping-label'),
       name: 'mapping1personPath',
       placeholder: './mapping_table.txt',
+      isDir: false,
     },
     {
       helperText: t('convert-form-mapping-helper'),
       label: t('convert-form-mapping-1st-label'),
       name: 'mappingPath',
       placeholder: './mapping_table_for_1st_person.txt',
+      isDir: false,
     },
   ] satisfies ComponentPropsWithRef<typeof InputPathField>[];
 };
diff --git a/gui/frontend/src/components/organisms/ConvertForm/useModInfoField.tsx b/gui/frontend/src/components/organisms/ConvertForm/useModInfoField.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from '@/components/hooks/useTranslation';
 
-import type { InputPathField } from './InputPathField';
+import { InputModInfoField } from './InputModInfoField';
+
 import type { ComponentPropsWithRef } from 'react';
 
 export const useModInfoFields = () => {
@@ -19,5 +20,5 @@ export const useModInfoFields = () => {
       label: t('convert-form-author-name'),
       placeholder: t('convert-form-author-placeholder'),
     },
-  ] satisfies ComponentPropsWithRef<typeof InputPathField>[];
+  ] satisfies ComponentPropsWithRef<typeof InputModInfoField>[];
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "dev:front": "next ./gui/frontend",
     "fmt": "biome format --write ./ && prettier --cache --write \"**/*.{yaml,yml}\" --ignore-path ./.gitignore && cargo fmt --all",
     "lint": "next lint ./gui/frontend && biome lint ./ && cargo clippy --workspace",
-    "lint:fix": "npm run fmt && next lint ./gui/frontend --fix && biome check --write ./  && cargo clippy --workspace --fix --allow-staged --allow-dirty",
+    "lint:fix": "npm run fmt && biome check --write ./ && next lint ./gui/frontend --fix && cargo clippy --workspace --fix --allow-staged --allow-dirty",
     "tauri": "tauri",
     "test": "vitest run",
     "test:all": "npm test && npm run test:back",
@@ -40,7 +40,7 @@
     "react-i18next": "15.0.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "^1.9.4",
     "@tauri-apps/cli": "2.0.3",
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",