more syntactically pleasing way to handle store modules

Signed-off-by: Arnav Gupta <[email protected]>

Author: championswimmer

package.json

@@ -11,30 +11,30 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "vue": "^2.5.17",
-    "vue-class-component": "^6.0.0",
+    "vue": "^2.5.18",
+    "vue-class-component": "^6.1.0",
     "vue-property-decorator": "^7.2.0",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.0.2",
     "vuex": "^3.0.1",
-    "vuex-module-decorators": "^0.9.2"
+    "vuex-module-decorators": "^0.9.7"
   },
   "devDependencies": {
-    "@types/jest": "^23.1.4",
+    "@types/jest": "^23.3.10",
     "@vue/cli-plugin-babel": "^3.2.0",
     "@vue/cli-plugin-e2e-cypress": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@vue/cli-plugin-eslint": "^3.2.1",
     "@vue/cli-plugin-typescript": "^3.2.0",
     "@vue/cli-plugin-unit-jest": "^3.2.0",
     "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-prettier": "^4.0.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/eslint-config-typescript": "^3.2.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "^1.0.0-beta.27",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "ts-jest": "^23.0.0",
-    "typescript": "^3.0.0",
-    "vue-template-compiler": "^2.5.17"
+    "eslint": "^5.10.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.2",
+    "vue-template-compiler": "^2.5.21"
   }
 }

src/components/AppNavbar.vue

@@ -17,15 +17,16 @@
             <i class="ion-gear-a"></i>&nbsp;Settings
           </a>
         </li>
-        <li v-if="!username" class="nav-item">
-          <router-link class="nav-link" to="/register">
-            Sign up
+        <li v-if="username" class="nav-item">
+          <router-link class="nav-link" :to="'/@' + username">
+            {{ username }}
           </router-link>
         </li>
         <li v-if="!username" class="nav-item">
-          <router-link class="nav-link" to="/login">
-            Sign in
-          </router-link>
+          <router-link class="nav-link" to="/register"> Sign up </router-link>
+        </li>
+        <li v-if="!username" class="nav-item">
+          <router-link class="nav-link" to="/login"> Sign in </router-link>
         </li>
       </ul>
     </div>
@@ -34,12 +35,12 @@
 
 <script>
 import { Vue, Component } from 'vue-property-decorator';
-import users from '@/store/modules/users'
+import users from '@/store/modules/users';
 
 @Component
 export default class AppNavbar extends Vue {
   get username() {
-    return users.username
+    return users.username;
   }
 }
 </script>

src/components/article/ArticlePreview.vue

@@ -1,28 +1,18 @@
 <template>
   <div class="article-preview">
     <div class="article-meta">
-      <a href="profile.html">
-        <img :src="article.author.image" />
-      </a>
+      <a href="profile.html"> <img :src="article.author.image" /> </a>
       <div class="info">
-        <a
-          href=""
-          class="author"
-        >{{article.author.username}}</a>
+        <a href="" class="author">{{ article.author.username }}</a>
         <span class="date">January 20th</span>
       </div>
       <button class="btn btn-outline-primary btn-sm pull-xs-right">
-        <i class="ion-heart"></i> {{article.favoritesCount}}
+        <i class="ion-heart"></i> {{ article.favoritesCount }}
       </button>
     </div>
-    <a
-      href=""
-      class="preview-link"
-    >
-      <h1>
-        {{article.title}}
-      </h1>
-      <p>{{article.description}}</p>
+    <a href="" class="preview-link">
+      <h1>{{ article.title }}</h1>
+      <p>{{ article.description }}</p>
       <span>Read more...</span>
     </a>
   </div>
@@ -34,6 +24,6 @@ import { Article } from '@/store/models';
 
 @Component
 export default class ArticlePreivew extends Vue {
-  @Prop() article?: Article
+  @Prop() article?: Article;
 }
 </script>

src/router.ts

@@ -26,5 +26,10 @@ export default new Router({
       name: 'settings',
       component: () => import('@/views/Settings.vue'),
     },
+    {
+      path: '/@:username',
+      name: 'profile',
+      component: () => import('@/views/Profile.vue'),
+    },
   ],
 });

src/store/api.ts

@@ -1,5 +1,12 @@
 import axios from 'axios';
