implement search page

apps/app/src/pages/_private-legacy-pages/index.page.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { isPermalink, isUserPage, isUsersTopPage } from '@growi/core/dist/utils/page-path-utils';
 import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
@@ -5,17 +7,16 @@ import type {
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { useIsomorphicLayoutEffect } from 'usehooks-ts';
+import { useRouter } from 'next/router';
 
 import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import { useIsSearchPage } from '~/states/context';
 import { useHydrateSidebarAtoms } from '~/states/ui/sidebar/hydrate';
 
-import type {
-  CommonEachProps,
-  CommonInitialProps, UserUISettingsProps,
-} from '../common-props';
+import type { ServerConfigurationProps } from '../_search/types';
+import { useHydrateServerConfigurationAtoms } from '../_search/use-hydrate-server-configurations';
+import type { CommonEachProps, CommonInitialProps, UserUISettingsProps } from '../common-props';
 import {
   getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps, getServerSideUserUISettingsProps,
 } from '../common-props';
@@ -24,8 +25,6 @@ import { getServerSideRendererConfigProps, getServerSideSidebarConfigProps } fro
 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 SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
 
@@ -33,6 +32,7 @@ const SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResul
 type Props = CommonInitialProps & CommonEachProps & ServerConfigurationProps & RendererConfigProps & UserUISettingsProps & SidebarConfigProps;
 
 const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
+  const router = useRouter();
   const { t } = useTranslation();
 
   const PrivateLegacyPages = dynamic(() => import('~/client/components/PrivateLegacyPages'), { ssr: false });
@@ -42,15 +42,22 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
   // useHydratePageAtoms(undefined);
   // useCurrentPathname('/_private-legacy-pages');
 
-  const [, setSearchPage] = useIsSearchPage();
-
   // Hydrate server-side data
   useHydrateServerConfigurationAtoms(props.serverConfig, props.rendererConfig);
   useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
 
-  useIsomorphicLayoutEffect(() => {
-    setSearchPage(true);
-  }, [setSearchPage]);
+  const [, setIsSearchPage] = useIsSearchPage();
+
+  // Turn on search page flag
+  useEffect(() => {
+    const resetPageContexts = () => {
+      setIsSearchPage(true);
+    };
+    router.events.on('routeChangeComplete', resetPageContexts);
+    return () => {
+      router.events.off('routeChangeComplete', resetPageContexts);
+    };
+  }, [router, setIsSearchPage]);
 
   const title = useCustomTitle(t('private_legacy_pages.title'));
 

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

@@ -1,79 +1,64 @@
-import type { ReactNode, JSX } from 'react';
+import { useEffect } from 'react';
 
-import type { IUser } from '@growi/core';
+import { isPermalink, isUserPage, isUsersTopPage } from '@growi/core/dist/utils/page-path-utils';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
 import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
-import SearchResultLayout from '~/components/Layout/SearchResultLayout';
 import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
-import type { RendererConfig } from '~/interfaces/services/renderer';
-import type { ISidebarConfig } from '~/interfaces/sidebar-config';
-import { useHydratePageAtoms } from '~/states/hydrate/page';
-import { useHydrateSidebarAtoms } from '~/states/hydrate/sidebar';
-import {
-  useCsrfToken, useCurrentUser, useIsContainerFluid, useIsSearchPage, useIsSearchScopeChildrenAsDefault,
-  useIsSearchServiceConfigured, useIsSearchServiceReachable, useRendererConfig, useShowPageLimitationL, useGrowiCloudUri, useCurrentPathname,
-} from '~/stores-universal/context';
+import { useIsSearchPage } from '~/states/context';
+import { useHydrateSidebarAtoms } from '~/states/ui/sidebar/hydrate';
 
-import type { NextPageWithLayout } from './_app.page';
-import type { CommonProps } from './common-props';
+import type { NextPageWithLayout } from '../_app.page';
+import type { CommonEachProps, CommonInitialProps, UserUISettingsProps } from '../common-props';
 import {
-  getNextI18NextConfig, getServerSideCommonProps, generateCustomTitle,
-} from './common-props';
+  getServerSideCommonEachProps, getServerSideCommonInitialProps, getServerSideI18nProps, getServerSideUserUISettingsProps,
+} from '../common-props';
+import type { RendererConfigProps, SidebarConfigProps } from '../general-page';
+import { getServerSideRendererConfigProps, getServerSideSidebarConfigProps } from '../general-page';
+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 SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
 const SearchPage = dynamic(() => import('~/client/components/SearchPage').then(mod => mod.SearchPage), { ssr: false });
 
