Download files before showing them + fixing anchoring proof (#72)

package-lock.json

@@ -22,7 +22,7 @@
 				"eslint-config-next": "13.2.4",
 				"form-data": "^4.0.0",
 				"jwt-decode": "^3.1.2",
-				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.82",
+				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.83",
 				"next": "13.2.4",
 				"prettier": "^2.8.7",
 				"react": "18.2.0",
@@ -30,9 +30,9 @@
 				"react-select": "^5.7.2",
 				"sass": "^1.59.2",
 				"sharp": "^0.32.1",
-				"typescript": "4.9.5"
+				"typescript": "4.9.5",
-			},
+				"uuidv4": "^6.2.13"
-			"devDependencies": {}
+			}
 		},
 		"node_modules/@aashutoshrathi/word-wrap": {
 			"version": "1.2.6",
@@ -496,14 +496,14 @@
 			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
 		},
 		"node_modules/@mui/base": {
-			"version": "5.0.0-beta.16",
+			"version": "5.0.0-beta.17",
-			"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.16.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.17.tgz",
-			"integrity": "sha512-OYxhC81c9bO0wobGcM8rrY5bRwpCXAI21BL0P2wz/2vTv4ek7ALz9+U5M8wgdmtRNUhmCmAB4L2WRwFRf5Cd8Q==",
+			"integrity": "sha512-xNbk7iOXrglNdIxFBN0k3ySsPIFLWCnFxqsAYl7CIcDkD9low4kJ7IUuy6ctwx/HAy2fenrT3KXHr1sGjAMgpQ==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
 				"@floating-ui/react-dom": "^2.0.2",
 				"@mui/types": "^7.2.4",
-				"@mui/utils": "^5.14.10",
+				"@mui/utils": "^5.14.11",
 				"@popperjs/core": "^2.11.8",
 				"clsx": "^2.0.0",
 				"prop-types": "^15.8.1"
@@ -527,25 +527,25 @@
 			}
 		},
 		"node_modules/@mui/core-downloads-tracker": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.11.tgz",
-			"integrity": "sha512-kPHu/NhZq1k+vSZR5wq3AyUfD4bnfWAeuKpps0+8PS7ZHQ2Lyv1cXJh+PlFdCIOa0PK98rk3JPwMzS8BMhdHwQ==",
+			"integrity": "sha512-uY8FLQURhXe3f3O4dS5OSGML9KDm9+IE226cBu78jarVIzdQGPlXwGIlSI9VJR8MvZDA6C0+6XfWDhWCHruC5Q==",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/mui"
 			}
 		},
 		"node_modules/@mui/material": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.11.tgz",
-			"integrity": "sha512-ejFMppnO+lzBXpzju+N4SSz0Mhmi5sihXUGcr5FxpgB6bfUP0Lpe32O0Sw/3s8xlmLEvG1fqVT0rRyAVMlCA+A==",
+			"integrity": "sha512-DnSdJzcR7lwG12JA5L2t8JF+RDzMygu5rCNW+logWb/KW2/TRzwLyVWO+CorHTBjBRd38DBxnwOCDiYkDd+N3A==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
-				"@mui/base": "5.0.0-beta.16",
+				"@mui/base": "5.0.0-beta.17",
-				"@mui/core-downloads-tracker": "^5.14.10",
+				"@mui/core-downloads-tracker": "^5.14.11",
-				"@mui/system": "^5.14.10",
+				"@mui/system": "^5.14.11",
 				"@mui/types": "^7.2.4",
-				"@mui/utils": "^5.14.10",
+				"@mui/utils": "^5.14.11",
 				"@types/react-transition-group": "^4.4.6",
 				"clsx": "^2.0.0",
 				"csstype": "^3.1.2",
@@ -580,12 +580,12 @@
 			}
 		},
 		"node_modules/@mui/private-theming": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.11.tgz",
