refactor: separate cluster grid

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

src/components/ClusterGrid.vue

@@ -0,0 +1,81 @@
+<template>
+  <RecycleScroller
+    ref="recycler"
+    class="grid-recycler hide-scrollbar-mobile"
+    :class="{ empty: !items.length }"
+    :items="items"
+    :skipHover="true"
+    :buffer="400"
+    :itemSize="itemSize"
+    :gridItems="gridItems"
+    :updateInterval="100"
+    key-field="cluster_id"
+    @resize="resize"
+  >
+    <template v-slot="{ item }">
+      <div class="grid-item fill-block">
+        <Cluster :data="item" @click="click(item)" :link="link" />
+      </div>
+    </template>
+  </RecycleScroller>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Cluster from "./frame/Cluster.vue";
+import { ICluster } from "../types";
+
+export default defineComponent({
+  name: "ClusterGrid",
+
+  components: {
+    Cluster,
+  },
+
+  props: {
+    items: {
+      type: Array<ICluster>,
+      required: true,
+    },
+    link: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data: () => ({
+    itemSize: 200,
+    gridItems: 5,
+  }),
+
+  mounted() {
+    this.resize();
+  },
+
+  methods: {
+    click(item: ICluster) {
+      this.$emit("click", item);
+    },
+
+    resize() {
+      const w = (<any>this.$refs.recycler).$el.clientWidth;
+      this.gridItems = Math.max(Math.floor(w / 200), 3);
+      this.itemSize = Math.floor(w / this.gridItems);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.grid-recycler {
+  flex: 1;
+  max-height: 100%;
+  overflow-y: scroll !important;
+  &.empty {
+    visibility: hidden;
+  }
+}
+.grid-item {
+  position: relative;
+}
+</style>

src/components/ClusterView.vue

@@ -4,25 +4,7 @@
 
     <EmptyContent v-if="!items.length && !loading" />
 
-    <RecycleScroller
+    <ClusterGrid :items="items" />
-      ref="recycler"
-      class="grid-recycler hide-scrollbar-mobile"
-      :class="{ empty: !items.length }"
-      :items="items"
-      :skipHover="true"
-      :buffer="400"
-      :itemSize="itemSize"
-      :gridItems="gridItems"
-      :updateInterval="100"
-      key-field="cluster_id"
-      @resize="resize"
-    >
-      <template v-slot="{ item }">
-        <div class="grid-item fill-block">
-          <Cluster :data="item" @click="click(item)" :link="link" />
-        </div>
-      </template>
-    </RecycleScroller>
   </div>
 
   <Timeline v-else />
@@ -33,7 +15,7 @@ import { defineComponent } from "vue";
 
 import UserConfig from "../mixins/UserConfig";
 import TopMatter from "./top-matter/TopMatter.vue";
-import Cluster from "./frame/Cluster.vue";
+import ClusterGrid from "./ClusterGrid.vue";
 import Timeline from "./Timeline.vue";
 import EmptyContent from "./top-matter/EmptyContent.vue";
 
@@ -46,7 +28,7 @@ export default defineComponent({
 
   components: {
     TopMatter,
-    Cluster,
+    ClusterGrid,
     Timeline,
     EmptyContent,
   },
@@ -55,18 +37,9 @@ export default defineComponent({
 
   data: () => ({
     items: [] as ICluster[],
-    itemSize: 200,
-    gridItems: 5,
     loading: 0,
   }),
 
-  props: {
-    link: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
   computed: {
     noParams() {
       return !this.$route.params.name && !this.$route.params.user;
@@ -74,45 +47,35 @@ export default defineComponent({
   },
 
   mounted() {
-    this.routeChange(this.$route);
+    this.routeChange();
-    this.resize();
   },
 
   watch: {
-    async $route(to: any, from?: any) {
+    async $route() {
-      this.routeChange(to, from);
+      this.routeChange();
     },
   },
 
   methods: {
-    async routeChange(to: any, from?: any) {
+    async routeChange() {
       try {
+        const route = this.$route.name;
         this.items = [];
         this.loading++;
 
-        if (to.name === "albums") {
+        if (route === "albums") {
           this.items = await dav.getAlbums(3, this.config_albumListSort);
-        } else if (to.name === "tags") {
+        } else if (route === "tags") {
           this.items = await dav.getTags();
-        } else if (to.name === "recognize" || to.name === "facerecognition") {
+        } else if (route === "recognize" || route === "facerecognition") {
-          this.items = await dav.getFaceList(to.name);
+          this.items = await dav.getFaceList(route);
-        } else if (to.name === "places") {
+        } else if (route === "places") {
           this.items = await dav.getPlaces();
         }
       } finally {
         this.loading--;
       }
     },
-
-    click(item: ICluster) {
-      this.$emit("click", item);
-    },
-
-    resize() {
-      const w = (<any>this.$refs.recycler).$el.clientWidth;
-      this.gridItems = Math.max(Math.floor(w / 200), 3);
-      this.itemSize = Math.floor(w / this.gridItems);
-    },
   },
 });
 </script>
@@ -124,15 +87,4 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
 }
-.grid-recycler {
-  flex: 1;
-  max-height: 100%;
-  overflow-y: scroll !important;
-  &.empty {
-    visibility: hidden;
-  }
-}
-.grid-item {
-  position: relative;
-}
 </style>