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'
-
-if (process.__API__) {
+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 {
+  } else {
     Firebase.initializeApp(config)
     api = process.__API__ = Firebase.database().ref(version)
+
     api.onServer = true
 
     // fetched item cache
@@ -28,6 +26,6 @@ if (process.__API__) {
         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