keeps on homepage

keepr.client/src/AppState.js

@@ -3,5 +3,6 @@ import { reactive } from 'vue'
 // NOTE AppState is a reactive object to contain app level data
 export const AppState = reactive({
   user: {},
-  account: {}
+  account: {},
+  keeps: []
 })

keepr.client/src/components/KeepTile.vue

@@ -0,0 +1,43 @@
+<template>
+  <div @click="" class="component">
+      <div class="card bg-dark text-white">
+        <!-- TODO check if keep.img is a valid image -->
+        <img :src="keep.img" class="card-img" :alt="keep.name">
+        <div class="card-img-overlay d-flex justify-content-between align-items-end">
+          <h5 class="card-title">{{ keep.name }}</h5>
+          <a href="#">
+            <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
+          </a>
+        </div>
+      </div>
+  </div>
+</template>
+
+
+<script>
+import { computed, onMounted, ref } from 'vue'
+import { AppState } from '../AppState.js'
+import { logger } from '../utils/Logger.js'
+import { Keep } from "../models/Keep.js"
+export default {
+  props: {
+    keep: {
+      type: Keep
+    }
+  },
+  setup(props) {
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card-img {
+  min-height: 160px;
+}
+
+.card-img-overlay img {
+  max-height: 36px;
+}
+</style>

keepr.client/src/components/Navbar.vue

@@ -2,7 +2,8 @@
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
     <router-link class="navbar-brand d-flex" :to="{ name: 'Home' }">
       <div class="d-flex flex-column align-items-center">
-        <img alt="logo" src="../assets/img/cw-logo.png" height="45" />
+        <!-- <img alt="logo" src="../assets/img/cw-logo.png" height="45" /> -->
+        <h1 class="brand">Keepr</h1>
       </div>
     </router-link>
     <button
@@ -18,14 +19,14 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarText">
       <ul class="navbar-nav me-auto">
-        <li>
+        <!-- <li>
           <router-link
             :to="{ name: 'About' }"
             class="btn text-success lighten-30 selectable text-uppercase"
           >
             About
           </router-link>
-        </li>
+        </li> -->
       </ul>
       <!-- LOGIN COMPONENT HERE -->
       <Login />
@@ -53,4 +54,8 @@ a:hover {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+.brand {
+  font-family: cursive;
+}
 </style>

keepr.client/src/models/Keep.js

@@ -0,0 +1,12 @@
+export class Keep {
+  constructor(keepData) {
+    this.id = keepData.id
+    this.creatorId = keepData.creatorId
+    this.name = keepData.name
+    this.description = keepData.description
+    this.img = keepData.img
+    this.views = keepData.views
+    this.kept = keepData.kept
+    this.creator = keepData.creator
+  }
+}

keepr.client/src/models/Profile.js

@@ -0,0 +1,7 @@
+export class Profile {
+  constructor(profileData) {
+    this.id = profileData.id
+    this.name = profileData.name
+    this.picture = profileData.picture
+  }
+}

keepr.client/src/pages/AboutPage.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is the about page</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AboutPage'
-}
-</script>

keepr.client/src/pages/HomePage.vue

@@ -1,17 +1,35 @@
 <template>
-  <div class="home flex-grow-1 d-flex flex-column align-items-center justify-content-center">
-    <div class="home-card p-5 bg-white rounded elevation-3">
-      <img src="https://bcw.blob.core.windows.net/public/img/8600856373152463" alt="CodeWorks Logo" class="rounded-circle">
-      <h1 class="my-5 bg-dark text-white p-3 rounded text-center">
-        Vue 3 Starter
-      </h1>
+  <!-- TODO add masonry later -->
+  <div class="container-fluid px-md-5 pt-4">
+    <div class="row">
+      <div v-for="k in keeps" :key="k.id" class="col-6 col-md-4 col-lg-3 p-2">
+      <!-- <img src="../assets/img/404.svg" alt=""> TODO use this as default img in DB-->
+        <KeepTile :keep="k" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { computed, onMounted, ref } from 'vue'
+import { AppState } from '../AppState.js'
+import { logger } from '../utils/Logger.js'
+import { keepsService } from '../services/KeepsService.js'
 export default {
-  name: 'Home'
+  name: 'Home',
+  setup() {
+    onMounted(async () => {
+      try {
+        await keepsService.GetAll()
+      } catch (error) {
+        logger.error(error)
+      }
+    })
+
+    return {
+      keeps: computed(() => AppState.keeps)
+    }
+  }
 }
 </script>
 
@@ -33,4 +51,4 @@ export default {
     }
   }
 }
-</style>
+</style>

keepr.client/src/router.js

@@ -11,11 +11,6 @@ const routes = [
     name: 'Home',
     component: loadPage('HomePage')
   },
-  {
-    path: '/about',
-    name: 'About',
-    component: loadPage('AboutPage')
-  },
   {
     path: '/account',
     name: 'Account',

keepr.client/src/services/KeepsService.js

@@ -0,0 +1,16 @@
+import { AppState } from '../AppState'
+import { logger } from '../utils/Logger'
+import { api } from './AxiosService'
+
+class KeepsService {
+  async GetAll() {
+    try {
+      const res = await api.get('api/keeps')
+      AppState.keeps = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+}
+
+export const keepsService = new KeepsService()