-			"integrity": "sha512-f67xOj3H06wWDT9xBg7hVL/HSKNF+HG1Kx0Pm23skkbEqD2Ef2Lif64e5nPdmWVv+7cISCYtSuE2aeuzrZe78w==",
+			"integrity": "sha512-MSnNNzTu9pfKLCKs1ZAKwOTgE4bz+fQA0fNr8Jm7NDmuWmw0CaN9Vq2/MHsatE7+S0A25IAKby46Uv1u53rKVQ==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
-				"@mui/utils": "^5.14.10",
+				"@mui/utils": "^5.14.11",
 				"prop-types": "^15.8.1"
 			},
 			"engines": {
@@ -606,9 +606,9 @@
 			}
 		},
 		"node_modules/@mui/styled-engine": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.11.tgz",
-			"integrity": "sha512-EJckxmQHrsBvDbFu1trJkvjNw/1R7jfNarnqPSnL+jEQawCkQIqVELWLrlOa611TFtxSJGkdUfCFXeJC203HVg==",
+			"integrity": "sha512-jdUlqRgTYQ8RMtPX4MbRZqar6W2OiIb6J5KEFbIu4FqvPrk44Each4ppg/LAqp1qNlBYq5i+7Q10MYLMpDxX9A==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
 				"@emotion/cache": "^11.11.0",
@@ -637,15 +637,15 @@
 			}
 		},
 		"node_modules/@mui/system": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.11.tgz",
-			"integrity": "sha512-QQmtTG/R4gjmLiL5ECQ7kRxLKDm8aKKD7seGZfbINtRVJDyFhKChA1a+K2bfqIAaBo1EMDv+6FWNT1Q5cRKjFA==",
+			"integrity": "sha512-yl8xV+y0k7j6dzBsHabKwoShmjqLa8kTxrhUI3JpqLG358VRVMJRW/ES0HhvfcCi4IVXde+Tc2P3K1akGL8zoA==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
-				"@mui/private-theming": "^5.14.10",
+				"@mui/private-theming": "^5.14.11",
-				"@mui/styled-engine": "^5.14.10",
+				"@mui/styled-engine": "^5.14.11",
 				"@mui/types": "^7.2.4",
-				"@mui/utils": "^5.14.10",
+				"@mui/utils": "^5.14.11",
 				"clsx": "^2.0.0",
 				"csstype": "^3.1.2",
 				"prop-types": "^15.8.1"
@@ -689,9 +689,9 @@
 			}
 		},
 		"node_modules/@mui/utils": {
-			"version": "5.14.10",
+			"version": "5.14.11",
-			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.10.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.11.tgz",
-			"integrity": "sha512-Rn+vYQX7FxkcW0riDX/clNUwKuOJFH45HiULxwmpgnzQoQr3A0lb+QYwaZ+FAkZrR7qLoHKmLQlcItu6LT0y/Q==",
+			"integrity": "sha512-fmkIiCPKyDssYrJ5qk+dime1nlO3dmWfCtaPY/uVBqCRMBZ11JhddB9m8sjI2mgqQQwRJG5bq3biaosNdU/s4Q==",
 			"dependencies": {
 				"@babel/runtime": "^7.22.15",
 				"@types/prop-types": "^15.7.5",
@@ -965,9 +965,9 @@
 			}
 		},
 		"node_modules/@rushstack/eslint-patch": {
-			"version": "1.4.0",
+			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.4.0.tgz",
+			"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz",
-			"integrity": "sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg=="
+			"integrity": "sha512-EF3948ckf3f5uPgYbQ6GhyA56Dmv8yg0+ir+BroRjwdxyZJsekhZzawOecC2rOTPCz173t7ZcR1HHZu0dZgOCw=="
 		},
 		"node_modules/@swc/helpers": {
 			"version": "0.4.14",
@@ -1028,10 +1028,15 @@
 			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
 			"integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ=="
 		},
