feature/OC-570/sync-forms

pwa/src/apiService/resources/synchronization.ts

@@ -1,66 +1,60 @@
-import { AxiosInstance } from "axios";
-import { paramsToQueryParams } from "../../services/paramsToQueryParams";
-import { TSendFunction } from "../apiService";
-
-export default class Synchroniation {
-  private _instance: AxiosInstance;
-  private _send: TSendFunction;
-
-  constructor(instance: AxiosInstance, send: TSendFunction) {
-    this._instance = instance;
-    this._send = send;
-  }
-
-  public getAll = async (): Promise<any> => {
-    const { data } = await this._send(this._instance, "GET", "/admin/synchronizations");
-
-    return data;
-  };
-
-  public getOne = async (id: string): Promise<any> => {
-    const { data } = await this._send(this._instance, "GET", `/admin/synchronizations/${id}`);
-
-    return data;
-  };
-
-  public delete = async (variables: { id: string }): Promise<any> => {
-    const { id } = variables;
-
-    const { data } = await this._send(this._instance, "DELETE", `/admin/synchronizations/${id}`);
-    return data;
-  };
-
-  public createOrUpdate = async (variables: {
-    payload: any;
-    objectId: string;
-    sourceId: string;
-    syncId?: string;
-  }): Promise<any> => {
-    const { payload, sourceId, objectId, syncId } = variables;
-
-    const params = {
-      action: payload.action && payload.action.value,
-      endpoint: payload.endpoint,
-      externalId: payload.externalId,
-      sourceId: sourceId,
-    };
-
-    const _payload = {
-      ...payload,
-      action: payload.action && `/admin/actions/${payload.action.value}`,
-      sourceId: payload.source.value,
-    };
-
-    if (syncId) {
-      const { data } = await this._send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload);
-      return data;
-    }
-
-    const { data } = await this._send(
-      this._instance,
-      "POST",
-      `/admin/object_entities/${objectId}/sync/${sourceId}${paramsToQueryParams(params, true)}`,
-    );
-    return data;
-  };
-}
+import { AxiosInstance } from "axios";
+import { paramsToQueryParams } from "../../services/paramsToQueryParams";
+import { TSendFunction } from "../apiService";
+
+export default class Synchroniation {
+  private _instance: AxiosInstance;
+  private _send: TSendFunction;
+
+  constructor(instance: AxiosInstance, send: TSendFunction) {
+    this._instance = instance;
+    this._send = send;
+  }
+
+  public getAll = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/synchronizations");
+
+    return data;
+  };
+
+  public getOne = async (id: string): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", `/admin/synchronizations/${id}`);
+
+    return data;
+  };
+
+  public delete = async (variables: { id: string }): Promise<any> => {
+    const { id } = variables;
+
+    const { data } = await this._send(this._instance, "DELETE", `/admin/synchronizations/${id}`);
+    return data;
+  };
+
+  public createOrUpdate = async (variables: { payload: any; objectId: string; syncId?: string }): Promise<any> => {
+    const { payload, objectId, syncId } = variables;
+
+    const _payload = {
+      ...payload,
+      entity: payload.entity && `/admin/entities/${payload.entity}`,
+      object: objectId,
+      action: payload.action && `/admin/actions/${payload.action.value}`,
+      gateway: payload.source && `/admin/gateways/${payload.source.value}`,
+    };
+
+    delete _payload.source;
+
+    if (syncId) {
+      const { data } = await this._send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload, {
+        loading: "Updating synchronization...",
+        success: "Synchronization successfully updated.",
+      });
+      return data;
+    }
+
+    const { data } = await this._send(this._instance, "POST", "/admin/synchronizations", _payload, {
+      loading: "Creating synchronization...",
+      success: "Synchronization successfully created.",
+    });
+    return data;
+  };
+}

pwa/src/context/isLoading.ts

@@ -15,6 +15,7 @@ export interface IIsLoadingContext {
   organizationForm?: boolean;
   mappingForm?: boolean;
   loginForm?: boolean;
+  syncForm?: boolean;
 }
 
 export const defaultIsLoadingContext: IIsLoadingContext = {};

pwa/src/hooks/synchronization.ts

@@ -28,12 +28,13 @@ export const useSync = (queryClient: QueryClient) => {
       enabled: !!syncId && !isDeleted(syncId),
     });
 
