Merge pull request #24 from opengento/i18n-wip

Add 404 page + fix data provider

next.config.js

@@ -2,19 +2,14 @@
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    i18n: {
-      defaultLocale: 'fr',
-      locales: ['fr', 'en'],
-      localeDetection: true,
-    },
-    reactStrictMode: true,
-    webpack(config) {
-        config.module.rules.push({
-            test: /\.svg$/,
-            use: ['@svgr/webpack']
-        });
-        return config;
-    }
+  reactStrictMode: true,
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack']
+    });
+    return config;
+  }
 }
 
 module.exports = nextConfig;

src/app/i18n.ts

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import i18next from 'i18next'
 import { initReactI18next } from 'react-i18next'

src/app/not-found.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import ContentMedia from "@/components/ContentMedia/ContentMedia";
+import Container from "@/layouts/Container";
+import Typography from "@/components/Typography/Typography";
+import Link from "next/link";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import {FaHome} from "react-icons/fa";
+
+export default function Home() {
+  return (
+    <Container size="large" className="flex flex-col gap-8 my-8">
+      <ContentMedia>
+        <Typography
+          variant="h1"
+          color="dark"
+          weight="semibold"
+          underlineColor="primary-100"
+          className="mb-6 md:mb-12"
+        >
+          404: Vous êtes perdus !
+        </Typography>
+        <ButtonLink
+          variant="secondary-invert"
+          href="/"
+          iconPosition="left"
+          icon={<FaHome />}
+        >
+          Retournez sur la page d’accueil !
+        </ButtonLink>
+      </ContentMedia>
+    </Container>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import ContentMedia from "@/components/ContentMedia/ContentMedia";
 import Place from "@/components/Place/Place";
@@ -7,16 +7,16 @@ import SponsorList from "@/components/SponsorList/SponsorList";
 import Container from "@/layouts/Container";
 import Hero from "@/components/Hero/Hero";
 import Speakers from "@/components/Speakers/Speakers";
+import useDataProvider from "@/hooks/useDataProvider";
 import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
 import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
-import { PlaceDataProps } from "@/components/Place/PlaceProps";
-import { useTranslation } from "react-i18next";
+import { PlaceProps } from "@/components/Place/PlaceProps";
 
 export default function Home() {
-  const { t } = useTranslation(['speakers', 'sponsors', 'place']);
-  const speakers: SpeakersProps = t('speakers:data', { returnObjects: true });
-  const sponsors: SponsorProps[] = t('sponsors:data', { returnObjects: true });
-  const place: PlaceDataProps = t('place:data', { returnObjects: true });
+  const dataProvider = useDataProvider();
+  const speakers: SpeakersProps = dataProvider.useSpeakers();
+  const sponsors: SponsorProps[] = dataProvider.useSponsors();
+  const place: PlaceProps = dataProvider.usePlace();
 
   return (
     <div className="relative -top-[104px] left-0">

src/components/Faq/Faq.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, {useState} from "react";
 import {FaCompass, FaHeart, FaLanguage, FaShoppingBag, FaStar, FaTicketAlt, FaUser,} from "react-icons/fa";
 import Typography from "../Typography/Typography";

src/components/Hero/Hero.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import Typography from "@/components/Typography/Typography";
 import BackgroundImage from "@/components/BackgroundImage/BackgroundImage";

src/components/Place/Place.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import Typography from "../Typography/Typography";
+import Typography from "@/components//Typography/Typography";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
-import {IoIosArrowForward} from "react-icons/io";
-import {PlaceProps} from "@/components/Place/PlaceProps";
+import { PlaceProps } from "@/components/Place/PlaceProps";
+import { IoIosArrowForward } from "react-icons/io";
 
-const Place = ({place}: PlaceProps) => {
+const Place = ({ place }: { place: PlaceProps }) => {
   return (
     <div className="flex flex-col gap-4 md:gap-6 md:py-6">
       <div className="flex flex-col gap-4 ">

src/components/Place/PlaceProps.ts

@@ -1,15 +1,10 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
 
-type PlaceType = {
+export type PlaceProps = {
   title: ReactNode;
   subtitle: ReactNode;
   address: ReactNode;
   description: ReactNode;
   label: ReactNode;
   url: string;
-};
-
-export type PlaceDataProps = PlaceType;
-export type PlaceProps = {
-  place: PlaceType;
-};
+}

src/components/Speakers/SpeakersList.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import React from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";

src/components/SponsorList/SponsorList.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import BackgroundImage from "@/components/BackgroundImage/BackgroundImage";
 import Sponsor from "@/components/SponsorList/Sponsor/Sponsor";

src/components/TranslationsProvider/TranslationsProvider.tsx

@@ -1,9 +1,18 @@
-"use client";
+'use client';
 
 import { I18nextProvider } from 'react-i18next'
 import i18next from "../../app/i18n";
 import { ReactNode } from "react";
+/*
+export const getStaticPaths = () => ({
+  paths: availableLanguage.map(({ webLanguageCode }) => ({
+    params: { lang: webLanguageCode }
+  })),
+  fallback: false
+});
 
+export const getStaticProps = () => ({ props: {} });
+*/
 export default function TranslationsProvider({ children }: { children: ReactNode}) {
   return (
     <I18nextProvider i18n={i18next}>

src/hooks/useDataProvider.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useTranslation } from "react-i18next";
+import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
+import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
+import {PlaceProps} from "@/components/Place/PlaceProps";
+
+const useData = (ns: string, key: string = 'data') => {
+  return useTranslation([ns]).t(key, { returnObjects: true });
+}
+
+const isSpeakersProps = (content: object): content is SpeakersProps => {
+  return content !== null && typeof content === 'object';
+}
+
+const isSponsorsProps = (content: object): content is SponsorProps[] => {
+  return content !== null && typeof content === 'object';
+}
+
+const isPlaceProps = (content: object): content is PlaceProps => {
+  return content !== null && typeof content === 'object';
+}
+
+const useSpeakers = (): SpeakersProps =>
+{
+  const content = useData('speakers');
+  if (!isSpeakersProps(content)) {
+    throw new Error('Content is not a valid Speakers Type');
+  }
+
+  return content;
+}
+
+const useSponsors = (): SponsorProps[] =>
+{
+  const content = useData('sponsors');
+  if (!isSponsorsProps(content)) {
+    throw new Error('Content is not a valid array of Sponsor Type');
+  }
+
+  return content;
+}
+
+const usePlace = (): PlaceProps =>
+{
+  const content = useData('place');
+  if (!isPlaceProps(content)) {
+    throw new Error('Content is not a valid Place Type');
+  }
+
+  return content;
+}
+
+const useDataProvider = () => {
+  return {
+    useSponsors: useSponsors,
+    useSpeakers: useSpeakers,
+    usePlace: usePlace,
+  }
+};
+
+export default useDataProvider;

src/layouts/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import BackgroundImage from "@/components/BackgroundImage/BackgroundImage";
 import About from "@/components/About/About";

src/layouts/Header/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 import Link from "next/link";