updated homepage

src/components/CollectionsGallery.vue

 <template>
-  <section id="collections-gallery" class="q-my-lg">
+  <section
+    id="collections-gallery"
+    class="q-my-lg"
+  >
     <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Collections</div>
 
     <div class="row q-gutter-none">
-      <div class="col-12 col-sm-6 col-md-4" v-for="idx in 6" :key="idx">
-        <CollectionThumb />
+      <div
+        class="col-12 col-sm-6 col-md-4"
+        v-for="collection,idx in collections"
+        :key="idx"
+      >
+        <CollectionThumb :collection="collection" />
+      </div>
+      <div v-if="!collections || collections.length == 0">
+        <div class="text-grey text-h6 q-pa-md">No collection available</div>
       </div>
     </div>
     <div class="row">
       <div class="col-12 text-center">
-        <q-btn class="text-grey-5" flat>Browse all</q-btn>
+        <q-btn
+          class="text-grey-5"
+          flat
+          to="/collections"
+        >Browse all</q-btn>
       </div>
     </div>
   </section>
@@ -17,13 +31,17 @@
 
 <script>
 import CollectionThumb from "../components/CollectionThumb";
+import { mapGetters } from 'vuex';
 export default {
   // name: 'ComponentName',
   components: {
     CollectionThumb
   },
-  data() {
+  data () {
     return {};
+  },
+  computed: {
+    ...mapGetters({ 'collections': 'collections/collections' })
   }
 };
 </script>

src/components/FeaturedGallery.vue

@@ -6,7 +6,7 @@
       <div class="row">
         <div
           v-for="project, idxa in items"
-          v-bind:key="project['.key']"
+          v-bind:key="project['id']"
           class="col-12 col-sm-6 col-md-4"
         >
           <ProjectThumb :project="project" @clickProject="handleClickProject" />
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 export default {
   // name: 'ComponentName',
   props: ["items"],

src/components/InfiniteCollectionsGallery.vue

 <template>
-  <section id="collections-gallery" class="q-my-lg">
+  <section
+    id="collections-gallery"
+    class="q-my-lg"
+  >
     <div class="text-uppercase text-grey text-subtitle2 text-left">Collections</div>
     <q-infinite-scroll @load="onLoad">
       <div class="row q-gutter-none">
-        <div class="col-12 col-sm-6 col-md-3" v-for="item,idx in items" :key="idx">
-          <CollectionThumb/>
+        <div
+          class="col-12 col-sm-6 col-md-3"
+          v-for="item,idx in items"
+          :key="idx"
+        >
+          <CollectionThumb />
         </div>
       </div>
 
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
-          <q-spinner-dots color="grey-4" size="40px"/>
+          <q-spinner-dots
+            color="grey-4"
+            size="40px"
+          />
         </div>
       </template>
     </q-infinite-scroll>
@@ -19,26 +29,30 @@
 
 <script>
 import CollectionThumb from "../components/CollectionThumb";
+import { mapGetters } from 'vuex';
 export default {
   // name: 'ComponentName',
   components: {
     CollectionThumb
   },
   methods: {
-    onLoad(index, done) {
-      setTimeout(() => {
-        if (this.items) {
-          this.items.push({}, {}, {}, {}, {}, {}, {}, {});
-          done();
-        }
-      }, 2000);
+    onLoad (index, done) {
+      // setTimeout(() => {
+      //   if (this.items) {
+      //     this.items.push({}, {}, {}, {}, {}, {}, {}, {});
+      //     done();
+      //   }
+      // }, 2000);
     }
   },
-  data() {
-    return {
-      items: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
-    };
+  computed: {
+    ...mapGetters({ "items": "collections/collections" })
   }
+  // data() {
+  //   return {
+  //     items: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
+  //   };
+  // }
 };
 </script>
 

src/components/InfiniteGallery.vue

@@ -3,20 +3,13 @@
     <!-- <div class="text-uppercase text-grey text-subtitle2 text-left">Featured designs</div> -->
     <q-infinite-scroll @load="onLoad">
       <div class="row">
-        <div
-          class="col-12 col-sm-6 col-md-4 col-xl-3"
-          v-for="idx,item in items"
-          :key="idx"
-        >
+        <div class="col-12 col-sm-6 col-md-4 col-xl-3" v-for="idx,item in items" :key="idx">
           <ProjectThumb />
         </div>
       </div>
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
-          <q-spinner-dots
-            color="grey-4"
-            size="40px"
-          />
+          <q-spinner-dots color="grey-4" size="40px" />
         </div>
       </template>
     </q-infinite-scroll>
@@ -24,14 +17,14 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 export default {
   // name: 'ComponentName',
   components: {
     ProjectThumb
   },
   methods: {
-    onLoad (index, done) {
+    onLoad(index, done) {
       setTimeout(() => {
         if (this.items) {
           this.items.push({}, {}, {}, {}, {}, {});
@@ -40,7 +33,7 @@ export default {
       }, 2000);
     }
   },
-  data () {
+  data() {
     return {
       items: [{}, {}, {}, {}, {}, {}]
     };

src/components/RecentGallery.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 import { mapGetters } from "vuex";
 export default {
   // name: 'ComponentName',

src/components/TopToolbar.vue

 <template>
-  <q-toolbar class="bg-white text-grey-6 no-border" flat>
-    <q-btn flat dense round @click="toogleDrawer" aria-label="Menu" v-if="hasDrawer">
+  <q-toolbar
+    class="bg-white text-grey-6 no-border"
+    flat
+  >
+    <q-btn
+      flat
+      dense
+      round
+      @click="toogleDrawer"
+      aria-label="Menu"
+      v-if="hasDrawer"
+    >
       <q-icon name="menu" />
     </q-btn>
 
     <q-toolbar-title>
       <div class="flex items-center">
         <router-link to="/">
-          <q-img src="/statics/600x600fabr.png" class="logo-img" />
+          <q-img
+            src="/statics/600x600fabr.png"
+            class="logo-img"
+          />
         </router-link>
         <div class="text-logo">
           <span class="text-open">Open&nbsp;-&nbsp;source</span>
@@ -16,44 +29,67 @@
       </div>
     </q-toolbar-title>
     <q-space />
-    <q-btn flat label="Browse" icon-right="arrow_drop_down" class="q-ml-md gt-sm">
+    <q-btn
+      flat
+      label="Browse"
+      icon-right="arrow_drop_down"
+      class="q-ml-md gt-sm"
+    >
       <q-menu>
         <q-list style="min-width: 80px">
-          <q-item clickable v-close-popup>
-            <q-item-section>Category</q-item-section>
+          <q-item
+            clickable
+            v-close-popup
+            v-for="cat,idx in categories"
+            :key="idx"
+          >
+            <q-item-section>{{cat.label}}</q-item-section>
           </q-item>
-          <q-item clickable v-close-popup>
-            <q-item-section>Another Category</q-item-section>
-          </q-item>
-          <q-separator />
         </q-list>
       </q-menu>
     </q-btn>
-    <q-btn flat to="/collections" class="gt-sm">Collections</q-btn>
-    <q-btn flat to="/account/projects/new" class="gt-sm">Upload a project</q-btn>
+    <q-btn
+      flat
+      to="/collections"
+      class="gt-sm"
+    >Collections</q-btn>
+    <q-btn
+      flat
+      to="/account/projects/new"
+      class="gt-sm"
+    >Upload a project</q-btn>
 
-    <q-btn to="/login" flat v-if="!user">Sign in</q-btn>
-    <UserPopupMenu @logout="handleLogout" :user="user" />
+    <q-btn
+      to="/login"
+      flat
+      v-if="!user"
+    >Sign in</q-btn>
+    <UserPopupMenu
+      @logout="handleLogout"
+      :user="user"
+    />
     <!-- <div>Quasar v{{ $q.version }}</div> -->
   </q-toolbar>
 </template>
 
 <script>
 import UserPopupMenu from "src/components/UserPopupMenu";
+import { mapActions, mapGetters } from "vuex";
 export default {
   // name: 'ComponentName',
   components: {
     UserPopupMenu
   },
   props: ["hasDrawer", "user"],
-  data() {
+  data () {
     return {};
   },
   methods: {
-    toogleDrawer() {
+    ...mapActions({ loadCategories: "categories/loadAll" }),
+    toogleDrawer () {
       this.$emit("toggle");
     },
-    handleLogout() {
+    handleLogout () {
       this.$emit("logout");
     }
   }

src/components/UserBookmarksGallery.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 export default {
   // name: 'ComponentName',
   components: {

src/components/UserGallery.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 export default {
   // name: 'ComponentName',
   components: {

src/components/project/RelatedProjectsGallery.vue

 <template>
-  <section
-    id="featured-gallery"
-    class="q-my-lg"
-  >
+  <section id="featured-gallery" class="q-my-lg">
     <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Related Projects</div>
 
     <div v-if="items && items.length > 0">
@@ -12,10 +9,7 @@
           v-bind:key="project['id']"
           class="col-12 col-sm-6 col-md-4"
         >
-          <ProjectThumb
-            :project="project"
-            @clickProject="handleClickProject"
-          />
+          <ProjectThumb :project="project" @clickProject="handleClickProject" />
         </div>
       </div>
     </div>
@@ -31,7 +25,7 @@
 </template>
 
 <script>
-import ProjectThumb from "../components/ProjectThumb";
+import ProjectThumb from "../components/project/ProjectThumb";
 export default {
   // name: 'ComponentName',
   props: ["items"],
@@ -39,11 +33,11 @@ export default {
     ProjectThumb
   },
   methods: {
-    handleClickProject (key) {
+    handleClickProject(key) {
       this.$router.push(`/projects/${key}`);
     }
   },
-  data () {
+  data() {
     return {};
   }
 };

src/pages/Index.vue

 <template>
   <q-page>
     <Hero />
-    <div class="row q-pa-sm">
+    <div
+      class="row q-pa-sm"
+      v-if="loaded"
+    >
       <div class="col-lg-8 offset-lg-2 col-md-12 col-sm-12">
         <section id="featured">
-          <FeaturedGallery :items="featuredProjects" />
+          <FeaturedGallery :items="popularProjects" />
         </section>
         <section id="banner">
           <UploadBanner />
@@ -53,42 +56,35 @@ export default {
     CollectionsGallery,
     BannerFabricademy
   },
-  preFetch({ store }) {
-    // this.loadFeaturedProjects()
-    //   .then(() => {
-    //     console.log("featured projects loaded");
-    //   })
-    //   .catch(error => {
-    //     console.log("featured projects error ", error);
-    //   });
-    // this.loadLatestProjects()
-    //   .then(() => {
-    //     console.log("latest projects loaded");
-    //   })
-    //   .catch(error => {
-    //     console.log("featured projects error ", error);
-    //   });
-  },
-  mounted() {
-    this.$q.loadingBar.start();
-    Promise.all([
-      this.$store.dispatch("projects/loadFeaturedProjects"),
-      this.$store.dispatch("projects/loadLatestProjects")
-    ]).finally(() => {
-      this.$q.loadingBar.stop();
-    });
+  mounted () {
+
+    this.loadProjects();
   },
   methods: {
-    ...mapActions({
-      loadFeaturedProjects: "projects/loadFeaturedProjects",
-      loadLatestProjects: "projects/loadLatestProjects"
-    })
+    loadProjects () {
+      this.loaded = false;
+      this.$q.loadingBar.start();
+      Promise.all([
+        this.$store.dispatch("projects/loadPopularProjects"),
+        this.$store.dispatch("projects/loadLatestProjects"),
+        this.$store.dispatch("collections/loadLatestCollections")
+      ]).finally(() => {
+        this.loaded = true;
+        this.$q.loadingBar.stop();
+      });
+    }
   },
   computed: {
     ...mapGetters({
+      latestCollections: "collections/latestCollections",
       latestProjects: "projects/latestProjects",
-      featuredProjects: "projects/featuredProjects"
+      popularProjects: "projects/popularProjects"
     })
+  },
+  data () {
+    return {
+      loaded: false
+    }
   }
 };
 </script>

src/pages/UserDetail.vue

+<template>
+  <q-page padding>
+    <!-- content -->
+    <div v-if="userLoaded">
+      <div class="row">
+        <div class="col-xs-12 col-md-8 offset-md-2">
+          <div class="flex q-gutter-md items-center">
+            <q-avatar>
+              <q-img
+                basic
+                size="256px"
+                src="https://cdn.quasar.dev/img/avatar2.jpg"
+              />
+            </q-avatar>
+            <div>
+              <div class="text-h4">{{user.name}}</div>
+              <div class="text-body1">{{user.bio}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-8 offset-md-2">
+          <q-separator />
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-center"
+    >
+      <div class="q-pa-xl">
+        <q-spinner-dots />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import UserGallery from "../components/UserGallery";
+export default {
+  // name: 'PageName',
+  components: {
+    UserGallery
+  },
+  mounted () {
+    if (this.$route.params.user_id) {
+      this.userLoaded = false;
+      this.$q.loadingBar.start();
+      this.loadUser(this.$route.params.user_id).finally(() => {
+        this.$q.loadingBar.stop();
+        this.userLoaded = true;
+      })
+    }
+  },
+  data () {
+    return {
+      userLoaded: false
+    }
+  },
+  methods: {
+    ...mapActions({ loadUserProfile: 'profiles/loadById' })
+  }
+};
+</script>
+
+<style>
+</style>

src/router/routes.js

@@ -67,6 +67,10 @@ const routes = [
           {
             path: "projects/:project_id",
             component: () => import("pages/ProjectDetail.vue")
+          },
+          {
+            path: "users/:user_id",
+            component: () => import("pages/UserDetail.vue")
           }
         ]
       },

src/store/collections/actions.js

@@ -2,3 +2,52 @@
 export function someAction (context) {
 }
 */
+import firebase from "firebase/app";
+
+import { firestoreAction } from "vuexfire";
+
+export const setCollectionsRef = firestoreAction(
+  ({ bindFirestoreRef }, ref) => {
+    return bindFirestoreRef("collections", ref);
+  }
+);
+
+export const setLatestCollectionsRef = firestoreAction(
+  ({ bindFirestoreRef }, ref) => {
+    return bindFirestoreRef("latest_collections", ref);
+  }
+);
+
+export const setUserCollectionsRef = firestoreAction(
+  ({ bindFirestoreRef }, ref) => {
+    return bindFirestoreRef("user_collections", ref);
+  }
+);
+
+export const loadUserCollections = ({ dispatch }, user_id) => {
+  const db = firebase.firestore();
+
+  const ref = db
+    .collection("collections")
+    .where("user_id", "==", user_id)
+    .orderBy("created", "desc");
+
+  return dispatch("setUserCollectionsRef", ref);
+};
+
+export const loadLatestCollections = ({ dispatch }) => {
+  const db = firebase.firestore();
+  const ref = db
+    .collection("collections")
+    .orderBy("created", "desc")
+    .limit(6);
+
+  return dispatch("setLatestCollectionsRef", ref);
+};
+
+export const loadAllCollections = ({ dispatch }) => {
+  const db = firebase.firestore();
+  const ref = db.collection("collections").orderBy("created", "desc");
+
+  return dispatch("setCollectionsRef", ref);
+};

src/store/collections/getters.js

@@ -2,3 +2,9 @@
 export function someGetter (state) {
 }
 */
+
+export const collections = state => state.collections;
+
+export const userCollections = state => state.user_collections;
+
+export const latestCollections = state => state.latestCollections;

src/store/collections/state.js

 export default {
   //
-}
+  collections: [],
+  latest_collections: [],
+  user_collections: []
+};