redirect the user to Error404 page when the project doesn't exist

src/App.vue

@@ -1,15 +1,21 @@
 <template>
-  <router-view />
+  <Error404 v-if="invalidProjectError"></Error404>
+  <router-view v-else />
 </template>
 
 <script lang="ts">
+import Error404 from './pages/Error404.vue';
 import { defineComponent } from 'vue';
 
+import { mapState } from 'pinia';
 import { useStorage } from 'vue3-storage';
 import { useUserStore } from './pinia/modules/user/index';
-import { setThemeMode } from 'dependencytreejs/src/StylesheetHandler';
+import { useProjectStore } from './pinia/modules/project/index';
 
 export default defineComponent({
+  components: {
+    Error404,
+  },
   name: 'App',
   data() {
     return {
@@ -24,6 +30,9 @@ export default defineComponent({
       },
     };
   },
+  computed: {
+    ...mapState(useProjectStore, ['invalidProjectError']),
+  },
   mounted() {
     const userStore = useUserStore();
     userStore.checkSession().then(() => console.log('App.vue session checked with pinia store'));

src/pages/Error404.vue

@@ -4,14 +4,25 @@
       <img src="~assets/sad.svg" style="width: 30vw; max-width: 150px" />
     </p>
     <p class="text-faded">{{ $t('error404page') }}<strong>(404)</strong></p>
-    <q-btn color="secondary" style="width: 200px" @click="$router.push('/')">Go back</q-btn>
+    <q-btn color="secondary" style="width: 200px" @click="goBack()">Go back To projects page</q-btn>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { mapWritableState } from 'pinia';
+import { useProjectStore } from 'src/pinia/modules/project';
 
 export default defineComponent({
   name: 'Error404',
+  computed: {
+    ...mapWritableState(useProjectStore, ['invalidProjectError']),
+  },
+  methods: {
+    goBack() {
+      this.invalidProjectError = false;
+      this.$router.push('/projects');
+    }
+  }
 });
 </script>

src/pinia/modules/project/defaultState.ts

@@ -22,6 +22,7 @@ interface configState {
   annotationFeatures: annotationFeatures_t;
   annotationFeaturesUD: annotationFeatures_t;
   languagesList: { index: number; name: string }[];
+  invalidProjectError: boolean,
 }
 
 // default config state
@@ -331,5 +332,6 @@ export default function defaultState(): configState {
       ],
       DEPS: [],
     },
+    invalidProjectError: false,
   };
 }

src/pinia/modules/project/index.ts

@@ -117,6 +117,7 @@ export const useProjectStore = defineStore('project', {
       api
         .getProject(projectname)
         .then((response) => {
+          this.invalidProjectError = false;
           this.name = response.data.projectName;
           this.blindAnnotationMode = response.data.blindAnnotationMode;
           this.diffMode = response.data.diffMode;
@@ -152,13 +153,12 @@ export const useProjectStore = defineStore('project', {
             .catch((error) => {
               notifyError({ error });
             });
+        })
+        .catch(() => {
+          this.invalidProjectError = true;
         });
     },
-    // KK TODO
-    // there is still a mismatch between all name 'updateProjectSettings' and 'updateProjectSettings'
-    // ... so we have to get a proper data structure of the whole setting for then having better
-    // ... separation of conscerns for API calls
-
+
     updateProjectSettings(projectName: string, toUpdateObject: Partial<project_extended_t | project_with_diff_t>) {
       return new Promise((resolve, reject) => {
         api
@@ -173,7 +173,7 @@ export const useProjectStore = defineStore('project', {
             notifyError({
               error: error,
             });
-            reject(error);
+            reject(new Error(error));
           });
       });
     },
@@ -188,7 +188,7 @@ export const useProjectStore = defineStore('project', {
           })
           .catch((error) => {
             notifyError({ error });
-            reject(error);
+            reject(new Error(error));
           });
       });
     },
@@ -203,7 +203,7 @@ export const useProjectStore = defineStore('project', {
             resolve(response);
           })
           .catch((error) => {
-            reject(error);
+            reject(new Error(error));
           });
       });
     },
@@ -235,7 +235,7 @@ export const useProjectStore = defineStore('project', {
             resolve(response);
           })
           .catch((error) => {
-            reject(error.response.data.errors);
+            reject(new Error(error));
           });
       });
     },

src/router/routes.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/:catchAll(.*)*',
     component: () => import('pages/Error404.vue'),
-  },
+      },
 ];
 
 export default routes;