From 3a3adb3e5a6760d8e52a9a873899dbbc8a0d8561 Mon Sep 17 00:00:00 2001
From: Ian Walter <public@iankwalter.com>
Date: Fri, 25 May 2018 11:33:37 -0400
Subject: [PATCH] Adding comments

---
 README.md           | 16 +++++++++++++++-
 src/router.js       |  2 ++
 src/store/index.js  |  4 ++++
 src/store/people.js | 12 +++++++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b733d8ba..994e2e28 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,20 @@
 3. Run `npm start`.
 4. Navigate to `http://localhost:8080`
 
+## Resources
+
+Here are some software projects / technologies that are used in this
+application:
+
+1. [VueJS](https://vuejs.org): JavaScript framework.
+2. [Vue Router](https://router.vuejs.org): VueJS routing library for Single
+   Page Applications (SPA).
+3. [Vuex](https://vuex.vuejs.org): State management library.
+4. [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):
+   HTTP request API that is
+   [polyfilled](https://en.wikipedia.org/wiki/Polyfill_(programming)) by
+   [Unfetch]( https://npm.im/unfetch).
+
 ## Testing
 
 Run all tests:
@@ -52,6 +66,6 @@ npx cypress open
 
 ## Acknowledgement
 
-* Data is from [The Star Wars API (SWAPI)](https://swapi.co/).
+* Data is from [The Star Wars API (SWAPI)](https://swapi.co).
 * Images are from [Star Wars: A Visual Guide](https://starwars-visualguide.com).
 * This is a sequel to [force-vue](https://github.com/alexkramer/force-vue).
diff --git a/src/router.js b/src/router.js
index e3d6c630..ac1bf072 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// Instruct Vue to use the router plugin.
 Vue.use(VueRouter)
 
 const Home = () => import('@/components/Home')
 const Person = () => import('@/components/Person')
 
+// Export a new Vue Router instance to be used in the application.
 export default new VueRouter({
   routes: [
     {
diff --git a/src/store/index.js b/src/store/index.js
index 59d1c567..b4b187fd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,9 +3,13 @@ import Vuex from 'vuex'
 
 import people from '@/store/people'
 
+// Instruct Vue to use the Vuex plugin.
 Vue.use(Vuex)
 
+// Export a new Vuex Store instance to be used in the application.
 export default new Vuex.Store({
+  // Modules are mini-state stores that can be combined into the main state
+  // tree: https://vuex.vuejs.org/guide/modules.html
   modules: {
     people
   }
diff --git a/src/store/people.js b/src/store/people.js
index ba561a7c..b8937f93 100644
--- a/src/store/people.js
+++ b/src/store/people.js
@@ -2,20 +2,30 @@ const initialState = () => ({
   results: []
 })
 
+// Export the module so it can be included in the main store.
 export default {
+  // This module is namespaced so that it is a little more self-contained:
+  // https://vuex.vuejs.org/guide/modules.html#namespacing
   namespaced: true,
+  // https://vuex.vuejs.org/guide/state.html
   state: initialState,
+  // https://vuex.vuejs.org/guide/mutations.html
   mutations: {
     results: (state, results = []) => (state.results = results)
   },
+  // https://vuex.vuejs.org/guide/actions.html
   actions: {
     async list ({ commit }, page = 1) {
+      // Fetch People from SWAPI and await the response.
       const response = await fetch('https://swapi.co/api/people')
+      // Parse the JSON string returned in the response into a JavaScript
+      // object and destructure the results property out of that object.
       const { results } = await response.json()
       if (response.ok) {
+        // If the response is OK commit the data to the store.
         commit('results', results)
       } else {
-        // TODO
+        // If the response is not OK, log the response to the console.
         console.error(response)
       }
     }