edit group fix

src/app/(main)/settings/group/edit/page.tsx

@@ -1,3 +1,4 @@
+import { searchParamsProps } from "@/app/utils/fetchUtil";
 import EditPosition from "@/components/EditPosition";
 import EditUserGroup from "@/components/EditUserGroup";
 import { I18nProvider, getServerI18n } from "@/i18n";
@@ -8,7 +9,9 @@ export const metadata: Metadata = {
   title: "Edit User Group",
 };
 
-const Group: React.FC = async () => {
+const Group: React.FC<searchParamsProps> = async ({
+  searchParams,
+}) => {
   const { t } = await getServerI18n("group");
 
   // Preload necessary dependencies
@@ -17,7 +20,7 @@ const Group: React.FC = async () => {
     <>
       {/* <Typography variant="h4">{t("Edit User Group")}</Typography> */}
       <I18nProvider namespaces={["group"]}>
-        <EditUserGroup />
+        <EditUserGroup id={parseInt(searchParams.id as string)}/>
       </I18nProvider>
     </>
   );

src/app/api/group/index.ts

@@ -14,8 +14,21 @@ export interface UserGroupResult {
     description: string;
 }
 
+export type IndivUserGroup = {
+  authIds: number[];
+  data: any;
+  userIds: number[];
+}
+
 export const fetchGroup = cache(async () => {
     return serverFetchJson<Records>(`${BASE_API_URL}/group`, {
       next: { tags: ["group"] },
     });
   });
+
+
+export const fetchIndivGroup = cache(async (id: number) => {
+    return serverFetchJson<IndivUserGroup>(`${BASE_API_URL}/group/${id}`, {
+      next: { tags: ["group"] },
+    });
+  });

src/components/EditUserGroup/EditUserGroup.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import SearchResults, { Column } from "../SearchResults";
 // import { TeamResult } from "@/app/api/team";
 import { useTranslation } from "react-i18next";
@@ -16,19 +16,19 @@ import {
 import { Check, Close, Error } from "@mui/icons-material";
 import { StaffResult } from "@/app/api/staff";
 import { CreateGroupInputs, auth, fetchAuth, saveGroup } from "@/app/api/group/actions";
-import { UserGroupResult } from "@/app/api/group";
+import { IndivUserGroup, UserGroupResult } from "@/app/api/group";
 import { UserResult } from "@/app/api/user";
 import GroupInfo from "./GroupInfo";
 import AuthorityAllocation from "./AuthorityAllocation";
 import UserAllocation from "./UserAllocation";
 interface Props {
-  groups: UserGroupResult[];
-//   auths: auth[];
+  // groups: UserGroupResult[];
+  auths: auth[];
   users: UserResult[];
+  group: IndivUserGroup
 }
 
-const EditUserGroup: React.FC<Props> = ({ groups, users }) => {
-    // console.log(users)
+const EditUserGroup: React.FC<Props> = ({ users, auths, group }) => {
   const { t } = useTranslation();
   const [serverError, setServerError] = useState("");
   const formProps = useForm<CreateGroupInputs>();
@@ -36,7 +36,6 @@ const EditUserGroup: React.FC<Props> = ({ groups, users }) => {
   const id = parseInt(searchParams.get("id") || "0");
   const router = useRouter();
   const [tabIndex, setTabIndex] = useState(0);
-  const [auths, setAuths] = useState<auth[]>();
 
   const errors = formProps.formState.errors;
 
@@ -79,22 +78,19 @@ const EditUserGroup: React.FC<Props> = ({ groups, users }) => {
     },
     [router]
   );
+
+  const resetGroup = React.useCallback(() => {
+    formProps.reset({
+      name: group.data.name,
+      description: group.data.description,
+      addAuthIds: group.authIds,
+      addUserIds: group.userIds,
+    })
+  }, []);
+
   useEffect(() => {
-    const thisGroup = groups.filter((item) => item.id === id)[0];
-    const addUserIds = users.filter((item) => item.groupId === id).map((data) => data.id)
-    let addAuthIds: number[] = []
-    fetchAuth("group", id).then((data) => {
-        setAuths(data.records)
-        addAuthIds = data.records.filter((data) => data.v === 1).map((data) => data.id).sort((a, b) => a - b);
-        formProps.reset({
-          name: thisGroup.name,
-          description: thisGroup.description,
-          addAuthIds: addAuthIds,
-          addUserIds: addUserIds,
-        });
-    });
-    // console.log(auths)
-  }, [groups, users]);
+    resetGroup()
+  }, [group, users]);
 
   return (
     <>

src/components/EditUserGroup/EditUserGroupWrapper.tsx

@@ -1,24 +1,31 @@
 import React from "react";
 import EditUserGroup from "./EditUserGroup";
 import EditUserGroupLoading from "./EditUserGroupLoading";
-import { fetchGroup } from "@/app/api/group";
+import { fetchGroup, fetchIndivGroup } from "@/app/api/group";
 import { fetchUser } from "@/app/api/user";
+import { fetchAuth } from "@/app/api/group/actions";
 
 interface SubComponents {
   Loading: typeof EditUserGroupLoading;
 }
 
-const EditUserGroupWrapper: React.FC & SubComponents = async () => {
+interface Props {
+  id: number
+}
+
+const EditUserGroupWrapper: React.FC<Props> & SubComponents = async ({ id }) => {
 
     const [
-        groups,
+        group,
         users,
+        auths,
       ] = await Promise.all([
-        fetchGroup(),
+        fetchIndivGroup(id),
         fetchUser(),
+        fetchAuth("group", id),
       ]);
 
-  return <EditUserGroup groups={groups.records} users={users}/>;
+  return <EditUserGroup users={users} auths={auths.records} group={group}/>;
 };
 
 EditUserGroupWrapper.Loading = EditUserGroupLoading;

src/components/EditUserGroup/GroupInfo.tsx

@@ -43,6 +43,7 @@ const GroupInfo: React.FC = () => {
               <TextField
                 label={t("Group Name")}
                 fullWidth
+                rows={4}
                 {...register("name", {
                   required: true,
                 })}