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,76 +31,7 @@ export default function AddItemShelfItem(props: any) {
         onClose={() => setOpened(false)}
         title="Add a service"
       >
-        <Center>
-          <Image
-            height={120}
-            width={120}
-            src={form.values.icon}
-            alt="Placeholder"
-            withPlaceholder
-          />
-        </Center>
-        <form
-          onSubmit={form.onSubmit(() => {
-            addService(form.values);
-            setOpened(false);
-            form.reset();
-          })}
-        >
-          <Group direction="column" grow>
-            <TextInput
-              required
-              label="Service name"
-              placeholder="Plex"
-              value={form.values.name}
-              onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
-              error={form.errors.name && 'Invalid name'}
-            />
-
-            <TextInput
-              required
-              label="Icon url"
-              placeholder="https://i.gifer.com/ANPC.gif"
-              value={form.values.icon}
-              onChange={(event) => {
-                form.setFieldValue('icon', event.currentTarget.value);
-              }}
-              error={form.errors.icon && 'Icon url is invalid'}
-            />
-            <TextInput
-              required
-              label="Service url"
-              placeholder="http://localhost:8989"
-              value={form.values.url}
-              onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
-              error={form.errors.url && 'Service url is invalid'}
-            />
-            <Select
-              label="Select the type of service (used for API calls)"
-              defaultValue="Other"
-              placeholder="Pick one"
-              value={form.values.type}
-              required
-              searchable
-              onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
-              data={ServiceTypeList}
-            />
-            {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
-              <TextInput
-                required
-                label="API key"
-                placeholder="Your API key"
-                value={form.values.apiKey}
-                onChange={(event) => form.setFieldValue('apiKey', event.currentTarget.value)}
-                error={form.errors.apiKey && 'Invalid API key'}
-              />
-            )}
-          </Group>
-
-          <Group grow position="center" mt="xl">
-            <Button type="submit">Add service</Button>
-          </Group>
-        </form>
+        <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
       <AspectRatio
         style={{
@@ -138,3 +60,101 @@ export default function AddItemShelfItem(props: any) {
     </>
   );
 }
+
+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 />
+      </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();
+        })}
+      >
+        <Group direction="column" grow>
+          <TextInput
+            required
+            label="Service name"
+            placeholder="Plex"
+            value={form.values.name}
+            onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
+            error={form.errors.name && 'Invalid name'}
+          />
+
+          <TextInput
+            required
+            label="Icon url"
+            placeholder="https://i.gifer.com/ANPC.gif"
+            value={form.values.icon}
+            onChange={(event) => {
+              form.setFieldValue('icon', event.currentTarget.value);
+            }}
+            error={form.errors.icon && 'Icon url is invalid'}
+          />
+          <TextInput
+            required
+            label="Service url"
+            placeholder="http://localhost:8989"
+            value={form.values.url}
+            onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
+            error={form.errors.url && 'Service url is invalid'}
+          />
+          <Select
+            label="Select the type of service (used for API calls)"
+            defaultValue="Other"
+            placeholder="Pick one"
+            value={form.values.type}
+            required
+            searchable
+            onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
+            data={ServiceTypeList}
+          />
+          {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
+            <TextInput
+              required
+              label="API key"
+              placeholder="Your API key"
+              value={form.values.apiKey}
+              onChange={(event) => form.setFieldValue('apiKey', event.currentTarget.value)}
+              error={form.errors.apiKey && 'Invalid API key'}
+            />
+          )}
+        </Group>
+
+        <Group grow position="center" mt="xl">
+          <Button type="submit">{props.message ?? 'Add service'}</Button>
+        </Group>
+      </form>
+    </>
+  );
+}

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,47 +1,63 @@
-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 (
-    <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`,
-          });
-        }}
+    <>
+      <Modal
+        size="xl"
+        radius="lg"
+        opened={props.opened || opened}
+        onClose={() => setOpened(false)}
+        title="Modify a service"
       >
-        Rename
-      </Menu.Item>
-      <Menu.Label>Danger zone</Menu.Label>
-      <Menu.Item
-        color="red"
-        onClick={(e: any) => {
-          removeItem(name);
-          showNotification({
-            autoClose: 5000,
-            title: (
-              <Text>
-                Service <b>{name}</b> removed successfully
-              </Text>
-            ),
-            color: 'green',
-            icon: <Check />,
-            message: undefined,
-          });
-        }}
-        icon={<Trash size={14} />}
-      >
-        Delete
-      </Menu.Item>
-    </Menu>
+        <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={() => setOpened(true)}
+        >
+          Edit
+        </Menu.Item>
+        <Menu.Label>Danger zone</Menu.Label>
+        <Menu.Item
+          color="red"
+          onClick={(e: any) => {
+            removeItem(service.name);
+            showNotification({
+              autoClose: 5000,
+              title: (
+                <Text>
+                  Service <b>{service.name}</b> removed successfully
+                </Text>
+              ),
+              color: 'green',
+              icon: <Check />,
+              message: undefined,
+            });
+          }}
+          icon={<Trash size={14} />}
+        >
+          Delete
+        </Menu.Item>
+      </Menu>
+    </>
   );
 }