feat: some cleanup

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx

@@ -1,71 +1,16 @@
-import { useEffect } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { Alias } from 'ontime-types';
-
 import useAliases from '../../../../common/hooks-query/useAliases';
 import ModalLoader from '../../../../features/modals/modal-loader/ModalLoader';
 import * as Panel from '../PanelUtils';
 
 import UrlAliasListItem from './UrlAliasListItem';
 
-type Aliases = {
-  aliases: Alias[];
-};
-
 export default function UrlAliasList() {
-  const { data, status, isFetching, refetch } = useAliases();
-
-  // const { emitError } = useEmitLog();
-  const {
-    control,
-    // handleSubmit,
-    register,
-    reset,
-    formState: { isSubmitting, isDirty, isValid },
-  } = useForm<Aliases>({
-    defaultValues: { aliases: data },
-    values: { aliases: data || [] },
-    resetOptions: {
-      keepDirtyValues: true,
-    },
-  });
-
-  console.log({ isSubmitting, isDirty, isValid, data });
-
-  const { fields, remove } = useFieldArray({
-    name: 'aliases',
-    control,
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset({ aliases: data });
-    }
-  }, [data, reset]);
+  const { data, isFetching, refetch } = useAliases();
 
   const handleRefetch = async () => {
     await refetch();
   };
 
-  // const onReset = () => {
-  //   reset({ aliases: data });
-  // };
-
-  // const addNew = () => {
-  //   if (fields.length > 20) {
-  //     emitError('Maximum amount of aliases reached (20)');
-  //     return;
-  //   }
-  //   append({
-  //     enabled: false,
-  //     alias: '',
-  //     pathAndParams: '',
-  //   });
-  // };
-
-  const disableInputs = status === 'pending';
-  // const hasTooManyOptions = fields.length >= 20;
-
   if (isFetching) {
     return <ModalLoader />;
   }
@@ -81,14 +26,14 @@ export default function UrlAliasList() {
         </tr>
       </thead>
       <tbody>
-        {fields.map((alias) => {
+        {(data || []).map((alias) => {
           return (
             <UrlAliasListItem
               alias={alias.alias}
               enabled={alias.enabled}
               pathAndParams={alias.pathAndParams}
               onRefetch={handleRefetch}
-              key={alias.id}
+              key={alias.alias}
             />
           );
         })}

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx

@@ -15,7 +15,7 @@ export default function UrlAliasPanel() {
       <Panel.Header>URL Aliases</Panel.Header>
       <Panel.Section>
         <Panel.Card>
-          <div>
+          <main>
             <Alert status='info' variant='ontime-on-light-info'>
               <AlertIcon />
               <div className={style.column}>
@@ -28,8 +28,14 @@ export default function UrlAliasPanel() {
                 </AlertDescription>
               </div>
             </Alert>
-            <UrlAliasList />
-          </div>
+            <div
+              style={{
+                marginTop: '1rem',
+              }}
+            >
+              <UrlAliasList />
+            </div>
+          </main>
         </Panel.Card>
       </Panel.Section>
     </>