Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bd0e795

Browse files
committed
✨ last commit
1 parent 3c8e8b8 commit bd0e795

File tree

9 files changed

+134
-11
lines changed

9 files changed

+134
-11
lines changed
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div class="comment">
3+
<span class="comment-meta">{{ data.user }} {{ data.time_ago }}</span>
4+
<div class="comment-body" v-html="data.content"></div>
5+
<div class="nested">
6+
<comment v-for="comment in data.comments" :key="comment.id" :data="comment"></comment>
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: [
14+
'data',
15+
],
16+
};
17+
</script>
18+
19+
<style>
20+
span.comment-meta {
21+
display: block;
22+
font-size: 8pt;
23+
color: #828282;
24+
margin-left: 10px;
25+
}
26+
27+
.comment {
28+
margin-bottom: 20px;
29+
max-width: 1215px;
30+
overflow: auto;
31+
font-family: Verdana, Geneva, sans-serif;
32+
font-size: 9pt;
33+
}
34+
35+
.comment-body {
36+
margin-left: 20px;
37+
}
38+
39+
.nested {
40+
margin-left: 30px;
41+
}
42+
43+
.nested .comment {
44+
margin-bottom: 0;
45+
}
46+
</style>

‎hacker-news-clone/src/components/Navbar.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
<div id="navbar">
33
<img src="../assets/logo.gif" id="logo">
44
<span>
5-
<router-link to="/">Hacker News</router-link>
5+
<router-link to="/news">Hacker News</router-link>
66
</span>
77
<ul id="menu">
8-
<li class="item"><router-link to="/new">new</router-link></li>
8+
<li class="item"><router-link to="/news">news</router-link></li>
9+
<li class="item"><router-link to="/newest">newest</router-link></li>
910
<li class="item"><router-link to="/ask">ask</router-link></li>
1011
<li class="item"><router-link to="/show">show</router-link></li>
11-
<li class="item"><router-link to="/jobs">jobs</router-link></li>
12+
<li class="item"><router-link to="/jobs">jobs</router-link></li>
1213
</ul>
1314
</div>
1415
</template>

‎hacker-news-clone/src/components/NewsItem.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="news-item">
3-
<a href="" class="title">{{ item.title }}</a>
3+
<a :href="item.url"target="_blank" class="title">{{ item.title }}</a>
44
<span class="domain">({{ item.domain }})</span>
55
<div class="subtext">
6-
{{ item.points }} points by {{ item.user }} {{ item.time_ago }} | {{ item.comments_count }} comments
6+
{{ item.points }} points by {{ item.user }} {{ item.time_ago }} | <router-link:to="{name: 'news-detail', params: { id: item.id }}">{{ item.comments_count }} comments</router-link>
77
</div>
88
</div>
99
</template>
@@ -29,7 +29,7 @@ export default {
2929
}
3030
3131
a.title {
32-
color: #828282;
32+
color: #000;
3333
}
3434
3535
span.domain {

‎hacker-news-clone/src/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ import App from './App.vue';
55
import router from './router';
66
import store from './store';
77

8+
import Comment from './components/Comment.vue';
9+
810
Vue.config.productionTip = false;
911

1012
Vue.use(plugin);
1113
Vue.use(hooks);
1214

15+
Vue.component('comment', Comment);
16+
1317
new Vue({
1418
router,
1519
store,

‎hacker-news-clone/src/router.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import Vue from 'vue';
22
import Router from 'vue-router';
33
import News from './views/News.vue';
4+
import NewsDetail from './views/NewsDetail.vue';
45

56
Vue.use(Router);
67

78
export default new Router({
89
routes: [
10+
{
11+
path: '/news/:id',
12+
name: 'news-detail',
13+
component: NewsDetail,
14+
},
915
{
1016
path: '/:type',
1117
name: 'news',

‎hacker-news-clone/src/store.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export default new Vuex.Store({
3737
actions: {
3838
async [types.GET_NEWS]({ commit }, { type, page }) {
3939
commit(types.SET_LOADING, true);
40+
if (page === 1) {
41+
commit(types.SET_NEWS_ITEMS, []);
42+
}
4043
const res = await fetch(`${BASE_URL}/${type}?page=${page}`);
4144
const items = await res.json();
4245
if (page === 1) {
@@ -46,5 +49,12 @@ export default new Vuex.Store({
4649
}
4750
commit(types.SET_LOADING, false);
4851
},
52+
async [types.GET_NEWS_DETAIL]({ commit }, id) {
53+
commit(types.SET_LOADING, true);
54+
const res = await fetch(`${BASE_URL}/item/${id}`);
55+
const detail = await res.json();
56+
commit(types.SET_CURRENT_NEWS, detail);
57+
commit(types.SET_LOADING, false);
58+
},
4959
},
5060
});

‎hacker-news-clone/src/types.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export default {
44
SET_CURRENT_NEWS: 'SET_CURRENT_NEWS',
55
SET_LOADING: 'SET_LOADING',
66
GET_NEWS: 'GET_NEWS',
7+
GET_NEWS_DETAIL: 'GET_NEWS_DETAIL',
78
};

‎hacker-news-clone/src/views/News.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
</template>
1414

1515
<script>
16-
import { value, onCreated } from 'vue-function-api';
17-
import { useState, useActions } from '@u3u/vue-hooks';
16+
import { value, watch, onCreated } from 'vue-function-api';
17+
import { useState, useActions, useRouter } from '@u3u/vue-hooks';
1818
1919
import types from '../types';
2020
import NewsItem from '../components/NewsItem.vue';
@@ -28,18 +28,28 @@ export default {
2828
const { newsList, loading } = useState(['newsList', 'loading']);
2929
const { GET_NEWS } = useActions([types.GET_NEWS]);
3030
const currentPage = value(1);
31+
const { route } = useRouter();
3132
32-
onCreated(() => {
33+
const setType = (type) => {
34+
currentPage.value = 1;
3335
GET_NEWS({
34-
type:'news',
36+
type,
3537
page: currentPage.value,
3638
});
39+
};
40+
41+
watch(() => route.value.params.type, (type) => {
42+
setType(type);
43+
});
44+
45+
onCreated(() => {
46+
setType(route.value.params.type);
3747
});
3848
3949
const loadMore = () => {
4050
currentPage.value += 1;
4151
GET_NEWS({
42-
type: 'news',
52+
type: route.value.params.type,
4353
page: currentPage.value,
4454
});
4555
};
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="detail">
3+
<div v-if="loading">
4+
<h3>Loading...</h3>
5+
</div>
6+
<div class="news-detail" v-if="!loading">
7+
<news-item :item="currentNews"></news-item>
8+
<comment v-for="comment in currentNews.comments" :key="comment.id" :data="comment"></comment>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { onCreated } from 'vue-function-api';
15+
import { useState, useActions, useRouter } from '@u3u/vue-hooks';
16+
17+
import types from '../types';
18+
import NewsItem from '../components/NewsItem.vue';
19+
20+
export default {
21+
components: {
22+
NewsItem,
23+
},
24+
setup() {
25+
const { currentNews, loading } = useState(['currentNews', 'loading']);
26+
const { GET_NEWS_DETAIL } = useActions([types.GET_NEWS_DETAIL]);
27+
const { route } = useRouter();
28+
29+
onCreated(() => {
30+
GET_NEWS_DETAIL(route.value.params.id);
31+
});
32+
33+
return {
34+
currentNews,
35+
loading,
36+
};
37+
},
38+
};
39+
</script>
40+
41+
<style>
42+
.news-detail .news-item::before {
43+
content: none;
44+
}
45+
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /