Merge pull request #9 from aXenDeveloper/section_faq

Page: FAQ

Author: aXenDeveloper

.eslintignore

@@ -1,4 +1,6 @@
 graphql/hooks.ts
+next.config.js
+commitlint.config.js
 
 # next-pwa
 /public/precache.*.*.js

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "cSpell.words": [
+    "axendev",
+    "clsx",
+    "commitlint",
     "datetime",
     "fluentui",
     "overscan",

README.md

@@ -1,5 +1,7 @@
 # (NextJS) aXenDev 2.0 - Portfolio
 
+Personal portfolio application.
+
 ## ⚠️ Requirements for VSCode
 
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
@@ -12,6 +14,7 @@ Use commands:
 
 ```bash
 npm i
+npm run prepare
 ```
 
 ## 🛠 Run

__mocks__/RootMock.tsx

@@ -0,0 +1,19 @@
+import { NextIntlProvider } from 'next-intl';
+import { ReactNode } from 'react';
+import Cookies from 'js-cookie';
+
+import messages from '../messages/en.json';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const RootMock = ({ children }: Props) => {
+  Cookies.set('NEXT_LOCALE', 'en');
+
+  return (
+    <NextIntlProvider messages={messages} locale="en">
+      {children}
+    </NextIntlProvider>
+  );
+};

app/[locale]/(main)/faq/[id]/[childId]/page.tsx

@@ -0,0 +1,38 @@
+import { notFound } from 'next/navigation';
+import { Suspense, lazy } from 'react';
+import { Metadata } from 'next';
+import { getTranslator } from 'next-intl/server';
+
+import { LoadingView } from '@/views/global/loading/LoadingView';
+
+interface Props {
+  params: {
+    childId: string;
+    id: string;
+    locale: string;
+  };
+}
+
+export async function generateMetadata({
+  params: { childId, id, locale }
+}: Props): Promise<Metadata> {
+  const t = await getTranslator(locale, 'faq');
+
+  return {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    title: t(`pages.${id}_pages.${childId}`)
+  };
+}
+
+export default async function Page({ params: { childId, id, locale } }: Props) {
+  const MDXComponent = lazy(() =>
+    import(`@/assets/faq/${id}/${childId}/${childId}-${locale}.mdx`).catch(() => notFound())
+  );
+
+  return (
+    <Suspense fallback={<LoadingView />}>
+      <MDXComponent />
+    </Suspense>
+  );
+}

app/[locale]/(main)/faq/[id]/page.tsx

@@ -0,0 +1,35 @@
+import { notFound } from 'next/navigation';
+import { Suspense, lazy } from 'react';
+import { Metadata } from 'next';
+import { getTranslator } from 'next-intl/server';
+
+import { LoadingView } from '@/views/global/loading/LoadingView';
+
+interface Props {
+  params: {
+    id: string;
+    locale: string;
+  };
+}
+
+export async function generateMetadata({ params: { id, locale } }: Props): Promise<Metadata> {
+  const t = await getTranslator(locale, 'faq');
+
+  return {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    title: t(`pages.${id}`)
+  };
+}
+
+export default async function Page({ params: { id, locale } }: Props) {
+  const MDXComponent = lazy(() =>
+    import(`@/assets/faq/${id}/${id}-${locale}.mdx`).catch(() => notFound())
+  );
+
+  return (
+    <Suspense fallback={<LoadingView />}>
+      <MDXComponent />
+    </Suspense>
+  );
+}

app/[locale]/(main)/faq/layout.tsx

@@ -1,9 +1,32 @@
-import { ErrorView } from '@/views/global/error/ErrorView';
+import { ReactNode } from 'react';
+import { getTranslator } from 'next-intl/server';
+import { Metadata } from 'next';
 
-// interface Props {
-//   children: ReactNode;
-// }
+import { WrapperFaq } from '@/views/faq/wrapper/WrapperFaq';
 
-export default function Layout() {
-  return <ErrorView code={404} />;
+import { CONFIG_TITLE } from '../../../../config';
+
+interface MetadataProps {
+  params: {
+    locale: string;
+  };
+}
+
+export async function generateMetadata({ params: { locale } }: MetadataProps): Promise<Metadata> {
+  const t = await getTranslator(locale, 'nav');
+
+  return {
+    title: {
+      default: t('faq'),
+      template: `%s - ${t('faq')} - ${CONFIG_TITLE}`
+    }
+  };
+}
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: Props) {
+  return <WrapperFaq>{children}</WrapperFaq>;
 }

app/[locale]/(main)/faq/page.tsx

@@ -1,21 +1,31 @@
 import { getTranslator } from 'next-intl/server';
+import { Suspense, lazy } from 'react';
+import { notFound } from 'next/navigation';
 
-import { FaqView } from '@/views/faq/FaqView';
+import { LoadingView } from '@/views/global/loading/LoadingView';
 
-interface MetadataProps {
+interface Props {
   params: {
     locale: string;
   };
 }
 
-export async function generateMetadata({ params: { locale } }: MetadataProps) {
+export async function generateMetadata({ params: { locale } }: Props) {
   const t = await getTranslator(locale, 'nav');
 
   return {
     title: t('faq')
   };
 }
 
-export default function Page() {
-  return <FaqView />;
+export default function Page({ params: { locale } }: Props) {
+  const MDXComponent = lazy(() =>
+    import(`@/assets/faq/welcome/welcome-${locale}.mdx`).catch(() => notFound())
+  );
+
+  return (
+    <Suspense fallback={<LoadingView />}>
+      <MDXComponent />
+    </Suspense>
+  );
 }