Re-enable explore public boards page

src/components/GameBoards.vue

@@ -1,25 +1,21 @@
 <template lang="html">
-  <b-row v-if="user" class="p-1 boards">
+  <b-row class="p-1 boards">
     <b-spinner v-if="loading" class="spinner-centered" />
 
     <template v-else>
       <empty-state
-        v-if="!user || !loading && sortedBoards.length === 0"
+        v-if="isEmpty"
         title="Boards"
         message="Use boards to easily organize your video game collections"
       >
         <b-button :to="{ name: 'create.board' }">
           {{ $t('boards.create') }}
         </b-button>
-
-        <!-- <b-button :to="{ name: 'public.boards' }">
-          View public boards
-        </b-button> -->
       </empty-state>
 
       <template v-else>
         <b-col
-          v-for="board in sortedBoards"
+          v-for="board in gameBoards"
           :key="board.id"
           cols="12"
           sm="6"
@@ -61,16 +57,18 @@ export default {
     ...mapState(['publicBoards', 'user', 'boards', 'wallpapers']),
     ...mapGetters(['isBoardOwner', 'platformNames', 'sortedBoards']),
 
-    showCreateBoard() {
+    gameBoards() {
-      return !this.loading && Object.keys(this.boards).length;
+      return this.isPublicBoard
+        ? this.publicBoards
+        : this.sortedBoards;
     },
 
-    allBoards() {
+    isEmpty() {
-      // return this.publicBoards
+      return !this.loading && this.gameBoards.length === 0;
-      return [
+    },
-        ...this.sortedBoards,
+
-        ...this.publicBoards,
+    isPublicBoard() {
-      ];
+      return this.$route.name === 'explore';
     },
   },
 
@@ -80,7 +78,11 @@ export default {
 
   methods: {
     load() {
-      if (this.user) this.loadPlatforms();
+      if (this.isPublicBoard) {
+        this.loadPublicBoards();
+      } else {
+        this.loadBoards()
+      }
     },
 
     getWallpaperUrl(url) {
@@ -99,17 +101,6 @@ export default {
         : '';
     },
 
-    async loadPlatforms() {
-      await this.$store.dispatch('LOAD_IGDB_PLATFORMS')
-        .catch(() => {
-          this.$bvToast.toast('There was an error loading platforms', { variant: 'error' });
-        });
-
-      this.loadBoards();
-
-      this.$store.dispatch('LOAD_PUBLIC_BOARDS');
-    },
-
     async loadBoards() {
       this.loading = true;
 
@@ -122,6 +113,20 @@ export default {
       this.loading = false;
     },
 
+    async loadPublicBoards() {
+      this.loading = true;
+
+      await this.$store.dispatch('LOAD_PUBLIC_BOARDS')
+        .catch(() => {
+          this.loading = false;
+          this.$store.commit('SET_SESSION_EXPIRED', true);
+        });
+
+      this.loading = false;
+    },
+
+
+
     viewBoard(id) {
       this.$router.push({ name: 'board', params: { id } });
     },

src/components/Lists/GameList.vue

@@ -75,9 +75,11 @@
             variant="light"
             block
             class="mb-2"
+            :disabled="!isBoardOwner"
             :to="{ name: 'search', query: { boardId: board.id, listIndex: listIndex } }"
           >
-            Add games
+            <template v-if="isBoardOwner">Add games</template>
+            <template else>Empty list</template>
           </b-button>
         </div>
       </draggable>

src/pages/EditBoardPage.vue

@@ -51,13 +51,13 @@
           </b-form-group>
 
           <b-form-checkbox v-model="isPublic" switch class="mb-2">
-            Make board public (beta)
+            Make board public
           </b-form-checkbox>
 
           <b-alert show variant="info" v-if="isPublic" class="m-0 text-truncate">
             <strong>Public Board URL</strong>
             <br>
-            <small>{{ `https://app.gamebrary.com/#/b/${board.id}` }}</small>
+            <small>{{ `https://gamebrary.com/b/${board.id}` }}</small>
           </b-alert>
 
           <hr class="my-3">

src/pages/ExplorePage.vue

@@ -1,88 +1,34 @@
 <template lang="html">
-  <b-container class="explore-page">
+  <b-container>
-    <div class="boards">
+    <game-boards />
-      <b-card
-        v-for="board in publicBoards"
-        :key="board.id"
-        no-body
-        class="overflow-hidden cursor-pointer"
-        @click="viewBoard(board.id)"
-      >
-        <mini-board
-          :board="board"
-          :background-image="getWallpaper(board)"
-        />
-      </b-card>
-    </div>
 
-  <div class="game-deals">
+    <!-- <div class="game-deals">
-    <twitter-feed twitter-user="wario64" />
+      <twitter-feed twitter-user="wario64" />
-  </div>
+    </div> -->
-</b-container>
+  </b-container>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import MiniBoard from '@/components/Board/MiniBoard';
+import GameBoards from '@/components/GameBoards';
 import TwitterFeed from '@/components/TwitterFeed';
 
 export default {
   components: {
-    MiniBoard,
+    GameBoards,
-    TwitterFeed,
+    // TwitterFeed,
-  },
-
-  computed: {
-    ...mapState(['publicBoards', 'wallpapers']),
-  },
-
-  mounted() {
-    this.load();
-  },
-
-  methods: {
-    load() {
-      this.$store.dispatch('LOAD_PUBLIC_BOARDS');
-    },
-
-    getWallpaper({ wallpaper }) {
-      if (!wallpaper) return '';
-
-      this.$store.dispatch('LOAD_WALLPAPER', wallpaper)
-        .then(url => url);
-    },
-
-    viewBoard(id) {
-      this.$router.push({ name: 'board', params: { id } });
-    },
   },
 };
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-.explore-page {
+// .explore-page {
-  display: grid;
+//   display: grid;
-  grid-template-columns: 1fr 300px;
+//   grid-template-columns: 1fr 300px;
-  grid-gap: 1rem;
+//   grid-gap: 1rem;
-}
+// }
-
+// .game-deals {
-.boards {
+//   height: calc(100vh - 200px);
-  display: grid;
+//   overflow-y: auto;
-  grid-template-columns: 1fr 1fr 1fr;
+// }
-  grid-gap: 1rem;
-
-  @media(max-width: 780px) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media(max-width: 480px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.game-deals {
-  background-color: #fc0;
-  height: calc(100vh - 200px);
-  overflow-y: auto;
-}
 </style>

src/pages/PublicHomePage.vue

@@ -1,5 +1,14 @@
 <template lang="html">
   <div>
+    <portal to="headerActions">
+      <b-button
+        class="mr-2"
+        variant="light"
+        :to="{ name: 'explore' }"
+      >
+        Explore
+      </b-button>
+    </portal>
     <h1 class="display-5 mb-3 text-center">Organize your video games beautifully.</h1>
     <p class="lead text-muted mb-5 field ml-auto mr-auto text-center">Learn about games, take notes, organize, customize, discover and more with Gamebrary</p>