feat(front): let it also be inferred when selecting a path from a button

SARDONYX-sard · Nov 9, 2024 · b5adee3 · b5adee3
1 parent c3fc423
commit b5adee3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/gui/frontend/src/components/atoms/ConvertButton/ConvertButton.tsx b/gui/frontend/src/components/atoms/ConvertButton/ConvertButton.tsx
@@ -36,7 +36,7 @@ export function ConvertButton({ loading, progress, ...props }: Props) {
   return (
     <LoadingButton
       disabled={loading || isComplete}
-      endIcon={loading || isComplete ? <CircularProgressWithLabel value={progress} /> : <ConvertIcon />}
+      endIcon={loading || isComplete ? undefined : <ConvertIcon />}
       loading={loading}
       loadingPosition='end'
       sx={{
@@ -74,7 +74,13 @@ export function ConvertButton({ loading, progress, ...props }: Props) {
       variant='contained'
       {...props}
     >
-      <span>{loading ? t('converting-btn') : isComplete ? 'OK' : t('convert-btn')}</span>
+      <span>
+        {loading
+          ? `${t('converting-btn')} ${<CircularProgressWithLabel value={progress} />}`
+          : isComplete
+            ? `OK ${<CircularProgressWithLabel value={progress} />}`
+            : t('convert-btn')}
+      </span>
     </LoadingButton>
   );
 }
diff --git a/gui/frontend/src/components/organisms/ConvertForm/ConvertForm.tsx b/gui/frontend/src/components/organisms/ConvertForm/ConvertForm.tsx
@@ -5,14 +5,13 @@ 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';
 import { progressListener } from '@/services/api/event';
 import { LOG, type LogLevel } from '@/services/api/log';
 
-import { parseDarPath } from '../../../lib/path/parseDarPath';
-
 import { CheckboxField } from './CheckboxField';
 import { InputModInfoField } from './InputModInfoField';
 import { InputPathField } from './InputPathField';
@@ -120,6 +119,7 @@ export function ConvertForm() {
 
           {pathFields.map((props) => {
             let onChange: ComponentPropsWithRef<typeof InputPathField>['onChange'] | undefined;
+            let setPathHook: ((path: string) => void) | undefined;
 
             if (props.name === 'src') {
               onChange = (e) => {
@@ -129,8 +129,15 @@ export function ConvertForm() {
                   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} {...props} />;
+            return <InputPathField key={props.name} onChange={onChange} setPathHook={setPathHook} {...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,9 +15,17 @@ type Props = {
   placeholder: string;
   helperText: string | ReactNode;
   onChange?: TextFieldProps['onChange'];
+  setPathHook?: (path: string) => void;
 };
 
-export const InputPathField = ({ name, label, placeholder, helperText, onChange: onChangeOuter }: Props) => {
+export const InputPathField = ({
+  name,
+  label,
+  placeholder,
+  helperText,
+  onChange: onChangeOuter,
+  setPathHook,
+}: Props) => {
   const { control, getValues, setValue } = useFormContext<FormProps>();
 
   const path = (() => {
@@ -33,6 +41,7 @@ export const InputPathField = ({ name, label, placeholder, helperText, onChange:
   const handleSetPath = (path: string) => {
     setValue(name, path);
     setPathToStorage(name, path);
+    setPathHook?.(path);
   };
 
   return (