Merge branch 'imprv/show-options-selector' into fix/show-lint-icon

packages/app/src/components/LoginForm.tsx

@@ -9,6 +9,7 @@ import ReactCardFlip from 'react-card-flip';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { LoginErrorCode } from '~/interfaces/errors/login-error';
 import { IErrorV3 } from '~/interfaces/errors/v3-error';
+import { toArrayIfNot } from '~/utils/array-utils';
 
 type LoginFormProps = {
   username?: string,
@@ -80,10 +81,11 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
     try {
       const res = await apiv3Post('/login', { loginForm });
       const { redirectTo } = res.data;
-      router.push(redirectTo);
+      router.push(redirectTo ?? '/');
     }
     catch (err) {
-      setLoginErrors(err);
+      const errs = toArrayIfNot(err);
+      setLoginErrors(errs);
     }
     return;
 

packages/app/src/components/PrivateLegacyPages.tsx

@@ -455,6 +455,7 @@ const PrivateLegacyPages = (): JSX.Element => {
             toastSuccess(t('private_legacy_pages.by_path_modal.success'));
             setOpenConvertModal(false);
             mutate();
+            advancePt();
           }
           catch (errs) {
             if (errs.length === 1) {

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

@@ -305,7 +305,9 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')} expandContainer={isContainerFluid}>
         <div className="h-100 d-flex flex-column justify-content-between">
           <header className="py-0 position-relative">
-            <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
+            <div id="grw-subnav-container">
+              <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
+            </div>
           </header>
           <div className="d-edit-none">
             <GrowiSubNavigationSwitcher />

packages/app/src/stores/ui.tsx

@@ -4,7 +4,7 @@ import {
   isClient, isServer, pagePathUtils, Nullable, PageGrant,
 } from '@growi/core';
 import { withUtils, SWRResponseWithUtils } from '@growi/core/src/utils/with-utils';
-import { Breakpoint, addBreakpointListener } from '@growi/ui';
+import { Breakpoint, addBreakpointListener, cleanupBreakpointListener } from '@growi/ui';
 import SimpleBar from 'simplebar-react';
 import {
   useSWRConfig, SWRResponse, Key, Fetcher,
@@ -190,6 +190,10 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean, Error> => {
       if (cache.get(key) == null) {
         mutate(key, !mql.matches);
       }
+
+      return () => {
+        cleanupBreakpointListener(mql, mdOrAvobeHandler);
+      };
     }
   }, [cache, key, mutate]);
 
@@ -214,6 +218,10 @@ export const useIsDeviceSmallerThanLg = (): SWRResponse<boolean, Error> => {
       if (cache.get(key) == null) {
         mutate(key, !mql.matches);
       }
+
+      return () => {
+        cleanupBreakpointListener(mql, lgOrAvobeHandler);
+      };
     }
   }, [cache, key, mutate]);
 

packages/ui/src/utils/browser-utils.ts

@@ -1,5 +1,6 @@
 import { Breakpoint } from '../interfaces/breakpoints';
 
+const EVENT_TYPE_CHANGE = 'change';
 
 export const addBreakpointListener = (
     breakpoint: Breakpoint,
@@ -12,7 +13,15 @@ export const addBreakpointListener = (
   const mediaQueryList = window.matchMedia(`(min-width: ${breakpointPixel}px)`);
 
   // add event listener
-  mediaQueryList.addEventListener('change', listener);
+  mediaQueryList.addEventListener(EVENT_TYPE_CHANGE, listener);
 
   return mediaQueryList;
 };
+
+export const cleanupBreakpointListener = (
+    mediaQueryList: MediaQueryList,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any,
+): void => {
+  mediaQueryList.removeEventListener(EVENT_TYPE_CHANGE, listener);
+};