technical/layout into [email protected] 🐢 minor global changes (not found page, page metadata, titles)

app/(landing)/[city]/layout.tsx

@@ -1,4 +1,5 @@
-import type { CITIES } from '@/utils/constants';
+import { NotFoundComponent } from '@/components/common';
+import { CITIES, ROUTES } from '@/utils/constants';
 
 import { Footer } from '../(components)/Footer/Footer';
 import { Header } from '../(components)/Header/Header';
@@ -10,12 +11,17 @@ interface LandingCityLayoutProps {
   };
 }
 
-const LandingCityLayout = ({ children, params }: LandingCityLayoutProps) => (
-  <>
-    <Header cityId={params.city} />
-    {children}
-    <Footer cityId={params.city} />
-  </>
-);
+const LandingCityLayout = ({ children, params }: LandingCityLayoutProps) => {
+  if (!Object.keys(CITIES).includes(params.city.toUpperCase()))
+    return <NotFoundComponent link={ROUTES.LANDING.ROOT} />;
+
+  return (
+    <>
+      <Header cityId={params.city} />
+      {children}
+      <Footer cityId={params.city} />
+    </>
+  );
+};
 
 export default LandingCityLayout;

app/app/(main)/activities/page.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import type { Metadata } from 'next';
 
 import { I18nText } from '@/components/common';
 import { Typography } from '@/components/ui';
 import { getActivity, getCategory } from '@/utils/api';
 
+import { getDictionary } from '../../../dictionaries';
+
 import { ActivitiesCategories, ActivityList, ActivitySearchInput } from './(components)';
 import { DEFAULT_ACTIVITIES_LIMIT, DEFAULT_ACTIVITIES_PAGE } from './(constants)';
 import { Providers } from './providers';
@@ -12,6 +15,15 @@ interface ActivitiesPageProps {
   searchParams: SearchParams;
 }
 