-  const remove = () =>
+  const remove = (objectId?: string) =>
     useMutation<any, Error, any>(API.Synchroniation.delete, {
       onMutate: ({ id }) => addDeletedItem(id),
       onSuccess: async (_, variables) => {
         deleteItem(queryClient, "object", variables.id);
         queryClient.invalidateQueries(["synchronizations"]);
+        objectId && navigate(`/objects/${objectId}`);
       },
       onError: (error, { id }) => {
         removeDeletedItem(id);
@@ -48,8 +49,6 @@ export const useSync = (queryClient: QueryClient) => {
     useMutation<any, Error, any>(API.Synchroniation.createOrUpdate, {
       onSuccess: async (newSync) => {
         if (syncId) {
-          toast.success("Succesfully updated synchroniation");
-
           updateItem(queryClient, "synchronizations", newSync);
           navigate(`/objects/${objectId}`);
         }

pwa/src/pages/objects/[objectId]/[syncId]/SyncDetailPage.tsx

@@ -2,15 +2,17 @@ import * as React from "react";
 import { PageProps } from "gatsby";
 import { DashboardTemplate } from "../../../../templates/dashboard/DashboardTemplate";
 import { SyncDetailTemplate } from "../../../../templates/syncDetailTemplate/SyncDetailTemplate";
-import { CreateSyncFormTemplate } from "../../../../templates/templateParts/syncForm/CreateSyncFormTemplate";
+import { CreateSyncTemplate } from "../../../../templates/templateParts/syncForm/CreateSyncTemplate";
 
-const SyncDetailPage: React.FC<PageProps> = (props: PageProps) => (
-  <DashboardTemplate>
-    {props.params.syncId === "new" && <CreateSyncFormTemplate objectId={props.params.objectId} />}
-    {props.params.syncId !== "new" && (
-      <SyncDetailTemplate syncId={props.params.syncId} objectId={props.params.objectId} />
-    )}
-  </DashboardTemplate>
-);
+const SyncDetailPage: React.FC<PageProps> = (props: PageProps) => {
+  const syncId = props.params.syncId === "new" ? null : props.params.syncId;
+
+  return (
+    <DashboardTemplate>
+      {!syncId && <CreateSyncTemplate objectId={props.params.objectId} />}
+      {syncId && <SyncDetailTemplate objectId={props.params.objectId} {...{ syncId }} />}
+    </DashboardTemplate>
+  );
+};
 
 export default SyncDetailPage;

pwa/src/templates/syncDetailTemplate/SyncDetailTemplate.tsx

@@ -5,11 +5,13 @@ import { useTranslation } from "react-i18next";
 import { useQueryClient } from "react-query";
 import { Container } from "@conduction/components";
 import Skeleton from "react-loading-skeleton";
-import { EditSyncFormTemplate } from "../templateParts/syncForm/EditSyncFormTemplate";
+import { SyncFormTemplate, formId } from "../templateParts/syncForm/SyncFormTemplate";
 import { useSync } from "../../hooks/synchronization";
 import { navigate } from "gatsby";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FormHeaderTemplate } from "../templateParts/formHeader/FormHeaderTemplate";
+import { useIsLoadingContext } from "../../context/isLoading";
 
 interface SyncDetailTemplateProps {
   syncId: string;
@@ -18,10 +20,16 @@ interface SyncDetailTemplateProps {
 
 export const SyncDetailTemplate: React.FC<SyncDetailTemplateProps> = ({ syncId, objectId }) => {
   const { t } = useTranslation();
+  const { setIsLoading, isLoading } = useIsLoadingContext();
 
   const queryClient = useQueryClient();
   const _useSync = useSync(queryClient);
   const getSynchronization = _useSync.getOne(syncId);
+  const deleteSync = _useSync.remove(objectId);
+
+  React.useEffect(() => {
+    setIsLoading({ syncForm: deleteSync.isLoading });
+  }, [deleteSync.isLoading]);
 
   return (
     <Container layoutClassName={styles.container}>
@@ -33,7 +41,16 @@ export const SyncDetailTemplate: React.FC<SyncDetailTemplateProps> = ({ syncId,
       {getSynchronization.isError && "Error..."}
 
       {getSynchronization.isSuccess && (
-        <EditSyncFormTemplate sync={getSynchronization.data} {...{ syncId, objectId }} />
+        <>
+          <FormHeaderTemplate
+            {...{ formId }}
+            disabled={isLoading.syncForm}
+            title={`Edit ${getSynchronization.data.id}`}
+            handleDelete={() => deleteSync.mutateAsync({ id: syncId })}
+            showTitleTooltip
+          />
+          <SyncFormTemplate synchronization={getSynchronization.data} {...{ objectId }} />
+        </>
       )}
 
       {getSynchronization.isLoading && <Skeleton height="200px" />}

pwa/src/templates/templateParts/objectsFormTemplate/CreateObjectFormTemplate.tsx

@@ -76,7 +76,7 @@ export const CreateObjectFormTemplate: React.FC<CreateObjectFormTemplateProps> =
         onSuccess: (newObject) => {
           switch (afterSuccessfulFormSubmit) {
             case "save":
-              navigate(`/objects/${newObject._id}`);
+              navigate(`/objects/${newObject.id ?? newObject._id}`);
               break;
 
             case "saveAndClose":

pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as styles from "./SyncFormTemplate.module.css";
+
+import { useTranslation } from "react-i18next";
+import { SyncFormTemplate, formId } from "./SyncFormTemplate";
+import { useIsLoadingContext } from "../../../context/isLoading";
+import { FormHeaderTemplate } from "../formHeader/FormHeaderTemplate";
+
+interface CreateSyncTemplateProps {
+  objectId: string;
+}
+
+export const CreateSyncTemplate: React.FC<CreateSyncTemplateProps> = ({ objectId }) => {
+  const { t } = useTranslation();
+  const { isLoading } = useIsLoadingContext();
+
+  return (
+    <div className={styles.container}>
+      <FormHeaderTemplate title={t("Create Sync")} disabled={isLoading.syncForm} {...{ formId }} />
+
+      <SyncFormTemplate {...{ objectId }} />
+    </div>
+  );
+};