fix(ux): fix loader not showing up

datatlas-erasme · Nov 28, 2023 · 125019e · 125019e
1 parent d038e80
commit 125019e
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 57 deletions.
diff --git a/apps/frontend/src/components/ErrorComponent.tsx b/apps/frontend/src/components/ErrorComponent.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import { SerializedError } from '@reduxjs/toolkit';
+
+export const ErrorComponent = ({ error }: { error: FetchBaseQueryError | SerializedError | Error }) => {
+  return (
+    <>
+      {/*
+// @ts-ignore */}
+      <h1>Oops! {error.status}</h1>
+      {/*
+// @ts-ignore */}
+      <p>{error.statusText}</p>
+      <p>
+        {/*
+// @ts-ignore */}
+        <i>{error.data.message}</i>
+      </p>
+    </>
+  );
+};
diff --git a/apps/frontend/src/components/Loader.tsx b/apps/frontend/src/components/Loader.tsx
@@ -1,7 +1,8 @@
 import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
-export const Loader = styled((props: SVGProps<SVGSVGElement> & { dark?: boolean }) => (
+export type LoaderProps = { dark?: boolean; fullscreen?: boolean };
+export const SVGLoader = styled(({ dark, fullscreen, ...props }: SVGProps<SVGSVGElement> & LoaderProps) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-label="Loading..." {...props}>
     <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
     <path
@@ -17,8 +18,8 @@ export const Loader = styled((props: SVGProps<SVGSVGElement> & { dark?: boolean
   }
 
   color: rgb(${({ dark }) => (dark ? '0 0 0' : '255 255 255')} / 1);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: ${({ fullscreen }) => (fullscreen ? '2.5rem' : ' 1.25rem')};
+  height: ${({ fullscreen }) => (fullscreen ? '2.5rem' : ' 1.25rem')};
   margin-right: 0.75rem;
   margin-left: -0.25rem;
 
@@ -32,3 +33,23 @@ export const Loader = styled((props: SVGProps<SVGSVGElement> & { dark?: boolean
     opacity: 0.75;
   }
 `;
+
+const FullscreenContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Loader = (props: LoaderProps) => {
+  if (props.fullscreen) {
+    return (
+      <FullscreenContainer>
+        <SVGLoader {...props} />
+      </FullscreenContainer>
+    );
+  }
+
+  return <SVGLoader {...props} />;
+};
diff --git a/apps/frontend/src/pages/ErrorPage.tsx b/apps/frontend/src/pages/ErrorPage.tsx
@@ -1,19 +1,14 @@
 import React from 'react';
 import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { ErrorComponent } from '../components/ErrorComponent';
 
 export const ErrorPage = () => {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error)) {
     return (
       <div id="error-page">
-        <h1>Oops! {error.status}</h1>
-        <p>{error.statusText}</p>
-        {error.data?.message && (
-          <p>
-            <i>{error.data.message}</i>
-          </p>
-        )}
+        <ErrorComponent error={error} />
       </div>
     );
   } else if (error instanceof Error) {
@@ -27,6 +22,13 @@ export const ErrorPage = () => {
       </div>
     );
   } else {
-    return <>?</>;
+    return (
+      <div id="error-page">
+        <p>
+          <h1>Oops! </h1>
+          <i>This definitely shouldn't happend</i>
+        </p>
+      </div>
+    );
   }
 };
diff --git a/apps/frontend/src/pages/ProjectPage.tsx b/apps/frontend/src/pages/ProjectPage.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 import { skipToken } from '@reduxjs/toolkit/query/react';
 import { Project } from '@datatlas/models';
 import KeplerMap from '../components/KeplerMap';
 import { getUser, useGetProjectQuery } from '../store/api';
 import { Loader } from '../components/Loader';
 import { selectCurrentUserId } from '../store/selectors';
+import { ErrorComponent } from '../components/ErrorComponent';
+
+const MapContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
 
 export const ProjectPage = () => {
   const { id } = useParams();
@@ -15,22 +23,39 @@ export const ProjectPage = () => {
   }
 
   const currentUserId = useSelector(selectCurrentUserId);
-  const { data: user, isError: isUserError, error: userError } = getUser.useQuery(currentUserId ?? skipToken);
+  const {
+    isLoading: isUserLoading,
+    isFetching: isUserFetching,
+    data: user,
+    isError: isUserError,
+    error: userError,
+  } = getUser.useQuery(currentUserId ?? skipToken);
   if (isUserError) {
     console.error(userError);
   }
 
-  const { isLoading, isFetching, isError, error, data: project } = useGetProjectQuery(+id ?? skipToken);
-  if (isLoading || isFetching) {
-    return <Loader />;
+  const {
+    isLoading: isProjectLoading,
+    isFetching: isProjectFetching,
+    isError,
+    error,
+    data: project,
+  } = useGetProjectQuery(+id ?? skipToken);
+  const isLoading = isUserLoading || isUserFetching || isProjectLoading || isProjectFetching;
+
+  if (isLoading) {
+    return (
+      <MapContainer>
+        <Loader dark fullscreen />
+      </MapContainer>
+    );
   } else if (isError) {
-    console.error(error);
-    return <div>{error.toString()}</div>;
+    return <ErrorComponent error={error} />;
   }
 
   return (
-    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+    <MapContainer>
       <KeplerMap id={id} readOnly={!Project.canProjectDtoBeEditedBy(project, user)} />
-    </div>
+    </MapContainer>
   );
 };
diff --git a/apps/frontend/src/pages/ProjectsPage.tsx b/apps/frontend/src/pages/ProjectsPage.tsx
@@ -51,44 +51,38 @@ export const ProjectsPage = () => {
       <AuthenticatedGuard>
         <LayoutProjects>
           <ProjectsContainer>
-            {myProjects.length > 0 && (
-              <>
-                <HeaderProjects>
-                  <h2>
-                    <FormattedMessage id={'dashboard.my_projects'} defaultMessage={'Mes Projets'} />
-                  </h2>
-                </HeaderProjects>
-                <ProjectList
-                  data={myProjects}
-                  isLoading={isLoading}
-                  isFetching={isFetching}
-                  isSuccess={isSuccess}
-                  isError={isError}
-                  error={error}
-                />
-              </>
-            )}
-            {communityProjects.length > 0 && (
-              <>
-                <HeaderProjects>
-                  <h2>
-                    <FormattedMessage id={'dashboard.community_projects'} defaultMessage={'Communauté Datatlas'} />
-                  </h2>
-                  <p>
-                    Vous trouverez ici les projets partagés par l’ensemble de la communauté Datatlas, n’hésitez pas à
-                    les découvrir et à vous en inspirer !
-                  </p>
-                </HeaderProjects>
-                <ProjectList
-                  data={communityProjects}
-                  isLoading={isLoading}
-                  isFetching={isFetching}
-                  isSuccess={isSuccess}
-                  isError={isError}
-                  error={error}
-                />
-              </>
-            )}
+            <HeaderProjects>
+              <h2>
+                <FormattedMessage id={'dashboard.my_projects'} defaultMessage={'Mes Projets'} />
+              </h2>
+            </HeaderProjects>
+            <ProjectList
+              data={myProjects}
+              isLoading={isLoading}
+              isFetching={isFetching}
+              isSuccess={isSuccess}
+              isError={isError}
+              error={error}
+            />
+            <HeaderProjects>
+              <h2>
+                <FormattedMessage id={'dashboard.community_projects'} defaultMessage={'Communauté Datatlas'} />
+              </h2>
+            </HeaderProjects>
+            <>
+              <p>
+                Vous trouverez ici les projets partagés par l’ensemble de la communauté Datatlas, n’hésitez pas à les
+                découvrir et à vous en inspirer !
+              </p>
+              <ProjectList
+                data={communityProjects}
+                isLoading={isLoading}
+                isFetching={isFetching}
+                isSuccess={isSuccess}
+                isError={isError}
+                error={error}
+              />
+            </>
           </ProjectsContainer>
           <Sidebar />
         </LayoutProjects>