4 files changed, 40 insertions(+), 20 deletions(-)

M src/components/Article/meta.vue
M src/components/Profile/view.vue
M src/store/Profile.js
M src/views/Profile.vue

@@ 2,7 2,9 @@
   <section class="article-meta">
     <small class="created-at" :title="lastUpdate">{{ createdAt | humanReadableDate }}</small>
     |
-    <small class="created-by" :title="author.bio">{{ author.username}}</small>
+    <router-link :to="`/u/${author.id}`">
+      <small class="created-by" :title="author.bio">{{ author.username}}</small>
+    </router-link>
     <p>{{ description }}</p>
   </section>
 </template>

@@ 1,14 1,29 @@
 <template>
   <article :id="`u-${$route.params.id}`">
-    <p>more to come...</p>
+    <p>{{ bio }}</p>
+    <label for="follows">
+      <input type="checkbox" name="follows" :checked="follows" onclick="return false;">
+      follows you
+    </label>
+    <label for="following">
+      <input type="checkbox" name="following" :checked="following" onclick="return false;">
+      you follow
+    </label>
   </article>
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState } = createNamespacedHelpers('Profile')
+
 export default {
-  name: 'profile-view',
-  props: {
-  }
+  name: 'profile-detail',
+  computed: mapState({
+    bio: state => state.bio,
+    following: state => state.following,
+    follows: state => state.follows,
+    image: state => state.image
+  })
 }
 </script>
 

@@ 5,7 5,9 @@ const state = {
   username: '',
   bio: '',
   following: false,
-  image: null
+  follows: false,
+  image: null,
+  isLoading: false
 }
 
 const mutations = {


@@ 18,6 20,7 @@ const mutations = {
     state.username = payload.username
     state.bio = payload.bio || ''
     state.following = !!payload.following
+    state.follows = !!payload.follows
     state.image = payload.image
   }
 }

@@ 1,24 1,24 @@
 <template>
-  <div id="profile">
-    <h1>PROFILE</h1>
+  <div v-if="isLoading">loading profile...</div>
+  <div v-else id="profile-view">
+    <h1 :title="$route.params.id">{{ username }}</h1>
     <router-view />
   </div>
 </template>
 
 <script>
-// import Foo from '@/components/Foo.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('Profile')
 
 export default {
-  name: 'profile',
-  // components: { Foo }
-  data () {
-    return {}
-  }
+  name: 'profile-view',
+  mounted () {
+    this.fetch(this.$route.params.id)
+  },
+  methods: mapActions(['fetch']),
+  computed: mapState({
+    isLoading: state => state.isLoading,
+    username: state => state.username
+  })
 }
 </script>
-
-<style scoped>
-#profile {
-  color: 'rose';
-}
-</style>