updating channel subject

app/client/web/src/details/Details.module.css

@@ -175,7 +175,7 @@
   .cards {
     min-width: 0;
     width: 100%;
-    flex-shink: 1;
+    flex-shrink: 1;
     overflow: auto;
   }
 }

app/client/web/src/details/Details.tsx

@@ -4,21 +4,46 @@ import classes from './Details.module.css'
 import { IconUserCog, IconEyeOff, IconAlertHexagon, IconMessageX, IconLogout2, IconHome, IconServer, IconShield, IconShieldOff, IconCalendarClock, IconExclamationCircle, IconX, IconEdit, IconDeviceFloppy, IconArrowBack, IconLabel } from '@tabler/icons-react'
 import { Divider, Text, Textarea, Image, TextInput, ActionIcon } from '@mantine/core'
 import { Card } from '../card/Card';
+import { modals } from '@mantine/modals'
 
 export function Details({ close }: { close?: () => void }) {
   const { state, actions } = useDetails()
+  const [saving, setSaving] = useState(false);
 
   const undo = () => {
     actions.undoSubject();
   }
 
-  const save = () => {
-    console.log('save subject');
+  const save = async () => {
+    if (!saving) {
+      setSaving(true);
+      try {
+        await actions.saveSubject();
+      } catch (err) {
+        console.log(err);
+        showError();
+      }
+      setSaving(false);
+    }
+  }
+
+  const showError = () => {
+    modals.openConfirmModal({
+      title: state.strings.operationFailed,
+      withCloseButton: true,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{state.strings.tryAgain}</Text>,
+      cancelProps: { display: 'none' },
+      confirmProps: { display: 'none' },
+    })
   }
 
   const cards = state.channelCards.map((card, index) => (
-      <Card className={classes.card} key={index} imageUrl={card.imageUrl} name={card.name} placeHolder={state.strings.name}
-        handle={card.handle} node={card.node}/>
+      <Card className={classes.card} key={index} imageUrl={card.imageUrl} name={card.name} placeholder={state.strings.name}
+        handle={card.handle} node={card.node} actions={[]} />
   ))
 
   return (
@@ -42,7 +67,7 @@ export function Details({ close }: { close?: () => void }) {
                           <ActionIcon key="undo" variant="subtle" onClick={undo}><IconArrowBack /></ActionIcon>
                         )}
                         { state.editSubject != state.subject && (
-                          <ActionIcon key="save" variant="subtle" onClick={save}><IconDeviceFloppy /></ActionIcon>
+                          <ActionIcon key="save" variant="subtle" onClick={save} loading={saving}><IconDeviceFloppy /></ActionIcon>
                         )}
                       </div>
                     } />
@@ -135,9 +160,13 @@ export function Details({ close }: { close?: () => void }) {
           <Divider className={classes.divider} size="md" />
           <div className={classes.cards}>
             { state.hostCard && (
-              <Card className={classes.card} imageUrl={state.hostCard.imageUrl} name={state.hostCard.name} placeHolder={state.strings.name}
+              <Card className={classes.card} imageUrl={state.hostCard.imageUrl} name={state.hostCard.name} placeholder={state.strings.name}
                 handle={state.hostCard.handle} node={state.hostCard.node} actions={[<IconHome key="host" size={20} />]} />
             )}
+            { state.profile && (
+              <Card className={classes.card} imageUrl={state.profile.imageUrl} name={state.profile.name} placeholder={state.strings.name}
+                handle={state.profile.handle} node={state.profile.node} actions={state.host ? [<IconHome key="me" size={20} />] : []} />
+            )}
             { cards }
             { state.unknownContacts > 0 && (
               <Text className={classes.unknown}>{ state.strings.unknown }: {state.unknownContacts}</Text>

app/client/web/src/details/useDetails.hook.ts

@@ -8,6 +8,9 @@ export function useDetails() {
   const display = useContext(DisplayContext) as ContextType
   const app = useContext(AppContext) as ContextType
   const [state, setState] = useState({
+    cardId: null as null | string,
+    channelId: '',
+    detail: undefined as undefined | FocusDetail,
     access: false,
     host: false,
     sealed: false,
@@ -18,10 +21,11 @@ export function useDetails() {
     subject: '',
     editSubject: '',
     created: '',
-    profile: null as null | Porfile,
-    cards: [] as Card[],
+    profile: null as null | Profile,
+    cards: new Map<string, Card>(),
     hostCard: null as null | Card,
     channelCards: [] as Card[],
+    unknownContacts: 0,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -89,16 +93,16 @@ export function useDetails() {
         updateState({ profile });
       }
       const setDetail = (focused: { cardId: string | null, channelId: string, detail: FocusDetail | null }) => {
-
         const detail = focused ? focused.detail : null;
         const cardId = focused.cardId;
+        const channelId = focused.channelId;
         const access = Boolean(detail);
         const sealed = detail?.sealed;
         const locked = detail?.locked;
         const host = cardId == null;
         const subject = detail?.data?.subject ? detail.data.subject : '';
         const created = detail?.created ? getTimestamp(detail.created) : '';
-        updateState({ detail, editSubject: subject, subject, cardId, access, sealed, locked, host, created });
+        updateState({ detail, editSubject: subject, subject, channelId, cardId, access, sealed, locked, host, created });
       }
       focus.addDetailListener(setDetail);
       contact.addCardListener(setCards);
@@ -118,8 +122,9 @@ export function useDetails() {
     undoSubject: () => {
       updateState({ editSubject: state.subject });
     },
-    saveSubject: () => {
-      console.log('saving subject');
+    saveSubject: async () => {
+      const content = app.state.session.getContent()
+      await content.setChannelSubject(state.channelId, state.sealed ? 'sealed' : 'superbasic', { subject: state.editSubject });
     },
   }
 

app/sdk/src/net/setChannelSubject.ts

@@ -5,7 +5,7 @@ export async function setChannelSubject(node: string, secure: boolean, token: st
   const endpoint = `http${secure ? 's' : ''}://${node}/content/channels/${channelId}/subject?agent=${token}`;
   const { status } = await fetchWithTimeout(endpoint, {
     method: 'PUT',
-    body: JSON.stringify(data),
+    body: JSON.stringify(params),
   });
   checkResponse(status);
 }