Merge pull request #202 from nekochans/feature/issue201

lgtm-cat-ui のバージョンを言語切替メニューの仕様変更を行った物に変更

package.json

@@ -23,7 +23,7 @@
     "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
-    "@nekochans/lgtm-cat-ui": "^1.1.0",
+    "@nekochans/lgtm-cat-ui": "^2.0.1",
     "@sentry/nextjs": "^7.12.1",
     "lodash.throttle": "^4.1.1",
     "next": "^12.3.0",

src/edge/index.ts

@@ -1,3 +1,2 @@
-export * from './locale';
 export * from './maintenance';
 export * from './country';

src/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useSaveSettingLanguage } from './useSaveSettingLanguage';
 export { useCatImagesFetcher } from './useCatImagesFetcher';
 export { useCatImageValidator } from './useCatImageValidator';
 export { useCatImageUploader } from './useCatImageUploader';

src/layouts/DefaultLayout/DefaultLayout.tsx

@@ -6,7 +6,6 @@ import type { FC, ReactNode } from 'react';
 type Props = {
   metaTag: MetaTag;
   children: ReactNode;
-  canonicalLink?: Url;
   alternateUrls?: {
     hreflang: Language;
     link?: Url;
@@ -17,7 +16,6 @@ type Props = {
 export const DefaultLayout: FC<Props> = ({
   metaTag,
   children,
-  canonicalLink,
   alternateUrls,
 }) => (
   <>
@@ -52,7 +50,6 @@ export const DefaultLayout: FC<Props> = ({
       <meta name="msapplication-TileColor" content="#da532c" />
       <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
       <meta name="theme-color" content="#ffffff" />
-      {canonicalLink ? <link rel="canonical" href={canonicalLink} /> : ''}
       {alternateUrls?.map((alternateUrl, index) => (
         <link
           rel="alternate"

src/middleware.ts

@@ -1,89 +1,25 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-import {
-  isBanCountry,
-  isInMaintenance,
-  mightExtractLocaleFromAcceptLanguage,
-  mightExtractLocaleFromCookie,
-  mightExtractLocaleFromGeo,
-} from './edge';
+import { isBanCountry, isInMaintenance } from './edge';
 
 export const config = {
   matcher: ['/', '/upload', '/terms', '/privacy', '/maintenance'],
 };
 
-// eslint-disable-next-line max-statements
-const execInMaintenance = (req: NextRequest) => {
-  const { nextUrl } = req;
-
-  const localeExtractedFromCookie = mightExtractLocaleFromCookie(req);
-  if (localeExtractedFromCookie === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromCookie}/maintenance`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  const localeExtractedFromGeo = mightExtractLocaleFromGeo(req);
-  if (localeExtractedFromGeo === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromGeo}/maintenance`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  const localeExtractedFromAcceptLanguage =
-    mightExtractLocaleFromAcceptLanguage(req);
-  if (localeExtractedFromAcceptLanguage === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromAcceptLanguage}/maintenance`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  nextUrl.pathname = '/maintenance';
-
-  return NextResponse.rewrite(nextUrl);
-};
-
-// eslint-disable-next-line max-statements
-const exec = (req: NextRequest) => {
+export const middleware = (req: NextRequest) => {
   const { nextUrl } = req;
 
-  const localeExtractedFromCookie = mightExtractLocaleFromCookie(req);
-  if (localeExtractedFromCookie === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromCookie}${nextUrl.pathname}`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  const localeExtractedFromGeo = mightExtractLocaleFromGeo(req);
-  if (localeExtractedFromGeo === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromGeo}${nextUrl.pathname}`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  const localeExtractedFromAcceptLanguage =
-    mightExtractLocaleFromAcceptLanguage(req);
-  if (localeExtractedFromAcceptLanguage === 'en') {
-    nextUrl.pathname = `/${localeExtractedFromAcceptLanguage}${nextUrl.pathname}`;
-
-    return NextResponse.rewrite(nextUrl);
-  }
-
-  return NextResponse.next();
-};
-
-export const middleware = (req: NextRequest) => {
   if (isBanCountry(req)) {
-    const { nextUrl } = req;
-
     nextUrl.pathname = '/api/errors';
 
     return NextResponse.rewrite(nextUrl);
   }
 
   if (isInMaintenance()) {
-    return execInMaintenance(req);
+    nextUrl.pathname = '/maintenance';
+
+    return NextResponse.rewrite(nextUrl);
   }
 
-  return exec(req);
+  return NextResponse.next();
 };

src/templates/ErrorTemplate/ErrorTemplate.tsx

@@ -2,6 +2,7 @@ import {
   ErrorTemplate as OrgErrorTemplate,
   type ErrorType,
 } from '@nekochans/lgtm-cat-ui';
+import { useRouter } from 'next/router';
 
 import {
   InternalServerErrorImage,
@@ -17,7 +18,6 @@ import {
   errorMetaTag,
   type Language,
 } from '../../features';
-import { useSaveSettingLanguage } from '../../hooks';
 import { ErrorLayout } from '../../layouts';
 import { assertNever } from '../../utils';
 
@@ -68,18 +68,20 @@ const getMetaTag = (type: ErrorType, language: Language) => {
 };
 
 export const ErrorTemplate: FC<Props> = ({ type, language }) => {
-  const { saveSettingLanguage } = useSaveSettingLanguage();
-
   const metaTag = getMetaTag(type, language);
 
+  const router = useRouter();
+
+  const currentUrlPath = router.pathname;
+
   return (
     <ErrorLayout title={pageTitle(type, language)} metaTag={metaTag}>
       <OrgErrorTemplate
         type={type}
         language={language}
         catImage={catImage(type)}
         shouldDisplayBackToTopButton={true}
-        changeLanguageCallback={saveSettingLanguage}
+        currentUrlPath={currentUrlPath}
       />
     </ErrorLayout>
   );

src/templates/TermsOrPrivacyTemplate/TermsOrPrivacyTemplate.tsx

@@ -11,7 +11,6 @@ import {
   i18nUrlList,
   type Language,
 } from '../../features';
-import { useSaveSettingLanguage } from '../../hooks';
 import { DefaultLayout } from '../../layouts';
 
 import type { FC } from 'react';
@@ -30,18 +29,10 @@ export const TermsOrPrivacyTemplate: FC<Props> = ({
   jaMarkdown,
   enMarkdown,
 }) => {
-  const { saveSettingLanguage } = useSaveSettingLanguage();
+  const { isLanguageMenuDisplayed, onClickLanguageButton, onClickOutSideMenu } =
+    useSwitchLanguage();
 
-  const {
-    isLanguageMenuDisplayed,
-    selectedLanguage,
-    onClickEn,
-    onClickJa,
-    onClickLanguageButton,
-    onClickOutSideMenu,
-  } = useSwitchLanguage(language, saveSettingLanguage);
-
-  const termsMarkdown = selectedLanguage === 'ja' ? jaMarkdown : enMarkdown;
+  const termsMarkdown = language === 'ja' ? jaMarkdown : enMarkdown;
 
   const metaTag =
     type === 'terms'
@@ -63,17 +54,11 @@ export const TermsOrPrivacyTemplate: FC<Props> = ({
   });
 
   return (
-    <DefaultLayout
-      metaTag={metaTag}
-      canonicalLink={canonicalLink}
-      alternateUrls={alternateUrls}
-    >
+    <DefaultLayout metaTag={metaTag} alternateUrls={alternateUrls}>
       <OrgTermsOrPrivacyTemplate
         type={type}
-        language={selectedLanguage}
+        language={language}
         isLanguageMenuDisplayed={isLanguageMenuDisplayed}
-        onClickEn={onClickEn}
-        onClickJa={onClickJa}
         onClickLanguageButton={onClickLanguageButton}
         onClickOutSideMenu={onClickOutSideMenu}
       >

src/templates/TopTemplate/TopTemplate.tsx

@@ -9,7 +9,7 @@ import {
   type Language,
   LgtmImage,
 } from '../../features';
-import { useSaveSettingLanguage, useCatImagesFetcher } from '../../hooks';
+import { useCatImagesFetcher } from '../../hooks';
 import { DefaultLayout } from '../../layouts';
 import {
   sendClickTopFetchNewArrivalCatButton,
@@ -44,17 +44,11 @@ type Props = {
 export const TopTemplate: FC<Props> = ({ language, lgtmImages }) => {
   const metaTag = metaTagList(language).top;
 
-  const { saveSettingLanguage } = useSaveSettingLanguage();
-
   const { randomCatImagesFetcher, newArrivalCatImagesFetcher } =
     useCatImagesFetcher();
 
   return (
-    <DefaultLayout
-      metaTag={metaTag}
-      canonicalLink={canonicalLink}
-      alternateUrls={alternateUrls}
-    >
+    <DefaultLayout metaTag={metaTag} alternateUrls={alternateUrls}>
       <OrgTopTemplate
         language={language}
         lgtmImages={lgtmImages}
@@ -65,7 +59,6 @@ export const TopTemplate: FC<Props> = ({ language, lgtmImages }) => {
         fetchRandomCatImagesCallback={fetchRandomCatImagesCallback}
         fetchNewArrivalCatImagesCallback={fetchNewArrivalCatImagesCallback}
         clipboardMarkdownCallback={clipboardMarkdownCallback}
-        changeLanguageCallback={saveSettingLanguage}
         catRandomCopyCallback={catRandomCopyCallback}
       />
     </DefaultLayout>