imprv: Front user group update (#5079)

* CC to FC

* Improved userGroupTable

* SWRized

* Updated table & home page component

* Removed hard code

* Implemented listing api

* Fixed lint error

* Implemented key serializer for swr

* Impl update

* Omit serialize middleware

* Upgraded swr ^1.0.1 => ^1.1.2

* Improved sync

* Fixed lint errors

* Removed unnecessary code

* Improved nukey

* Improved types

* Improved interface

* Improved type validation

* Implemented delete

* Normalized view

* Improved

* Removed unnecessary code

* Removed unnecessary method

* Added a comment

* Typescriptized

* Omitted crowi

* Fixed

* Fixed ci

* Fixed

* Fixed model import

* Deleted user-group.js

packages/app/src/components/Admin/UserGroup/UserGroupForm.tsx

@@ -60,18 +60,18 @@ const UserGroupForm: FC<Props> = (props: Props) => {
 
   return (
     <form onSubmit={onSubmitHandler}>
-      {/* TODO 85062: improve style */}
-      {
-        props.userGroup != null && (
-          <div className="row mb-2">
-            <p className="col-md-4">{t('Created')}</p>
-            <p className="col">{dateFnsFormat(new Date(props.userGroup.createdAt), 'yyyy-MM-dd')}</p>
-          </div>
-        )
-      }
 
       <fieldset>
         <h2 className="admin-setting-header">{t('admin:user_group_management.basic_info')}</h2>
+        {/* TODO 85062: improve style */}
+        {
+          props.userGroup?.createdAt != null && (
+            <div className="form-group row">
+              <p className="col-md-2 col-form-label">{t('Created')}</p>
+              <p className="col-md-4 my-auto">{dateFnsFormat(new Date(props.userGroup.createdAt), 'yyyy-MM-dd')}</p>
+            </div>
+          )
+        }
         <div className="form-group row">
           <label htmlFor="name" className="col-md-2 col-form-label">
             {t('admin:user_group_management.group_name')}

packages/app/src/components/Admin/UserGroup/UserGroupPage.tsx

@@ -97,7 +97,7 @@ const UserGroupPage: FC<Props> = (props: Props) => {
       setSelectedUserGroup(undefined);
       setDeleteModalShown(false);
 
-      toastSuccess(`Deleted ${xss.process(res.data.userGroups.length)} groups.`);
+      toastSuccess(`Deleted ${res.data.userGroups.length} groups.`);
     }
     catch (err) {
       toastError(new Error('Unable to delete the groups'));

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -42,7 +42,7 @@ const UserGroupDetailPage: FC = () => {
   /*
    * Function
    */
-  const init = useCallback(async() => {
+  const sync = useCallback(async() => {
     try {
       const [
         userGroupRelations,
@@ -52,13 +52,13 @@ const UserGroupDetailPage: FC = () => {
         apiv3Get(`/user-groups/${userGroup._id}/pages`).then(res => res.data.pages),
       ]);
 
-      setUserGroup(userGroupRelations);
-      setUserGroupRelations(relatedPages);
+      setUserGroupRelations(userGroupRelations);
+      setRelatedPages(relatedPages);
     }
     catch (err) {
       toastError(new Error('Failed to fetch data'));
     }
-  }, []); // no deps
+  }, [userGroup]);
 
   // TODO 85062: old name: switchIsAlsoMailSearched
   const toggleIsAlsoMailSearched = useCallback(() => {
@@ -110,8 +110,8 @@ const UserGroupDetailPage: FC = () => {
     // do not add users for ducaplicate
     if (res.data.userGroupRelation == null) { return }
 
-    await init();
-  }, [userGroup]);
+    await sync();
+  }, [userGroup, sync]);
 
   const removeUserByUsername = useCallback(async(username: string) => {
     const res = await apiv3Delete(`/user-groups/${userGroup._id}/users/${username}`);
@@ -123,7 +123,7 @@ const UserGroupDetailPage: FC = () => {
    * componentDidMount
    */
   useEffect(() => {
-    init();
+    sync();
   }, []);
 
   /*