Handle errors without redux store - before issue #609

MAIF · Feb 19, 2024 · cfc0c4e · cfc0c4e
1 parent f0990ee
commit cfc0c4e
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 165 deletions.
diff --git a/daikoku/javascript/src/apps/DaikokuApp.tsx b/daikoku/javascript/src/apps/DaikokuApp.tsx
@@ -3,7 +3,7 @@ import { Navigate } from 'react-router';
 import { BrowserRouter, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
 import { TeamBackOffice } from '../components/backoffice/TeamBackOffice';
-import { Error, Footer, SideBar } from '../components/utils';
+import { Footer, SideBar } from '../components/utils';
 import { ModalProvider, NavProvider } from '../contexts';
 
 import {
@@ -395,7 +395,6 @@ export const DaikokuApp = ({
                     }
                   />
                 </Routes>
-                <Error />
               </div>
             </div>
             <Routes>

diff --git a/daikoku/javascript/src/components/backoffice/TeamBackOffice.tsx b/daikoku/javascript/src/components/backoffice/TeamBackOffice.tsx
@@ -1,9 +1,10 @@
 import classNames from "classnames";
-import { useContext, useEffect, useState } from "react";
+import { PropsWithChildren, useContext, useEffect, useState } from "react";
 import { Route, Routes } from "react-router-dom";
+import { toast } from 'sonner';
 
 import { I18nContext, useTeamBackOffice } from "../../contexts";
-import { IState, ITeamSimple, isError } from "../../types";
+import { ITeamSimple, isError } from "../../types";
 import {
   TeamApi,
   TeamApiGroup,
@@ -21,18 +22,14 @@ import {
 import { Spinner } from "../utils";
 import { LastDemands, LastDemandsExt } from "./widgets";
 
-const BackOfficeContent = (props) => {
+const BackOfficeContent = (props: PropsWithChildren) => {
+
   return (
-    <div className="" style={{ height: "100%" }}>
-      {!props.error.status && props.children}
+    <div style={{ height: "100%" }}>
+      {props.children}
     </div>
   );
 };
-type TeamHome = ITeamSimple & {
-  apisCount: number;
-  subscriptionsCount: number;
-  notificationCount: number;
-};
 
 const TeamBackOfficeHome = (props: TeamBackOfficeProps) => {
   const { translate } = useContext(I18nContext);
@@ -64,8 +61,8 @@ const TeamBackOfficeHome = (props: TeamBackOfficeProps) => {
           </button>
         </div>
         <div>
-          {mode === "producer" && <ProducerDashboard {...props}/>}
-          {mode === "consumer" && <ConsumerDashboard {...props}/>}
+          {mode === "producer" && <ProducerDashboard {...props} />}
+          {mode === "consumer" && <ConsumerDashboard {...props} />}
         </div>
       </div>
     </div>
@@ -75,7 +72,7 @@ const TeamBackOfficeHome = (props: TeamBackOfficeProps) => {
 export type TeamBackOfficeProps<P = unknown> = P & { currentTeam: ITeamSimple, reloadCurrentTeam: () => Promise<void> }
 
 export const TeamBackOffice = () => {
-  const { isLoading, currentTeam, reloadCurrentTeam } = useTeamBackOffice()
+  const { isLoading, currentTeam, reloadCurrentTeam, error } = useTeamBackOffice()
 
   useEffect(() => {
     if (currentTeam && !isError(currentTeam))
@@ -88,12 +85,7 @@ export const TeamBackOffice = () => {
     return (
       <div className="row">
         <main role="main" className="ml-sm-auto px-4 mt-3">
-          <div
-            className={classNames("back-office-overlay", {
-              active: isLoading && !error.status,
-            })}
-          />
-          <BackOfficeContent error={error}>
+          <BackOfficeContent>
             <Routes>
               <Route path={`/edition`} element={<TeamEdit currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam} />} />
               <Route path={`/assets`} element={<TeamAssets currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam} />} />
@@ -121,7 +113,7 @@ export const TeamBackOffice = () => {
               />
               <Route
                 path={`/apigroups/:apiGroupId/:tab/*`}
-                element={<TeamApiGroup currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam}/>}
+                element={<TeamApiGroup currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam} />}
               />
               <Route path={`/apis`} element={<TeamApis currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam} />} />
               <Route path="/" element={<TeamBackOfficeHome currentTeam={currentTeam} reloadCurrentTeam={reloadCurrentTeam} />} />
@@ -131,7 +123,13 @@ export const TeamBackOffice = () => {
       </div>
     );
   } else {
-    return <div>Error while fetching team</div>
+
+    const e = error?.message || currentTeam?.error
+
+    toast.error(e)
+
+    return null; //todo: [#609] display a better error
+
   }
 
 };

diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
@@ -224,9 +224,7 @@ export const TeamApi = (props: TeamBackOfficeProps<{ creation: boolean }>) => {
 
   const tab: string = params.tab || 'infos';
 
-  if (tenant.creationSecurity && !props.currentTeam.apisCreationPermission) {
-    dispatch(setError({ error: { status: 403, message: 'Creation security enabled' } }));
-  }
+
 
   useEffect(() => {
     if (api) {
@@ -282,6 +280,11 @@ export const TeamApi = (props: TeamBackOfficeProps<{ creation: boolean }>) => {
     }
   }, [api]);
 
+  if (tenant.creationSecurity && !props.currentTeam.apisCreationPermission) {
+    toast.error(translate('creation.security.enabled.message'))
+    return null;
+  }
+
   if (!newApi && apiRequest.isLoading) {
     return <Spinner />
   } else if (newApi || (apiRequest.data && !isError(apiRequest.data))) {

diff --git a/daikoku/javascript/src/components/frontend/FrontOffice.tsx b/daikoku/javascript/src/components/frontend/FrontOffice.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { IState, IStateError } from '../../types';
 
 export const FrontOffice = (props: { children: JSX.Element }) => {
-  const error = useSelector<IState, IStateError>(s => s.error)
+  // const error = useSelector<IState, IStateError>(s => s.error)
 
-  return <>{!error.status && props.children}</>;
+  //todo: [#609] display a better error
+
+  return <>{props.children}</>;
 };
diff --git a/daikoku/javascript/src/components/frontend/api/ApiHome.tsx b/daikoku/javascript/src/components/frontend/api/ApiHome.tsx
@@ -200,24 +200,6 @@ export const ApiHome = ({
     }
   }, [subscriptions, myTeams]);
 
-  // type TTeamGQL = {
-  //   name: string
-  //   _humanReadableId: string
-  //   _id: string
-  //   type: TeamType
-  //   apiKeyVisibility: TeamPermission
-  //   apisCreationPermission: boolean
-  //   verified: boolean
-  //   users: Array<{
-  //     user:  {
-  //       userId: string
-  //     }
-  //     teamPermission: TeamPermission
-  //   }>
-  // }
-  // type TMyTeamsGQL = {
-  //   myTeams: Array<TTeamGQL>
-  // }
   const updateSubscriptions = (apiId: string) => {
     //FIXME: handle case if appolo client is not setted
     if (!client) {
@@ -238,7 +220,7 @@ export const ApiHome = ({
         },
       ]) => {
         if (isError(api)) {
-          dispatch(setError({ error: { status: 404, message: api.error } }));
+          toast.error(api.error) //FIXME [#609] better error management
         } else {
           setApi(api);
           setSubscriptions(subscriptions);

diff --git a/daikoku/javascript/src/components/utils/Errors.tsx b/daikoku/javascript/src/components/utils/Errors.tsx
diff --git a/daikoku/javascript/src/components/utils/index.ts b/daikoku/javascript/src/components/utils/index.ts
@@ -7,7 +7,6 @@ export * from './Spinner';
 export * from './AvatarChooser';
 export * from './PaginatedComponent';
 export * from './AvatarWithAction';
-export * from './Errors';
 export * from './Option';
 export * from './permissions';
 export * from './Footer';

diff --git a/daikoku/javascript/src/locales/en/translation.json b/daikoku/javascript/src/locales/en/translation.json
@@ -1374,5 +1374,6 @@
     "apisubscription.lastUsage.label": "Last usage",
     "N/A": "N/A",
     "semver.error.message": "Can't create version with special characters : %s",
-    "version.creation.success.message": "New version of api created successfully"
+    "version.creation.success.message": "New version of api created successfully",
+    "error.message.creation.security.enabled": "You're not authorized to create API, please contact your administrator."
 }
diff --git a/daikoku/javascript/src/locales/fr/translation.json b/daikoku/javascript/src/locales/fr/translation.json
@@ -1378,5 +1378,6 @@
   "apisubscription.lastUsage.label": "Dernier usage",
   "N/A": "N/A",
   "semver.error.message": "Une version ne peut pas être créée avec des caractère spéciaux : %s",
-  "version.creation.success.message": "La nouvelle version de l'API a été créée avec succès"
+  "version.creation.success.message": "La nouvelle version de l'API a été créée avec succès",
+  "error.message.creation.security.enabled": "Vous n'êtes pas authorisé a créer d'API, merci de contacter votre administrateur."
 }
diff --git a/daikoku/javascript/src/services/customize.ts b/daikoku/javascript/src/services/customize.ts
@@ -1,18 +1,19 @@
-import { SET_ERROR } from '../contexts';
 import queryString from 'query-string';
+import { toast } from 'sonner';
 
 export function customizeFetch(store: any) {
   let willRedirect = false;
   (window as any).old_fetch = window.fetch;
   window.fetch = (...args) => {
-    const dispatchError = (response: any) =>
-      response.json().then((error: any) => {
-        store.dispatch({
-          type: SET_ERROR,
-          error: { status: response.status, message: error.error, args, response: error },
-        });
-        return Promise.reject(error);
-      });
+    // const dispatchError = (response: any) =>
+    //   response.json()
+    //     .then((error: any) => {
+    //       store.dispatch({
+    //         type: SET_ERROR,
+    //         error: { status: response.status, message: error.error, args, response: error },
+    //       });
+    //       return Promise.reject(error);
+    //     });
 
     const query = queryString.parse(window.location.search);
     const url = args[0];
@@ -28,27 +29,29 @@ export function customizeFetch(store: any) {
     newArgs.shift();
     newArgs = [newUrl, ...newArgs];
 
-    return (window as any).old_fetch(...newArgs).then((r: any) => {
-      const status = r.status;
-      if (r.redirected && r.url.indexOf('/auth/') > -1) {
-        if (willRedirect === false) {
-          willRedirect = true;
-          // redirect();
+    return (window as any).old_fetch(...newArgs)
+      .then((r: any) => {
+        const status = r.status;
+        if (r.redirected && r.url.indexOf('/auth/') > -1) {
+          if (willRedirect === false) {
+            willRedirect = true;
+            // redirect();
+          }
+        } else if (status > 199 && status < 300) {
+          // nothing to do yet
+        } else if (status > 299 && status < 400) {
+          // nothing to do yet
+        } else if (status === 409) {
+          // toast.error('Conflict', 'The resource already exists');
+        } else if (status === 404) {
+          // nothing to do yet
+        } else if (status >= 500 && status < 600) {
+          toast.error(r.error) //TODO [#609]
+          return r
+        } else {
+          // nothing to do yet
         }
-      } else if (status > 199 && status < 300) {
-        // nothing to do yet
-      } else if (status > 299 && status < 400) {
-        // nothing to do yet
-      } else if (status === 409) {
-        // toast.error('Conflict', 'The resource already exists');
-      } else if (status === 404) {
-        // nothing to do yet
-      } else if (status >= 500 && status < 600) {
-        return dispatchError(r);
-      } else {
-        // nothing to do yet
-      }
-      return r;
-    });
+        return r;
+      });
   };
 }