From 70fa9f20e3ee68c770c8954204227ae40abb809c Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:43:57 -0300
Subject: [PATCH 1/6] feat: add computed and condition to workspace route

---
 src/components/NavBar.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9ece1e2..83e3e8d 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -10,7 +10,11 @@
     <img src="../assets/logo.png" id="prevue-logo" @click="routeHome" />
     <h1 id="prevue">PreVue</h1>
     <div class="buttons">
-      <v-btn id="tree-btn" @click="routeTree">
+      <v-btn v-if="isTreeRoute" id="tree-btn" @click="routeHome">
+        <br />
+        <span class="white--text">Workspace</span>
+      </v-btn>
+      <v-btn v-else id="tree-btn" @click="routeTree">
         <br />
         <span class="white--text">Tree</span>
       </v-btn>
@@ -64,6 +68,9 @@ export default {
       get() {
         return this.$store.state.rerenderKey;
       }
+    },
+    isTreeRoute() {
+      return this.$router.currentRoute.value.name === 'tree';
     }
   }
 };

From a6bb2d17287487c8bb8f8516f1be0dab3c563781 Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:44:31 -0300
Subject: [PATCH 2/6] feat: migrate code to composition API

---
 src/components/NavBar.vue | 70 ++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 41 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 83e3e8d..a80f05d 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -7,14 +7,14 @@
     role="navigation"
     aria-label="main navigation"
   >
-    <img src="../assets/logo.png" id="prevue-logo" @click="routeHome" />
+    <img src="../assets/logo.png" id="prevue-logo" @click="toHomeRoute" />
     <h1 id="prevue">PreVue</h1>
     <div class="buttons">
-      <v-btn v-if="isTreeRoute" id="tree-btn" @click="routeHome">
+      <v-btn v-if="isRouteTree" id="tree-btn" @click="toHomeRoute">
         <br />
-        <span class="white--text">Workspace</span>
+        <span class="white--text">WorkSpace</span>
       </v-btn>
-      <v-btn v-else id="tree-btn" @click="routeTree">
+      <v-btn v-else id="tree-btn" @click="toTreeRoute">
         <br />
         <span class="white--text">Tree</span>
       </v-btn>
@@ -31,49 +31,37 @@
   </v-app-bar>
 </template>
 
-<script>
+<script setup>
+import { defineProps, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
 import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
 import OpenProjectComponent from '@/components/OpenProjectComponent.vue';
 import ExportProjectComponent from '@/components/ExportProjectComponent.vue';
 import NewProjectComponent from '@/components/NewProjectComponent.vue';
 import LogOutComponent from './LogOutComponent.vue';
 
-export default {
-  name: 'NavBar',
-  props: ['route', 'imageURL'],
-
-  components: {
-    SaveProjectComponent,
-    OpenProjectComponent,
-    LogOutComponent,
-    ExportProjectComponent,
-    NewProjectComponent
-  },
-  methods: {
-    // routing to homepage and tree view
-    routeHome() {
-      this.$router.push({ path: '/home' });
-    },
-    routeTree() {
-      this.$router.push({ path: '/tree' });
-    }
-  },
-  computed: {
-    // checks if user is loggedin and conditonally renders save and open project buttons
-    validUser() {
-      return this.$store.state.loggedIn;
-    },
-    // uforces update of list of projects upon saving of new project
-    rerenderKey: {
-      get() {
-        return this.$store.state.rerenderKey;
-      }
-    },
-    isTreeRoute() {
-      return this.$router.currentRoute.value.name === 'tree';
-    }
-  }
-};
+defineProps(['route', 'imageURL']);
+
+const router = useRouter();
+
+const store = useStore();
+
+const validUser = computed(() => store.state.loggedIn);
+
+const rerenderKey = computed(() => store.state.rerenderKey);
+
+const isRouteTree = computed(() => router.currentRoute.value.name === 'tree');
+
+function toHomeRoute() {
+  router.push({ path: '/home' });
+}
+
+function toTreeRoute() {
+  router.push({ path: '/tree' });
+}
+
 </script>
 
 <style scoped>

From 0d129a1c74420ade02cb4dcdd2b13f05159e13d2 Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:48:39 -0300
Subject: [PATCH 3/6] feat: add constante to handle route name

---
 src/components/NavBar.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a80f05d..6e84d08 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -42,6 +42,8 @@ import ExportProjectComponent from '@/components/ExportProjectComponent.vue';
 import NewProjectComponent from '@/components/NewProjectComponent.vue';
 import LogOutComponent from './LogOutComponent.vue';
 
+const TREE_ROUTE_NAME = 'tree';
+
 defineProps(['route', 'imageURL']);
 
 const router = useRouter();
@@ -52,7 +54,7 @@ const validUser = computed(() => store.state.loggedIn);
 
 const rerenderKey = computed(() => store.state.rerenderKey);
 
-const isRouteTree = computed(() => router.currentRoute.value.name === 'tree');
+const isRouteTree = computed(() => router.currentRoute.value.name === TREE_ROUTE_NAME);
 
 function toHomeRoute() {
   router.push({ path: '/home' });

From c9cf4029c20833b12e603a2b84b5277f17fb8072 Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:49:10 -0300
Subject: [PATCH 4/6] refactor: remove unused prop

---
 src/components/NavBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6e84d08..b18315e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -44,7 +44,7 @@ import LogOutComponent from './LogOutComponent.vue';
 
 const TREE_ROUTE_NAME = 'tree';
 
-defineProps(['route', 'imageURL']);
+defineProps(['imageURL']);
 
 const router = useRouter();
 

From 580e0c72ae3495c01b6e50c64fbca1efb53ab35c Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:49:43 -0300
Subject: [PATCH 5/6] feat: use props as object and define as required

---
 src/components/NavBar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index b18315e..dd818b9 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -44,7 +44,12 @@ import LogOutComponent from './LogOutComponent.vue';
 
 const TREE_ROUTE_NAME = 'tree';
 
-defineProps(['imageURL']);
+defineProps({
+  imageURL: {
+    type: String,
+    required: true
+  }
+});
 
 const router = useRouter();
 

From 7226aae9d03d68ff2190d02deddc574cc022e4d5 Mon Sep 17 00:00:00 2001
From: eduardobattisti <eduardobattisti10@gmail.com>
Date: Sun, 19 Mar 2023 20:51:22 -0300
Subject: [PATCH 6/6] refactor: update computed name

---
 src/components/NavBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index dd818b9..3976d96 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -19,14 +19,14 @@
         <span class="white--text">Tree</span>
       </v-btn>
 
-      <SaveProjectComponent v-if="validUser"></SaveProjectComponent>
+      <SaveProjectComponent v-if="isLoggedIn"></SaveProjectComponent>
       <ExportProjectComponent></ExportProjectComponent>
       <OpenProjectComponent
         :key="rerenderKey"
-        v-if="validUser"
+        v-if="isLoggedIn"
       ></OpenProjectComponent>
       <NewProjectComponent></NewProjectComponent>
-      <LogOutComponent v-if="validUser"></LogOutComponent>
+      <LogOutComponent v-if="isLoggedIn"></LogOutComponent>
     </div>
   </v-app-bar>
 </template>
@@ -55,7 +55,7 @@ const router = useRouter();
 
 const store = useStore();
 
-const validUser = computed(() => store.state.loggedIn);
+const isLoggedIn = computed(() => store.state.loggedIn);
 
 const rerenderKey = computed(() => store.state.rerenderKey);