Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Layouts #82

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
32 changes: 26 additions & 6 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ааааа теперь понял)

Смотри у тебя сейчас куча дублей кода, давай так:

  1. Если Component приводит свой Layout то мы его подставляем
  2. Если же Component не выдвигает свой Layout, то мы подставляем по умолчанию:
<ViewLayout>
            {page}
</ViewLayout>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ну дубли есть как бы), для каждой страницы лэйаут, а ты о чем?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Если ты НЕ переопределил функцию в компоненте, то подставлять ViewLayout иначе то что вернула функция. Тогда дубли уйдут

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

не понял а что это еще не закрытый тикет чтоль

return getLayout(<Component {...pageProps} />)
// return (
// <ViewLayout><Component {...pageProps} /></ViewLayout>
// )
}

export default wrapper.withRedux(appWithTranslation(WrappedApp))
10 changes: 10 additions & 0 deletions src/pages/explore/[page].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -25,6 +27,14 @@ export default function Home(params:InputParams) {
)
}

Home.getLayout = function getLayout(page: ReactElement) {
return(
<ViewLayout>
{page}
</ViewLayout>
)
}




Expand Down
25 changes: 18 additions & 7 deletions src/pages/idea/explore/[ideaId].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}

Expand Down
10 changes: 10 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -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() {

Expand All @@ -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: {
Expand Down
12 changes: 11 additions & 1 deletion src/pages/notifications.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 (
Expand Down
10 changes: 10 additions & 0 deletions src/pages/users/[userId].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>) {
Expand Down Expand Up @@ -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
Expand Down