[gephi-lite] adding error type with i18n support

Author: sim51

packages/gephi-lite/src/components/modals/open/CloudFileModal.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { CloudFile } from "../../../core/cloud/types";
 import { useCloudProvider } from "../../../core/cloud/useCloudProvider";
+import { errorToString } from "../../../core/errors";
 import { useNotifications } from "../../../core/notifications";
 import { useConnectedUser } from "../../../core/user";
 import { displayDateTime } from "../../../utils/date";
@@ -18,13 +19,14 @@ const PAGINATION_SIZE = 12;
 interface OpenCloudFileFormProps {
   id?: string;
   onStatusChange: (status: AsyncStatus) => void;
+  status: AsyncStatus;
 }
 
-export const OpenCloudFileForm: FC<OpenCloudFileFormProps> = ({ id, onStatusChange }) => {
+export const OpenCloudFileForm: FC<OpenCloudFileFormProps> = ({ id, onStatusChange, status }) => {
   const [user] = useConnectedUser();
   const { t } = useTranslation();
   const { notify } = useNotifications();
-  const { loading, error, getFiles, openFile } = useCloudProvider();
+  const { loading, getFiles, openFile } = useCloudProvider();
   // list files retrived from the cloud
   const [files, setFiles] = useState<Array<Omit<CloudFile, "format">>>([]);
   // the selected file by the user
@@ -58,13 +60,8 @@ export const OpenCloudFileForm: FC<OpenCloudFileFormProps> = ({ id, onStatusChan
             message: t("graph.open.github.success", { filename: selected.filename }).toString(),
           });
         } catch (e) {
-          onStatusChange({ type: "error" });
+          onStatusChange({ type: "error", message: errorToString(e) });
           console.error(e);
-          notify({
-            type: "error",
-            message: t("graph.open.github.error"),
-            title: t("gephi-lite.title"),
-          });
         }
       }
     },
@@ -81,7 +78,9 @@ export const OpenCloudFileForm: FC<OpenCloudFileFormProps> = ({ id, onStatusChan
             onSubmit(selected);
           }}
         >
