Daos-698 fix/save agreement file

components/CreateAgreement/NavPanel.tsx

@@ -44,6 +44,7 @@ import { uploadFile, uploadToIpfs } from "../../modules/rest";
 import { notifError } from "../../utils/notification";
 import ModalConfirmAgreementDeletion from "../ModalConfirmAgreementDeletion/ModalConfirmAgreementDeletion";
 import { getToken } from "../../utils/token";
+import useRestoreFile from "../../hooks/useRestoreFile";
 
 const FILE_UPLOAD_ERROR_DEFAULT_MESSAGE = "Failed to upload file";
 
@@ -61,6 +62,7 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
   const { push, query } = useRouter();
   const { account } = useWeb3();
   const step = query?.step ? Number(query.step) : 1;
+  const { restoreFile } = useRestoreFile();
 
   const [isLoadingNextStep, setIsLoadingNextStep] = useState<boolean>(false);
   const [isAuthorNotAddedPopupVisible, setIsAuthorNotAddedPopupVisible] = useState<boolean>(false);
@@ -137,6 +139,7 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
     file: File
   ): Promise<{ filePath?: string; agreementHash?: string; error?: any }> => {
     let calculatedIpfsHash: any;
+    const isTemp = step !== 3;
     try {
       const hash = await calculateIpfsHash(file);
       if (hash) {
@@ -149,17 +152,18 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
 
     const token = getToken();
 
-    if (values.agreementLocation === LOCATION_PUBLIC_IPFS) {
+    if (values.agreementLocation === LOCATION_PUBLIC_IPFS && !isTemp) {
       const uploadResult = await uploadToIpfs(token!, file);
       if (!uploadResult.IpfsHash) {
         return { error: uploadResult };
       }
+      isTemp && changeValue("filePath", "");
       return { agreementHash: calculatedIpfsHash };
     }
 
-    if (values.agreementLocation === LOCATION_CLOUD) {
+    if (values.agreementLocation === LOCATION_CLOUD || isTemp) {
       try {
-        const res = await uploadFile(token!, file);
+        const res = await uploadFile(token!, file, isTemp);
         if (res && "fileLink" in res) {
           changeValue("filePath", res.fileLink);
           return { filePath: res.fileLink, agreementHash: calculatedIpfsHash };
@@ -193,7 +197,8 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
       signers: values.signers.map(s => s.value),
       observers: values.observers.map(o => o.value),
       agreementHash: agreementHash || values.agreementHash,
-      agreementFilePath: filePath || values.filePath,
+      agreementFilePath:
+        values.agreementLocation === LOCATION_PUBLIC_IPFS ? "" : filePath || values.filePath,
       isReadyToSign: false,
     }).then(res => {
       if (res.error) {
@@ -246,7 +251,10 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
   };
 
   const preuploadFile = async () => {
-    if (step === 3) return;
+    if (step === 3) {
+      const res = await restoreFile(values, changeValue);
+      return res && (await uploadNewFile(res));
+    }
     try {
       let uploadedFileData: { filePath?: string; agreementHash?: string; error?: any } = {};
       if (
@@ -351,7 +359,7 @@ export default function NavPanel({ setLoading, page }: { setLoading: any; page:
           const areFieldsValid = validateFields({ ...values, ...uploadedFileData });
           if (areFieldsValid) {
             if (isFinishButton) {
-              await handleCreateAgreement();
+              await handleSaveDraft();
             } else {
               handleNextStep();
             }

components/CreateAgreement/Steps/StepTwo/Upload/index.tsx

@@ -7,6 +7,7 @@ import { restoreCloudFile, restoreIpfsFile } from "../../../../../modules/rest";
 import { LOCATION_CLOUD, LOCATION_PUBLIC_IPFS } from "../../../../../types";
 import { withFade } from "../../..";
 import { UploadScreen, FileLoading } from "./Parts";
+import useRestoreFile from "../../../../../hooks/useRestoreFile";
 
 export interface FileState {
   file: File | undefined;
@@ -17,48 +18,14 @@ export default function Upload({ page }: { page: string }) {
   const create = useCreateAgreement();
   const edit = useEditAgreement();
   const { values, changeValue } = page === "create" ? create : edit;
-  const [fileLoading, setFileLoading] = useState(false);
-
-  const restoreFileStarted = useRef(false);
+  const { restoreFile, fileLoading } = useRestoreFile();
 
   //Restore file
   useEffect(() => {
     if (!values.file && (values.filePath || values.agreementHash)) {
-      if (restoreFileStarted.current) return;
-      restoreFileStarted.current = true;
-      setFileLoading(true);
-      restoreFile().then(res => {
-        restoreFileStarted.current = false;
-        setFileLoading(false);
-      });
-    }
-  }, []);
-
-  const restoreFile = async () => {
-    if (!values.file && (values.filePath || values.agreementHash)) {
-      if (values.agreementLocation === LOCATION_CLOUD && values.filePath) {
-        return restoreCloudFile(values.filePath)
-          .then(file => changeValue("file", file))
-          .then(console.error);
-      }
-
-      if (values.agreementLocation === LOCATION_PUBLIC_IPFS && values.agreementHash) {
-        return restoreIpfsFile(values.agreementHash)
-          .then(file => changeValue("file", file))
-          .catch(e => {
-            console.error(e);
-          });
-      }
-
-      if (values.agreementLocation === LOCATION_PUBLIC_IPFS && values.filePath) {
-        return restoreIpfsFile(values.filePath)
-          .then(file => changeValue("file", file))
-          .catch(e => {
-            console.error(e);
-          });
-      }
+      restoreFile(values, changeValue);
     }
-  };
+  }, [values, changeValue, restoreFile]);
 
   return (
     <form id="upload-container">

hooks/useRestoreFile.ts

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { restoreCloudFile, restoreIpfsFile } from "../modules/rest";
+import { LOCATION_CLOUD, LOCATION_PUBLIC_IPFS } from "../types";
+
+interface FileValues {
+  file?: File;
+  filePath?: string;
+  agreementHash?: string;
+  agreementLocation?: string;
+}
+
+type ChangeValueFunction = (key: keyof FileValues, value: any) => void;
+
+const useRestoreFile = () => {
+  const [fileLoading, setFileLoading] = useState(false);
+
+  const restoreFile = async (values: FileValues, changeValue: ChangeValueFunction) => {
+    if (!values.file && (values.filePath || values.agreementHash)) {
+      setFileLoading(true);
+
+      try {
+        let file;
+        if (values.filePath && values.agreementHash) {
+          file = await restoreCloudFile(values.filePath);
+        } else if (!values.filePath && values.agreementHash) {
+          const hash = values.agreementHash;
+          file = await restoreIpfsFile(hash);
+        }
+        console.log(file);
+        if (file) {
+          changeValue("file", file);
+          return file;
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setFileLoading(false);
+      }
+    }
+  };
+
+  return { restoreFile, fileLoading };
+};
+
+export default useRestoreFile;

modules/createAgreementProvider.tsx

@@ -125,18 +125,6 @@ const CreateAgreementProvider = (props?: Partial<ProviderProps<CreateAgrementCon
       const newState: CreationState = {
         ...state,
         [key]: value,
-        agreementLocation:
-          key === "agreementPrivacy"
-            ? LOCATION_CLOUD
-            : key === "agreementLocation"
-            ? value
-            : state.agreementLocation,
-        agreementHash:
-          key === "agreementLocation" || key === "agreementMethod"
-            ? ""
-            : key === "agreementHash"
-            ? value
-            : state.agreementHash,
       };
       saveDraft({ ...newState, file: undefined, errors: {} });
       return newState;

modules/rest/index.ts

@@ -4,13 +4,14 @@ import { getToken } from "../../utils/token";
 
 export const uploadFile = async (
   authToken: string,
-  file: File
+  file: File,
+  isTemp: boolean
 ): Promise<{ fileLink: string } | AxiosError> => {
   const formData = new FormData();
   formData.append("data", file);
   const res = await axios<AxiosResponse<{ fileLink: string }>>({
     method: "post",
-    url: `${process.env.NEXT_PUBLIC_REST_ENDPOINT}/files/upload`,
+    url: `${process.env.NEXT_PUBLIC_REST_ENDPOINT}/files/upload?isTemp=${isTemp}`,
     data: formData,
     headers: {
       "Content-Type": "multipart/form-data",