✨ add 404 page, and add network-only for statistics profile (#126)

* ✨ add 404 page, and add network-only for statistics profile * ⚡ add page not found url * 🔨 add some conditions to view loading or page not found page
Zenika · Oct 29, 2021 · 1b92841 · 1b92841
1 parent ecd36bb
commit 1b92841
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 65 deletions.
diff --git a/i18n/en.js b/i18n/en.js
@@ -1,4 +1,9 @@
 export default {
+  error: {
+    title404: "We are sorry, Page not found!",
+    text404: "The page you are looking for might have been removed had its name changed or is temporarily unavailable.",
+    button404: "Back to home"
+  },
   nav: {
     mySkills: "My skills",
     zenikaSkills: "Zenika skills",

diff --git a/i18n/fr.js b/i18n/fr.js
@@ -1,4 +1,9 @@
 export default {
+  error: {
+    title404: "Nous sommes désolé, page invalide !",
+    text404: "L'URL de la page que vous avez demandé n'existe probablement pas ou est temporairement indisponible.",
+    button404: "Retour au menu"
+  },
   nav: {
     mySkills: "Compétences",
     zenikaSkills: "Zenika",

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,27 @@
+import { i18nContext } from "../utils/i18nContext";
+import React, { useContext } from "react";
+
+export default function Custom404() {
+  const { t } = useContext(i18nContext);
+  return (
+    <div className="container mx-auto px-4">
+      <section className="py-8 px-4 text-center">
+        <div className="max-w-auto mx-auto">
+          <div className="md:max-w-lg mx-auto"></div>
+          <h2 className="mt-8 uppercase text-xl lg:text-5xl font-black">
+            {t("error.title404")}
+          </h2>
+          <p className="mt-6 uppercase text-sm lg:text-base text-gray-900">
+            {t("error.text404")}
+          </p>
+          <a
+            href="/"
+            className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-light py-4 px-6 rounded-full inline-block uppercase shadow-md"
+          >
+            {t("error.button404")}
+          </a>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/profile/[email]/index.tsx b/src/pages/profile/[email]/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { i18nContext } from "../../../utils/i18nContext";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import CommonPage from "../../../components/CommonPage";
@@ -11,7 +11,7 @@ import {
 } from "../../../graphql/queries/userInfos";
 import ViewAgency from "../../../components/profile/ViewAgency";
 import PreferedTopics from "../../../components/profile/PreferedTopics";
-
+import Custom404 from "../../404";
 type GetUserAgencyAndAllAgenciesResult = {
   User: {
     email: string;
@@ -53,7 +53,7 @@ const Profile = () => {
   const router = useRouter();
   const { t } = useContext(i18nContext);
   const { context, email: userEmail } = router.query;
-  const { data, error } = useQuery<GetUserAgencyAndAllAgenciesResult>(
+  const { data, error, loading } = useQuery<GetUserAgencyAndAllAgenciesResult>(
     USER_INFOS,
     {
       variables: { email: userEmail },
@@ -69,7 +69,6 @@ const Profile = () => {
       },
     });
   }
-
   const infoUser = data?.User[0];
   const userAgency =
     error || infoUser?.UserLatestAgency?.agency
@@ -82,7 +81,7 @@ const Profile = () => {
 
   return (
     <div>
-      {infoUser ? (
+      {data?.User?.length > 0 && !error && !loading ? (
         <CommonPage page={"profile"} faded={false} context={context}>
           <div className="flex flex-row justify-center mt-4 mb-20">
             <div className="flex flex-col justify-center max-w-screen-md w-full p-4">
@@ -120,8 +119,10 @@ const Profile = () => {
             </div>
           </div>
         </CommonPage>
+      ) : loading ? (
+        t("loading.loadingText")
       ) : (
-        <p>{t(`loading.loadingText`)}</p>
+        <Custom404 />
       )}
     </div>
   );

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
@@ -63,6 +63,7 @@ const Profile = () => {
     USER_INFOS,
     {
       variables: { email: user?.email },
+      fetchPolicy: "network-only",
     }
   );
   const [insertUser] = useMutation(INSERT_USER_MUTATION);

diff --git a/src/pages/skills/[context]/[category]/add.tsx b/src/pages/skills/[context]/[category]/add.tsx
@@ -13,6 +13,7 @@ import { FetchResult } from ".";
 import CommonPage from "../../../../components/CommonPage";
 import { useNotification } from "../../../../utils/useNotification";
 import { i18nContext } from "../../../../utils/i18nContext";
+import Custom404 from "../../../404";
 
 type Skill = {
   id: string;
@@ -144,21 +145,30 @@ const AddSkill = () => {
   const [selectedSkill, setSelectedSkill] = useState<Skill | undefined>(
     undefined
   );
-  const { data, refetch } = useQuery<FetchResult>(SKILLS_AND_APPETITE_QUERY, {
+  const {
+    data,
+    error: errorSkillsApetite,
+    refetch,
+    loading: loadingSkillsApetite,
+  } = useQuery<FetchResult>(SKILLS_AND_APPETITE_QUERY, {
     variables: { email: user.email, category: category || "" },
     fetchPolicy: "network-only",
   });
   const [debouncedSearchValue] = useDebounce(search, 500);
-  const { data: skillsData, refetch: refetchSearch } =
-    useQuery<SkillSearchResult>(SKILL_SEARCH_QUERY, {
-      variables: {
-        category,
-        search: `%${debouncedSearchValue}%`,
-        email: user?.email,
-        didYouMeanSearch: computeDidYouMeanSearchString(debouncedSearchValue),
-      },
-      fetchPolicy: "network-only",
-    });
+  const {
+    data: skillsData,
+    refetch: refetchSearch,
+    loading: loadingSearchSkill,
+    error: errorSearchSkills,
+  } = useQuery<SkillSearchResult>(SKILL_SEARCH_QUERY, {
+    variables: {
+      category,
+      search: `%${debouncedSearchValue}%`,
+      email: user?.email,
+      didYouMeanSearch: computeDidYouMeanSearchString(debouncedSearchValue),
+    },
+    fetchPolicy: "network-only",
+  });
   const [addSkill, { error: mutationError }] = useMutation(ADD_SKILL_MUTATION, {
     onCompleted: (_) => {
       useNotification(
@@ -205,58 +215,69 @@ const AddSkill = () => {
     })
   );
   const categoryId = data?.Category[0]?.["id"];
-
   return (
-    <CommonPage page={category} faded={modaleOpened} context={context}>
-      <PageWithSkillList
-        context={context}
-        category={category}
-        add={true}
-        faded={modaleOpened}
-        data={radarData}
-        color={data?.Category[0].color}
-      >
-        <div>
-          <div
-            className={`z-20 fixed inset-y-0 right-0 h-screen w-full ${
-              modaleOpened ? "" : "hidden"
-            }`}
+    <div>
+      {radarData &&
+      !errorSkillsApetite &&
+      !loadingSearchSkill &&
+      !loadingSkillsApetite &&
+      !errorSearchSkills ? (
+        <CommonPage page={category} faded={modaleOpened} context={context}>
+          <PageWithSkillList
+            context={context}
+            category={category}
+            add={true}
+            faded={modaleOpened}
+            data={radarData}
+            color={data?.Category[0].color}
           >
-            {selectedSkill ? (
-              <div className="flex flex-row justify-center">
-                <AddOrEditSkillModale
-                  skill={selectedSkill}
-                  cancel={() => setModaleOpened(false)}
-                  callback={addAction}
+            <div>
+              <div
+                className={`z-20 fixed inset-y-0 right-0 h-screen w-full ${
+                  modaleOpened ? "" : "hidden"
+                }`}
+              >
+                {selectedSkill ? (
+                  <div className="flex flex-row justify-center">
+                    <AddOrEditSkillModale
+                      skill={selectedSkill}
+                      cancel={() => setModaleOpened(false)}
+                      callback={addAction}
+                    />
+                  </div>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div
+                className={`flex flex-col ${
+                  isDesktop ? "h-radar" : ""
+                } p-2 z-10 ${modaleOpened ? "opacity-25" : ""}`}
+              >
+                <SearchBar setSearch={setSearch} />
+                <AddSkillListSelector
+                  action={preAddAction}
+                  skills={skillsData?.Skill.filter(
+                    (skill) =>
+                      skill.UserSkillDesires_aggregate.aggregate.count === 0
+                  )}
+                  categoryId={categoryId}
+                  search={debouncedSearchValue}
+                  didYouMeanSkills={skillsData?.didYouMeanSearch.filter(
+                    (skill) =>
+                      skill.UserSkillDesires_aggregate.aggregate.count === 0
+                  )}
                 />
               </div>
-            ) : (
-              <></>
-            )}
-          </div>
-          <div
-            className={`flex flex-col ${isDesktop ? "h-radar" : ""} p-2 z-10 ${
-              modaleOpened ? "opacity-25" : ""
-            }`}
-          >
-            <SearchBar setSearch={setSearch} />
-            <AddSkillListSelector
-              action={preAddAction}
-              skills={skillsData?.Skill.filter(
-                (skill) =>
-                  skill.UserSkillDesires_aggregate.aggregate.count === 0
-              )}
-              categoryId={categoryId}
-              search={debouncedSearchValue}
-              didYouMeanSkills={skillsData?.didYouMeanSearch.filter(
-                (skill) =>
-                  skill.UserSkillDesires_aggregate.aggregate.count === 0
-              )}
-            />
-          </div>
-        </div>
-      </PageWithSkillList>
-    </CommonPage>
+            </div>
+          </PageWithSkillList>
+        </CommonPage>
+      ) : loadingSkillsApetite && loadingSearchSkill ? (
+        t("loading.loadingText")
+      ) : (
+        <Custom404 />
+      )}
+    </div>
   );
 };