-          {error && <p className="text-center text-danger">{t("graph.open.github.error")}</p>}
+          {status.type === "error" && (
+            <p className="text-center text-danger">{status.message || t("graph.open.github.error")}</p>
+          )}
 
           {files.length > 0 && (
             <>

packages/gephi-lite/src/components/modals/open/LocalFileModal.tsx

@@ -2,7 +2,8 @@ import { FC, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PiFolderOpen } from "react-icons/pi";
 
-import { useFile, useFileActions } from "../../../core/context/dataContexts";
+import { useFileActions } from "../../../core/context/dataContexts";
+import { errorToString } from "../../../core/errors";
 import { ModalProps } from "../../../core/modals/types";
 import { useNotifications } from "../../../core/notifications";
 import type { AsyncStatus } from "../../../utils/promises";
@@ -13,17 +14,17 @@ import { Modal } from "../../modals";
 interface OpenLocalFileFormProps {
   id?: string;
   onStatusChange: (status: AsyncStatus) => void;
+  status: AsyncStatus;
 }
-export const OpenLocalFileForm: FC<OpenLocalFileFormProps> = ({ id, onStatusChange }) => {
+export const OpenLocalFileForm: FC<OpenLocalFileFormProps> = ({ id, onStatusChange, status }) => {
   const { t } = useTranslation();
   const { open } = useFileActions();
   const { notify } = useNotifications();
   const [file, setFile] = useState<File | null>(null);
-  const {
-    status: { type: importStateType },
-  } = useFile();
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    if (file === null) onStatusChange({ type: "idle" });
+  }, [file, onStatusChange]);
 
   const onSubmit = useCallback(
     async (file: File) => {
@@ -42,13 +43,8 @@ export const OpenLocalFileForm: FC<OpenLocalFileFormProps> = ({ id, onStatusChan
           message: t("graph.open.local.success", { filename: file.name }),
         });
       } catch (e) {
-        onStatusChange({ type: "error" });
+        onStatusChange({ type: "error", message: errorToString(e) });
         console.error(e);
-        notify({
-          type: "error",
-          message: t("graph.open.local.error"),
-          title: t("gephi-lite.title"),
-        });
       }
     },
     [open, notify, t, onStatusChange],
@@ -69,14 +65,16 @@ export const OpenLocalFileForm: FC<OpenLocalFileFormProps> = ({ id, onStatusChan
         helpText={t("graph.open.local.dragndrop_text")}
         accept={{ "application/graph": [".gexf", ".graphml"], "application/json": [".json"] }}
       >
-        {importStateType === "error" && <p className="text-center text-danger">{t("graph.open.local.error")}</p>}
+        {status.type === "error" && (
+          <p className="text-center text-danger">{status.message || t("graph.open.local.error")}</p>
+        )}
         {!file && (
           <button className="gl-btn gl-btn-outline mb-2">
             <PiFolderOpen /> {t("graph.open.local.button_text")}
           </button>
         )}
       </DropInput>
-      {importStateType === "loading" && <Loader />}
+      {status.type === "loading" && <Loader />}
     </form>
   );
 };
@@ -92,7 +90,7 @@ export const OpenLocalFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
 
   return (
     <Modal title={t("graph.open.local.title")}>
-      <OpenLocalFileForm id={"localFileForm"} onStatusChange={(s) => setStatus(s)} />
+      <OpenLocalFileForm id={"localFileForm"} onStatusChange={(s) => setStatus(s)} status={status} />
       <div className="gl-gap-2 d-flex">
         <button title={t("common.cancel")} className="gl-btn gl-btn-outline" onClick={() => cancel()}>
           {t("common.cancel")}

packages/gephi-lite/src/components/modals/open/OpenModal.tsx

@@ -13,6 +13,7 @@ type OpenCollectionMenuItem = MenuItem<{
   component: ComponentType<{
     id?: string;
     onStatusChange: (status: AsyncStatus) => void;
+    status: AsyncStatus;
   }>;
 }>;
 
@@ -60,7 +61,7 @@ export const OpenModal: FC<ModalProps<{ initialOpenedTab?: string }>> = ({
           onSelectedChange={(item) => setSelectedOpen(item)}
         />
         <div className="selected-component-wrapper">
-          <selectedOpen.component id="openForm" onStatusChange={setStatus} />
+          <selectedOpen.component id="openForm" onStatusChange={setStatus} status={status} />
         </div>
       </>
       <div className="gl-gap-2 d-flex">

packages/gephi-lite/src/core/errors/codes.ts

@@ -0,0 +1,8 @@
+export const Errors = {
+  IMPORT_BAD_VERSION: (args: { version: string }) =>
+    `Your file is from an older version of gephi-lite (${args.version}) which is not compatible with the actual version`,
+  IMPORT_BAD_FORMAT: (args: { extension: string; fileName: string }) =>
+    `Extension ${args.extension} for file ${args.fileName} is not recognized`,
+};
+
+export type ErrorCode = keyof typeof Errors;

packages/gephi-lite/src/core/errors/index.ts

@@ -0,0 +1,41 @@
+import i18next from "i18next";
+
+import { type ErrorCode, Errors } from "./codes";
+
+export * from "./codes";
+
+export class GephiLiteError<T extends ErrorCode> extends Error {
+  code: T;
+  params: Parameters<(typeof Errors)[T]>[0];
+
+  /**
+   * Gephi Lite Error constructor.
+   *
+   * @param code  The code of the error
+   * @param params Additional parameters that will be passed to the I18N function
+   */
+  constructor(code: T, params: Parameters<(typeof Errors)[T]>[0]) {
+    const formatMessage: (typeof Errors)[T] = Errors[code];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    super(formatMessage(params as unknown as any));
+    this.name = "GephiLiteError";
+    this.code = code;
+    this.params = params;
+    this.stack = new Error().stack;
+  }
+}
+
+/**
+ * Given an error, it produces one string.
+ * Usefull with notification
+ */
+export function errorToString(error: unknown): string {
+  let message = "An unknown error occured";
+  if (error instanceof GephiLiteError) {
+    // Note:  the "as ErrorCode" is for the i18n-checker to discover the i18n keys
+    message = i18next.t(`error.${error.code as ErrorCode}`, error.params as { [key: string]: unknown });
+  } else if (error instanceof Error && error.message) {
+    message = error.message;
+  }
+  return message;
+}

packages/gephi-lite/src/core/file/utils.ts

@@ -5,6 +5,7 @@ import graphml from "graphology-graphml/browser";
 import { parse as parseVersion } from "semver";
 
 import { config } from "../../config";
+import { GephiLiteError } from "../errors";
 import { userAtom } from "../user";
 import { FileFormat, FileTypeWithoutFormat, GephiLiteFileFormat, fileFormatExt } from "./types";
 
@@ -91,16 +92,14 @@ export async function extractGraphFromFile(
       const jsonContent = gephiLiteParse(fileContent);
       if ("type" in jsonContent && jsonContent.type === "gephi-lite") {
         const version = parseVersion(jsonContent.version);
-        console.log("version", version, config.version);
-        if (version && version.major === config.version.major && version.minor === config.version.minor) {
+        if (version) {
+          if (version.major !== config.version.major || version.minor !== config.version.minor) {
+            throw new GephiLiteError("IMPORT_BAD_VERSION", { version: version?.toString() });
+          }
           return {
             format: "gephi-lite",
             data: jsonContent,
           };
-        } else {
-          throw new Error(
-            `Your file is from an older version of gephi-lite (${version?.toString()}) which is not compatible with the actual version`,
-          );
         }
       } else {
         return {
@@ -110,7 +109,7 @@ export async function extractGraphFromFile(
       }
     }
   }
-  throw new Error(`Extension ${extension} for file ${fileName} is not recognized`);
+  throw new GephiLiteError("IMPORT_BAD_FORMAT", { extension, fileName });
 }
 
 /**

packages/gephi-lite/src/locales/dev.json

@@ -258,12 +258,14 @@
     "deprecated": {
       "gexf_search_params": "The `gexf=` url params to open a graph file has been renamed as `file=` in version 0.4.0. Using gexf params is deprecated  and might be removed in future version. Please use `file=` instead."
     },
+    "IMPORT_BAD_FORMAT": "Extension {{extension}} for file {{fileName}} is not recognized",
+    "IMPORT_BAD_VERSION": "Your file is from an older version of Gephi-Lite ({{version}}) which is not compatible with the actual version",
     "form": {
       "field_already_exists": "The column with label \"{{label}}\" already uses the id \"{{id}}\".",
       "required": "Field is required",
       "unique": "Value must be unique, and a data with the same value already exist"
     },
-    "message": "Sorry, we are working to make gephi-lite better, but bugs still happened...<br />It will help us if you can open an issue on GitHub with a description of what you were doing.",
+    "message": "Sorry, we are working to make Gephi-Lite better, but bugs still happened...<br />It will help us if you can open an issue on GitHub with a description of what you were doing.",
     "not_found": {
       "paragraph": "You may have mistyped the address or the page may have moved.",
       "subtitle": "The page you were looking for doesn't exist.",

packages/gephi-lite/src/locales/fr.json

@@ -280,6 +280,8 @@
     "deprecated": {
       "gexf_search_params": "Le paramètre d'URL `gexf=` pour ouvrir un fichier automatiquement a été renommé `file=` dans la version 0.4.0. Utiliser le paramètre gexf est déprécié, et pourrait ne plus fonctionner dans une version future. Veuillez utiliser `file=` à la place."
     },
+    "IMPORT_BAD_FORMAT": "L'extension {{extension}} du fichier {{fileName}} n'est pas reconnue",
+    "IMPORT_BAD_VERSION": "Votre fichier provient d'une version précédente de Gephi-Lite ({{version}}) qui n'est pas compatible avec la version courante",
     "form": {
       "field_already_exists": "La colonne avec le label \"{{label}}\" utilise déjà l'identifiant \"{{id}}\".",
       "required": "Champs requis",