-
-type Props = CommonProps & {
-  currentUser: IUser,
-
-  isSearchServiceConfigured: boolean,
-  isSearchServiceReachable: boolean,
-  isSearchScopeChildrenAsDefault: boolean,
-
-  // Render config
-  rendererConfig: RendererConfig,
-
-  // search limit
-  showPageLimitationL: number
-
-  isContainerFluid: boolean,
-
-  sidebarConfig: ISidebarConfig,
-};
+type Props = CommonInitialProps & CommonEachProps & ServerConfigurationProps & RendererConfigProps & UserUISettingsProps & SidebarConfigProps;
 
 const SearchResultPage: NextPageWithLayout<Props> = (props: Props) => {
+  const router = useRouter();
   const { t } = useTranslation();
 
-  // commons
-  useCsrfToken(props.csrfToken);
-  useGrowiCloudUri(props.growiCloudUri);
-
-  useCurrentUser(props.currentUser ?? null);
-
   // clear the cache for the current page
   //  in order to fix https://redmine.weseek.co.jp/issues/135811
-  useHydratePageAtoms(undefined);
-  useCurrentPathname('/_search');
+  // useHydratePageAtoms(undefined);
+  // useCurrentPathname('/_search');
 
-  // Search
-  useIsSearchPage(true);
-  useIsSearchServiceConfigured(props.isSearchServiceConfigured);
-  useIsSearchServiceReachable(props.isSearchServiceReachable);
-  useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
+  // const [, setSearchPage] = useIsSearchPage();
 
-  // render config
-  useRendererConfig(props.rendererConfig);
+  // Hydrate server-side data
+  useHydrateServerConfigurationAtoms(props.serverConfig, props.rendererConfig);
+  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
+
+  const [, setIsSearchPage] = useIsSearchPage();
 
-  useShowPageLimitationL(props.showPageLimitationL);
-  useIsContainerFluid(props.isContainerFluid);
+  // Turn on search page flag
+  useEffect(() => {
+    const resetPageContexts = () => {
+      setIsSearchPage(true);
+    };
+    router.events.on('routeChangeComplete', resetPageContexts);
+    return () => {
+      router.events.off('routeChangeComplete', resetPageContexts);
+    };
+  }, [router, setIsSearchPage]);
 
-  const title = generateCustomTitle(props, t('search_result.title'));
+  const title = useCustomTitle(t('search_result.title'));
 
   return (
     <>
@@ -81,109 +66,69 @@ const SearchResultPage: NextPageWithLayout<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
 
-      <SearchPage />
-    </>
-  );
-};
-
-type LayoutProps = Props & {
-  sidebarConfig: ISidebarConfig,
-  children?: ReactNode,
-}
-
-const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
-  // init sidebar config with UserUISettings and sidebarConfig
-  useHydrateSidebarAtoms(props.sidebarConfig, props.userUISettings);
+      <DrawioViewerScript drawioUri={props.rendererConfig.drawioUri} />
 
-  return (
-    <SearchResultLayout>
-      {children}
-    </SearchResultLayout>
-  );
-};
-
-SearchResultPage.getLayout = function getLayout(page) {
-  return (
-    <>
-      <DrawioViewerScript drawioUri={page.props.rendererConfig.drawioUri} />
-      <Layout {...page.props}>{page}</Layout>
+      <SearchResultLayout>
+        <SearchPage />
+      </SearchResultLayout>
     </>
   );
 };
 
