refactor trash and tags page

apps/app/src/pages/tags/index.page.tsx

@@ -12,22 +12,18 @@ import { BasicLayout } from '~/components/Layout/BasicLayout';
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { IDataTagCount } from '~/interfaces/tag';
-import { useHydrateSidebarAtoms } from '~/states/ui/sidebar/hydrate';
 import { useSWRxTagsList } from '~/stores/tag';
 
 
 import type { NextPageWithLayout } from '../_app.page';
-import type { CommonEachProps, CommonInitialProps, UserUISettingsProps } from '../common-props';
-import {
-  getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps, getServerSideUserUISettingsProps,
-} from '../common-props';
-import type { RendererConfigProps, SidebarConfigProps } from '../general-page';
-import { getServerSideSidebarConfigProps } from '../general-page';
+import type { BasicLayoutConfigurationProps } from '../basic-layout-page';
+import { getServerSideBasicLayoutProps } from '../basic-layout-page';
+import { useHydrateBasicLayoutConfigurationAtoms } from '../basic-layout-page/hydrate';
+import type { CommonEachProps, CommonInitialProps } from '../common-props';
+import { getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps } from '../common-props';
 import { useCustomTitle } from '../utils/page-title-customization';
 import { mergeGetServerSidePropsResults } from '../utils/server-side-props';
 
-import type { ServerConfigurationProps } from './types';
-import { useHydrateServerConfigurationAtoms } from './use-hydrate-server-configurations';
 
 const PAGING_LIMIT = 10;
 
@@ -36,7 +32,7 @@ const TagList = dynamic(() => import('~/client/components/TagList'), { ssr: fals
 const TagCloudBox = dynamic(() => import('~/client/components/TagCloudBox'), { ssr: false });
 
 
-type Props = CommonInitialProps & CommonEachProps & ServerConfigurationProps & RendererConfigProps & UserUISettingsProps & SidebarConfigProps;
+type Props = CommonInitialProps & CommonEachProps & BasicLayoutConfigurationProps;
 
 const TagPage: NextPageWithLayout<Props> = (props: Props) => {
   const { t } = useTranslation();
@@ -46,10 +42,6 @@ const TagPage: NextPageWithLayout<Props> = (props: Props) => {
   // useHydratePageAtoms(undefined);
   // useCurrentPathname('/tags');
 
-  // Hydrate server-side data
-  useHydrateServerConfigurationAtoms(props.serverConfig);
-  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
-
   const [activePage, setActivePage] = useState<number>(1);
   const [offset, setOffset] = useState<number>(0);
 
@@ -113,7 +105,7 @@ type LayoutProps = Props & {
 }
 
 const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
-  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
+  useHydrateBasicLayoutConfigurationAtoms(props.searchConfig, props.sidebarConfig, props.userUISettings);
 
   return <BasicLayout>{children}</BasicLayout>;
 };
@@ -126,25 +118,6 @@ TagPage.getLayout = function getLayout(page) {
   );
 };
 
-
-const getServerSideConfigurationProps: GetServerSideProps<ServerConfigurationProps> = async(context: GetServerSidePropsContext) => {
-  const req: CrowiRequest = context.req as CrowiRequest;
-  const { crowi } = req;
-  const {
-    configManager, searchService,
-  } = crowi;
-
-  return {
-    props: {
-      serverConfig: {
-        isSearchServiceConfigured: searchService.isConfigured,
-        isSearchServiceReachable: searchService.isReachable,
-        isSearchScopeChildrenAsDefault: configManager.getConfig('customize:isSearchScopeChildrenAsDefault'),
-      },
-    },
-  };
-};
-
 export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
   const req: CrowiRequest = context.req as CrowiRequest;
 
@@ -159,24 +132,18 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   const [
     commonInitialResult,
     commonEachResult,
-    userUIResult,
-    sidebarConfigResult,
-    serverConfigResult,
+    basicLayoutResult,
     i18nPropsResult,
   ] = await Promise.all([
     getServerSideCommonInitialProps(context),
     getServerSideCommonEachProps(context),
-    getServerSideUserUISettingsProps(context),
-    getServerSideSidebarConfigProps(context),
-    getServerSideConfigurationProps(context),
+    getServerSideBasicLayoutProps(context),
     getServerSideI18nProps(context, ['translation']),
   ]);
 
   return mergeGetServerSidePropsResults(commonInitialResult,
     mergeGetServerSidePropsResults(commonEachResult,
-      mergeGetServerSidePropsResults(userUIResult,
-        mergeGetServerSidePropsResults(sidebarConfigResult,
-          mergeGetServerSidePropsResults(serverConfigResult, i18nPropsResult)))));
+      mergeGetServerSidePropsResults(basicLayoutResult, i18nPropsResult)));
 };
 
 export default TagPage;

apps/app/src/pages/tags/types.ts

@@ -1,7 +0,0 @@
-export type ServerConfigurationProps = {
-  serverConfig: {
-    isSearchServiceConfigured: boolean;
-    isSearchServiceReachable: boolean;
-    isSearchScopeChildrenAsDefault: boolean;
-  },
-}

apps/app/src/pages/tags/use-hydrate-server-configurations.ts

@@ -1,24 +0,0 @@
-import { useHydrateAtoms } from 'jotai/utils';
-
-import {
-  isSearchScopeChildrenAsDefaultAtom,
-  isSearchServiceConfiguredAtom,
-  isSearchServiceReachableAtom,
-} from '~/states/server-configurations';
-
-import type { ServerConfigurationProps } from './types';
-
-/**
- * Hook for hydrating server configuration atoms with server-side data
- * This should be called early in the app component to ensure atoms are properly initialized before rendering
- */
-export const useHydrateServerConfigurationAtoms = (
-    serverConfig: ServerConfigurationProps['serverConfig'] | undefined,
-): void => {
-  // Hydrate server configuration atoms with server-side data
-  useHydrateAtoms(serverConfig == null ? [] : [
-    [isSearchServiceConfiguredAtom, serverConfig.isSearchServiceConfigured],
-    [isSearchServiceReachableAtom, serverConfig.isSearchServiceReachable],
-    [isSearchScopeChildrenAsDefaultAtom, serverConfig.isSearchScopeChildrenAsDefault],
-  ]);
-};

