apply fb

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

@@ -2,8 +2,6 @@ import React, {
   FC, useState, useCallback, useEffect,
 } from 'react';
 
-
-import ObjectId from 'bson-objectid';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -21,6 +19,8 @@ import {
   useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups, useSWRxAncestorUserGroups,
 } from '~/stores/user-group';
 
+import { isValidObjectId } from '../../../../../core/src/utils/objectid-utils';
+
 const UserGroupDeleteModal = dynamic(() => import('../UserGroup/UserGroupDeleteModal').then(mod => mod.UserGroupDeleteModal), { ssr: false });
 const UserGroupDropdown = dynamic(() => import('../UserGroup/UserGroupDropdown').then(mod => mod.UserGroupDropdown), { ssr: false });
 const UserGroupForm = dynamic(() => import('../UserGroup/UserGroupForm').then(mod => mod.UserGroupForm), { ssr: false });
@@ -54,11 +54,14 @@ const UserGroupDetailPage = (props: Props) => {
   const [isUpdateModalShown, setUpdateModalShown] = useState<boolean>(false);
   const [isDeleteModalShown, setDeleteModalShown] = useState<boolean>(false);
 
+  const isLoading = currentUserGroup === undefined;
+  const notExistsUerGroup = !isLoading && currentUserGroup == null;
+
   useEffect(() => {
-    if ((currentUserGroupId != null && !ObjectId.isValid(currentUserGroupId)) || currentUserGroup === null) {
+    if (!isValidObjectId(currentUserGroupId) || notExistsUerGroup) {
       router.push('/admin/user-groups');
     }
-  }, [currentUserGroup, currentUserGroupId, router]);
+  }, [currentUserGroup, currentUserGroupId, notExistsUerGroup, router]);
 
 
   /*

packages/app/src/components/Layout/AdminLayout.tsx

@@ -45,7 +45,7 @@ const AdminLayout = ({
                 <AdminNavigation selected={selectedNavOpt} />
               </div>
               <div className="col-lg-9">
-                {children}
+                {title != null ? children : <AdminNotFoundPage />}
               </div>
             </div>
           </div>

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { isClient } from '@growi/core';
 import {
@@ -36,6 +36,7 @@ import {
   useCurrentUser, /* useSearchServiceConfigured, */ useIsAclEnabled, useIsMailerSetup, useIsSearchServiceReachable, useSiteUrl,
 } from '~/stores/context';
 
+import { isValidObjectId } from '../../../../core/src/utils/objectid-utils';
 import {
   CommonProps, getServerSideCommonProps, useCustomTitle, getNextI18NextConfig,
 } from '../utils/commons';
@@ -94,7 +95,7 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
   let userGroupId;
   const [firstPath, secondPath] = pagePathKeys;
   if (firstPath === 'user-group-detail') {
-    userGroupId = secondPath;
+    userGroupId = isValidObjectId(secondPath) ? secondPath : undefined;
   }
 
   const adminPagesMap = {
@@ -254,7 +255,6 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
         adminTwitterSecurityContainer,
       );
     }
-
   }