+		"node_modules/@types/uuid": {
+			"version": "8.3.4",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+			"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+		},
 		"node_modules/@types/validator": {
-			"version": "13.11.1",
+			"version": "13.11.2",
-			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.1.tgz",
+			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.2.tgz",
-			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
+			"integrity": "sha512-nIKVVQKT6kGKysnNt+xLobr+pFJNssJRi2s034wgWeFBUx01fI8BeHTW2TcRp7VcFu9QCYG8IlChTuovcm0oKQ=="
 		},
 		"node_modules/@typescript-eslint/parser": {
 			"version": "5.62.0",
@@ -3356,7 +3361,7 @@
 			}
 		},
 		"node_modules/le-coffre-resources": {
-			"resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#e76f2ab25c0752a2380d33f55f507376bdd8c275",
+			"resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#e28887de459d0820c732bd4eed3c422a4b3aad90",
 			"license": "MIT",
 			"dependencies": {
 				"class-transformer": "^0.5.1",
@@ -4866,6 +4871,23 @@
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
+		"node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"node_modules/uuidv4": {
+			"version": "6.2.13",
+			"resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz",
+			"integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==",
+			"dependencies": {
+				"@types/uuid": "8.3.4",
+				"uuid": "8.3.2"
+			}
+		},
 		"node_modules/validator": {
 			"version": "13.11.0",
 			"resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",

package.json

@@ -24,7 +24,7 @@
 		"eslint-config-next": "13.2.4",
 		"form-data": "^4.0.0",
 		"jwt-decode": "^3.1.2",
-		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.82",
+		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.84",
 		"next": "13.2.4",
 		"prettier": "^2.8.7",
 		"react": "18.2.0",

src/front/Api/BaseApiService.ts

@@ -1,11 +1,11 @@
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import CookieService from "@Front/Services/CookieService/CookieService";
-import { uuid } from "uuidv4";
 
 export enum ContentType {
 	JSON = "application/json",
 	PDF = "application/pdf",
 	FORM_DATA = "multipart/form-data;",
+	PNG = "image/png",
 }
 export default abstract class BaseApiService {
 	private static baseUrl: string;
@@ -126,20 +126,8 @@ export default abstract class BaseApiService {
 			// Check the Content-Type header to determine the response type
 			const contentType = response.headers.get("Content-Type");
 
-			if (contentType && contentType.includes("application/octet-stream")) {
+			if (contentType && !contentType.includes("application/json")) {
-				// Handle PDF response
+				responseContent = (await response.blob()) as T;
-				const blob = await response.blob();
-				const url = URL.createObjectURL(blob);
-
-				const anchor = document.createElement("a");
-
-				anchor.href = url;
-				anchor.download = filename ?? `${uuid()}.pdf`;
-				anchor.click();
-
-				URL.revokeObjectURL(url);
-
-				responseContent = {} as T;
 			} else {
 				// Handle JSON response
 				try {

src/front/Api/LeCoffreApi/Notary/Files/Files.ts

@@ -0,0 +1,103 @@
+import { File } from "le-coffre-resources/dist/SuperAdmin";
+import BaseNotary from "../BaseNotary";
+
+// TODO Type get query params -> Where + inclue + orderby
+export interface IGetFilesparams {
+	where?: {};
+	include?: {};
+}
+
+// TODO Type getbyuid query params
+
+export type IPutFilesParams = {};
+
+export interface IPostFilesParams {}
+
+export default class Files extends BaseNotary {
+	private static instance: Files;
+	private readonly baseURl = this.namespaceUrl.concat("/files");
+
+	private constructor() {
+		super();
+	}
+
+	public static getInstance() {
+		return (this.instance ??= new this());
+	}
+
+	public async get(q: IGetFilesparams): Promise<File[]> {
+		const url = new URL(this.baseURl);
+		const query = { q };
+		if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		try {
+			const files = await this.getRequest<File[]>(url);
+			return files;
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	/**
+	 * @description : Create a File
+	 */
+	public async post(body: any): Promise<File> {
+		const url = new URL(this.baseURl);
+		try {
+			return await this.postRequestFormData<File>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public getUploadLink(uid: string): string {
+		return this.baseURl.concat(`/download/${uid}`);
+	}
+
+	public async getByUid(uid: string, q?: any): Promise<File> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		const query = { q };
+		if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		try {
+			const file = await this.getRequest<File>(url);
+			return file;
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async put(uid: string, body: IPutFilesParams): Promise<File> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		try {
+			return await this.putRequest<File>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	/**
+	 * @description : Delete a folder only if the folder don't contains customers
+	 */
+	public async delete(uid: string): Promise<File> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		try {
+			return await this.deleteRequest<File>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async download(uid: string): Promise<any> {
+		const url = new URL(this.baseURl.concat(`/download/${uid}`));
+		try {
+			return await this.getRequest<any>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+}

src/front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors.ts

@@ -1,8 +1,6 @@
 import { ContentType } from "@Front/Api/BaseApiService";
 import BaseNotary from "../BaseNotary";
 
-import CookieService from "@Front/Services/CookieService/CookieService";
-
 export default class OfficeFolderAnchors extends BaseNotary {
 	private static instance: OfficeFolderAnchors;
 	private readonly baseURl = this.namespaceUrl.concat("/anchors");
@@ -48,5 +46,4 @@ export default class OfficeFolderAnchors extends BaseNotary {
 			return Promise.reject(err);
 		}
 	}
-
 }

src/front/Components/DesignSystem/FilePreview/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React from "react";
 
 import Typography, { ITypo, ITypoColor } from "../Typography";
@@ -20,17 +21,21 @@ export default class FilePreview extends React.Component<IProps, IState> {
 					<Loader />
 				</div>
 
-				{!type && (
+				{this.props.href && (
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+					<>
-						Erreur lors du chargement du fichier
+						{!type && (
-					</Typography>
+							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+								Erreur lors du chargement du fichier
+							</Typography>
+						)}
+						<div className={classes["file-container"]}>
+							{type?.toLowerCase() === "pdf" && (
+								<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
+							)}
+							{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
+						</div>
+					</>
 				)}
-				<div className={classes["file-container"]}>
-					{type?.toLowerCase() === "pdf" && (
-						<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
-					)}
-					{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
-				</div>
 			</div>
 		);
 	}

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
-import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
+import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import Module from "@Front/Config/Module";
 import classNames from "classnames";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -157,29 +157,31 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 	}
 
 	private async getAvailableDocuments(folder: OfficeFolder): Promise<IOption[]> {
+		// Getting already asked documents UIDs in an array
 		const userDocumentTypesUids = folder
 			.documents!.filter((document) => document.depositor!.uid! === this.props.customerUid!)
 			.map((document) => {
 				return document.document_type!.uid!;
 			});
+
+		// If those UIDs are already asked, filter them to not show them in the list and only
+		// show the documents that are not asked yet
 		const documentTypes = folder.deed!.document_types!.filter((documentType) => {
 			if (userDocumentTypesUids.includes(documentType!.uid!)) return false;
 			return true;
 		});
 
+		// If there is none document type available, return an empty array
 		if (!documentTypes) return [];
 
-		const documentTypesOptions: IOption[] = documentTypes
+		// Else, return an array document types formatted as IOPtions
-			.filter((documentType) => {
+		const documentTypesOptions: IOption[] = documentTypes.map((documentType) => {
-				return true;
+			return {
-			})
+				label: documentType!.name!,
-			.map((documentType) => {
+				value: documentType!.uid!,
-				return {
+				description: documentType!.private_description!,
-					label: documentType!.name!,
+			};
-					value: documentType!.uid!,
+		});
-					description: documentType!.private_description!,
-				};
-			});
 
 		return documentTypesOptions;
 	}

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -114,7 +114,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									</Button>
 								)}
 								{this.everyDocumentValidated() && (
-									<Button variant={EButtonVariant.PRIMARY} onClick={() => this.downloadAnchoringProof(this.state.selectedFolder?.uid)}>
+									<Button
+										variant={EButtonVariant.PRIMARY}
+										onClick={() => this.downloadAnchoringProof(this.state.selectedFolder?.uid)}>
 										Télécharger la preuve d'ancrage
 									</Button>
 								)}
@@ -275,7 +277,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		if (anchor.transactions[0].status !== "VERIFIED_ON_CHAIN") return;
 
 		try {
-			await OfficeFolderAnchors.getInstance().download(uid);
+			const file: Blob = await OfficeFolderAnchors.getInstance().download(uid);
+			const url = window.URL.createObjectURL(file);
+			const a = document.createElement("a");
+			a.style.display = "none";
+			a.href = url;
+			// the filename you want
+			a.download = `anchoring_proof_${this.state.selectedFolder?.folder_number}_${this.state.selectedFolder?.name}.pdf`;
+			document.body.appendChild(a);
+			a.click();
+			window.URL.revokeObjectURL(url);
 		} catch (e) {
 			console.error(e);
 		}
@@ -362,6 +373,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						},
 					},
 				},
+				folder_anchor: true,
 			},
 		};
 

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import OcrResult from "./OcrResult";
-import Files from "@Front/Api/LeCoffreApi/SuperAdmin/Files/Files";
+import Files from "@Front/Api/LeCoffreApi/Notary/Files/Files";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 
 type IProps = {};
@@ -34,6 +34,7 @@ type IState = {
 	selectedFile: File | null;
 	validatedPercentage: number;
 	document: Document | null;
+	fileBlob: Blob | null;
 };
 
 class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
@@ -48,6 +49,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			selectedFile: null,
 			validatedPercentage: this.getRandomPercentageForOcr(),
 			document: null,
+			fileBlob: null,
 		};
 
 		this.closeModals = this.closeModals.bind(this);
@@ -86,7 +88,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							)}
 							<div className={classes["file-container"]}>
 								<FilePreview
-									href={Files.getInstance().getUploadLink(this.state.selectedFile?.uid as string)}
+									href={this.state.fileBlob ? URL.createObjectURL(this.state.fileBlob) : ""}
 									fileName={this.state.selectedFile.file_name}
 									key={this.state.selectedFile.uid}
 								/>
@@ -117,7 +119,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 										<Button disabled>Télécharger</Button>
 									</>
 								)}
-								{this.state.document?.document_status === "VALIDATED" && (
+								{this.state.document?.document_status === "VALIDATED" && this.state.fileBlob && (
 									<Button onClick={this.downloadFile}>Télécharger</Button>
 								)}
 							</div>
@@ -175,38 +177,43 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 				document_type: true,
 				folder: true,
 			});
-			this.setState({
+			this.setState(
-				document,
+				{
-				selectedFileIndex: 0,
+					document,
-				selectedFile: document.files![0]!,
+					selectedFileIndex: 0,
-			});
+					selectedFile: document.files![0]!,
+				},
+				() => {
+					this.getFilePreview();
+				},
+			);
 		} catch (e) {
 			console.error(e);
 		}
 	}
 
-	private downloadFile() {
+	private async getFilePreview(): Promise<void> {
-		const fileName = this.state.selectedFile?.file_path?.split("/").pop();
+		try {
-		fetch(Files.getInstance().getUploadLink(this.state.selectedFile?.uid as string))
+			const fileBlob: Blob = await Files.getInstance().download(this.state.selectedFile?.uid as string);
-			.then((resp) => resp.blob())
+			this.setState({
-			.then((blob) => {
+				fileBlob,
-				const url = window.URL.createObjectURL(blob);
-				const a = document.createElement("a");
-				a.style.display = "none";
-				a.href = url;
-				// the filename you want
-				a.download = fileName as string;
-				document.body.appendChild(a);
-				a.click();
-				window.URL.revokeObjectURL(url);
-			})
-			.catch((e) => {
-				const a = document.createElement("a");
-				a.href = this.state.selectedFile?.file_path as string;
-				a.target = "_blank";
-				a.click();
-				console.error(e);
 			});
+		} catch (e) {
+			console.log(e);
+		}
+	}
+
+	private downloadFile() {
+		if (!this.state.fileBlob) return;
+		const url = window.URL.createObjectURL(this.state.fileBlob);
+		const a = document.createElement("a");
+		a.style.display = "none";
+		a.href = url;
+		// the filename you want
+		a.download = this.state.selectedFile?.file_name as string;
+		document.body.appendChild(a);
+		a.click();
+		window.URL.revokeObjectURL(url);
 	}
 
 	private getRandomPercentageForOcr() {