From 464bbdb1f9afd927418a913510bc385b43db5bf7 Mon Sep 17 00:00:00 2001
From: Gregoire <gregoire@level-one.fr>
Date: Thu, 26 Aug 2021 18:30:45 +0200
Subject: [PATCH] feat(gatsby): language switch

---
 src/app/website/gatsby-node.js                |  8 ++
 src/app/website/src/components/Layout.tsx     | 24 +++++-
 ...{creatingAPost.mdx => creating-a-post.mdx} |  0
 ...lInformation.mdx => legal-information.mdx} |  0
 .../en/{pressRoom.mdx => press-room.mdx}      |  0
 ...{creatingAPost.mdx => creating-a-post.mdx} |  1 +
 ...lInformation.mdx => legal-information.mdx} |  0
 .../fr/{pressRoom.mdx => press-room.mdx}      |  0
 .../website/src/hooks/useChangeLanguage.ts    |  9 +++
 src/app/website/src/hooks/useGetMenus.ts      |  4 +-
 src/app/website/src/pages/index.en.tsx        | 21 ++++-
 src/app/website/src/pages/index.tsx           | 15 +++-
 src/app/website/src/pages/{mdx.slug}.tsx      | 15 +++-
 src/app/website/src/types/index.d.ts          |  1 +
 src/app/website/src/utils/switchLanguage.ts   | 11 +++
 .../website/molecules/Header/Header.tsx       | 80 ++++++++++---------
 16 files changed, 136 insertions(+), 53 deletions(-)
 rename src/app/website/src/contents/en/{creatingAPost.mdx => creating-a-post.mdx} (100%)
 rename src/app/website/src/contents/en/{legalInformation.mdx => legal-information.mdx} (100%)
 rename src/app/website/src/contents/en/{pressRoom.mdx => press-room.mdx} (100%)
 rename src/app/website/src/contents/fr/{creatingAPost.mdx => creating-a-post.mdx} (98%)
 rename src/app/website/src/contents/fr/{legalInformation.mdx => legal-information.mdx} (100%)
 rename src/app/website/src/contents/fr/{pressRoom.mdx => press-room.mdx} (100%)
 create mode 100644 src/app/website/src/hooks/useChangeLanguage.ts
 create mode 100644 src/app/website/src/types/index.d.ts
 create mode 100644 src/app/website/src/utils/switchLanguage.ts

diff --git a/src/app/website/gatsby-node.js b/src/app/website/gatsby-node.js
index e69de29bb..e9a763115 100644
--- a/src/app/website/gatsby-node.js
+++ b/src/app/website/gatsby-node.js
@@ -0,0 +1,8 @@
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const oldPage = { ...page };
+  const regex = new RegExp('/en');
+  page.context.langKey = regex.test(page.path) ? 'en' : 'fr';
+  deletePage(oldPage);
+  createPage(page);
+};
diff --git a/src/app/website/src/components/Layout.tsx b/src/app/website/src/components/Layout.tsx
index d20d3454b..e75812c74 100644
--- a/src/app/website/src/components/Layout.tsx
+++ b/src/app/website/src/components/Layout.tsx
@@ -5,7 +5,11 @@ import Header, {
   Scrolled
 } from '../../../../components/website/molecules/Header/Header';
 import Footer from '../../../../components/website/organisms/Footer/Footer';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+import switchLanguage from '../utils/switchLanguage';
+import { PageContext } from '../types';
 import useGetMenus from '../hooks/useGetMenus';
+import useChangeLanguage from '../hooks/useChangeLanguage';
 import './layout.css';
 import Seo from './seo';
 
@@ -13,14 +17,28 @@ interface LayoutProps {
   children: React.ReactNode;
   pageTitle: string;
   scrolled?: Scrolled;
+  pageContext: PageContext;
 }
 