+export const generateMetadata = async (): Promise<Metadata> => {
+  const dictionary = await getDictionary('ru');
+
+  return {
+    title: `${dictionary['metadata.page.default']} | ${dictionary['metadata.page.app.activiites']}`,
+    description: `${dictionary['metadata.page.default']} | ${dictionary['metadata.page.app.activiites']}`
+  };
+};
+
 const ActivitiesPage = async ({ searchParams }: ActivitiesPageProps) => {
   const [getCategoryResponse, getActivityResponse] = await Promise.all([
     getCategory({ config: { cache: 'no-store' } }),

app/dictionaries.ts

@@ -0,0 +1,7 @@
+import 'server-only';
+
+const dictionaries = {
+  ru: () => import('../static/locales/ru.json').then((module) => module.default)
+};
+
+export const getDictionary = (locale) => dictionaries[locale]();

app/layout.tsx

@@ -5,6 +5,7 @@ import { Toaster } from '@/components/ui/sonner';
 import { getMessagesByLocale } from '@/utils/helpers';
 import { getDefaultTheme, getUserSession } from '@/utils/helpers/server';
 
+import { getDictionary } from './dictionaries';
 import { Providers } from './providers';
 
 import '@/assets/styles/globals.css';
@@ -16,9 +17,13 @@ const fontSans = FontSans({
   variable: '--font-sans'
 });
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app'
+export const generateMetadata = async (): Promise<Metadata> => {
+  const dictionary = await getDictionary('ru');
+
+  return {
+    title: dictionary['metadata.page.default'],
+    description: dictionary['metadata.page.default']
+  };
 };
 
 const TOASTER_DURATION = 5000;

app/not-found.tsx

@@ -0,0 +1,37 @@
+import { NotFoundComponent } from '@/components/common';
+import { ROLES_BY_ROUTE, ROUTES } from '@/utils/constants';
+import { getUserSession } from '@/utils/helpers/server';
+
+import AppLayout from './app/(main)/layout';
+import Layout from './org/(panel)/layout';
+
+const NotFound = () => {
+  const userSession = getUserSession();
+
+  return (
+    <>
+      {!userSession && (
+        <div className='h-screen w-screen'>
+          <NotFoundComponent link={ROUTES.LANDING.ROOT} />
+        </div>
+      )}
+      {userSession && userSession.roles.some((role) => ROLES_BY_ROUTE.PARTNER.includes(role)) && (
+        <div className='h-screen w-screen'>
+          <NotFoundComponent link={ROUTES.PARTNER.ROOT} />
+        </div>
+      )}
+      {userSession && userSession.roles.some((role) => ROLES_BY_ROUTE.APP.includes(role)) && (
+        <AppLayout>
+          <NotFoundComponent link={ROUTES.APP.PROFILE.ROOT} />
+        </AppLayout>
+      )}
+      {userSession && userSession.roles.some((role) => ROLES_BY_ROUTE.ORG.includes(role)) && (
+        <Layout>
+          <NotFoundComponent link={ROUTES.ORG.ORGANIZATIONS.DASHBOARD} />
+        </Layout>
+      )}
+    </>
+  );
+};
+
+export default NotFound;

app/org/(panel)/organizations/[organizationId]/layout.tsx

@@ -1,5 +1,9 @@
+import { getDictionary } from 'app/dictionaries';
+import type { Metadata, ResolvingMetadata } from 'next';
+
 import { getOrganizationById } from '@/utils/api/requests';
 import { ROUTES } from '@/utils/constants';
+import { getPathnameFromMetadataState } from '@/utils/helpers';
 
 import { OrgBreadcrumbs } from '../../(components)/OrgBreadcrumbs/OrgBreadcrumbs';
 
@@ -10,6 +14,24 @@ interface OrganizationPageLayoutProps {
   children: React.ReactNode;
 }
 
+export const generateMetadata = async (
+  { params }: OrganizationPageLayoutProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> => {
+  const dictionary = await getDictionary('ru');
+  const organization = await getOrganizationById({
+    params: { id: params.organizationId }
+  });
+
+  const pathname = getPathnameFromMetadataState(parent);
+  const pathnameParts = pathname.split('/');
+  const lastPart = pathnameParts[pathnameParts.length - 1];
+
+  return {
+    title: `${dictionary['metadata.page.org']} | ${organization.name} | ${dictionary[`metadata.page.org.${lastPart}`]}`
+  };
+};
+
 const OrganizationPageLayout = async ({ params, children }: OrganizationPageLayoutProps) => {
   const organization = await getOrganizationById({
     params: { id: params.organizationId }

app/org/(panel)/organizations/dashboard/page.tsx

@@ -1,3 +1,5 @@
+import { getDictionary } from 'app/dictionaries';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getOrganization } from '@/utils/api';
@@ -7,6 +9,15 @@ import { OrgBreadcrumbs } from '../../(components)/OrgBreadcrumbs/OrgBreadcrumbs
 import { OrganizationsDashboard } from './(components)/OrganizationsDashboard/OrganizationsDashboard';
 import { OrganizationsTable } from './(components)/OrganizationsTable/OrganizationsTable';
 
+export const generateMetadata = async (): Promise<Metadata> => {
+  const dictionary = await getDictionary('ru');
+
+  return {
+    title: `${dictionary['metadata.page.org']} | ${dictionary['metadata.page.org.dashboard']}`,
+    description: `${dictionary['metadata.page.org']} | ${dictionary['metadata.page.org.dashboard']}`
+  };
+};
+
 export interface OrganizationsPageProps {
   searchParams: SearchParams;
 }

app/org/auth/page.tsx

@@ -1,3 +1,5 @@
+import { getDictionary } from 'app/dictionaries';
+import type { Metadata } from 'next';
 import Image from 'next/image';
 
 import authImage from '@/assets/images/auth.webp';
@@ -7,6 +9,15 @@ import { ROUTES } from '@/utils/constants';
 
 import { LoginForm } from './(components)/LoginForm/LoginForm';
 
+export const generateMetadata = async (): Promise<Metadata> => {
+  const dictionary = await getDictionary('ru');
+
+  return {
+    title: `${dictionary['metadata.page.org']} | ${dictionary['metadata.page.org.auth']}`,
+    description: `${dictionary['metadata.page.org']} | ${dictionary['metadata.page.org.auth']}`
+  };
+};
+
 const OrgAuthPage = () => (
   <div className='flex min-h-screen flex-col items-center justify-between p-2'>
     <div className='flex flex-1 items-center justify-around gap-28 xlx:gap-12 xlx:p-5'>

src/components/common/NotFoundComponent/NotFoundComponent.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+import { I18nText } from '@/components/common';
+import { buttonVariants, Typography } from '@/components/ui';
+import { cn } from '@/lib/utils';
+
+interface NotFoundComponentProps {
+  link: string;
+}
+
+export const NotFoundComponent = ({ link }: NotFoundComponentProps) => (
+  <div className='flex h-full w-full flex-col items-center justify-center gap-2 p-6'>
+    <Typography variant='h3'>
+      <I18nText path='page.notFound.title' />
+    </Typography>
+    <Link
+      href={{
+        pathname: link
+      }}
+      className={cn(buttonVariants({ size: 'lg', variant: 'primary' }), 'w-full max-w-96')}
+    >
+      <I18nText path='button.backToRoot' />
+    </Link>
+  </div>
+);

src/components/common/index.ts

@@ -1,5 +1,6 @@
 export * from './I18nText/I18nText';
 export * from './Logo/Logo';
+export * from './NotFoundComponent/NotFoundComponent';
 export * from './NotificationsDropdownMenu/NotificationsDropdownMenu';
 export * from './QRCode/QRCode';
 export * from './texts';

src/utils/helpers/getPathnameFromMetadataState.ts

@@ -0,0 +1,10 @@
+import type { ResolvingMetadata } from 'next';
+
+export const getPathnameFromMetadataState = (state: ResolvingMetadata) => {
+  const res = Object.getOwnPropertySymbols(state || {})
+    .map((p) => state[p])
+    // eslint-disable-next-line no-prototype-builtins
+    .find((state) => state?.hasOwnProperty?.('urlPathname'));
+
+  return res?.urlPathname.replace(/\?.+/, '');
+};

src/utils/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './getMessagesByLocale';
 export * from './getNavigationLinksByUserRoles';
+export * from './getPathnameFromMetadataState';

static/locales/ru.json

@@ -6,6 +6,19 @@
   "site.error": "Что-то пошло не так",
   "site.loading": "Пожалуйста подождите...",
 
+  "metadata.page.default": "Большой Квест",
+  "metadata.page.org": "ЛК Организатора",
+  "metadata.page.org.auth": "Авторизация",
+  "metadata.page.org.dashboard": "Организации",
+  "metadata.page.org.profile": "Профиль",
+  "metadata.page.org.activities": "Активности",
+  "metadata.page.org.addresses": "Адреса",
+  "metadata.page.org.employees": "Сотрудники",
+  "metadata.page.org.schedule": "Расписание",
+  "metadata.page.app.activiites": "Каталог активностей",
+
+  "page.notFound.title": "404 Страница не найдена",
+
   "partners.addresses.title": "Адреса",
   "partners.activities.title": "Активности",
   "partners.employees.title": "Сотрудники",
@@ -81,6 +94,7 @@
   "button.haveNotUserId": "У меня нет User ID",
   "button.logout": "Выйти",
   "button.addQR": "Добавить новый QR",
+  "button.backToRoot": "Вернуться на главную",
 
   "organization.stage.request": "Заявка",
   "organization.stage.negotiation": "Сотрудничество",