rename pages

src/pages/ProfilesPage.vue

@@ -10,7 +10,8 @@
       v-for="profile in profiles"
       :key="profile.userName"
     >
-      <small>{{ profile.userName }}</small>
+      <img :src="profile.profileImage" :alt="profile.userName" width="50">
+      <small>{{ `@${profile.userName}` }}</small>
     </router-link>
   </b-container>
 </template>

src/pages/PublicProfile.vue

@@ -1,47 +0,0 @@
-<template lang="html">
-  <div>
-    <pre>{{ userName }}</pre>
-    <b-alert show variant="danger" v-if="error">
-      user not found
-    </b-alert>
-
-    <pre class="bg-info">{{ profile }}</pre>
-    <!-- TODO: load profile and display it -->
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      error: false,
-      profile: null,
-    };
-  },
-  computed: {
-    userName() {
-      return this.$route.params.userName;
-    },
-  },
-
-  mounted() {
-    this.load();
-  },
-
-  methods: {
-    load() {
-      this.$store.dispatch('LOAD_PUBLIC_PROFILE', this.userName)
-        .then((data) => {
-          this.profile = data;
-        })
-        .catch(() => {
-          this.error = true;
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-</style>
-

src/pages/PublicProfilePage.vue

@@ -0,0 +1,114 @@
+<template lang="html">
+  <b-container>
+    <div v-if="loading">
+      Loading...
+    </div>
+
+    <template v-else-if="profile">
+      <div>
+        <img :src="profile.profileImage" :alt="userName" class="rounded" />
+
+        <h2>{{ profile.userName }}</h2>
+      </div>
+
+      <b-button v-if="canEdit" :to="{ name: 'profile' }">
+        Edit
+      </b-button>
+
+      <mini-board
+        v-for="board in userBoards"
+        :key="board.id"
+        :board="board"
+        @view-board="viewPublicBoard(board.id)"
+        class="p-relative"
+      />
+    </template>
+
+    <empty-state
+      v-else
+      title="404 Not Found"
+      message="Page not found!"
+    />
+  </b-container>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import MiniBoard from '@/components/Board/MiniBoard';
+import EmptyState from '@/components/EmptyState';
+
+export default {
+  components: {
+    MiniBoard,
+    EmptyState,
+  },
+
+  data() {
+    return {
+      error: false,
+      loading: false,
+      userBoards: [],
+      profile: null,
+    };
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    canEdit() {
+      return this.profile && this.profile.userId
+        ? this.user && this.user.uid === this.profile.userId
+        : false;
+    },
+
+    userName() {
+      return this.$route.params.userName;
+    },
+  },
+
+  watch: {
+    userName(value) {
+      if (value) {
+        this.loadProfile();
+      }
+    },
+  },
+
+  mounted() {
+    this.loadProfile();
+  },
+
+  methods: {
+    viewPublicBoard(id) {
+      this.$router.push({ name: 'public-board', params: { id } });
+    },
+
+    async loadProfile() {
+      this.error = false;
+      this.loading = true;
+
+      this.profile = await this.$store.dispatch('LOAD_PUBLIC_PROFILE', this.userName)
+        .catch(() => {
+          this.error = true;
+        });
+
+      if (!this.profile) {
+        this.loading = false;
+
+        return;
+      }
+
+      this.userBoards = await this.$store.dispatch('LOAD_USER_PUBLIC_BOARDS', this.profile.userId)
+        .catch(() => {
+          this.error = true;
+        });
+
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+</style>
+

src/router.js

@@ -1,25 +1,26 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Board from '@/pages/Board';
+import BoardPage from '@/pages/BoardPage';
-import About from '@/pages/About';
+import AboutPage from '@/pages/AboutPage';
-import Wallpapers from '@/pages/Wallpapers';
+import WallpapersPage from '@/pages/WallpapersPage';
-import PublicBoards from '@/pages/PublicBoards';
+import PublicBoardsPage from '@/pages/PublicBoardsPage';
-import Tags from '@/pages/Tags';
+import TagsPage from '@/pages/TagsPage';
-import Notes from '@/pages/Notes';
+import NotesPage from '@/pages/NotesPage';
-import Releases from '@/pages/Releases';
+import ReleasesPage from '@/pages/ReleasesPage';
-import Auth from '@/pages/Auth';
+import AuthPage from '@/pages/AuthPage';
 import BoardsPage from '@/pages/BoardsPage';
 import ProfilesPage from '@/pages/ProfilesPage';
 import DevToolsPage from '@/pages/DevToolsPage';
-import Home from '@/pages/Home';
+import HomePage from '@/pages/HomePage';
-import Settings from '@/pages/Settings';
+import SettingsPage from '@/pages/SettingsPage';
-import Profile from '@/pages/Profile';
+import ProfilePage from '@/pages/ProfilePage';
-import EditProfile from '@/pages/Profile/EditProfile';
+import EditProfilePage from '@/pages/EditProfilePage';
-import PublicProfile from '@/pages/PublicProfile';
+import PublicProfilePage from '@/pages/PublicProfilePage';
 
 Vue.use(Router);
 
 export default new Router({
+  mode: 'history',
   routes: [
     {
       name: 'boards',
@@ -35,12 +36,13 @@ export default new Router({
       component: ProfilesPage,
       meta: {
         title: 'Boards',
+        public: true,
       },
     },
     {
       name: 'home',
       path: '/',
-      component: Home,
+      component: HomePage,
       meta: {
         title: 'Home',
       },
@@ -56,7 +58,7 @@ export default new Router({
     {
       name: 'settings',
       path: '/settings',
-      component: Settings,
+      component: SettingsPage,
       meta: {
         title: 'Settings',
       },
@@ -64,7 +66,7 @@ export default new Router({
     {
       name: 'wallpapers',
       path: '/wallpapers',
-      component: Wallpapers,
+      component: WallpapersPage,
       meta: {
         title: 'Wallpapers',
       },
@@ -72,7 +74,7 @@ export default new Router({
     {
       name: 'tags',
       path: '/tags',
-      component: Tags,
+      component: TagsPage,
       meta: {
         title: 'Tags',
       },
@@ -80,7 +82,7 @@ export default new Router({
     {
       name: 'notes',
       path: '/notes',
-      component: Notes,
+      component: NotesPage,
       meta: {
         title: 'Notes',
       },
@@ -88,7 +90,7 @@ export default new Router({
     {
       name: 'public-boards',
       path: '/public-boards',
-      component: PublicBoards,
+      component: PublicBoardsPage,
       meta: {
         title: 'PublicBoards',
         public: true,
@@ -97,15 +99,15 @@ export default new Router({
     {
       name: 'profile',
       path: '/profile',
-      component: Profile,
+      component: ProfilePage,
       meta: {
         title: 'Profile',
       },
     },
     {
       name: 'edit-profile',
-      path: '/profile/edit',
+      path: '/EditProfilePage',
-      component: EditProfile,
+      component: EditProfilePage,
       meta: {
         title: 'Edit profile',
       },
@@ -113,7 +115,7 @@ export default new Router({
     {
       name: 'about',
       path: '/about',
-      component: About,
+      component: AboutPage,
       meta: {
         title: 'About',
       },
@@ -121,7 +123,7 @@ export default new Router({
     {
       name: 'releases',
       path: '/releases',
-      component: Releases,
+      component: ReleasesPage,
       meta: {
         title: 'Releases',
       },
@@ -129,7 +131,7 @@ export default new Router({
     {
       name: 'auth',
       path: '/auth',
-      component: Auth,
+      component: AuthPage,
       meta: {
         title: 'Auth',
       },
@@ -137,19 +139,19 @@ export default new Router({
         {
           name: 'auth-provider',
           path: ':provider',
-          component: Auth,
+          component: AuthPage,
         },
       ],
     },
     {
       path: '/board/:id',
       name: 'board',
-      component: Board,
+      component: BoardPage,
     },
     {
       path: '/b/:id',
       name: 'public-board',
-      component: Board,
+      component: BoardPage,
       meta: {
         public: true,
       },
@@ -157,7 +159,7 @@ export default new Router({
     {
       path: '/:userName',
       name: 'public-profile',
-      component: PublicProfile,
+      component: PublicProfilePage,
       meta: {
         public: true,
       },