feat: create works, just not ideal

apps/client/src/common/api/ontimeApi.ts

@@ -80,6 +80,14 @@ export async function postAliases(data: Alias[]) {
   return axios.post(`${ontimeURL}/aliases`, data);
 }
 
+/**
+ * @description HTTP request to create an alias
+ * @return {Promise}
+ */
+export async function postAlias(data: Alias) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
 /**
  * @description HTTP request to update aliases
  * @return {Promise}

apps/client/src/features/app-settings/panel/url-preset-panel/UrlPresetList.tsx

@@ -1,16 +1,37 @@
+import { postAlias } from '../../../../common/api/ontimeApi';
 import useAliases from '../../../../common/hooks-query/useAliases';
 import ModalLoader from '../../../modals/modal-loader/ModalLoader';
 import * as Panel from '../PanelUtils';
 
+import UrlPresetForm, { UrlPresetFormValues } from './UrlPresetForm';
 import UrlPresetListItem from './UrlPresetListItem';
 
-export default function UrlPresetList() {
+interface UrlPresetListProps {
+  isCreatingPresetURL: boolean;
+  onToggleCreate: () => void;
+}
+
+export default function UrlPresetList({ isCreatingPresetURL, onToggleCreate }: UrlPresetListProps) {
   const { data, isFetching, refetch } = useAliases();
 
   const handleRefetch = async () => {
     await refetch();
   };
 
+  const handleSubmitCreate = async (values: UrlPresetFormValues) => {
+    try {
+      // TODO: fix this
+      // @ts-ignore
+      await postAlias({
+        ...values,
+        enabled: true,
+      });
+      await refetch();
+    } catch (error) {
+      // some error handling here
+    }
+  };
+
   if (isFetching) {
     return <ModalLoader />;
   }
@@ -26,6 +47,14 @@ export default function UrlPresetList() {
         </tr>
       </thead>
       <tbody>
+        {isCreatingPresetURL ? (
+          <tr>
+            <td colSpan={99}>
+              <UrlPresetForm onCancel={onToggleCreate} onSubmit={handleSubmitCreate} submitError='' />
+              {/* {submitError && <span className={style.createSubmitError}>{submitError}</span>} */}
+            </td>
+          </tr>
+        ) : null}
         {(data || []).map((alias) => {
           return (
             <UrlPresetListItem

apps/client/src/features/app-settings/panel/url-preset-panel/UrlPresetPanel.tsx

@@ -1,4 +1,5 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+import { useState } from 'react';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Button } from '@chakra-ui/react';
 
 import ModalLink from '../../../modals/ModalLink';
 import * as Panel from '../PanelUtils';
@@ -10,6 +11,12 @@ import style from './UrlPresetPanel.module.scss';
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
 
 export default function UrlPresetPanel() {
+  const [isCreatingPresetURL, setIsCreatingPresetURL] = useState(false);
+
+  const handleToggleCreate = () => {
+    setIsCreatingPresetURL((prev) => !prev);
+  };
+
   return (
     <>
       <Panel.Header>URL Presets</Panel.Header>
@@ -33,8 +40,14 @@ export default function UrlPresetPanel() {
                 marginTop: '1rem',
               }}
             >
-              <UrlPresetList />
+              <Panel.SubHeader>
+                Manage URL presets
+                <Button variant='ontime-filled' onClick={handleToggleCreate}>
+                  New
+                </Button>
+              </Panel.SubHeader>
             </div>
+            <UrlPresetList isCreatingPresetURL={isCreatingPresetURL} onToggleCreate={handleToggleCreate} />
           </main>
         </Panel.Card>
       </Panel.Section>