split api into separate folder

src/store/create-api-client.js → src/api/create-api-client.js

 import Firebase from 'firebase/app'
 import 'firebase/database'
 
-const config = {
-  databaseURL: 'https://hacker-news.firebaseio.com'
+export function createAPI ({ config, version }) {
+  Firebase.initializeApp(config)
+  return Firebase.database().ref(version)
 }
-const version = '/v0'
-
-Firebase.initializeApp(config)
-const api = Firebase.database().ref(version)
-export default api
\ No newline at end of file

src/store/create-api-server.js → src/api/create-api-server.js

 import Firebase from 'firebase'
 import LRU from 'lru-cache'
-import { fetchItems } from './api'
 
-let api
-const config = {
-  databaseURL: 'https://hacker-news.firebaseio.com'
-}
-const version = '/v0'
+export 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)
 
-if (process.__API__) {
-  api = process.__API__
-} else {
-  Firebase.initializeApp(config)
-  api = process.__API__ = Firebase.database().ref(version)
-  api.onServer = true
+    api.onServer = true
 
-  // fetched item cache
-  api.cachedItems = LRU({
-    max: 1000,
-    maxAge: 1000 * 60 * 15 // 15 min cache
-  })
+    // 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()
+    // 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
 }
-
-export default api

src/store/api.js → src/api/index.js

 // this is aliased in webpack config based on server/client build
-import api from 'create-api'
+import { createAPI } from 'create-api'
+
+const api = createAPI({
+  version: '/v0',
+  config: {
+    databaseURL: 'https://hacker-news.firebaseio.com'
+  }
+})
 
 // warm the front page cache every 15 min
 // make sure to do this only once across all requests
-if (api.onServer && !api.warmCacheStarted) {
-  api.warmCacheStarted = true
+if (api.onServer) {
   warmCache()
 }
 

src/components/ItemList.vue

@@ -22,7 +22,7 @@
 <script>
 import Spinner from './Spinner.vue'
 import Item from './Item.vue'
-import { watchList } from '../store/api'
+import { watchList } from '../api'
 
 export default {
   name: 'item-list',

src/store/actions.js

@@ -2,7 +2,7 @@ import {
   fetchUser,
   fetchItems,
   fetchIdsByType
-} from './api'
+} from '../api'
 
 export default {
   // ensure data for rendering given list type