From 2862f3fef7f92dbd1ac880e12201e61280a18374 Mon Sep 17 00:00:00 2001
From: Roseskk <oleg419583@yandex.ru>
Date: Wed, 18 May 2022 13:21:42 +0300
Subject: [PATCH] Nested Layouts

---
 .../ideas/constructor/idea_card/IdeaCard.tsx  |  2 +-
 src/pages/_app.tsx                            | 32 +++++++++++++++----
 src/pages/explore/[page].tsx                  | 10 ++++++
 src/pages/idea/explore/[ideaId].tsx           | 25 +++++++++++----
 src/pages/index.tsx                           | 10 ++++++
 src/pages/notifications.tsx                   | 12 ++++++-
 src/pages/users/[userId].tsx                  | 10 ++++++
 7 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/src/components/composed/ideas/constructor/idea_card/IdeaCard.tsx b/src/components/composed/ideas/constructor/idea_card/IdeaCard.tsx
index f000f59..9ac5ef8 100644
--- a/src/components/composed/ideas/constructor/idea_card/IdeaCard.tsx
+++ b/src/components/composed/ideas/constructor/idea_card/IdeaCard.tsx
@@ -30,7 +30,7 @@ export default function IdeaCard(params: InputParams): any {
        if (router.query.page) {
             setLoad('block')
         }
-        router.push(`/idea/${id}`)
+        router.push(`/idea/explore/${id}`)
     }
 
     return (
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e61e2e0..32439a1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,14 +4,34 @@ import {wrapper} from '../redux/store'
 import {injector} from "../config/DependencyInjection";
 import NotificationService from "../services/notification/NotificationService";
 // import IdeaPage from "./idea/[id]";
-import ViewLayout from "../components/layouts/ViewLayout";
-import type {AppProps} from 'next/app'
+// import ViewLayout from "../components/layouts/ViewLayout";
 
-const WrappedApp = ({Component, pageProps}: AppProps) => {
+/**
+ * Types
+ */
+// import type {AppProps} from 'next/app'
+// import {NextPage} from "next";
+// import {ReactElement, ReactNode} from "react";
+
+// type NextPageWithLayout = NextPage & {
+//     getLayout?: (page: ReactElement) => ReactNode
+// }
+
+// type AppPropsWithLayout = AppProps & {
+//     Component: NextPageWithLayout
+// }
+
+/**
+ * Types
+ */
+
+const WrappedApp = ({Component, pageProps}: any) => {
     injector.get(NotificationService)
-    return (
-        <ViewLayout><Component {...pageProps} /></ViewLayout>
-    )
+    const getLayout = Component.getLayout ?? ((page:any)=> page)
+    return getLayout(<Component {...pageProps} />)
+    // return (
+    //     <ViewLayout><Component {...pageProps} /></ViewLayout>
+    // )
 }
 
 export default wrapper.withRedux(appWithTranslation(WrappedApp))
diff --git a/src/pages/explore/[page].tsx b/src/pages/explore/[page].tsx
index 1e59050..cadf3e9 100644
--- a/src/pages/explore/[page].tsx
+++ b/src/pages/explore/[page].tsx
@@ -8,6 +8,8 @@ import IdeaService from "../../services/idea/IdeaService";
 import {IdeaView} from "../../api/idea/objects/IdeaSearchResult";
 import {GetServerSidePropsContext} from "next/types";
 import PageHandler from "../../components/page_handler/PageHandler";
+import {ReactElement} from "react";
+import ViewLayout from "../../components/layouts/ViewLayout";
 
 interface InputParams {
     ideas : Array<IdeaView>
@@ -25,6 +27,14 @@ export default function Home(params:InputParams) {
     )
 }
 
+Home.getLayout = function getLayout(page: ReactElement) {
+    return(
+        <ViewLayout>
+            {page}
+        </ViewLayout>
+    )
+}
+
 
 
 
diff --git a/src/pages/idea/explore/[ideaId].tsx b/src/pages/idea/explore/[ideaId].tsx
index 02f5042..a167462 100644
--- a/src/pages/idea/explore/[ideaId].tsx
+++ b/src/pages/idea/explore/[ideaId].tsx
@@ -6,17 +6,28 @@ import Idea from "../../../api/idea/objects/Idea";
 import IdeaPage from "../[id]";
 import {serverSideTranslations} from "next-i18next/serverSideTranslations";
 import {ALL_NAMESPACES} from "../../../config/I18nConfiguration";
+import {ReactElement} from "react";
+import ViewLayout from "../../../components/layouts/ViewLayout";
 
 
 export default function ExploreTab(idea: Idea) {
-    console.log(idea)
+
+    return(
+        <div className={'flex flex-col items-center justify-start bg-white md:p-2 p-1 rounded'}>
+            <span className={'text-center md:text-xl text-base font-montserratRegular'}>Описание</span>
+            <div className={'font-montserratLight md:text-base text-xs'} dangerouslySetInnerHTML={{__html: idea.text}} />
+        </div>
+    )
+}
+
+ExploreTab.getLayout = function getLayout(page: ReactElement) {
+
     return(
-        <IdeaPage name={idea.name} description={idea.description}>
-            <div className={'flex flex-col items-center justify-start bg-white md:p-2 p-1 rounded'}>
-                <span className={'text-center md:text-xl text-base font-montserratRegular'}>Описание</span>
-                <div className={'font-montserratLight md:text-base text-xs'} dangerouslySetInnerHTML={{__html: idea.text}} />
-            </div>
-        </IdeaPage>
+        <ViewLayout>
+            <IdeaPage name={page.props.name} description={page.props.description}>
+                {page}
+            </IdeaPage>
+        </ViewLayout>
     )
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8dd4a23..a6fbc1d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,8 @@
 import {serverSideTranslations} from "next-i18next/serverSideTranslations";
 import {GetStaticProps} from "next";
 import {ALL_NAMESPACES} from "../config/I18nConfiguration";
+import {ReactElement} from "react";
+import ViewLayout from "../components/layouts/ViewLayout";
 
 export default function Home() {
 
@@ -12,6 +14,14 @@ export default function Home() {
     )
 }
 
+Home.getLayout = function getLayout(page: ReactElement) {
+    return(
+        <ViewLayout>
+            {page}
+        </ViewLayout>
+    )
+}
+
 export const getStaticProps: GetStaticProps = async ({locale}) => {
     return {
         props: {
diff --git a/src/pages/notifications.tsx b/src/pages/notifications.tsx
index 4d20d93..c5968ff 100644
--- a/src/pages/notifications.tsx
+++ b/src/pages/notifications.tsx
@@ -6,16 +6,18 @@ import {serverSideTranslations} from "next-i18next/serverSideTranslations";
 import {injector} from "../config/DependencyInjection";
 import NotificationService from "../services/notification/NotificationService";
 import {StatusType} from "../api/notification/objects/Notifications";
-import {Component} from "react";
+import {Component, ReactElement} from "react";
 import NotificationViewer from "../components/composed/notification/NotificationViewer";
 import {ALL_NAMESPACES} from "../config/I18nConfiguration";
 import ToggleButton from "../components/basic/ToggleButton";
 import PagePicker from "../components/basic/PagePicker";
+import ViewLayout from "../components/layouts/ViewLayout";
 
 export default class NotificationPage extends Component<any, any> {
     private readonly onStatusTypeChanged: (newValue: StatusType) => void;
     private readonly onPageChanged: (newValue: number) => void;
     private readonly notificationService: NotificationService;
+    static getLayout: (page: React.ReactElement) => JSX.Element;
 
 
     constructor(props:any, context: any) {
@@ -86,6 +88,14 @@ export default class NotificationPage extends Component<any, any> {
 }
 
 
+NotificationPage.getLayout = function getLayout(page: ReactElement) {
+    return(
+        <ViewLayout>
+            {page}
+        </ViewLayout>
+    )
+}
+
 // noinspection JSUnusedGlobalSymbols
 export const getServerSideProps: GetServerSideProps = async (context) => {
     return (
diff --git a/src/pages/users/[userId].tsx b/src/pages/users/[userId].tsx
index 268054e..d29feb8 100644
--- a/src/pages/users/[userId].tsx
+++ b/src/pages/users/[userId].tsx
@@ -10,6 +10,8 @@ import SelfIdeas from "../../components/composed/users/SelfIdeas";
 import RemoteResource from "../../services/utility/RemoteResource";
 import Profile from "../../api/profile/objects/Profile";
 import StatusHandler from "../../components/status_handler/StatusHandler";
+import {ReactElement} from "react";
+import ViewLayout from "../../components/layouts/ViewLayout";
 
 
 export default function UserProfile(profileRemoteResource: RemoteResource<Profile>) {
@@ -45,6 +47,14 @@ export default function UserProfile(profileRemoteResource: RemoteResource<Profil
     )
 }
 
+UserProfile.getLayout= function getLayout(page: ReactElement) {
+    return(
+        <ViewLayout>
+            {page}
+        </ViewLayout>
+    )
+}
+
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const userId: string = context.query.userId as string