Add the ability to edit the service.

Fixes #2

components/AppShelf/AddAppShelfItem.tsx

@@ -22,15 +22,6 @@ export default function AddItemShelfItem(props: any) {
   const { addService } = useConfig();
   const [opened, setOpened] = useState(false);
   const theme = useMantineTheme();
-  const form = useForm({
-    initialValues: {
-      type: 'Other',
-      name: '',
-      icon: '',
-      url: '',
-      apiKey: undefined as unknown as string,
-    },
-  });
   return (
     <>
       <Modal
@@ -40,18 +31,72 @@ export default function AddItemShelfItem(props: any) {
         onClose={() => setOpened(false)}
         title="Add a service"
       >
+        <AddAppShelfItemForm setOpened={setOpened} />
+      </Modal>
+      <AspectRatio
+        style={{
+          minHeight: 120,
+          minWidth: 120,
+        }}
+        ratio={4 / 3}
+      >
+        <Card
+          style={{
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            width: 200,
+            height: 180,
+          }}
+          radius="md"
+        >
+          <Group direction="column" position="center">
+            <motion.div whileHover={{ scale: 1.2 }}>
+              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
+            </motion.div>
+            <Text>Add Service</Text>
+          </Group>
+        </Card>
+      </AspectRatio>
+    </>
+  );
+}
+
+export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
+  const { setOpened } = props;
+  const { addService, config, setConfig } = useConfig();
+  const form = useForm({
+    initialValues: {
+      type: props.type ?? 'Other',
+      name: props.name ?? '',
+      icon: props.icon ?? '',
+      url: props.url ?? '',
+      apiKey: props.apiKey ?? (undefined as unknown as string),
+    },
+  });
+
+  return (
+    <>
       <Center>
-          <Image
-            height={120}
-            width={120}
-            src={form.values.icon}
-            alt="Placeholder"
-            withPlaceholder
-          />
+        <Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
+          // If service already exists, update it.
+          if (config.services && config.services.find((s) => s.name === form.values.name)) {
+            setConfig({
+              ...config,
+              services: config.services.map((s) => {
+                if (s.name === form.values.name) {
+                  return {
+                    ...form.values,
+                  };
+                }
+                return s;
+              }),
+            });
+          } else {
             addService(form.values);
+          }
           setOpened(false);
           form.reset();
         })}
@@ -107,34 +152,9 @@ export default function AddItemShelfItem(props: any) {
         </Group>
 
         <Group grow position="center" mt="xl">
-            <Button type="submit">Add service</Button>
+          <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>
       </form>
-      </Modal>
-      <AspectRatio
-        style={{
-          minHeight: 120,
-          minWidth: 120,
-        }}
-        ratio={4 / 3}
-      >
-        <Card
-          style={{
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-            width: 200,
-            height: 180,
-          }}
-          radius="md"
-        >
-          <Group direction="column" position="center">
-            <motion.div whileHover={{ scale: 1.2 }}>
-              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
-            </motion.div>
-            <Text>Add Service</Text>
-          </Group>
-        </Card>
-      </AspectRatio>
     </>
   );
 }

components/AppShelf/AppShelf.tsx

@@ -103,7 +103,7 @@ export function AppShelfItem(props: any) {
                 opacity: hovering ? 1 : 0,
               }}
             >
-              <AppShelfMenu name={service.name} removeitem={removeService} />
+              <AppShelfMenu service={service} removeitem={removeService} />
             </motion.div>
           </Group>
         </Card.Section>

components/AppShelf/AppShelfMenu.tsx

@@ -1,36 +1,51 @@
-import { Menu, Text } from '@mantine/core';
+import { Menu, Modal, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
+import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { name, removeitem: removeItem } = props;
+  const { service, removeitem: removeItem } = props;
+  const [opened, setOpened] = useState(false);
   return (
+    <>
+      <Modal
+        size="xl"
+        radius="lg"
+        opened={props.opened || opened}
+        onClose={() => setOpened(false)}
+        title="Modify a service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          name={service.name}
+          type={service.type}
+          url={service.url}
+          icon={service.icon}
+          apiKey={service.apiKey}
+          message="Save service"
+        />
+      </Modal>
       <Menu position="right">
         <Menu.Label>Settings</Menu.Label>
         <Menu.Item
           color="primary"
           icon={<Edit size={14} />}
           // TODO: #2 Add the ability to edit the service.
-        onClick={() => {
-          showNotification({
-            color: 'red',
-            title: <Text>Feature not yet implemented</Text>,
-            message: `${name} could not be edited`,
-          });
-        }}
+          onClick={() => setOpened(true)}
         >
-        Rename
+          Edit
         </Menu.Item>
         <Menu.Label>Danger zone</Menu.Label>
         <Menu.Item
           color="red"
           onClick={(e: any) => {
-          removeItem(name);
+            removeItem(service.name);
             showNotification({
               autoClose: 5000,
               title: (
                 <Text>
-                Service <b>{name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully
                 </Text>
               ),
               color: 'green',
@@ -43,5 +58,6 @@ export default function AppShelfMenu(props: any) {
           Delete
         </Menu.Item>
       </Menu>
+    </>
   );
 }