whoops, forgot to push to GH

keepr.client/src/App.vue

@@ -27,4 +27,9 @@ export default {
 <style lang="scss">
 @import "./assets/scss/main.scss";
 
+footer a {
+  // font-family: cursive;
+  color: #e9ecef;
+}
+
 </style>

keepr.client/src/components/KeepModal.vue

@@ -53,6 +53,7 @@ export default {
       img: String,
       views: Number,
       kept: Number,
+      vaultKeepId: Number,
       creator: {
         id: String,
         name: String,

keepr.client/src/components/NewKeepModal.vue

@@ -8,7 +8,7 @@
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <h3 class="card-title">New Keep</h3>
-            <!-- <form> -->
+            <form @submit.prevent="createKeep()">
             <div class="mb-1">
               <label for="keepTitle" class="form-label">Title</label>
               <input type="text" id="keepTitle" name="keepTitle" v-model="name" placeholder="Title..."
@@ -27,8 +27,8 @@
               <label for="keepTags" class="form-label">Tags</label>
               <input type="text" id="keepTags" name="keepTags" v-model="img" placeholder="Tags..." class="form-control">
             </div> -->
-            <button @click="createKeep()" class="btn btn-primary">Create</button>
-            <!-- </form> -->
+            <button type="submit" class="btn btn-primary">Create</button>
+            </form>
           </div>
         </div>
       </div>

keepr.client/src/components/VaultKeepModalButtons.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex justify-content-between align-items-end">
-    <div></div>
+    <!-- <div></div> -->
     <button v-if="account.id == vault.creatorId" @click="removeFromVault(keep.id)" class="btn btn-outline-secondary">Remove from Vault</button>
 
     <i v-show="account.id == keep.creatorId" @click="deleteKeep()" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
@@ -20,6 +20,7 @@ import { Modal } from 'bootstrap'
 import { logger } from '../utils/Logger.js'
 import { useRouter } from 'vue-router'
 import { vaultKeepsService } from '../services/VaultKeepsService'
+import { keepsService } from '../services/KeepsService'
 export default {
   props: {
     keep: {
@@ -53,12 +54,15 @@ export default {
       },
 
       async removeFromVault() {
+        // props.keep don't have vaultKeepId...
+        logger.log(props.keep)
         await vaultKeepsService.delete(props.keep.vaultKeepId)
         Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
       },
 
       async deleteKeep() {
         await keepsService.delete(props.keep.id)
+        await vaultKeepsService.delete(props.keep.vaultKeepId)
         Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
         // do more things
       }

keepr.client/src/pages/VaultPage.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
   <KeepModal :keep="activeKeep">
-  <VaultKeepModalButtons :keep="activeKeep" />
+    <VaultKeepModalButtons :keep="activeKeep" />
   </KeepModal>
   </div>
 </template>
@@ -38,13 +38,20 @@ import KeepTile from '../components/KeepTile.vue';
 import KeepModal from '../components/KeepModal.vue';
 import KeepModalButtons from '../components/KeepModalButtons.vue';
 import { vaultKeepsService } from '../services/VaultKeepsService';
+import Pop from '../utils/Pop';
 export default {
   setup() {
     const route = useRoute();
     const router = useRouter()
     onMounted(async () => {
-      await vaultsService.getVault(route.params.id);
-      await vaultsService.getVaultKeeps(route.params.id);
+      try {
+        await vaultsService.getVault(route.params.id);
+        await vaultsService.getVaultKeeps(route.params.id);
+      } catch (error) {
+        logger.error(error)
+        Pop.toast(error) // .error has issues
+        router.push({name: 'Home'})
+      }
     });
     return {
       vault: computed(() => AppState.activeVault),
@@ -52,10 +59,12 @@ export default {
       activeKeep: computed(() => AppState.activeKeep),
       account: computed(() => AppState.account),
 
-      viewKeep(keep) {
+      async viewKeep(keep) {
         // AppState.activeKeep = keep
         // make API call to trigger view counter
-        keepsService.getById(keep.id)
+        // debugger
+        await keepsService.getById(keep.id)
+        AppState.activeKeep = keep
         Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
       },
 

keepr.client/src/router.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { authGuard } from '@bcwdev/auth0provider-client'
+import { authGuard, authSettled } from '@bcwdev/auth0provider-client'
 
 function loadPage(page) {
   return () => import(`./pages/${page}.vue`)
@@ -14,12 +14,14 @@ const routes = [
   {
     path: '/profile/:id',
     name: 'Profile',
-    component: loadPage('ProfilePage')
+    component: loadPage('ProfilePage'),
+    beforeEnter: authSettled
   },
   {
     path: '/vault/:id',
     name: 'Vault',
-    component: loadPage('VaultPage')
+    component: loadPage('VaultPage'),
+    beforeEnter: authSettled
   }
 ]
 

keepr.client/src/services/VaultsService.js

@@ -4,26 +4,20 @@ import { api } from './AxiosService'
 import Pop from '../utils/Pop'
 import { profilesService } from './ProfilesService'
 import { vaultKeepsService } from './VaultKeepsService'
-
+// import { useRouter, useRoute } from 'vue-router'
 class VaultsService {
   async getVault(vaultId) {
-    try {
+      logger.log('gv')
+      logger.log(vaultId)
       const res = await api.get('api/vaults/' + vaultId)
       AppState.activeVault = res.data
-    } catch (error) {
-      logger.error(error)
-      Pop.error(error)
-    }
   }
-
+  
   async getVaultKeeps(vaultId) {
-    try {
+      logger.log('gvk')
+      logger.log(vaultId)
       const res = await api.get('api/vaults/' + vaultId + '/keeps')
       AppState.vaultKeeps = res.data
-    } catch (error) {
-      logger.error(error)
-      Pop.error(error)
-    }
   }
 
   async createVault(vaultData) {