From fdb4b2bdd982230d4b0a43786b4d688a8a914273 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laureline=20Val=C3=A9rie=20David?= <ltouroumov@gmail.com>
Date: Fri, 20 Sep 2024 10:21:49 +0200
Subject: [PATCH] Project Loading ...

---
 .eslintrc.json                    |  2 ++
 components/LoadProject.vue        | 26 +++++++--------------
 components/viewer/ProjectMenu.vue | 21 +++++++----------
 composables/project.ts            |  6 ++++-
 composables/store/project.ts      | 22 +++++++++++++++---
 composables/utils.ts              | 38 +++++++++++++++++++++++++++++++
 nuxt.config.ts                    |  2 +-
 7 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index c2cc806..fd5d084 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,6 +21,8 @@
   ],
   "plugins": ["@typescript-eslint", "nuxt", "import", "unused-imports"],
   "rules": {
+    // Interferes with unused-import
+    "@typescript-eslint/no-unused-vars": "off",
     "no-console": "off",
     "vue/multi-word-component-names": "off",
     "sort-imports": [
diff --git a/components/LoadProject.vue b/components/LoadProject.vue
index 7307826..dcaa03f 100644
--- a/components/LoadProject.vue
+++ b/components/LoadProject.vue
@@ -29,6 +29,7 @@
 
 <script setup lang="ts">
 import { useProjectStore } from '~/composables/store/project';
+import { readFileContents } from '~/composables/utils';
 
 const { loadProject, unloadProject } = useProjectStore();
 const { isLoaded } = useProjectStore();
@@ -56,7 +57,7 @@ const checkCanLoad = () => {
 
 checkCanLoad();
 
-const loadProjectFile = () => {
+const loadProjectFile = async () => {
   if (fileInput.value && fileInput.value.files) {
     const [file] = fileInput.value.files;
     if (!file) {
@@ -66,25 +67,14 @@ const loadProjectFile = () => {
 
     isLoading.value = true;
 
-    const reader = new FileReader();
-    reader.addEventListener('load', () => {
-      if (reader.result && typeof reader.result === 'string') {
-        const data = JSON.parse(reader.result);
+    try {
+      const data = await readFileContents(file);
+      if (data && typeof data === 'string') {
         isLoading.value = false;
-        if (isLoaded) {
-          unloadProject();
-        }
-        loadProject(data, file.name);
+        unloadProject();
+        await loadProject(data, file.name);
       }
-    });
-    reader.addEventListener('error', () => {
-      error.value = reader.error?.message ?? 'An error occurred';
-      isLoading.value = false;
-    });
-
-    try {
-      reader.readAsText(file);
-    } catch (e: unknown) {
+    } catch (e) {
       isLoading.value = false;
       if (e instanceof Error) {
         error.value = e.message;
diff --git a/components/viewer/ProjectMenu.vue b/components/viewer/ProjectMenu.vue
index 8e38947..51c6341 100644
--- a/components/viewer/ProjectMenu.vue
+++ b/components/viewer/ProjectMenu.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script setup lang="ts">
-import { Project } from '~/composables/project';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 import { useViewerStore } from '~/composables/store/viewer';
+import { bufferToString } from '~/composables/utils';
 import { ViewerProjectList } from '~/composables/viewer';
 
 const isLoading = ref<boolean>(false);
@@ -57,7 +57,7 @@ const loadRemoteFile = async ({ target }: MouseEvent) => {
 
     const response = await fetch(fileURL);
 
-    let result: Project;
+    let result: string;
     if (response.ok) {
       const reader = response.body!.getReader();
 
@@ -91,21 +91,16 @@ const loadRemoteFile = async ({ target }: MouseEvent) => {
         pos += chunk.length;
       }
 
-      const bodyText = new TextDecoder('utf-8').decode(bodyBytes);
-      result = JSON.parse(bodyText);
+      const bodyText = bufferToString(bodyBytes);
+      result = bodyText;
     } else {
       return;
     }
 
-    if (isLoaded.value) {
-      unloadProject();
-    }
-    // Wait for the unloadProject to finish before loading the new project
-    await nextTick(() => {
-      loadProject(result, fileURL);
-      toggleProjectMenu(false);
-      isLoading.value = false;
-    });
+    unloadProject();
+    await loadProject(result, fileURL);
+    toggleProjectMenu(false);
+    isLoading.value = false;
   }
 };
 </script>
diff --git a/composables/project.ts b/composables/project.ts
index 6b24897..3df322d 100644
--- a/composables/project.ts
+++ b/composables/project.ts
@@ -210,6 +210,7 @@ export type PointType = {
 };
 
 export type Project = {
+  $projectId?: string;
   rows: ProjectRow[];
   backpack: ProjectRow[];
   pointTypes: PointType[];
@@ -218,5 +219,8 @@ export type Project = {
 
 export type ProjectFile = {
   data: Project;
-  file: string;
+  fileName: string;
+  projectId: string;
+  projectName: string;
+  projectHash: string;
 };
diff --git a/composables/store/project.ts b/composables/store/project.ts
index ab64709..2981aa5 100644
--- a/composables/store/project.ts
+++ b/composables/store/project.ts
@@ -6,12 +6,12 @@ import { useToast } from 'vue-toastification';
 import { buildConditions } from '~/composables/conditions';
 import {
   PointType,
-  Project,
   ProjectFile,
   ProjectObj,
   ProjectRow,
   Score,
 } from '~/composables/project';
+import { bufferToHex, stringToBuffer } from '~/composables/utils';
 
 export type Selections = Record<string, number>;
 type Transform = (sel: Selections) => Selections;
@@ -77,8 +77,24 @@ export const useProjectStore = defineStore('project', () => {
   });
 
   const isLoaded = computed(() => !!project.value);
-  const loadProject = (data: Project, file: string) => {
-    project.value = { data, file };
+  const loadProject = async (fileContents: string, fileName: string) => {
+    const hashBytes = await crypto.subtle.digest(
+      'SHA-1',
+      stringToBuffer(fileContents),
+    );
+    const hashHex = bufferToHex(hashBytes);
+
+    const data: Project = JSON.parse(fileContents);
+    const projectFile: ProjectFile = {
+      data: data,
+      fileName: fileName,
+      projectId: data?.$projectId ?? hashHex,
+      projectName: data.rows[0].title,
+      projectHash: hashHex,
+    };
+    console.log(projectFile);
+    project.value = projectFile;
+    selected.value = {};
   };
   const unloadProject = () => {
     project.value = null;
diff --git a/composables/utils.ts b/composables/utils.ts
index 5bc2082..5fc2811 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -9,3 +9,41 @@ export const timeIt =
       console.log(`[TIME] ${name}: ${end - start}ms`);
     }
   };
+
+export const bufferToHex = (buffer: ArrayBuffer): string => {
+  const buf = new Uint8Array(buffer);
+  const acc = [];
+  for (let i = 0; i < buf.length; i++) {
+    acc.push(buf[i].toString(16).padStart(2, '0'));
+  }
+  return acc.join('');
+};
+
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder('utf-8');
+
+export const stringToBuffer = (value: string): Uint8Array => {
+  return textEncoder.encode(value);
+};
+export const bufferToString = (buffer: ArrayBuffer) => {
+  return textDecoder.decode(buffer);
+};
+
+export const readFileContents = (file: Blob) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      resolve(reader.result);
+    });
+    reader.addEventListener('error', (event) => {
+      event.preventDefault();
+      reject(new Error('Reader Failed'));
+    });
+
+    try {
+      reader.readAsText(file);
+    } catch (e: unknown) {
+      reject(e);
+    }
+  });
+};
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e3adf04..c209cab 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
-    baseURL: '/cyoa-editor/',
+    baseURL: process.env.NODE_ENV === 'production' ? '/cyoa-editor/' : '/',
     buildAssetsDir: 'assets',
     head: {
       title: 'Interactive CYOA',