Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add logic for posts and comments #3

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,757 changes: 11,757 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@
"roboto-fontface": "^0.9.0",
"vue": "^2.5.2",
"vue-infinite-scroll": "^2.0.2",
"vue-linkify": "^1.0.1",
"vue-router": "^3.0.1",
"vuetify": "^1.0.18",
"vuex": "^3.0.1",
21 changes: 14 additions & 7 deletions src/api/PostsApi.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import http from './httpService'

const RedditApi = (() => {
// const beautifyReplies = (comments) => {
// return comments.map(comment => {
// comment.replies = comment.replies ? comment.replies.data.children.map(reply => reply.data).filter(c => c.body) : [];
// this.beautifyReplies(comment.replies);
// return comment;
// })
// }
const beautifyReplies = (comments) => {
return comments.map(comment => {
comment.replies = comment.replies ? comment.replies.data.children.map(reply => reply.data).filter(c => c.body) : []
beautifyReplies(comment.replies)
return comment
})
}

const redditCollectionToPosts = (response) => {
return response.data.data.children.map(c => c.data)
@@ -19,6 +19,13 @@ const RedditApi = (() => {
return redditCollectionToPosts(response)
},

async fetchComments (post) {
let response = await http.get(`${post.permalink}.json`)
const editedComments = response.data.map(res => res.data.children.map(c => c.data).filter(c => c.body))
.map(beautifyReplies.bind(this))
return editedComments[1]
},

async fetchMorePosts (prevPost, subreddit) {
let response = await http.get(`${subreddit}.json?count=25&after=${prevPost.name}`)
return redditCollectionToPosts(response)
19 changes: 17 additions & 2 deletions src/components/AppLayoutNavbar.vue
Original file line number Diff line number Diff line change
@@ -5,7 +5,16 @@
color="primary"
>
<v-toolbar-side-icon @click.stop="changeSidebarState"></v-toolbar-side-icon>
<v-toolbar-title>Vue Reddit PWA {{subredditTitle}}</v-toolbar-title>
<v-toolbar-title>
<span >Vue Reddit PWA {{ subredditTitle }}</span>
</v-toolbar-title>
<div v-if="!isHome" class="back-button">
<router-link :to="{ path: '/' }">
<v-btn icon>
<v-icon>reply</v-icon>
</v-btn>
</router-link>
</div>
</v-toolbar>
</template>

@@ -26,6 +35,9 @@
]),
subredditTitle () {
return this.selectedSubreddit ? `- ${this.selectedSubreddit}` : ''
},
isHome () {
return this.$route.name === 'Subreddit'
}
},
methods: {
@@ -37,5 +49,8 @@
</script>

<style>

.back-button {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe, vuetify has some prebuild button? explore it's docs

position: absolute;
right: 10px;
}
</style>
3 changes: 1 addition & 2 deletions src/components/AppLayoutSidebarSearchField.vue
Original file line number Diff line number Diff line change
@@ -2,13 +2,12 @@
<v-container class="app-layout-sidebar-search-field">
<v-layout>
<v-flex>
<v-select
<v-autocomplete
:loading="searchLoading"
:items="items"
:search-input.sync="search"
v-model="select"
label="Explore subreddits"
autocomplete
dense
cache-items
@input="onSelectionChange"
64 changes: 42 additions & 22 deletions src/components/PostsListItem.vue
Original file line number Diff line number Diff line change
@@ -1,29 +1,36 @@
<template>
<v-list-tile :key="post.title" avatar @click="" class="posts-list-item">
<v-list-tile-avatar>
<img :src="thumbnail"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-html="post.title"/>
<v-list-tile-sub-title>
<div>
Submitted {{timeAgo}} by <a>{{post.author}}</a>
</div>
<div class="posts-list-item-metrics">
<span>
<v-icon>keyboard_arrow_up</v-icon> {{post.ups}}
</span>
<a>
<v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon> {{post.num_comments}} comments
</a>
</div>
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<div class="posts-list-item">
<router-link :to="{ path: `${post.id}` }">
<v-list-tile :key="post.title" avatar @click="openPost()">
<v-list-tile-avatar>
<img :src="thumbnail"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-html="post.title"/>
<v-list-tile-sub-title>
<div>
Submitted {{timeAgo}} by <a>{{post.author}}</a>
</div>
<div class="posts-list-item-metrics">
<span>
<v-icon>keyboard_arrow_up</v-icon> {{post.ups}}
</span>
<a @click="moveToComments()">
<v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon>
{{post.num_comments}} comments
</a>
</div>
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</router-link>
</div>
</template>

<script>
import moment from 'moment'
import { mapActions } from 'vuex'

export default {
name: 'PostsListItem',
props: {
@@ -41,11 +48,20 @@
return moment(date).fromNow()
}
},

methods: {
...mapActions('posts', [
'setSelectedPost'
]),
isURL (str) {
// eslint-disable-next-line no-useless-escape
return /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(str)
},
openPost () {
this.setSelectedPost(this.post)
window.open(
this.post.url,
'blank'
)
}
}
}
@@ -66,4 +82,8 @@
line-height: 24px;
width: 20px;
}

.posts-list-item a {
text-decoration: none;
}
</style>
132 changes: 132 additions & 0 deletions src/components/SelectedPost.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<template>
<v-card>
<v-card-title primary-title>
<div class="card-header">
<div class="card-header__statistics">
<span class="card-header__statistics__ups">
<v-icon>keyboard_arrow_up</v-icon> {{ selectedPost.ups }}
</span>
Submitted by <a class="card-header__statistics__author">{{ selectedPost.author }}</a> {{timeAgo}}
</div>
<div>
<h1 class="selected-post-title">{{ selectedPost.title }}</h1>
</div>
<div class="card-header__comments">
<v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon>
{{ selectedPost.num_comments }} comments
</div>
</div>
</v-card-title>
<v-card-text>
<div class="post-item__content post-item__url-content"
v-if="selectedPost.post_hint && selectedPost.post_hint === 'image'">
<img class="post-item__image" :src="selectedPost.url"/>
</div>
<div class="post-item__content post-item__url-content"
v-if="selectedPost.post_hint && selectedPost.post_hint === 'link'">
<a :href="selectedPost.url">
{{ selectedPost.url }}
</a>
</div>
<div class="post-item__content post-item__text-content"
v-if="!selectedPost.post_hint">
<span v-if="selectedPost.selftext">
{{ selectedPost.selftext }}
</span>
<a v-else :href="selectedPost.url">
{{ selectedPost.url }}
</a>
</div>
<div class="post-item__comment">
<h2 class="stepper-header">Comments</h2>
<div v-for="comment in comments">
<selected-post-comment :comment="comment"/>
</div>
</div>
</v-card-text>
<v-card-actions v-if="selectedPost.num_comments !== 0">
</v-card-actions>
</v-card>
</template>

<script>
import moment from 'moment'
import {mapGetters, mapActions} from 'vuex'
import SelectedPostComment from './SelectedPostComment'

export default {
name: 'SelectedPost',
components: { SelectedPostComment },
mounted () {
this.getComments(this.selectedPost)
},
methods: {
...mapActions('posts', [
'getComments'
])
},
computed: {
...mapGetters('posts', {
selectedPost: 'selectedPost',
comments: 'comments'
}),
timeAgo () {
const date = new Date(parseInt(this.selectedPost.created_utc, 10) * 1000)
return moment(date).fromNow()
}
}
}
</script>

<style>
.card-header {
margin-left: 10px;
}

.card-header__statistics {
margin-bottom: 10px;
}

.card-header__statistics__ups {
margin-right: 20px;
}

.card-header__statistics__author {
margin-left: 5px;
margin-right: 5px;
}

.card-header__comments {
margin-top: 10px;
}

.post-item__text-content, .post-item__url-content{
margin-left: 10px;
}

.post-item__image {
width: 80%;
height: 80%;
}

.selected-post-title {
color: rgba(0,0,0,0.54);
}

.v-stepper--vertical .v-stepper__step {
padding-left: 10px;
}

.v-stepper--vertical .v-stepper__content {
margin-left: 20px;
padding-top: 5px;
padding-left: 15px;
border-left: 1px solid #b3d4fc;
}

.stepper-header {
color: rgba(0,0,0,0.54);
margin-left: 10px;
margin-top: 15px;
}
</style>
49 changes: 49 additions & 0 deletions src/components/SelectedPostComment.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<div class="comments-item">
<div class="comments-reply">
<v-stepper vertical>
<v-stepper-step editable step="index" complete>
<div class="posts-list-item-metrics">
<span>
<span style="margin-right: 20px;">{{ comment.author }}</span>
<v-icon>keyboard_arrow_up</v-icon> {{ comment.score }}
<span style="margin-left: 20px;">{{ timeAgo }}</span>
</span>
</div>
</v-stepper-step>
<v-stepper-content step="index">
<span v-linkified>{{ comment.body }}</span>
<div v-for="reply in comment.replies">
<selected-post-comment :comment="reply"/>
</div>
</v-stepper-content>
</v-stepper>
</div>
</div>
</template>

<script>
import moment from 'moment'

export default {
name: 'SelectedPostComment',
props: {
comment: {
type: Object,
default: () => {}
}
},
computed: {
timeAgo () {
const date = new Date(parseInt(this.comment.created_utc, 10) * 1000)
return moment(date).fromNow()
}
}
}
</script>

<style>
.comments-item {
margin-top: 10px;
}
</style>
11 changes: 11 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -6,13 +6,17 @@ import 'vuetify/src/stylus/app.styl'
import {
Vuetify,
VApp,
VAutocomplete,
VBtn,
VCard,
VGrid,
VNavigationDrawer,
VFooter,
VToolbar,
VList,
VSubheader,
VSelect,
VStepper,
VProgressCircular,
VIcon,
transitions
@@ -27,17 +31,24 @@ import App from './App'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
import linkify from 'vue-linkify'

Vue.directive('linkified', linkify)

Vue.use(Vuetify, {
components: {
VApp,
VAutocomplete,
VBtn,
VCard,
VGrid,
VNavigationDrawer,
VFooter,
VToolbar,
VList,
VSubheader,
VSelect,
VStepper,
VProgressCircular,
VIcon,
transitions
6 changes: 6 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import Subreddit from '@/components/Subreddit'
import SelectedPost from '@/components/SelectedPost'

Vue.use(Router)

@@ -11,6 +12,11 @@ export default new Router({
path: '/',
name: 'Subreddit',
component: Subreddit
},
{
path: '/:id',
name: 'SelectedPost',
component: SelectedPost
}
]
})
36 changes: 34 additions & 2 deletions src/store/modules/posts.js
Original file line number Diff line number Diff line change
@@ -5,14 +5,22 @@ export default {
state: {
error: null,
isLoading: false,
posts: []
selectedPost: localStorage.getItem('selectedPost') ? JSON.parse(localStorage.getItem('selectedPost')) : '',
posts: [],
comments: []
},
getters: {
isLoading: state => state.isLoading,
error: state => state.error,
posts: state => state.posts
posts: state => state.posts,
selectedPost: state => state.selectedPost,
comments: state => state.comments
},
mutations: {
updateSelectedPost (state, payload) {
state.selectedPost = payload
localStorage.setItem('selectedPost', JSON.stringify(state.selectedPost))
},
updateError (state, payload) {
state.error = payload
},
@@ -22,6 +30,9 @@ export default {
updatePosts (state, payload) {
state.posts = payload
},
updateComments (state, payload) {
state.comments = payload
},
concatenatePosts (state, payload) {
state.posts = [...state.posts, ...payload]
}
@@ -31,6 +42,14 @@ export default {
commit('updatePosts', [])
},

resetComments ({commit}) {
commit('updateComments', [])
},

setSelectedPost ({commit}, post) {
commit('updateSelectedPost', post)
},

async getPostsFromSubreddit ({commit}, subreddit) {
commit('updateError', null)
commit('updateIsLoading', true)
@@ -55,6 +74,19 @@ export default {
} finally {
commit('updateIsLoading', false)
}
},

async getComments ({commit}, post) {
commit('updateError', null)
commit('updateIsLoading', true)
try {
let comments = await PostsApi.fetchComments(post)
commit('updateComments', comments)
} catch (err) {
commit('updateError', err.message)
} finally {
commit('updateIsLoading', false)
}
}
}
}