Refactored Forum Modal to use custom hooks.

src/pages/Forum/Components/ActionBar.tsx

@@ -9,7 +9,7 @@ import {
   ComposeP,
   InstanceContainer,
 } from "../../Home/Home-styles";
-import { ForumData, ForumModal } from "../ForumModal";
+import { ForumData, ForumModal } from "../CreateForum/ForumModal";
 
 export const forums = signal<ForumData[]>([]);
 export const resetForumIndexes = (forums: Signal<ForumData[]>) => {

src/pages/Forum/Components/ModalButton.tsx

@@ -18,7 +18,7 @@ import {
   NewMessageSendButton,
   NewMessageSendP,
 } from "../../Home/Home-styles";
-import { publishForum } from "../ForumModal-Data";
+import { publishForum } from "../CreateForum/ForumModal-State";
 
 export interface ModalButtonProps {
   onSubmit: () => Promise<boolean>;

src/pages/Forum/CreateForum/ForumModal-State.ts

@@ -1,11 +1,80 @@
-import { FORUMS_ID } from "../../constants/Identifiers";
+import { Signal, useComputed, useSignal } from "@preact/signals-react";
-import { setNotification } from "../../state/features/notificationsSlice";
+import { useSignals } from "@preact/signals-react/runtime";
-import { store } from "../../state/store";
+import { useEffect } from "react";
-import { getGroup } from "../../utils/QortalRequests";
+import { FORUMS_ID } from "../../../constants/Identifiers";
-import { objectToBase64 } from "../../utils/toBase64";
+import { setNotification } from "../../../state/features/notificationsSlice";
+import { store } from "../../../state/store";
+import { getGroup } from "../../../utils/QortalRequests";
+import { objectToBase64 } from "../../../utils/toBase64";
+import { resetForumIndexes } from "../Components/ActionBar";
 import { ForumData } from "./ForumModal";
-import { Group } from "./GroupPermissionsForm";
+import { Group } from "./GroupPermissions";
 
+export const useForumModalState = (forumData: Signal<ForumData[]>) => {
+  useSignals();
+  const tempData = useSignal<ForumData[]>([]);
+  const selectedForumIndex = useSignal<number>(0);
+  const selectedForum = useComputed<ForumData>(() => {
+    return tempData.value[selectedForumIndex.value];
+  });
+
+  const initializeTempData = () => {
+    tempData.value =
+      forumData.value.length === 0
+        ? [emptyForum]
+        : deepCopyArray(forumData.value);
+    selectedForumIndex.value = 0;
+  };
+
+  useEffect(() => {
+    initializeTempData();
+  }, [forumData.value]);
+
+  const addForum = () => {
+    const newForum = { ...emptyForum };
+    newForum.listIndex = tempData.value.length;
+    tempData.value = [...tempData.value, newForum];
+    selectedForumIndex.value = newForum.listIndex;
+  };
+
+  const removeForum = () => {
+    if (tempData.value.length <= 1) {
+      tempData.value = [{ ...emptyForum }];
+      selectedForumIndex.value = 0;
+    } else {
+      tempData.value = tempData.value.filter(
+        (group, index) => index !== selectedForumIndex.value
+      );
+
+      if (selectedForumIndex.value > 0) selectedForumIndex.value -= 1;
+      else selectedForumIndex.value = 0;
+    }
+    resetForumIndexes(tempData);
+  };
+
+  const updateForums = () => {
+    tempData.value = [...tempData.value];
+  };
+
+  return {
+    tempData,
+    selectedForumIndex,
+    selectedForum,
+    addForum,
+    removeForum,
+    updateForums,
+    initializeTempData,
+  };
+};
+
+const emptyForum: ForumData = {
+  title: "",
+  encryption: "None",
+  groups: [],
+  descriptionHTML: "",
+  descriptionText: "",
+  listIndex: 0,
+};
 const getGroupsData = async (groups: Group[]) => {
   const groupPromises = groups.map(group => getGroup(group.id));
   return await Promise.all(groupPromises);

src/pages/Forum/CreateForum/ForumModal.tsx

@@ -8,18 +8,23 @@ import {
 import { useSignals } from "@preact/signals-react/runtime";
 import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
-import { SelectField } from "../../components/common/SelectField";
+import { SelectField } from "../../../components/common/SelectField";
-import { Spacer } from "../../components/common/Spacer";
+import { Spacer } from "../../../components/common/Spacer";
-import { TextEditor } from "../../components/common/TextEditor/TextEditor";
+import { TextEditor } from "../../../components/common/TextEditor/TextEditor";
-import { useTestIdentifiers } from "../../constants/Identifiers";
+import { useTestIdentifiers } from "../../../constants/Identifiers";
-import { appOwner } from "../../constants/Misc";
+import { appOwner } from "../../../constants/Misc";
-import { RootState } from "../../state/store";
+import { RootState } from "../../../state/store";
-import { NewMessageInputRow } from "../Home/Home-styles";
+import { NewMessageInputRow } from "../../Home/Home-styles";
-import { resetForumIndexes } from "./Components/ActionBar";
+import { resetForumIndexes } from "../Components/ActionBar";
-import { ModalButton } from "./Components/ModalButton";
+import { ModalButton } from "../Components/ModalButton";
-import { QmailTextField } from "./Components/QmailTextField";
+import { QmailTextField } from "../Components/QmailTextField";
-import { deepCopyArray, forumToString, publishForum } from "./ForumModal-Data";
+import {
-import { Group, GroupPermissionsForm } from "./GroupPermissionsForm";
+  deepCopyArray,
+  forumToString,
+  publishForum,
+  useForumModalState,
+} from "./ForumModal-State";
+import { Group, GroupPermissions } from "./GroupPermissions";
 
 export type EncryptionType = "None" | "Group" | "GroupAdmin" | "";
 export interface ForumData {
@@ -45,64 +50,18 @@ interface NewForumModalProps {
 }
 
 export const ForumModal = ({ forumData }: NewForumModalProps) => {
-  useSignals();
-
-  const tempData = useSignal<ForumData[]>([]);
-
-  const emptyForum: ForumData = {
-    title: "",
-    encryption: "None",
-    groups: [],
-    descriptionHTML: "",
-    descriptionText: "",
-    listIndex: 0,
-  };
-
   const { user } = useSelector((state: RootState) => state.auth);
   const isRenderModal = user?.name === appOwner || useTestIdentifiers;
 
-  const selectedForumIndex = useSignal<number>(0);
+  const {
-  const selectedForum = useComputed<ForumData>(() => {
+    tempData,
-    return tempData.value[selectedForumIndex.value];
+    selectedForumIndex,
-  });
+    selectedForum,
-
+    addForum,
-  const initializeTempData = () => {
+    removeForum,
-    tempData.value =
+    updateForums,
-      forumData.value.length === 0
+    initializeTempData,
-        ? [emptyForum]
+  } = useForumModalState(forumData);
-        : deepCopyArray(forumData.value);
-    selectedForumIndex.value = 0;
-  };
-
-  useEffect(() => {
-    initializeTempData();
-  }, [forumData.value]);
-
-  const addForum = () => {
-    const newForum = { ...emptyForum };
-    newForum.listIndex = tempData.value.length;
-    tempData.value = [...tempData.value, newForum];
-    selectedForumIndex.value = newForum.listIndex;
-  };
-
-  const removeForum = () => {
-    if (tempData.value.length <= 1) {
-      tempData.value = [{ ...emptyForum }];
-      selectedForumIndex.value = 0;
-    } else {
-      tempData.value = tempData.value.filter(
-        (group, index) => index !== selectedForumIndex.value
-      );
-
-      if (selectedForumIndex.value > 0) selectedForumIndex.value -= 1;
-      else selectedForumIndex.value = 0;
-    }
-    resetForumIndexes(tempData);
-  };
-
-  const updateForums = () => {
-    tempData.value = [...tempData.value];
-  };
 
   return (
     <ModalButton
@@ -110,10 +69,10 @@ export const ForumModal = ({ forumData }: NewForumModalProps) => {
       onClose={() => initializeTempData()}
       onSubmit={async () => {
         updateForums();
-        const pub = await publishForum(tempData.value);
+        const isPublished = await publishForum(tempData.value);
 
-        if (pub) forumData.value = tempData.value;
+        if (isPublished) forumData.value = tempData.value;
-        return pub;
+        return isPublished;
       }}
       modalLabel={"Manage Forums"}
       buttonLabel={"Publish Forums"}
@@ -189,7 +148,7 @@ export const ForumModal = ({ forumData }: NewForumModalProps) => {
           }}
         />
       </NewMessageInputRow>
-      <GroupPermissionsForm
+      <GroupPermissions
         initialGroups={selectedForum.value?.groups}
         afterChange={g => {
           tempData.value[selectedForumIndex.value].groups = g;

src/pages/Forum/CreateForum/GroupPermissions-State.ts

@@ -0,0 +1,41 @@
+import { useSignal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { useEffect } from "react";
+import { Group } from "./GroupPermissions";
+
+export const useGroupPermissionsState = (
+  initialGroups?: Group[],
+  afterChange?: (g: Group[]) => void
+) => {
+  useSignals();
+  const newGroup = {
+    id: "",
+    permissions: "Read",
+  } as Group;
+  const groups = useSignal<Group[]>(initialGroups || [newGroup]);
+
+  useEffect(() => {
+    if (initialGroups)
+      groups.value = initialGroups?.length > 0 ? initialGroups : [newGroup];
+  }, [initialGroups]);
+
+  const addGroup = () => {
+    groups.value = [...groups.value, newGroup];
+    if (afterChange) afterChange(groups.value);
+  };
+
+  const removeGroup = (groupIndex: number) => {
+    if (groups.value.length > 1)
+      groups.value = groups.value.filter(
+        (group, index) => index !== groupIndex
+      );
+    else groups.value = [newGroup];
+    if (afterChange) afterChange(groups.value);
+  };
+
+  const updateGroups = () => {
+    if (afterChange) afterChange(groups.value);
+  };
+
+  return { groups, addGroup, removeGroup, updateGroups };
+};

src/pages/Forum/CreateForum/GroupPermissions.tsx

@@ -2,14 +2,12 @@ import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import { Box, IconButton } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { Signal, useSignal } from "@preact/signals-react";
-import { useSignals } from "@preact/signals-react/runtime";
-import React, { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
-import { SelectField } from "../../components/common/SelectField";
+import { SelectField } from "../../../components/common/SelectField";
-import { NewMessageInputRow } from "../Home/Home-styles";
+import { NewMessageInputRow } from "../../Home/Home-styles";
-import { QmailTextField } from "./Components/QmailTextField";
+import { QmailTextField } from "../Components/QmailTextField";
 import { GroupPermissionType } from "./ForumModal";
+import { useGroupPermissionsState } from "./GroupPermissions-State";
 
 export interface Group {
   id: string;
@@ -19,47 +17,15 @@ export interface GroupPermissionsFormProps {
   initialGroups?: Group[];
   afterChange?: (g: Group[]) => void;
 }
-export const GroupPermissionsForm = ({
+export const GroupPermissions = ({
   initialGroups,
   afterChange,
 }: GroupPermissionsFormProps) => {
-  useSignals();
+  const { groups, addGroup, removeGroup, updateGroups } =
-
+    useGroupPermissionsState(initialGroups, afterChange);
-  const newGroup = {
-    id: "",
-    permissions: "Read",
-  } as Group;
-  const groups = useSignal<Group[]>(initialGroups || [newGroup]);
-
-  useEffect(() => {
-    if (initialGroups)
-      groups.value = initialGroups?.length > 0 ? initialGroups : [newGroup];
-  }, [initialGroups]);
 
   const uid = new ShortUniqueId();
 
-  const addGroup = () => {
-    groups.value = [...groups.value, newGroup];
-    if (afterChange) afterChange(groups.value);
-  };
-
-  const removeGroup = (groupIndex: number) => {
-    if (groups.value.length > 1)
-      groups.value = groups.value.filter(
-        (group, index) => index !== groupIndex
-      );
-    else groups.value = [newGroup];
-    if (afterChange) afterChange(groups.value);
-  };
-
-  const updateGroups = () => {
-    if (afterChange) afterChange(groups.value);
-  };
-  const buttonStyle = {
-    width: "70px",
-    height: "70px",
-  };
-
   const StyledIconButton = styled(IconButton)(`
     width: 60px;
     height: 60px;

src/pages/Forum/Forum.tsx

@@ -9,8 +9,8 @@ import {
   InstanceContainer,
 } from "../Home/Home-styles";
 import { GroupMail } from "../Mail/GroupMail";
-import { Group } from "./GroupPermissionsForm";
+import { Group } from "./CreateForum/GroupPermissions";
-import { EncryptionType, ForumData } from "./ForumModal";
+import { EncryptionType, ForumData } from "./CreateForum/ForumModal";
 
 export const Forum = ({
   title,

src/utils/QortalRequests.ts

@@ -1,6 +1,6 @@
 import { FORUMS_ID } from "../constants/Identifiers";
 import { appOwner } from "../constants/Misc";
-import { ForumData } from "../pages/Forum/ForumModal";
+import { ForumData } from "../pages/Forum/CreateForum/ForumModal";
 
 export interface GroupData {
   groupId: number;