feat(lists): Allow updating list name

Author: spuxx-dev

apps/spuxx-client/src/features/lists/components/list-settings.component.tsx

@@ -1,16 +1,19 @@
 import { List } from '@/services/api/lists/lists.types';
 import { intl } from '@spuxx/js-utils';
 import { Accordion, Input } from '@spuxx/solid';
-import { Component, mergeProps } from 'solid-js';
+import { Accessor, Component, mergeProps } from 'solid-js';
 
 interface Props {
-  list: List;
+  list: Accessor<List>;
+  onUpdate: (list: List) => void;
 }
 
 export const ListSettings: Component<Props> = (props) => {
   const p = mergeProps<[Partial<Props>, Props]>({}, props);
-  // eslint-disable-next-line no-console
-  console.log(p);
+
+  const patch = (patch: Partial<List>) => {
+    p.onUpdate({ ...p.list(), ...patch });
+  };
 
   return (
     <Accordion>
@@ -21,7 +24,10 @@ export const ListSettings: Component<Props> = (props) => {
         <Input
           label={intl('lists.component.settings.name.label')}
           size="full"
-          value={props.list.name}
+          value={p.list().name}
+          onChange={(value) => {
+            patch({ name: value });
+          }}
         />
       </Accordion.Item>
     </Accordion>

apps/spuxx-client/src/features/lists/components/list-view.component.tsx

@@ -1,22 +1,32 @@
 import { List } from '@/services/api/lists/lists.types';
 import { Heading, Icon } from '@spuxx/solid';
-import { Component } from 'solid-js';
+import { Component, createSignal, mergeProps } from 'solid-js';
 import { ListItems } from './list-items.component';
 import { ListSettings } from './list-settings.component';
+import { Api } from '@/services/api';
+import styles from './list-view.module.css';
 
 interface Props {
   list: List;
 }
 
 export const ListView: Component<Props> = (props) => {
+  const p = mergeProps<[Partial<Props>, Props]>({}, props);
+  const [list, setList] = createSignal<List>(p.list);
+
+  const handleUpdate = (updatedList: List) => {
+    setList(updatedList);
+    Api.updateList({ args: { list: list() } });
+  };
+
   return (
     <>
-      <Heading level={2}>
-        <Icon icon={props.list.icon} />
-        {props.list.name}
+      <Heading level={2} class={styles.heading}>
+        <Icon icon={list().icon} />
+        {list().name}
       </Heading>
-      <ListItems list={props.list} />
-      <ListSettings list={props.list} />
+      <ListItems list={list()} />
+      <ListSettings list={list} onUpdate={handleUpdate} />
     </>
   );
 };

apps/spuxx-client/src/features/lists/components/list-view.module.css

@@ -0,0 +1,11 @@
+.heading {
+  display: flex;
+  align-items: center;
+
+  justify-content: center;
+  margin-bottom: var(--spx-spacing-md);
+
+  iconify-icon {
+    margin-right: var(--spx-spacing-sm);
+  }
+}

apps/spuxx-client/src/features/lists/pages/list.module.css

@@ -0,0 +1,10 @@
+.container {
+  width: 100%;
+}
+
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

apps/spuxx-client/src/features/lists/pages/list.page.tsx

@@ -1,35 +1,39 @@
 import { Api } from '@/services/api';
-import { List } from '@/services/api/lists/lists.types';
 import { Params, useParams } from '@solidjs/router';
-import { HttpRequestStatus } from '@spuxx/js-utils';
+import { HttpRequest, HttpRequestStatus } from '@spuxx/js-utils';
 import { Container, Icon } from '@spuxx/solid';
 import { Component, createEffect, createSignal, Show } from 'solid-js';
 import { ListView } from '../components/list-view.component';
+import styles from './list.module.css';
 
 export const ListPage: Component = () => {
   const params = useParams<Params>();
-  const [list, setList] = createSignal<List | null>(null);
-  const [status, setStatus] = createSignal<HttpRequestStatus>(
-    HttpRequestStatus.pending
-  );
+
+  const [request, setRequest] = createSignal<HttpRequest | null>(null);
+
   createEffect(async () => {
-    setStatus(HttpRequestStatus.pending);
     const request = Api.findListById({ args: { id: params.id } });
     await request.promise;
-    setStatus(request.status);
-    setList(request.transformedResult);
+    setRequest(request);
   });
 
-  createEffect(() => {});
+  if (request()) return null;
 
   return (
-    <Container class="text-center m-auto w-2xl">
-      <Show when={status() === HttpRequestStatus.pending}>
+    <Container class={styles.container}>
+      <Show
+        when={!request() || request()!.status === HttpRequestStatus.pending}
+      >
         {/* TODO: Move to Loader component in @spuxx/solid?  */}
-        <Icon icon="svg-spinners:ring-resize" class="text-2xl" />
+        <Icon icon="svg-spinners:ring-resize" class={styles.loader} />
       </Show>
-      <Show when={status() === HttpRequestStatus.success && list()}>
-        <ListView list={list()!} />
+      <Show
+        when={
+          request()?.status === HttpRequestStatus.success &&
+          request()?.transformedResult
+        }
+      >
+        <ListView list={request()!.transformedResult} />
       </Show>
     </Container>
   );