Skip to content

N
node-sample
Commit d4f9448a authored by Pooya Parsa's avatar Pooya Parsa
Browse files
Options

feat: rewrite project with hnpwa api

parent 2c64c349
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 509 deletions
api/create-api-client.js deleted 100755 → 0
View file @ 2c64c349
import { initializeApp, database } from "firebase/app"
export async function createAPI({ config, version }) {
await import(/* webpackChunkName: "firebase" */ "firebase/database")
initializeApp(config)
return database().ref(version)
}
api/create-api-server.js deleted 100755 → 0
View file @ 2c64c349
import Firebase from "firebase"
import LRU from "lru-cache"
export async function createAPI({ config, version }) {
let api
// this piece of code may run multiple times in development mode,
// so we attach the instantiated API to `process` to avoid duplications
if (process.__API__) {
api = process.__API__
} else {
Firebase.initializeApp(config)
api = process.__API__ = Firebase.database().ref(version)
api.onServer = true
// fetched item cache
api.cachedItems = LRU({
max: 1000,
maxAge: 1000 * 60 * 15 // 15 min cache
})
// cache the latest story ids
api.cachedIds = {}
;["top", "new", "show", "ask", "job"].forEach(type => {
api.child(`${type}stories`).on("value", snapshot => {
api.cachedIds[type] = snapshot.val()
})
})
}
return api
}
api/index.js deleted 100644 → 0
View file @ 2c64c349
// This is aliased in webpack config based on server/client build
import { createAPI } from "create-api"
const logRequests = !!process.env.DEBUG_API
let api = {}
let _api = createAPI({
version: "/v0",
config: {
databaseURL: "https://hacker-news.firebaseio.com"
}
}).then(_api => {
api = _api
// warm the front page cache every 15 min
// make sure to do this only once across all requests
if (api.onServer) {
warmCache()
}
})
function warmCache() {
if (!api.cachedIds) return
fetchItems((api.cachedIds.top || []).slice(0, 30))
setTimeout(warmCache, 1000 * 60 * 15)
}
async function fetch(child) {
logRequests && console.log(`fetching ${child}...`)
await _api
const cache = api.cachedItems
if (cache && cache.has(child)) {
logRequests && console.log(`cache hit for ${child}.`)
return cache.get(child)
} else {
return new Promise((resolve, reject) => {
api.child(child).once(
"value",
snapshot => {
const val = snapshot.val()
// mark the timestamp when this item is cached
if (val) val.__lastUpdated = Date.now()
cache && cache.set(child, val)
logRequests && console.log(`fetched ${child}.`)
resolve(val)
},
reject
)
})
}
}
export function fetchIdsByType(type) {
return api.cachedIds && api.cachedIds[type]
? Promise.resolve(api.cachedIds[type])
: fetch(`${type}stories`)
}
export function fetchItem(id) {
return fetch(`item/${id}`)
}
export function fetchItems(ids) {
return Promise.all(ids.map(id => fetchItem(id)))
}
export function fetchUser(id) {
return fetch(`user/${id}`)
}
export async function watchList(type, cb) {
let first = true
await _api
const ref = api.child(`${type}stories`)
const handler = snapshot => {
if (first) {
first = false
} else {
cb(snapshot.val())
}
}
ref.on("value", handler)
return () => {
ref.off("value", handler)
}
}
app.html deleted 100644 → 0
View file @ 2c64c349
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
<style>
#skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
#skip a:focus { position:static; width:auto; height:auto; }
</style>
</head>
<body {{ BODY_ATTRS }}>
<div id="skip"><a href="#app">skip to content</a></div>
{{ APP }}
</body>
</html>
common/api.js 0 → 100644
View file @ d4f9448a
export const feeds = {
news: { title: "News", pages: 10 },
newest: { title: "Newest", pages: 12 },
ask: { title: "Ask", pages: 2 },
show: { title: "Show", pages: 2 },
jobs: { title: "Jobs", pages: 1 }
}
export const validFeeds = Object.keys(feeds)
common/utils.js 0 → 100644
View file @ d4f9448a
export const lazy = (commit, task, optimistic, enabled) => {
// By default, do lazy operations only in client
if (enabled === undefined) {
enabled = process.client
}
// Non lazy mode
if (!enabled) {
return task().then(commit)
}
// Do real task in background
Promise.resolve(task(optimistic))
.then(commit)
.catch(console.error)
// Commit optimistic value and resolve
return Promise.resolve(commit(optimistic))
}
components/Comment.vue
View file @ d4f9448a
<template> <template>
<li v-if="comment" class="comment"> <li v-if="comment" class="comment">
<div class="by"> <div class="by">
<router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link> <router-link :to="'/user/' + comment.user">{{ comment.user }}</router-link>
{{ comment.time | timeAgo }} ago {{ comment.time | timeAgo }} ago
</div> </div>
<div class="text" v-html="comment.text" /> <div class="text" v-html="comment.content" />
<div v-if="comment.kids && comment.kids.length" :class="{ open }" class="toggle"> <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
<a @click="open = !open">{{ open ? '[-]' : '[+] ' + pluralize(comment.kids.length) + ' collapsed' }} <a @click="open = !open">{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}
</a> </a>
</div> </div>
<ul v-show="open" class="comment-children"> <ul v-show="open" class="comment-children">
<comment v-for="id in comment.kids" :key="id" :id="id" /> <comment v-for="childComment in comment.comments" :key="childComment.id" :comment="childComment" />
</ul> </ul>
</li> </li>
</template> </template>
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
export default { export default {
name: "Comment", name: "Comment",
props: { props: {
id: { comment: {
type: String, type: Object,
required: true required: true
} }
}, },
...@@ -29,11 +29,6 @@ export default { ...@@ -29,11 +29,6 @@ export default {
open: true open: true
} }
}, },
computed: {
comment() {
return this.$store.state.items[this.id]
}
},
methods: { methods: {
pluralize: n => n + (n === 1 ? " reply" : " replies") pluralize: n => n + (n === 1 ? " reply" : " replies")
} }
......
components/Item.vue
View file @ d4f9448a
<template> <template>
<li class="news-item"> <li class="news-item">
<span class="score">{{ item.score }}</span> <span class="score">{{ item.points }}</span>
<span class="title"> <span class="title">
<template v-if="item.url"> <template v-if="item.url">
<a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a> <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<span class="meta"> <span class="meta">
<span v-if="item.type !== 'job'" class="by"> <span v-if="item.type !== 'job'" class="by">
by by
<router-link :to="'/user/' + item.by">{{ item.by }}</router-link> <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
</span> </span>
<span class="time"> <span class="time">
{{ item.time | timeAgo }} ago {{ item.time | timeAgo }} ago
......
components/createListView.js deleted 100644 → 0
View file @ 2c64c349
import ItemList from "./ItemList.vue"
const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
// This is a factory function for dynamically creating root-level list views,
// since they share most of the logic except for the type of items to display.
// They are essentially higher order components wrapping ItemList.vue.
export default function createListView(type) {
return {
name: `${type}-stories-view`,
fetch({ store }) {
return store.dispatch("FETCH_LIST_DATA", { type })
},
head: {
title: camelize(type)
},
render(h) {
return h(ItemList, { props: { type } })
}
}
}
components/ItemListNav.vue → components/item-list-nav.vue
View file @ d4f9448a
<template> <template>
<div class="news-list-nav"> <div class="news-list-nav">
<router-link v-if="page > 1" :to="`/${type}/${page - 1}`">&lt; prev</router-link> <router-link v-if="page > 1" :to="`/${feed}/${page - 1}`">&lt; prev</router-link>
<a v-else class="disabled">&lt; prev</a> <a v-else class="disabled">&lt; prev</a>
<span>{{ page }}/{{ maxPage }}</span> <span>{{ page }}/{{ maxPage }}</span>
<router-link v-if="hasMore" :to="`/${type}/${page + 1}`">more &gt;</router-link> <router-link v-if="hasMore" :to="`/${feed}/${page + 1}`">more &gt;</router-link>
<a v-else class="disabled">more &gt;</a> <a v-else class="disabled">more &gt;</a>
</div> </div>
</template> </template>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script> <script>
export default { export default {
props: { props: {
type: { feed: {
type: String, type: String,
required: true required: true
}, },
......
components/lazy-wrapper.vue 0 → 100644
View file @ d4f9448a
<script>
import Spinner from "./spinner"
export default {
functional: true,
props: {
loading: {
type: Boolean,
default: false
}
},
render(h, { props, children }) {
return props.loading
? h("div", { style: { "text-align": "center" } }, [
h(Spinner, { props: { show: true } })
])
: children
}
}
</script>
layouts/default.vue
View file @ d4f9448a
...@@ -5,11 +5,9 @@ ...@@ -5,11 +5,9 @@
<router-link to="/" exact> <router-link to="/" exact>
<img class="logo" src="~assets/logo.png" alt="logo"> <img class="logo" src="~assets/logo.png" alt="logo">
</router-link> </router-link>
<router-link to="/top">Top</router-link> <router-link v-for="(list, key) in feeds" :key="key" :to="`/${key}`">
<router-link to="/new">New</router-link> {{ list.title }}
<router-link to="/show">Show</router-link> </router-link>
<router-link to="/ask">Ask</router-link>
<router-link to="/job">Jobs</router-link>
<a class="github" href="https://github.com/nuxt/hackernews" target="_blank" rel="noopener"> <a class="github" href="https://github.com/nuxt/hackernews" target="_blank" rel="noopener">
Built with Nuxt.js Built with Nuxt.js
</a> </a>
...@@ -20,6 +18,8 @@ ...@@ -20,6 +18,8 @@
</template> </template>
<script> <script>
import { feeds } from "~/common/api"
export default { export default {
head() { head() {
return { return {
...@@ -28,6 +28,9 @@ export default { ...@@ -28,6 +28,9 @@ export default {
{ rel: "canonical", href: `https://hn.nuxtjs.org${this.$route.path}` } { rel: "canonical", href: `https://hn.nuxtjs.org${this.$route.path}` }
] ]
} }
},
computed: {
feeds: () => feeds
} }
} }
</script> </script>
......
middleware/https.js deleted 100644 → 0
View file @ 2c64c349
export default ({ isDev, req, redirect }) => {
// Redirect to https
if (!isDev && req) {
const protocol =
req.headers["x-forwarded-proto"] ||
(req.connection.encrypted ? "https" : "http")
if (protocol === "http") {
return redirect(301, `https://${req.headers.host}${req.url}`)
}
}
}
nuxt.config.js
View file @ d4f9448a
module.exports = { module.exports = {
mode: "universal",
build: {
extend(config, { isClient, isDev }) {
// Run ESLint on save
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
})
}
config.resolve.alias["create-api"] = `./create-api-${
isClient ? "client" : "server"
}.js`
},
vendor: ["firebase"]
},
head: { head: {
titleTemplate: "Nuxt HN | %s", titleTemplate: "Nuxt HN | %s",
meta: [ meta: [
...@@ -28,10 +10,7 @@ module.exports = { ...@@ -28,10 +10,7 @@ module.exports = {
{ property: "twitter:card", content: "summary_large_image" }, { property: "twitter:card", content: "summary_large_image" },
{ property: "twitter:site", content: "@nuxt_js" } { property: "twitter:site", content: "@nuxt_js" }
], ],
link: [ link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "dns-prefetch", href: "https://hacker-news.firebaseio.com" }
]
}, },
loading: { loading: {
color: "#59cc93" color: "#59cc93"
...@@ -46,15 +25,17 @@ module.exports = { ...@@ -46,15 +25,17 @@ module.exports = {
description: "HackerNews clone built with Nuxt.js", description: "HackerNews clone built with Nuxt.js",
theme_color: "#188269" theme_color: "#188269"
}, },
modules: ["@nuxtjs/pwa", "@nuxtjs/component-cache"], modules: ["@nuxtjs/pwa", "@nuxtjs/component-cache", "@nuxtjs/axios"],
plugins: [ axios: {
"~/plugins/vuex-router-sync", proxy: true
"~/plugins/filters", },
"~/plugins/components" proxy: {
], "/api": {
router: { target: "https://api.hnpwa.com/v0/",
middleware: ["https"] pathRewrite: { "^/api/": "" }
}
}, },
plugins: ["~/plugins/filters"],
render: { render: {
static: { static: {
maxAge: "1y", maxAge: "1y",
......
package.json
View file @ d4f9448a
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
"node": ">=8.0" "node": ">=8.0"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.1.1",
"@nuxtjs/component-cache": "^1.1.1", "@nuxtjs/component-cache": "^1.1.1",
"@nuxtjs/pwa": "2.0.8", "@nuxtjs/pwa": "2.0.8",
"nuxt-edge": "^2.0.0-25364965.06067bf", "nuxt-edge": "^2.0.0-25364965.06067bf",
......
components/ItemList.vue → pages/_feed/_page.vue
View file @ d4f9448a
<template> <template>
<div class="news-view view"> <div class="view">
<item-list-nav :type="type" :page="page" :max-page="maxPage" /> <item-list-nav :feed="feed" :page="page" :max-page="maxPage" />
<transition :name="transition" mode="out-in">
<div v-if="displayedPage > 0" :key="displayedPage" class="news-list"> <lazy-wrapper :loading="loading">
<transition-group tag="ul" name="item"> <transition :name="transition" mode="out-in">
<item v-for="item in displayedItems" :key="item.id" :item="item" /> <div :key="displayedPage" class="news-list">
</transition-group> <transition-group tag="ul" name="item">
</div> <item v-for="item in displayedItems" :key="item.id" :item="item" />
</transition> </transition-group>
<item-list-nav :type="type" :page="page" :max-page="maxPage" /> </div>
</transition>
<item-list-nav :feed="feed" :page="page" :max-page="maxPage" />
</lazy-wrapper>
</div> </div>
</template> </template>
<script> <script>
import { watchList } from "../api" import Item from "~/components/item.vue"
import Item from "./Item.vue" import ItemListNav from "~/components/item-list-nav.vue"
import ItemListNav from "./ItemListNav.vue" import LazyWrapper from "~/components/lazy-wrapper"
import { feeds, validFeeds } from "~/common/api"
export default { export default {
name: "ItemList",
components: { components: {
Item, Item,
ItemListNav ItemListNav,
LazyWrapper
},
validate({ params: { feed } }) {
return validFeeds.includes(feed)
},
fetch({ store, params: { feed, page = 1 } }) {
return store.dispatch("FETCH_FEED", { feed, page })
}, },
props: {
type: { head() {
type: String, return {
required: true title: feeds[this.$route.params.feed].title
} }
}, },
data() { data() {
return { return {
transition: "slide-right", transition: "slide-right",
displayedPage: Number(this.$route.params.page) || 1, displayedPage: Number(this.page) || 1
displayedItems: this.$store.getters.activeItems
} }
}, },
computed: { computed: {
feed() {
return this.$route.params.feed
},
page() { page() {
return Number(this.$route.params.page) || 1 return Number(this.$route.params.page) || 1
}, },
maxPage() { maxPage() {
const { itemsPerPage, lists } = this.$store.state return feeds[this.feed].pages
return Math.ceil(lists[this.type].length / itemsPerPage) },
pageData() {
return this.$store.state.feeds[this.feed][this.page]
},
displayedItems() {
return this.pageData.map(id => this.$store.state.items[id])
},
loading() {
return this.displayedItems.length === 0
} }
}, },
watch: { watch: {
page(to, from) { page: "pageChanged"
console.log("Page changed", to, from)
this.loadItems(to, from)
}
}, },
async beforeMount() { mounted() {
if (this.$root._isMounted) { this.pageChanged(this.page)
this.loadItems(this.page)
}
// watch the current list for realtime updates
this.unwatchList = await watchList(this.type, ids => {
this.$store.commit("SET_LIST", { type: this.type, ids })
this.$store.dispatch("ENSURE_ACTIVE_ITEMS").then(() => {
this.displayedItems = this.$store.getters.activeItems
})
})
},
beforeDestroy() {
this.unwatchList()
}, },
methods: { methods: {
loadItems(to = this.page, from = -1) { pageChanged(to, from = -1) {
this.$nuxt.$loading.start() if (to < 0 || to > this.maxPage) {
this.$router.replace(`/${this.feed}/1`)
return
}
// Prefetch next page
this.$store this.$store
.dispatch("FETCH_LIST_DATA", { .dispatch("FETCH_FEED", {
type: this.type feed: this.feed,
}) page: this.page + 1,
.then(() => { prefetch: true
if (this.page < 0 || this.page > this.maxPage) {
this.$router.replace(`/${this.type}/1`)
return
}
this.transition =
from === -1 ? null : to > from ? "slide-left" : "slide-right"
this.displayedPage = to
this.displayedItems = this.$store.getters.activeItems
this.$nuxt.$loading.finish()
}) })
.catch(() => {})
this.transition =
from === -1 ? null : to > from ? "slide-left" : "slide-right"
this.displayedPage = to
} }
} }
} }
......
pages/ask/_page.vue deleted 100644 → 0
View file @ 2c64c349
<script>
import createListView from "~/components/createListView"
export default createListView("ask")
</script>
pages/index.vue
View file @ d4f9448a
<script> <script>
import { validFeeds } from "~/common/api"
export default { export default {
fetch({ redirect }) { fetch({ redirect }) {
redirect("/top") redirect("/" + validFeeds[0])
} }
} }
</script> </script>
pages/item/_id.vue
View file @ d4f9448a
<template> <template>
<div v-if="item" class="item-view view" > <div class="item-view view" >
<template v-if="item"> <div class="item-view-header">
<div class="item-view-header"> <a :href="item.url" target="_blank">
<a :href="item.url" target="_blank"> <h1 v-html="item.title" />
<h1 v-html="item.title" /> </a>
</a> <span v-if="item.url" class="host">
<span v-if="item.url" class="host"> ({{ item.url | host }})
({{ item.url | host }}) </span>
</span> <p class="meta">
<p class="meta"> {{ item.points }} points | by
{{ item.score }} points | by <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
<router-link :to="'/user/' + item.by">{{ item.by }}</router-link> {{ item.time | timeAgo }} ago
{{ item.time | timeAgo }} ago </p>
</p> </div>
</div> <div class="item-view-comments">
<div class="item-view-comments"> <lazy-wrapper :loading="item.loading">
<p class="item-view-comments-header"> <p class="item-view-comments-header">
{{ item.kids ? item.descendants + ' comments' : 'No comments yet.' }} {{ item.comments ? item.comments.length + ' comments' : 'No comments yet.' }}
<spinner :show="loading"/>
</p> </p>
<ul v-if="!loading" class="comment-children"> <ul class="comment-children">
<comment v-for="id in item.kids" :key="id" :id="id"/> <comment v-for="comment in item.comments" :key="comment.id" :comment="comment"/>
</ul> </ul>
</div> </lazy-wrapper>
</template> </div>
</div> </div>
</template> </template>
<script> <script>
import Spinner from "~/components/Spinner.vue" import Comment from "~/components/comment.vue"
import Comment from "~/components/Comment.vue" import LazyWrapper from "~/components/lazy-wrapper"
export default { export default {
name: "ItemView", name: "ItemView",
components: { Spinner, Comment }, components: { Comment, LazyWrapper },
data: () => ({
loading: true
}),
head() { head() {
return { return {
...@@ -46,54 +41,17 @@ export default { ...@@ -46,54 +41,17 @@ export default {
}, },
computed: { computed: {
id() {
return this.$route.params.id
},
item() { item() {
return this.$store.state.items[this.$route.params.id] return this.$store.state.items[this.id]
} }
}, },
// We only fetch the item itself before entering the view, because fetch({ store, params: { id } }) {
// it might take a long time to load threads with hundreds of comments return store.dispatch("FETCH_ITEM", { id })
// due to how the HN Firebase API works.
asyncData({ store, route: { params: { id } } }) {
return store.dispatch("FETCH_ITEMS", { ids: [id] })
},
// refetch comments if item changed
watch: {
item: "fetchComments"
},
// Fetch comments when mounted on the client
beforeMount() {
this.fetchComments()
},
methods: {
fetchComments() {
this.loading = true
fetchComments(this.$store, this.item).then(() => {
this.loading = false
})
}
}
}
// recursively fetch all descendent comments
function fetchComments(store, item) {
if (item && item.kids) {
return store
.dispatch("FETCH_ITEMS", {
ids: item.kids
})
.then(() =>
Promise.all(
item.kids.map(id => {
return fetchComments(store, store.state.items[id])
})
)
)
} }
return Promise.resolve()
} }
</script> </script>
......
pages/job/_page.vue deleted 100644 → 0
View file @ 2c64c349
<script>
import createListView from "~/components/createListView"
export default createListView("job")
</script>
pages/new/_page.vue deleted 100644 → 0
View file @ 2c64c349
<script>
import createListView from "~/components/createListView"
export default createListView("new")
</script>
pages/show/_page.vue deleted 100644 → 0
View file @ 2c64c349
<script>
import createListView from "~/components/createListView"
export default createListView("show")
</script>
pages/top/_page.vue deleted 100644 → 0
View file @ 2c64c349
<script>
import createListView from "~/components/createListView"
export default createListView("top")
</script>
pages/user/_id.vue
View file @ d4f9448a
...@@ -2,28 +2,34 @@ ...@@ -2,28 +2,34 @@
<div class="user-view view"> <div class="user-view view">
<template v-if="user"> <template v-if="user">
<h1>User : {{ user.id }}</h1> <h1>User : {{ user.id }}</h1>
<ul class="meta"> <lazy-wrapper :loading="user.loading">
<li> <ul class="meta">
<span class="label">Created:</span> {{ user.created | timeAgo }} ago</li> <li>
<li> <span class="label">Created:</span> {{ user.created_time | timeAgo }} ago</li>
<span class="label">Karma:</span> {{ user.karma }}</li> <li>
<li v-if="user.about" class="about" v-html="user.about" /> <span class="label">Karma:</span> {{ user.karma || '-' }}</li>
</ul> <li v-if="user.about" class="about" v-html="user.about" />
</ul>
</lazy-wrapper>
<p class="links"> <p class="links">
<a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> | <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> |
<a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a> <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
</p> </p>
</template> </template>
<template v-else-if="user === false"> <template v-else>
<h1>User not found.</h1> <h1>User not found.</h1>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import LazyWrapper from "~/components/lazy-wrapper"
export default { export default {
name: "UserView", name: "UserView",
components: { LazyWrapper },
computed: { computed: {
user() { user() {
return this.$store.state.users[this.$route.params.id] return this.$store.state.users[this.$route.params.id]
...@@ -31,9 +37,7 @@ export default { ...@@ -31,9 +37,7 @@ export default {
}, },
head() { head() {
return { return this.user ? this.user.id : "User not found"
title: this.user.id || "User not found"
}
}, },
fetch({ store, route: { params: { id } } }) { fetch({ store, route: { params: { id } } }) {
......
plugins/components.js deleted 100644 → 0
View file @ 2c64c349
// Import common components to optimize chunks size
import "~/components/createListView"
plugins/vuex-router-sync.js deleted 100644 → 0
View file @ 2c64c349
import { sync } from "vuex-router-sync"
export default function({ app, store }) {
sync(store, app.router)
}
store/actions.js deleted 100644 → 0
View file @ 2c64c349
import { fetchUser, fetchItems, fetchIdsByType } from "../api"
export default {
// ensure data for rendering given list type
FETCH_LIST_DATA: ({ commit, dispatch }, { type }) => {
commit("SET_ACTIVE_TYPE", { type })
return fetchIdsByType(type)
.then(ids => commit("SET_LIST", { type, ids }))
.then(() => dispatch("ENSURE_ACTIVE_ITEMS"))
},
// ensure all active items are fetched
ENSURE_ACTIVE_ITEMS: ({ dispatch, getters }) => {
return dispatch("FETCH_ITEMS", {
ids: getters.activeIds
})
},
FETCH_ITEMS: ({ commit, state }, { ids }) => {
// on the client, the store itself serves as a cache.
// only fetch items that we do not already have, or has expired (3 minutes)
const now = Date.now()
ids = ids.filter(id => {
const item = state.items[id]
if (!item) {
return true
}
if (now - item.__lastUpdated > 1000 * 60 * 3) {
return true
}
return false
})
if (ids.length) {
return fetchItems(ids).then(items => commit("SET_ITEMS", { items }))
} else {
return Promise.resolve()
}
},
FETCH_USER: ({ commit, state }, { id }) => {
return state.users[id]
? Promise.resolve(state.users[id])
: fetchUser(id).then(user => commit("SET_USER", { id, user }))
}
}
store/getters.js deleted 100644 → 0
View file @ 2c64c349
export default {
// ids of the items that should be currently displayed based on
// current list type and current pagination
activeIds(state) {
const { activeType, itemsPerPage, lists } = state
if (!activeType) {
return []
}
const page = Number(state.route.params.page) || 1
const start = (page - 1) * itemsPerPage
const end = page * itemsPerPage
return lists[activeType].slice(start, end)
},
// items that should be currently displayed.
// this Array may not be fully fetched.
activeItems(state, getters) {
return getters.activeIds.map(id => state.items[id]).filter(_ => _)
}
}
store/index.js
View file @ d4f9448a
import Vuex from "vuex" import Vue from "vue"
import actions from "./actions" import { validFeeds } from "~/common/api"
import mutations from "./mutations" import { lazy } from "~/common/utils"
import getters from "./getters" import { CancelToken } from "axios"
export default () => { export default {
return new Vuex.Store({ // =================================================
state: { // State
activeType: null, // =================================================
itemsPerPage: 20, state: () => {
const state = {
items: { items: {
/* [id: number]: Item */ /* [id: number]: Item */
}, },
users: { users: {
/* [id: string]: User */ /* [id: string]: User */
}, },
lists: { feeds: {
top: [ /* [page: number] : [ [id: number] ] */
/* number */
],
new: [],
show: [],
ask: [],
job: []
} }
}
validFeeds.forEach(feed => {
state.feeds[feed] = {}
})
return state
},
// =================================================
// Actions
// =================================================
actions: {
FETCH_FEED({ commit, state }, { feed, page, prefetch }) {
if (!prefetch) {
if (this.feedCancelSource) {
this.feedCancelSource.cancel(
"priorotize feed: " + feed + " page: " + page
)
}
this.feedCancelSource = CancelToken.source()
}
return lazy(
items => {
const ids = items.map(item => item.id)
commit("SET_FEED", { feed, ids, page })
commit("SET_ITEMS", { items })
},
() =>
this.$axios.$get(`/api/${feed}/${page}.json`, {
cancelToken: this.feedCancelSource && this.feedCancelSource.token
}),
(state.feeds[feed][page] || []).map(id => state.items[id])
)
},
FETCH_ITEM({ commit, state }, { id }) {
return lazy(
item => commit("SET_ITEM", { item }),
() => this.$axios.$get(`/api/item/${id}.json`),
Object.assign({ id, loading: true, comments: [] }, state.items[id])
)
},
FETCH_USER({ state, commit }, { id }) {
return lazy(
user => commit("SET_USER", { id, user }),
() => this.$axios.$get(`/api/user/${id}.json`),
Object.assign({ id, loading: true }, state.users[id])
)
}
},
// =================================================
// Mutations
// =================================================
mutations: {
SET_FEED: (state, { feed, ids, page }) => {
Vue.set(state.feeds[feed], page, ids)
},
SET_ITEM: (state, { item }) => {
if (item) {
Vue.set(state.items, item.id, item)
}
},
SET_ITEMS: (state, { items }) => {
items.forEach(item => {
if (item) {
Vue.set(state.items, item.id, item)
}
})
}, },
actions, SET_USER: (state, { id, user }) => {
mutations, Vue.set(state.users, id, user || false) /* false means user not found */
getters }
}) }
} }
store/mutations.js deleted 100644 → 0
View file @ 2c64c349
import Vue from "vue"
export default {
SET_ACTIVE_TYPE: (state, { type }) => {
state.activeType = type
},
SET_LIST: (state, { type, ids }) => {
state.lists[type] = ids
},
SET_ITEMS: (state, { items }) => {
items.forEach(item => {
if (item) {
Vue.set(state.items, item.id, item)
}
})
},
SET_USER: (state, { id, user }) => {
Vue.set(state.users, id, user || false) /* false means user not found */
}
}
yarn.lock
View file @ d4f9448a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment