Skip to content

Commit 478c50a

Browse files
article preview component and articles module
Signed-off-by: Arnav Gupta <[email protected]>
1 parent a6fdc4b commit 478c50a

File tree

6 files changed

+128
-44
lines changed

6 files changed

+128
-44
lines changed
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="article-preview">
3+
<div class="article-meta">
4+
<a href="profile.html">
5+
<img :src="article.author.image" />
6+
</a>
7+
<div class="info">
8+
<a
9+
href=""
10+
class="author"
11+
>{{article.author.username}}</a>
12+
<span class="date">January 20th</span>
13+
</div>
14+
<button class="btn btn-outline-primary btn-sm pull-xs-right">
15+
<i class="ion-heart"></i> {{article.favoritesCount}}
16+
</button>
17+
</div>
18+
<a
19+
href=""
20+
class="preview-link"
21+
>
22+
<h1>
23+
{{article.title}}
24+
</h1>
25+
<p>{{article.description}}</p>
26+
<span>Read more...</span>
27+
</a>
28+
</div>
29+
</template>
30+
31+
<script lang="ts">
32+
import { Vue, Component, Prop } from 'vue-property-decorator';
33+
import { Article } from '@/store/models';
34+
35+
@Component
36+
export default class ArticlePreivew extends Vue {
37+
@Prop() article?: Article
38+
}
39+
</script>

src/store/api.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios from 'axios';
2-
import { UserSubmit, UserResponse, User } from './models';
2+
import { UserSubmit, UserResponse, User, ArticlesResponse } from './models';
33

44
export const conduitApi = axios.create({
55
baseURL: 'https://conduit.productionready.io/api',
@@ -19,3 +19,8 @@ export async function loginUser(user: UserSubmit): Promise<User> {
1919
});
2020
return (response.data as UserResponse).user;
2121
}
22+
23+
export async function getGlobalFeed() {
24+
const response = await conduitApi.get('/articles')
25+
return response.data as ArticlesResponse
26+
}

src/store/models.d.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,26 @@ export interface User {
1414
image?: string;
1515
}
1616

17+
export interface Article {
18+
slug: string;
19+
title: string;
20+
description: string;
21+
body: string;
22+
tagList?: (string)[] | null;
23+
createdAt: string;
24+
updatedAt: string;
25+
favorited: boolean;
26+
favoritesCount: number;
27+
author: Author;
28+
}
29+
export interface Author {
30+
username: string;
31+
bio: string;
32+
image: string;
33+
following: boolean;
34+
}
35+
36+
1737
export interface UserSubmit {
1838
email: string;
1939
password: string;
@@ -22,3 +42,9 @@ export interface UserSubmit {
2242
export interface UserResponse {
2343
user: User
2444
}
45+
46+
export interface ArticlesResponse {
47+
articles?: (Article)[] | null;
48+
articlesCount: number;
49+
}
50+

src/store/modules/articles.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Module, VuexModule, getModule, Mutation, Action } from "vuex-module-decorators";
2+
import store from '@/store'
3+
import { Article } from '../models';
4+
import * as api from '@/store/api'
5+
6+
@Module({
7+
dynamic: true,
8+
namespaced: true,
9+
name: 'articles',
10+
store
11+
})
12+
class ArticlesModule extends VuexModule {
13+
globalFeed: Article[] = []
14+
userFeed: Article[] = []
15+
16+
@Mutation
17+
setGlobalFeed(articles: Article[]) {
18+
this.globalFeed = articles
19+
}
20+
21+
@Action({commit: 'setGlobalFeed'})
22+
async refreshGlobalFeed() {
23+
const globalFeed = await api.getGlobalFeed()
24+
return globalFeed.articles
25+
}
26+
}
27+
28+
29+
export default getModule(ArticlesModule)

src/views/Home.vue

Lines changed: 27 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,48 +21,11 @@
2121
</ul>
2222
</div>
2323

24-
<div class="article-preview">
25-
<div class="article-meta">
26-
<a href="profile.html"
27-
><img src="http://i.imgur.com/Qr71crq.jpg"
28-
/></a>
29-
<div class="info">
30-
<a href="" class="author">Eric Simons</a>
31-
<span class="date">January 20th</span>
32-
</div>
33-
<button class="btn btn-outline-primary btn-sm pull-xs-right">
34-
<i class="ion-heart"></i> 29
35-
</button>
36-
</div>
37-
<a href="" class="preview-link">
38-
<h1>How to build webapps that scale</h1>
39-
<p>This is the description for the post.</p>
40-
<span>Read more...</span>
41-
</a>
42-
</div>
43-
44-
<div class="article-preview">
45-
<div class="article-meta">
46-
<a href="profile.html"
47-
><img src="http://i.imgur.com/N4VcUeJ.jpg"
48-
/></a>
49-
<div class="info">
50-
<a href="" class="author">Albert Pai</a>
51-
<span class="date">January 20th</span>
52-
</div>
53-
<button class="btn btn-outline-primary btn-sm pull-xs-right">
54-
<i class="ion-heart"></i> 32
55-
</button>
56-
</div>
57-
<a href="" class="preview-link">
58-
<h1>
59-
The song you won't ever stop singing. No matter how hard you
60-
try.
61-
</h1>
62-
<p>This is the description for the post.</p>
63-
<span>Read more...</span>
64-
</a>
65-
</div>
24+
<ArticlePreview
25+
v-for="article in feed"
26+
:article="article"
27+
:key="article.slug"
28+
></ArticlePreview>
6629
</div>
6730

6831
<div class="col-md-3">
@@ -85,3 +48,25 @@
8548
</div>
8649
</div>
8750
</template>
51+
52+
<script lang="ts">
53+
import { Vue, Component } from 'vue-property-decorator';
54+
import ArticlePreview from '@/components/article/ArticlePreview.vue'
55+
import articles from '@/store/modules/articles'
56+
import { Article } from '@/store/models';
57+
58+
@Component({
59+
components: {
60+
ArticlePreview
61+
}
62+
})
63+
export default class extends Vue {
64+
feed: Article[] = []
65+
66+
created() {
67+
articles.refreshGlobalFeed().then(() => {
68+
this.feed = articles.globalFeed
69+
})
70+
}
71+
}
72+
</script>

src/views/Login.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</div>
4242
</template>
4343

44-
<script>
44+
<script lang="ts">
4545
import { Vue, Component } from 'vue-property-decorator';
4646
import users from '@/store/modules/users'
4747

0 commit comments

Comments
 (0)