apps/app/src/pages/trash/index.page.tsx

@@ -10,15 +10,16 @@ import { PagePathNavTitle } from '~/components/Common/PagePathNavTitle';
 import { BasicLayout } from '~/components/Layout/BasicLayout';
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
-import { useHydrateSidebarAtoms } from '~/states/ui/sidebar/hydrate';
 
 import type { NextPageWithLayout } from '../_app.page';
-import type { CommonEachProps, CommonInitialProps, UserUISettingsProps } from '../common-props';
+import type { BasicLayoutConfigurationProps } from '../basic-layout-page';
+import { getServerSideBasicLayoutProps } from '../basic-layout-page';
+import { useHydrateBasicLayoutConfigurationAtoms } from '../basic-layout-page/hydrate';
+import type { CommonEachProps, CommonInitialProps } from '../common-props';
 import {
-  getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps, getServerSideUserUISettingsProps,
+  getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps,
 } from '../common-props';
-import type { RendererConfigProps, SidebarConfigProps } from '../general-page';
-import { getServerSideSidebarConfigProps } from '../general-page';
+import type { RendererConfigProps } from '../general-page';
 import { useCustomTitle } from '../utils/page-title-customization';
 import { mergeGetServerSidePropsResults } from '../utils/server-side-props';
 
@@ -29,7 +30,7 @@ import { useHydrateServerConfigurationAtoms } from './use-hydrate-server-configu
 const TrashPageList = dynamic(() => import('~/client/components/TrashPageList').then(mod => mod.TrashPageList), { ssr: false });
 const EmptyTrashModal = dynamic(() => import('~/client/components/EmptyTrashModal'), { ssr: false });
 
-type Props = CommonInitialProps & CommonEachProps & ServerConfigurationProps & RendererConfigProps & UserUISettingsProps & SidebarConfigProps;
+type Props = CommonInitialProps & CommonEachProps & BasicLayoutConfigurationProps & ServerConfigurationProps & RendererConfigProps;
 
 const TrashPage: NextPageWithLayout<Props> = (props: Props) => {
   // // clear the cache for the current page
@@ -39,7 +40,6 @@ const TrashPage: NextPageWithLayout<Props> = (props: Props) => {
 
   // Hydrate server-side data
   useHydrateServerConfigurationAtoms(props.serverConfig);
-  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
 
   const title = useCustomTitle('/trash');
 
@@ -67,7 +67,7 @@ type LayoutProps = Props & {
 }
 
 const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
-  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
+  useHydrateBasicLayoutConfigurationAtoms(props.searchConfig, props.sidebarConfig, props.userUISettings);
 
   return <BasicLayout>{children}</BasicLayout>;
 };
@@ -117,24 +117,21 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   const [
     commonInitialResult,
     commonEachResult,
-    userUIResult,
-    sidebarConfigResult,
+    basicLayoutResult,
     serverConfigResult,
     i18nPropsResult,
   ] = await Promise.all([
     getServerSideCommonInitialProps(context),
     getServerSideCommonEachProps(context),
-    getServerSideUserUISettingsProps(context),
-    getServerSideSidebarConfigProps(context),
+    getServerSideBasicLayoutProps(context),
     getServerSideConfigurationProps(context),
     getServerSideI18nProps(context, ['translation']),
   ]);
 
   return mergeGetServerSidePropsResults(commonInitialResult,
     mergeGetServerSidePropsResults(commonEachResult,
-      mergeGetServerSidePropsResults(userUIResult,
-        mergeGetServerSidePropsResults(sidebarConfigResult,
-          mergeGetServerSidePropsResults(serverConfigResult, i18nPropsResult)))));
+      mergeGetServerSidePropsResults(basicLayoutResult,
+        mergeGetServerSidePropsResults(serverConfigResult, i18nPropsResult))));
 };
 
 export default TrashPage;

apps/app/src/pages/trash/types.ts

@@ -1,8 +1,5 @@
 export type ServerConfigurationProps = {
   serverConfig: {
-    isSearchServiceConfigured: boolean;
-    isSearchServiceReachable: boolean;
-    isSearchScopeChildrenAsDefault: boolean;
     showPageLimitationXL: number,
   },
 }

apps/app/src/pages/trash/use-hydrate-server-configurations.ts

@@ -1,9 +1,6 @@
 import { useHydrateAtoms } from 'jotai/utils';
 
 import {
-  isSearchScopeChildrenAsDefaultAtom,
-  isSearchServiceConfiguredAtom,
-  isSearchServiceReachableAtom,
   showPageLimitationXLAtom,
 } from '~/states/server-configurations';
 
@@ -18,9 +15,6 @@ export const useHydrateServerConfigurationAtoms = (
 ): void => {
   // Hydrate server configuration atoms with server-side data
   useHydrateAtoms(serverConfig == null ? [] : [
-    [isSearchServiceConfiguredAtom, serverConfig.isSearchServiceConfigured],
-    [isSearchServiceReachableAtom, serverConfig.isSearchServiceReachable],
-    [isSearchScopeChildrenAsDefaultAtom, serverConfig.isSearchScopeChildrenAsDefault],
     [showPageLimitationXLAtom, serverConfig.showPageLimitationXL],
   ]);
 };