-const Layout = ({ children, pageTitle, scrolled }: LayoutProps) => {
-  const { footer, header } = useGetMenus('fr');
+const Layout = ({
+  children,
+  pageTitle,
+  scrolled,
+  pageContext
+}: LayoutProps) => {
+  useChangeLanguage(pageContext.langKey as SupportedLanguage);
+  const { footer, header } = useGetMenus(i18n.language as SupportedLanguage);
+
   return (
     <ThemeProvider theme={theme}>
       <Seo title={pageTitle} />
-      <Header scrolled={scrolled} links={header} />
+      <Header
+        scrolled={scrolled}
+        links={header}
+        switchLanguage={() =>
+          switchLanguage(i18n.language as SupportedLanguage, pageContext.slug)
+        }
+      />
       <main>{children}</main>
       <Footer links={footer} />
     </ThemeProvider>
diff --git a/src/app/website/src/contents/en/creatingAPost.mdx b/src/app/website/src/contents/en/creating-a-post.mdx
similarity index 100%
rename from src/app/website/src/contents/en/creatingAPost.mdx
rename to src/app/website/src/contents/en/creating-a-post.mdx
diff --git a/src/app/website/src/contents/en/legalInformation.mdx b/src/app/website/src/contents/en/legal-information.mdx
similarity index 100%
rename from src/app/website/src/contents/en/legalInformation.mdx
rename to src/app/website/src/contents/en/legal-information.mdx
diff --git a/src/app/website/src/contents/en/pressRoom.mdx b/src/app/website/src/contents/en/press-room.mdx
similarity index 100%
rename from src/app/website/src/contents/en/pressRoom.mdx
rename to src/app/website/src/contents/en/press-room.mdx
diff --git a/src/app/website/src/contents/fr/creatingAPost.mdx b/src/app/website/src/contents/fr/creating-a-post.mdx
similarity index 98%
rename from src/app/website/src/contents/fr/creatingAPost.mdx
rename to src/app/website/src/contents/fr/creating-a-post.mdx
index 8948d92ca..f57636960 100644
--- a/src/app/website/src/contents/fr/creatingAPost.mdx
+++ b/src/app/website/src/contents/fr/creating-a-post.mdx
@@ -3,6 +3,7 @@ title: "Poster une information sur le web grâce à DisMoi"
 name: "contribuer"
 label: "Contribuer"
 locale: "fr"
+langKey: "fr"
 ---
 
 > ## Contribuer avec l’extension directement sur les pages web visitées
diff --git a/src/app/website/src/contents/fr/legalInformation.mdx b/src/app/website/src/contents/fr/legal-information.mdx
similarity index 100%
rename from src/app/website/src/contents/fr/legalInformation.mdx
rename to src/app/website/src/contents/fr/legal-information.mdx
diff --git a/src/app/website/src/contents/fr/pressRoom.mdx b/src/app/website/src/contents/fr/press-room.mdx
similarity index 100%
rename from src/app/website/src/contents/fr/pressRoom.mdx
rename to src/app/website/src/contents/fr/press-room.mdx
diff --git a/src/app/website/src/hooks/useChangeLanguage.ts b/src/app/website/src/hooks/useChangeLanguage.ts
new file mode 100644
index 000000000..2b9044966
--- /dev/null
+++ b/src/app/website/src/hooks/useChangeLanguage.ts
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+
+const useChangeLanguage = (locale: SupportedLanguage) => {
+  useEffect(() => {
+    i18n.changeLanguage(locale);
+  }, []);
+};
+export default useChangeLanguage;
diff --git a/src/app/website/src/hooks/useGetMenus.ts b/src/app/website/src/hooks/useGetMenus.ts
index b1aca4e41..d76780e83 100644
--- a/src/app/website/src/hooks/useGetMenus.ts
+++ b/src/app/website/src/hooks/useGetMenus.ts
@@ -32,7 +32,7 @@ const useGetMenus = (
   const header: Link[] = [];
   const formatLink = (node: GetLinksQuery['allMdx']['nodes'][0]) => {
     return {
-      href: node.slug || '#',
+      href: '/' + node.slug + '/' || '#',
       label: node.frontmatter?.label || ''
     };
   };
@@ -43,8 +43,6 @@ const useGetMenus = (
     FOOTER_LINKS.some(name => name === node.frontmatter?.name) &&
       footer.push(formatLink(node));
   });
-
-  console.log(header, footer);
   return {
     header,
     footer
diff --git a/src/app/website/src/pages/index.en.tsx b/src/app/website/src/pages/index.en.tsx
index 5c7b5d9f5..ba673bf7b 100644
--- a/src/app/website/src/pages/index.en.tsx
+++ b/src/app/website/src/pages/index.en.tsx
@@ -1,11 +1,26 @@
 import * as React from 'react';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import HomePage from '../../../../components/website/pages/HomePage/HomePage';
+import useGetContributors from '../hooks/useGetContributors';
+import { contributorsIds } from '../contents/ContributorsIds';
+import i18n, { options } from '../../../../libs/i18n';
+
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface IndexProps {
+  pageContext: PageContext;
+}
+
+const IndexPage = ({ pageContext }: IndexProps) => {
+  const [contributors] = useGetContributors(contributorsIds);
 
-const IndexPage = () => {
   return (
-    <Layout pageTitle={"Page d'accueil dis moi"}>
-      <HomePage />
+    <Layout pageTitle={"Page d'accueil dis moi"} pageContext={pageContext}>
+      <HomePage contributors={contributors} />
     </Layout>
   );
 };
diff --git a/src/app/website/src/pages/index.tsx b/src/app/website/src/pages/index.tsx
index 8528fc3c8..ba673bf7b 100644
--- a/src/app/website/src/pages/index.tsx
+++ b/src/app/website/src/pages/index.tsx
@@ -1,14 +1,25 @@
 import * as React from 'react';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import HomePage from '../../../../components/website/pages/HomePage/HomePage';
 import useGetContributors from '../hooks/useGetContributors';
 import { contributorsIds } from '../contents/ContributorsIds';
+import i18n, { options } from '../../../../libs/i18n';
 
-const IndexPage = () => {
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface IndexProps {
+  pageContext: PageContext;
+}
+
+const IndexPage = ({ pageContext }: IndexProps) => {
   const [contributors] = useGetContributors(contributorsIds);
 
   return (
-    <Layout pageTitle={"Page d'accueil dis moi"}>
+    <Layout pageTitle={"Page d'accueil dis moi"} pageContext={pageContext}>
       <HomePage contributors={contributors} />
     </Layout>
   );
diff --git a/src/app/website/src/pages/{mdx.slug}.tsx b/src/app/website/src/pages/{mdx.slug}.tsx
index 3477b01a8..cdd904b74 100644
--- a/src/app/website/src/pages/{mdx.slug}.tsx
+++ b/src/app/website/src/pages/{mdx.slug}.tsx
@@ -3,20 +3,29 @@ import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MdxBySlugQuery } from '../graphql/generated/graphql';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import ContentPage from '../../../../components/website/organisms/ContentPage/ContentPage';
+import i18n, { options, SupportedLanguage } from '../../../../libs/i18n';
+import useChangeLanguage from '../hooks/useChangeLanguage';
 
-interface AboutPageProps {
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface PageProps {
   data: MdxBySlugQuery;
   uri: string;
+  pageContext: PageContext;
 }
 
-const Page = ({ data }: AboutPageProps) => {
+const Page = ({ data, pageContext }: PageProps) => {
   const content = data?.mdx?.body && <MDXRenderer>{data.mdx.body}</MDXRenderer>;
   if (!content) return null;
   const title = data?.mdx?.frontmatter?.title || '';
 
   return (
-    <Layout pageTitle={title} scrolled={true}>
+    <Layout pageTitle={title} scrolled={true} pageContext={pageContext}>
       <article className={'className'}>
         <ContentPage title={title} content={content} />
       </article>
diff --git a/src/app/website/src/types/index.d.ts b/src/app/website/src/types/index.d.ts
new file mode 100644
index 000000000..2ca0d2dc2
--- /dev/null
+++ b/src/app/website/src/types/index.d.ts
@@ -0,0 +1 @@
+export type PageContext = { langKey: string; slug: string };
diff --git a/src/app/website/src/utils/switchLanguage.ts b/src/app/website/src/utils/switchLanguage.ts
new file mode 100644
index 000000000..4f1e80682
--- /dev/null
+++ b/src/app/website/src/utils/switchLanguage.ts
@@ -0,0 +1,11 @@
+import { navigate } from 'gatsby';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+
+const switchLanguage = (locale: SupportedLanguage, slug: string) => {
+  const newLocale = locale === 'fr' ? 'en' : 'fr';
+  i18n.changeLanguage(newLocale);
+  const newSlug = '/' + slug.replace(locale, newLocale);
+  navigate(newSlug);
+};
+
+export default switchLanguage;
diff --git a/src/components/website/molecules/Header/Header.tsx b/src/components/website/molecules/Header/Header.tsx
index 974d20c09..23479f182 100644
--- a/src/components/website/molecules/Header/Header.tsx
+++ b/src/components/website/molecules/Header/Header.tsx
@@ -6,8 +6,8 @@ import LogoDisMoi from '../../atoms/LogoDisMoi/LogoDisMoi';
 import ToggleMenu from '../../atoms/NavMobileButton/ToggleMenu';
 import Modal from '../../atoms/Modal/Modal';
 import NavMobile from '../../atoms/NavMobile/NavMobile';
-import ListLinks, { Link } from './ListLinks';
 import NavDesktopItem from '../../atoms/NavDesktopItem/NavDesktopItem';
+import ListLinks, { Link } from './ListLinks';
 
 const MobileButtonsWrapper = styled.div`
   display: flex;
@@ -56,48 +56,50 @@ export interface HeaderProps {
   className?: string;
   scrolled?: Scrolled;
   links: Link[];
+  switchLanguage: () => void;
 }
 
-const Header = styled(({ className, scrolled, links }: HeaderProps) => {
-  const [offset, setOffset] = useState(0);
-  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+const Header = styled(
+  ({ className, scrolled, links, switchLanguage }: HeaderProps) => {
+    const [offset, setOffset] = useState(0);
+    const [modalOpen, setModalOpen] = React.useState<boolean>(false);
 
-  useEffect(() => {
-    window.onload = () => {
-      setOffset(window.pageYOffset);
-    };
-    window.onscroll = () => {
-      setOffset(window.pageYOffset);
-    };
-  }, []);
+    useEffect(() => {
+      window.onload = () => {
+        setOffset(window.pageYOffset);
+      };
+      window.onscroll = () => {
+        setOffset(window.pageYOffset);
+      };
+    }, []);
 
-  const isScrolled = scrolled || offset > 0;
-
-  return (
-    <>
-      <header className={className + (isScrolled ? ' scrolled' : '')}>
-        <a className="homeLink" href={'/'}>
-          <LogoDisMoi />
-        </a>
-        <NavDesktop>
-          <ListLinks links={links} />
-          {isScrolled && <HeaderCTAButton />}
-          <NavDesktopItem href={'#'}>fr | en</NavDesktopItem>
-        </NavDesktop>
-        <MobileButtonsWrapper>
-          {isScrolled && <HeaderCTAButton />}
-          <ToggleMenu handleClick={() => setModalOpen(true)} />
-        </MobileButtonsWrapper>
-      </header>
-      <Modal open={modalOpen} setOpen={setModalOpen}>
-        <NavMobile>
-          <ListLinks links={links} />
-          <HeaderCTAButton />
-        </NavMobile>
-      </Modal>
-    </>
-  );
-})`
+    const isScrolled = scrolled || offset > 0;
+    return (
+      <>
+        <header className={className + (isScrolled ? ' scrolled' : '')}>
+          <a className="homeLink" href={'/'}>
+            <LogoDisMoi />
+          </a>
+          <NavDesktop>
+            <ListLinks links={links} />
+            {isScrolled && <HeaderCTAButton />}
+            <NavDesktopItem onClick={switchLanguage}>fr | en</NavDesktopItem>
+          </NavDesktop>
+          <MobileButtonsWrapper>
+            {isScrolled && <HeaderCTAButton />}
+            <ToggleMenu handleClick={() => setModalOpen(true)} />
+          </MobileButtonsWrapper>
+        </header>
+        <Modal open={modalOpen} setOpen={setModalOpen}>
+          <NavMobile>
+            <ListLinks links={links} />
+            <HeaderCTAButton />
+          </NavMobile>
+        </Modal>
+      </>
+    );
+  }
+)`
   position: fixed;
   top: 0;
   left: 0;