-function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): void {
+const getServerSideConfigurationProps: GetServerSideProps<ServerConfigurationProps> = async(context: GetServerSidePropsContext) => {
   const req: CrowiRequest = context.req as CrowiRequest;
   const { crowi } = req;
-  const { configManager, searchService } = crowi;
-
-  props.isSearchServiceConfigured = searchService.isConfigured;
-  props.isSearchServiceReachable = searchService.isReachable;
-  props.isSearchScopeChildrenAsDefault = configManager.getConfig('customize:isSearchScopeChildrenAsDefault');
-  props.isContainerFluid = configManager.getConfig('customize:isContainerFluid');
+  const {
+    configManager, searchService,
+  } = crowi;
 
-  props.sidebarConfig = {
-    isSidebarCollapsedMode: configManager.getConfig('customize:isSidebarCollapsedMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('customize:isSidebarClosedAtDockMode'),
-  };
-
-  props.rendererConfig = {
-    isEnabledLinebreaks: configManager.getConfig('markdown:isEnabledLinebreaks'),
-    isEnabledLinebreaksInComments: configManager.getConfig('markdown:isEnabledLinebreaksInComments'),
-    isEnabledMarp: configManager.getConfig('customize:isEnabledMarp'),
-    adminPreferredIndentSize: configManager.getConfig('markdown:adminPreferredIndentSize'),
-    isIndentSizeForced: configManager.getConfig('markdown:isIndentSizeForced'),
-
-    drawioUri: configManager.getConfig('app:drawioUri'),
-    plantumlUri: configManager.getConfig('app:plantumlUri'),
-
-    // XSS Options
-    isEnabledXssPrevention: configManager.getConfig('markdown:rehypeSanitize:isEnabledPrevention'),
-    sanitizeType: configManager.getConfig('markdown:rehypeSanitize:option'),
-    customTagWhitelist: crowi.configManager.getConfig('markdown:rehypeSanitize:tagNames'),
-    customAttrWhitelist: configManager.getConfig('markdown:rehypeSanitize:attributes') != null
-      ? JSON.parse(configManager.getConfig('markdown:rehypeSanitize:attributes'))
-      : undefined,
-    highlightJsStyleBorder: crowi.configManager.getConfig('customize:highlightJsStyleBorder'),
+  return {
+    props: {
+      serverConfig: {
+        isSearchServiceConfigured: searchService.isConfigured,
+        isSearchServiceReachable: searchService.isReachable,
+        isSearchScopeChildrenAsDefault: configManager.getConfig('customize:isSearchScopeChildrenAsDefault'),
+        isContainerFluid: configManager.getConfig('customize:isContainerFluid'),
+      },
+    },
   };
-
-  props.showPageLimitationL = configManager.getConfig('customize:showPageLimitationL');
-}
-
-/**
- * for Server Side Translations
- * @param context
- * @param props
- * @param namespacesRequired
- */
-async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
-  const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired);
-  props._nextI18Next = nextI18NextConfig._nextI18Next;
-}
+};
 
 export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
-  const req = context.req as CrowiRequest;
-  const { user } = req;
-
-  const result = await getServerSideCommonProps(context);
-
-  // check for presence
-  // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
-  if (!('props' in result)) {
-    throw new Error('invalid getSSP result');
-  }
-
-  const props: Props = result.props as Props;
+  const req: CrowiRequest = context.req as CrowiRequest;
 
-  if (user != null) {
-    props.currentUser = user.toObject();
+  // redirect to the page the user was on before moving to the Login Page
+  if (req.headers.referer != null) {
+    const urlBeforeLogin = new URL(req.headers.referer);
+    if (isPermalink(urlBeforeLogin.pathname) || isUserPage(urlBeforeLogin.pathname) || isUsersTopPage(urlBeforeLogin.pathname)) {
+      req.session.redirectTo = urlBeforeLogin.href;
+    }
   }
 
-  injectServerConfigurations(context, props);
-  await injectNextI18NextConfigurations(context, props, ['translation']);
-
-  return {
-    props,
-  };
+  const [
+    commonInitialResult,
+    commonEachResult,
+    userUIResult,
+    rendererConfigResult,
+    sidebarConfigResult,
+    serverConfigResult,
+    i18nPropsResult,
+  ] = await Promise.all([
+    getServerSideCommonInitialProps(context),
+    getServerSideCommonEachProps(context),
+    getServerSideUserUISettingsProps(context),
+    getServerSideRendererConfigProps(context),
+    getServerSideSidebarConfigProps(context),
+    getServerSideConfigurationProps(context),
+    getServerSideI18nProps(context, ['translation']),
+  ]);
+
+  return mergeGetServerSidePropsResults(commonInitialResult,
+    mergeGetServerSidePropsResults(commonEachResult,
+      mergeGetServerSidePropsResults(userUIResult,
+        mergeGetServerSidePropsResults(rendererConfigResult,
+          mergeGetServerSidePropsResults(sidebarConfigResult,
+            mergeGetServerSidePropsResults(serverConfigResult, i18nPropsResult))))));
 };
 
 export default SearchResultPage;