-import { UserSubmit, UserResponse, User, ArticlesResponse } from './models';
+import {
+  UserSubmit,
+  UserResponse,
+  User,
+  ArticlesResponse,
+  Profile,
+  ProfileResponse,
+} from './models';
 
 export const conduitApi = axios.create({
   baseURL: 'https://conduit.productionready.io/api',
@@ -20,7 +27,12 @@ export async function loginUser(user: UserSubmit): Promise<User> {
   return (response.data as UserResponse).user;
 }
 
+export async function fetchProfile(username: string): Promise<Profile> {
+  const response = await conduitApi.get(`/profiles/${username}`);
+  return (response.data as ProfileResponse).profile;
+}
+
 export async function getGlobalFeed() {
-  const response = await conduitApi.get('/articles')
-  return response.data as ArticlesResponse
+  const response = await conduitApi.get('/articles');
+  return response.data as ArticlesResponse;
 }

src/store/models.d.ts

@@ -1,4 +1,3 @@
-
 export interface Profile {
   username: string;
   bio?: string;
@@ -33,18 +32,20 @@ export interface Author {
   following: boolean;
 }
 
-
 export interface UserSubmit {
   email: string;
   password: string;
 }
 
 export interface UserResponse {
-  user: User
+  user: User;
+}
+
+export interface ProfileResponse {
+  profile: Profile;
 }
 
 export interface ArticlesResponse {
   articles?: (Article)[] | null;
   articlesCount: number;
 }
-

src/store/modules/articles.ts

@@ -1,29 +1,34 @@
-import { Module, VuexModule, getModule, Mutation, Action } from "vuex-module-decorators";
-import store from '@/store'
+import {
+  Module,
+  VuexModule,
+  getModule,
+  Mutation,
+  Action,
+} from 'vuex-module-decorators';
+import store from '@/store';
 import { Article } from '../models';
-import * as api from '@/store/api'
+import * as api from '@/store/api';
+type FeedType = 'global' | 'user'
 
 @Module({
   dynamic: true,
   namespaced: true,
   name: 'articles',
-  store
+  store,
 })
 class ArticlesModule extends VuexModule {
-  globalFeed: Article[] = []
-  userFeed: Article[] = []
+  feed: Article[] = [];
 
   @Mutation
-  setGlobalFeed(articles: Article[]) {
-    this.globalFeed = articles
+  setFeed(articles: Article[]) {
+    this.feed = articles;
   }
 
-  @Action({commit: 'setGlobalFeed'})
-  async refreshGlobalFeed() {
-    const globalFeed = await api.getGlobalFeed()
-    return globalFeed.articles
+  @Action({ commit: 'setFeed' })
+  async refreshFeed(feedType: FeedType) {
+    const globalFeed = await api.getGlobalFeed();
+    return globalFeed.articles;
   }
 }
 
-
-export default getModule(ArticlesModule)
+export default getModule(ArticlesModule);

src/store/modules/users.ts

@@ -1,29 +1,42 @@
-import { VuexModule, Module, getModule, MutationAction, Mutation, Action } from 'vuex-module-decorators'
-import store from '@/store'
-import { User, Profile, UserSubmit } from '../models';
-import { loginUser } from '../api';
+import { getModule, Module, Mutation, MutationAction, VuexModule } from 'vuex-module-decorators';
+import store from '@/store';
+import { Profile, User, UserSubmit } from '../models';
+import { fetchProfile, loginUser } from '../api';
 
 @Module({
   namespaced: true,
   name: 'users',
   store,
-  dynamic: true
+  dynamic: true,
 })
 class UsersModule extends VuexModule {
   user: User | null = null
   profile: Profile | null = null
 
   @Mutation
-  setUser(user: User) { this.user = user }
+  setUser(user: User) {
+    this.user = user;
+  }
+
+  @Mutation
+  setProfile(profile: Profile) {
+    this.profile = profile;
+  }
 
   get username() {
-    return this.user && this.user.username || null
+    return (this.user && this.user.username) || null;
   }
 
-  @Action({commit: 'setUser'})
+  @MutationAction
   async login(userSubmit: UserSubmit) {
-    const user = await loginUser(userSubmit)
-    return user
+    const user = await loginUser(userSubmit);
+    return { user };
+  }
+
+  @MutationAction
+  async loadProfile(username: string) {
+    const profile = await fetchProfile(username);
+    return { profile };
   }
 }
 

src/views/Home.vue

@@ -22,9 +22,9 @@
           </div>
 
           <ArticlePreview
-          v-for="article in feed"
-          :article="article"
-          :key="article.slug"
+            v-for="article in feed"
+            :article="article"
+            :key="article.slug"
           ></ArticlePreview>
         </div>
 
@@ -51,22 +51,22 @@
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator';
-import ArticlePreview from '@/components/article/ArticlePreview.vue'
-import articles from '@/store/modules/articles'
+import ArticlePreview from '@/components/article/ArticlePreview.vue';
+import articles from '@/store/modules/articles';
 import { Article } from '@/store/models';
 
 @Component({
   components: {
-    ArticlePreview
-  }
+    ArticlePreview,
+  },
 })
-export default class  extends Vue {
-  feed: Article[] = []
+export default class extends Vue {
+  feed: Article[] = [];
 
   created() {
-    articles.refreshGlobalFeed().then(() => {
-      this.feed = articles.globalFeed
-    })
+    articles.refreshFeed('global').then(() => {
+      this.feed = articles.feed;
+    });
   }
 }
 </script>