add short editor item and data model for categories

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -1,16 +1,56 @@
 import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
 import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
 import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
-import { PresentableGuild } from '@roleypoly/types';
+import { Category, PresentableGuild } from '@roleypoly/types';
+import React from 'react';
 
 export type EditorShellProps = {
   guild: PresentableGuild;
+  onGuildChange?: (guild: PresentableGuild) => void;
+  onCategoryChange?: (category: Category) => void;
+  onMessageChange?: (message: PresentableGuild['data']['message']) => void;
 };
 
-export const EditorShell = (props: EditorShellProps) => (
-  <TabView initialTab={0}>
-    <Tab title="Guild Details">{() => <EditorDetailsTab {...props} />}</Tab>
-    <Tab title="Categories & Roles">{() => <EditorCategoriesTab {...props} />}</Tab>
-    <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
-  </TabView>
-);
+export const EditorShell = (props: EditorShellProps) => {
+  const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
+
+  const reset = () => {
+    setGuild(props.guild);
+  };
+
+  const onCategoryChange = (category: Category) => {
+    setGuild((currentGuild) => {
+      const categories = [
+        ...currentGuild.data.categories.filter((x) => x.id !== category.id),
+        category,
+      ];
+      return { ...currentGuild, data: { ...currentGuild.data, categories } };
+    });
+  };
+
+  const onMessageChange = (message: PresentableGuild['data']['message']) => {
+    setGuild((currentGuild) => {
+      return { ...currentGuild, data: { ...guild.data, message } };
+    });
+  };
+
+  return (
+    <TabView initialTab={0}>
+      <Tab title="Guild Details">
+        {() => (
+          <EditorDetailsTab {...props} guild={guild} onMessageChange={onMessageChange} />
+        )}
+      </Tab>
+      <Tab title="Categories & Roles">
+        {() => (
+          <EditorCategoriesTab
+            {...props}
+            guild={guild}
+            onCategoryChange={onCategoryChange}
+          />
+        )}
+      </Tab>
+      <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
+    </TabView>
+  );
+};