From e0004f563a85de89cbe9139b8d0e3feddb83f015 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 24 Jan 2024 17:53:00 -0800
Subject: [PATCH] feat: update home page with initiative links, add back button
 to individual submission page

---
 frontend/src/components/layout/Navbar.vue |  2 +-
 frontend/src/views/HomeView.vue           | 84 +++++------------------
 frontend/src/views/SubmissionView.vue     |  8 +++
 3 files changed, 26 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 7a37d70f..a4ef8db1 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -17,7 +17,7 @@ const { getIsAuthenticated } = storeToRefs(useAuthStore());
             <router-link :to="{ name: RouteNames.HOME }">Home</router-link>
           </li>
           <li v-if="getIsAuthenticated">
-            <router-link :to="{ name: RouteNames.INITIATIVES }">Initiatives</router-link>
+            <router-link :to="{ name: RouteNames.INITIATIVES }">Submissions</router-link>
           </li>
         </ol>
       </template>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 665b1985..c5e6a316 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,49 +1,20 @@
 <script setup lang="ts">
-import { Message } from '@/lib/primevue';
 import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
 
-import { useConfigStore } from '@/store';
+import { Button, Message } from '@/lib/primevue';
+import { RouteNames } from '@/utils/constants';
+import { useAuthStore, useConfigStore } from '@/store';
 
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
+const { getIsAuthenticated } = storeToRefs(useAuthStore());
 
-// Actions
-const frontEcosystem: Array<{ text: string; href: string }> = [
-  {
-    text: 'Vue 3',
-    href: 'https://vuejs.org/'
-  },
-  {
-    text: 'Pinia',
-    href: 'https://pinia.vuejs.org/'
-  },
-  {
-    text: 'PrimeVue',
-    href: 'https://primevue.org/'
-  },
-  {
-    text: 'Vitest',
-    href: 'https://vitest.dev/'
-  }
-];
+const router = useRouter();
 
-const backEcosystem: Array<{ text: string; href: string }> = [
-  {
-    text: 'Express',
-    href: 'https://expressjs.com/'
-  },
-  {
-    text: 'Jest',
-    href: 'https://jestjs.io/'
-  }
-];
-
-const languagesEcosystem: Array<{ text: string; href: string }> = [
-  {
-    text: 'TypeScript',
-    href: 'https://www.typescriptlang.org/'
-  }
-];
+const toSubmissions = (): void => {
+  router.push({ name: RouteNames.SUBMISSIONS });
+};
 </script>
 
 <template>
@@ -56,35 +27,14 @@ const languagesEcosystem: Array<{ text: string; href: string }> = [
 
   <div class="text-center">
     <h1 class="font-bold">Welcome to the PermitConnect Navigator Service!</h1>
-    <h2>Frontend Ecosystem</h2>
-    <a
-      v-for="(eco, i) in frontEcosystem"
-      :key="i"
-      :href="eco.href"
-      class="mx-3"
-      target="_blank"
-    >
-      {{ eco.text }}
-    </a>
-    <h2>Backend Ecosystem</h2>
-    <a
-      v-for="(eco, i) in backEcosystem"
-      :key="i"
-      :href="eco.href"
-      class="mx-3"
-      target="_blank"
-    >
-      {{ eco.text }}
-    </a>
-    <h2>Languages</h2>
-    <a
-      v-for="(eco, i) in languagesEcosystem"
-      :key="i"
-      :href="eco.href"
-      class="mx-3"
-      target="_blank"
+  </div>
+  <div>
+    <h2>Choose an Initiative:</h2>
+    <Button
+      :disabled="!getIsAuthenticated"
+      @click="toSubmissions"
     >
-      {{ eco.text }}
-    </a>
+      Housing
+    </Button>
   </div>
 </template>
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 2ffc2a34..b1ab11cb 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -7,6 +7,7 @@ import PermitModal from '@/components/permit/PermitModal.vue';
 import FileUpload from '@/components/file/FileUpload.vue';
 import SubmissionForm from '@/components/submission/SubmissionForm.vue';
 import { Button, TabPanel, TabView, useToast } from '@/lib/primevue';
+import { RouteNames } from '@/utils/constants';
 import { chefsService, documentService, permitService } from '@/services';
 
 import type { Ref } from 'vue';
@@ -62,6 +63,13 @@ onMounted(async () => {
 </script>
 
 <template>
+  <router-link :to="{ name: RouteNames.SUBMISSIONS }">
+    <font-awesome-icon
+      icon="fa fa-arrow-circle-left"
+      class="mr-1"
+    />
+    <span>Back to Submissions</span>
+  </router-link>
   <h1>Activity submission</h1>
 
   <TabView>