Просмотр исходного кода

refactor customize settings page

Yuki Takei 7 месяцев назад
Родитель
Сommit
4710bd2989
1 измененных файлов с 49 добавлено и 57 удалено
  1. 49 57
      apps/app/src/pages/admin/customize.page.tsx

+ 49 - 57
apps/app/src/pages/admin/customize.page.tsx

@@ -1,80 +1,72 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
-import type {
-  NextPage, GetServerSideProps, GetServerSidePropsContext,
-} from 'next';
-import { useTranslation } from 'next-i18next';
+import { useHydrateAtoms } from 'jotai/utils';
+import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
 import dynamic from 'next/dynamic';
-import Head from 'next/head';
-import type { Container } from 'unstated';
-import { Provider } from 'unstated';
 
 import type { CrowiRequest } from '~/interfaces/crowi-request';
-import type { CommonProps } from '~/pages/utils/commons';
-import { generateCustomTitle } from '~/pages/utils/commons';
-import { configManager } from '~/server/service/config-manager';
-import { useCustomizeTitle, useCurrentUser, useIsCustomizedLogoUploaded } from '~/stores-universal/context';
+import {
+  customizeTitleAtom,
+  isCustomizedLogoUploadedAtom,
+  useCustomizeTitle,
+  useIsCustomizedLogoUploaded,
+} from '~/states/global';
 
-import { retrieveServerSideProps } from '../../utils/admin-page-util';
+import type { NextPageWithLayout } from '../_app.page';
+import { mergeGetServerSidePropsResults } from '../utils/server-side-props';
 
-const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
-const CustomizeSettingContents = dynamic(() => import('~/client/components/Admin/Customize/Customize'), { ssr: false });
-const ForbiddenPage = dynamic(() => import('~/client/components/Admin/ForbiddenPage').then(mod => mod.ForbiddenPage), { ssr: false });
+import type { AdminCommonProps } from './_shared';
+import { createAdminPageLayout, getServerSideAdminCommonProps } from './_shared';
 
+const CustomizeSettingContents = dynamic(() => import('~/client/components/Admin/Customize/Customize'), { ssr: false });
 
-type Props = CommonProps & {
+type PageProps = {
   customizeTitle?: string,
   isCustomizedLogoUploaded: boolean,
 };
 
+type Props = AdminCommonProps & PageProps;
+
+// eslint-disable-next-line react/prop-types
+const AdminCustomizeSettingsPage: NextPageWithLayout<Props> = ({ customizeTitle, isCustomizedLogoUploaded }) => {
+  useHydrateAtoms([
+    [customizeTitleAtom, customizeTitle],
+    [isCustomizedLogoUploadedAtom, isCustomizedLogoUploaded],
+  ], { dangerouslyForceHydrate: true });
+
+  const [, setCustomizeTitle] = useCustomizeTitle();
+  const [, setIsCustomizedLogoUploaded] = useIsCustomizedLogoUploaded();
 
-const AdminCustomizeSettingsPage: NextPage<Props> = (props) => {
-  const { t } = useTranslation('admin');
-  useCustomizeTitle(props.customizeTitle);
-  useCurrentUser(props.currentUser ?? null);
-  useIsCustomizedLogoUploaded(props.isCustomizedLogoUploaded);
-
-  const componentTitle = t('customize_settings.customize_settings');
-  const pageTitle = generateCustomTitle(props, componentTitle);
-  const injectableContainers: Container<any>[] = useMemo(() => [], []);
-
-  useEffect(() => {
-    (async() => {
-      const AdminCustomizeContainer = (await import('~/client/services/AdminCustomizeContainer')).default;
-      const adminCustomizeContainer = new AdminCustomizeContainer();
-      injectableContainers.push(adminCustomizeContainer);
-    })();
-  }, [injectableContainers]);
-
-  if (props.isAccessDeniedForNonAdminUser) {
-    return <ForbiddenPage />;
-  }
-
-  return (
-    <Provider inject={[...injectableContainers]}>
-      <AdminLayout componentTitle={componentTitle}>
-        <Head>
-          <title>{pageTitle}</title>
-        </Head>
-        <CustomizeSettingContents />
-      </AdminLayout>
-    </Provider>
-  );
+  useEffect(() => { setCustomizeTitle(customizeTitle) }, [customizeTitle, setCustomizeTitle]);
+  useEffect(() => { setIsCustomizedLogoUploaded(isCustomizedLogoUploaded) }, [isCustomizedLogoUploaded, setIsCustomizedLogoUploaded]);
+
+  return <CustomizeSettingContents />;
 };
 
+AdminCustomizeSettingsPage.getLayout = createAdminPageLayout<Props>({
+  title: (_p, t) => t('customize_settings.customize_settings'),
+  containerFactories: [
+    async() => {
+      const C = (await import('~/client/services/AdminCustomizeContainer')).default;
+      return new C();
+    },
+  ],
+});
+
+export const getServerSideProps: GetServerSideProps<Props> = async(context: GetServerSidePropsContext) => {
+  const commonResult = await getServerSideAdminCommonProps(context);
 
-const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
   const req: CrowiRequest = context.req as CrowiRequest;
   const { crowi } = req;
 
-  props.customizeTitle = crowi.configManager.getConfig('customize:title');
-  props.isCustomizedLogoUploaded = await crowi.attachmentService.isBrandLogoExist();
-};
+  const customizePropsFragment = {
+    props: {
+      customizeTitle: crowi.configManager.getConfig('customize:title'),
+      isCustomizedLogoUploaded: await crowi.attachmentService.isBrandLogoExist(),
+    },
+  } satisfies { props: PageProps };
 
-export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
-  const props = await retrieveServerSideProps(context, injectServerConfigurations);
-  return props;
+  return mergeGetServerSidePropsResults(commonResult, customizePropsFragment);
 };
 
-
 export default AdminCustomizeSettingsPage;