Implement actually adding notes to the db.

Refactor axios code into service.
Remove reduntant use statement.
2020-09-09 18:15:54 +02:00 · 2020-09-08 19:08:45 +02:00 · 2020-09-08 19:02:40 +02:00 · 2020-09-08 19:02:21 +02:00 · 2020-09-07 19:58:02 +02:00 · 2020-09-07 19:13:02 +02:00
8 changed files with 379 additions and 68 deletions
--- a/db.json
+++ b/db.json
@ -0,0 +1,8 @@
+{
+  "notes": [
+    {
+      "id": 1,
+      "text": "This note is from the db.json file!"
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -1900,13 +1900,14 @@
      }
    },
    "@vue/compiler-core": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.7.tgz",
-      "integrity": "sha512-bzk7uGKPEAKC4XHnHvmMUui9MASOVK7e4xgDz6oOBWqo1mnvqk1YnNZzY+0XMaCr4PFOFqHw739JmzJb6SBqUg==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
+      "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+      "dev": true,
      "requires": {
        "@babel/parser": "^7.10.4",
        "@babel/types": "^7.10.4",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/shared": "3.0.0-rc.10",
        "estree-walker": "^2.0.1",
        "source-map": "^0.6.1"
      },
@ -1914,31 +1915,33 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
    "@vue/compiler-dom": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.7.tgz",
-      "integrity": "sha512-wE8YmkN3ISodjijzG44YiRgbcb7skqdRbhoYgABGz8uHvNSMGPLrM80cRosgLoGlcgxDPxj0xaEAczBunJYV2g==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
+      "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+      "dev": true,
      "requires": {
-        "@vue/compiler-core": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/compiler-core": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10"
      }
    },
    "@vue/compiler-sfc": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.7.tgz",
-      "integrity": "sha512-4DSOw7yczVf5E+Dbs9/OmyEmG2zWsDx7dmOYWcv75LOj2/dqOys3fVtcJfsfeIXzKBTy51hX80+P1lB0nWq32g==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.10.tgz",
+      "integrity": "sha512-VIJ+VXqeM7WoRNgD9uYSARVb6CYq+JS2NNHfeerfNc7Uk3pjYHRv1MwEicAvN6zWFm5GLC1ZYTVD+WFg3xGAkQ==",
      "dev": true,
      "requires": {
        "@babel/parser": "^7.10.4",
        "@babel/types": "^7.10.4",
-        "@vue/compiler-core": "3.0.0-rc.7",
-        "@vue/compiler-dom": "3.0.0-rc.7",
-        "@vue/compiler-ssr": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/compiler-core": "3.0.0-rc.10",
+        "@vue/compiler-dom": "3.0.0-rc.10",
+        "@vue/compiler-ssr": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10",
        "consolidate": "^0.15.1",
        "estree-walker": "^2.0.1",
        "hash-sum": "^2.0.0",
@ -1960,13 +1963,13 @@
      }
    },
    "@vue/compiler-ssr": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.7.tgz",
-      "integrity": "sha512-jXNEgnhjm/SStdwxrHaGwYgSvwQV8ZV7xInCsdZsEcNXNSV4cveuEQG0x/mFO/xuD+RudcdMTbQr75V5oi2RyQ==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.10.tgz",
+      "integrity": "sha512-JBPil8sO5j7puB8acX2CQMRXEYB/EP8PoEur7RcF/+aqATI7C4yqWcSLC5TRJpigj6xE6ku6sx8om+j7ZHvgBw==",
      "dev": true,
      "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/compiler-dom": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10"
      }
    },
    "@vue/component-compiler-utils": {
@ -2032,36 +2035,58 @@
      "dev": true
    },
    "@vue/reactivity": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.7.tgz",
-      "integrity": "sha512-j8wUuc131JrHvQzEWjlRMYHadRLhGaubIZHR+4QO/xwvNIdJWK8zQd9iqxizjBW0E1MhrZkDbsiClNN8lq/ILQ==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.10.tgz",
+      "integrity": "sha512-mkUZfOJlbqGZx2cARmhCs5r2+xLJPL7VFNagmlA3Fd66ZXBc3ZvTQdYsY4VUbYJFe5ByIzqu9TZiAkzXY+JVaA==",
      "requires": {
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
      }
    },
    "@vue/runtime-core": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.7.tgz",
-      "integrity": "sha512-xY+3Mw+3Nb8BxfYftQug3UAUHPJPvbhNkyVuCMVgBRBsZIFbiL6F+gy22Wd7Q6zgWagUQCtH1FDrPZARj6tySg==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.10.tgz",
+      "integrity": "sha512-VK/kq4gDDoqZ45CVwdbLLpikXLYLCt6YLhdgXX3fhf20gvPqrbEZv1ZNLruNnhhTpf9cLyU4tZ18DHeaUYPziw==",
      "requires": {
-        "@vue/reactivity": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/reactivity": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
      }
    },
    "@vue/runtime-dom": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.7.tgz",
-      "integrity": "sha512-tgLl/tSIdovP/6uEzKrhwG5MwFu0yJ3l0bPUCyyFJM4tnnHiRtr9Zsn6GVDZYwImtBgBwByqBMML8ZYlVEqH9w==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.10.tgz",
+      "integrity": "sha512-bH4GuneHt3FQ+/21jba5orM/CO9N1cnT7J3wtrxopFJ4/4H5cvHXyG6v+ZVTu1d733Ij/6yMRA7xbtfi9a4zJw==",
      "requires": {
-        "@vue/runtime-core": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7",
+        "@vue/runtime-core": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10",
        "csstype": "^2.6.8"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        }
      }
    },
    "@vue/shared": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.7.tgz",
-      "integrity": "sha512-wRqe6DvR9UIH4Il4bxMIbuGupWFtJW+PZKqgclYjuO+zWNQEC7hC5OxONgXeGcv1h4KtfJsc8wSU31hxok9XAQ=="
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+      "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
+      "dev": true
    },
    "@vue/web-component-wrapper": {
      "version": "1.2.0",
@ -2591,6 +2616,14 @@
      "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
      "dev": true
    },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@ -4971,9 +5004,9 @@
      }
    },
    "eslint-plugin-vue": {
-      "version": "7.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.2.tgz",
-      "integrity": "sha512-EpAVWT62JTM7Yo6IUJIaIvNMSuayDaMVMXv1SC96d1/7nyx18U0FrLRKpN2GdTY8Efi4UepgR75XW7ucSRiI7A==",
+      "version": "7.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.0.0-beta.3.tgz",
+      "integrity": "sha512-/p23IRPN9gFNN7dzesrctt06Kvs9E3VRB8BGIAPSEaQNk5yhlKUzntPARjUpsTWW+DQg0mqglZptfkUJK4+4EQ==",
      "dev": true,
      "requires": {
        "eslint-utils": "^2.1.0",
@ -5596,8 +5629,7 @@
    "follow-redirects": {
      "version": "1.13.0",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
    },
    "for-in": {
      "version": "1.0.2",
@ -11039,13 +11071,46 @@
      "dev": true
    },
    "vue": {
-      "version": "3.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.7.tgz",
-      "integrity": "sha512-WX7i6yI0VGzI2mwlGqfISDbi/fNAuc0QEOcF4NH4IEdWFUWCbMMUJ6frYCgRd3FzqzPJwuV8niXKhFL28FnQ7g==",
+      "version": "3.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.10.tgz",
+      "integrity": "sha512-nRsyIQtOWLDMBb5dsPwg/WdIqznCMVWN6O6wJSzhseKC768wHlZKcJ7SPHhWPid9wi3Ykhtl9vtgvxTK/qICkw==",
      "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.7",
-        "@vue/runtime-dom": "3.0.0-rc.7",
-        "@vue/shared": "3.0.0-rc.7"
+        "@vue/compiler-dom": "3.0.0-rc.10",
+        "@vue/runtime-dom": "3.0.0-rc.10",
+        "@vue/shared": "3.0.0-rc.10"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
+          "integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
+          "requires": {
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "@vue/shared": "3.0.0-rc.10",
+            "estree-walker": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
+          "integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
+          "requires": {
+            "@vue/compiler-core": "3.0.0-rc.10",
+            "@vue/shared": "3.0.0-rc.10"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.0.0-rc.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
+          "integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
      }
    },
    "vue-eslint-parser": {
@ -11205,6 +11270,11 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
+    "vuex": {
+      "version": "4.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-beta.4.tgz",
+      "integrity": "sha512-/+4E1dokq5cwbl4mohOqOj8h0vOLOWmLSqlqTf++bfmN9/JKWtwYfsBrzlK0sYrNfuYcpQeX0BVxQHoHXDfYZQ=="
+    },
    "watchpack": {
      "version": "1.7.4",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",
--- a/package.json
+++ b/package.json
@ -8,19 +8,41 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "axios": "^0.20.0",
    "core-js": "^3.6.5",
-    "vue": "^3.0.0-0"
+    "vue": "^3.0.0-rc.10",
+    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-vuex": "^4.5.4",
    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/compiler-sfc": "^3.0.0-rc.10",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
    "prettier": "^1.19.1"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,73 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <h1>Welcome to Your Vue.js App</h1>
+    <NoteList />
+    <div class="shortcuthelp">
+      <ul>
+        <li><kbd>c</kbd>focus</li>
+        <li><kbd>Enter</kbd>save</li>
+        <li><kbd>j</kbd><kbd>k</kbd>move up/down</li>
+        <li><kbd>Delete</kbd>delete</li>
+      </ul>
+    </div>
  </div>
 </template>
+
+<script>
+import NoteList from '@/components/NoteList.vue'
+export default {
+  components: {
+    NoteList
+  }
+}
+</script>
+
+<style>
+:root {
+  --text-color: #003049;
+  --secondary-text-color: #eae2b7;
+  --theme-color: #003049;
+  --background-color: #eae2b7;
+  --secondary-background: #d62828;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+* {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.shortcuthelp {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--background-color);
+  background-color: var(--theme-color);
+  padding: 0.5rem;
+  margin: 1rem 1rem 0 0;
+}
+
+@media (max-width: 450px) {
+  .shortcuthelp {
+    display: none;
+  }
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  color: var(--background-color);
+}
+
+kbd {
+  background-color: var(--secondary-background);
+  color: var(--secondary-text-color);
+  display: inline-block;
+  padding: 0.1rem;
+  margin: 0.1rem 0.5rem;
+}
+</style>
--- a/src/components/NoteList.vue
+++ b/src/components/NoteList.vue
@ -2,30 +2,121 @@
  <textarea
    @keyup.enter="addNote"
    v-model="content"
-    cols="30"
+    ref="content"
    rows="10"
+    placeholder="Start typing something…"
+    autofocus
  ></textarea>
-  <button type="submit" @click="addNote">
-    Submit
-  </button>
-  <div v-for="note in notes" :key="note.id">{{ note.text }}</div>
+  <div
+    class="note"
+    v-for="note in notes"
+    :key="note.id"
+    :class="{ selected: note.id === current }"
+  >
+    <span class="noteid">#{{ note.id }}</span
+    >{{ note.text }}
+  </div>
 </template>

 <script>
+import { mapState } from 'vuex'
+
 export default {
  data() {
    return {
-      notes: [{ id: 1, text: 'This is a note' }],
-      content: 'Start typing something…'
+      current: null,
+      content: null
    }
  },
  methods: {
    addNote() {
-      this.notes.push({ id: 2, text: this.content })
+      this.$store.commit('ADD_NOTE', this.content)
      this.content = ''
    }
+  },
+  computed: mapState(['notes']),
+  mounted() {
+    document.addEventListener('keyup', e => {
+      switch (e.code) {
+        case 'KeyJ':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          // go down in the list, unless it's the last item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current + 1] === undefined
+              ? this.current
+              : this.current + 1
+          break
+        case 'KeyK':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          // go up in the list, unless it's the first item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current - 1] === undefined
+              ? this.current
+              : this.current - 1
+          break
+        case 'KeyC':
+          this.$refs.content.focus()
+          break
+        case 'Delete':
+          // only if not in textarea
+          if (e.target.type === 'textarea') {
+            return
+          }
+          alert(`Delete note #${this.current}?`)
+          break
+
+        default:
+          break
+      }
+    })
+    this.$store.commit('FETCH_NOTES')
  }
 }
 </script>

-<style></style>
+<style scoped>
+@media (min-width: 575px) {
+  .note {
+    width: 550px;
+  }
+}
+
+textarea {
+  width: 100%;
+  border-width: 0 0 0.1rem 0;
+  border-color: var(--theme-color);
+  resize: none;
+  background-color: var(--background-color);
+  margin-bottom: 1rem;
+}
+
+.note {
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: 0.1rem solid transparent;
+  max-width: 550px;
+}
+
+.selected {
+  border: 0.1rem dashed var(--theme-color);
+}
+
+.noteid {
+  background-color: var(--theme-color);
+  color: var(--secondary-text-color);
+  padding: 0 0.5rem;
+  display: inline-block;
+  width: 5rem;
+  margin-right: 0.5rem;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -1,4 +1,7 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store/index.js'

-createApp(App).mount("#app");
+window.app = createApp(App)
+  .use(store)
+  .mount('#app')
--- a/src/services/NoteService.js
+++ b/src/services/NoteService.js
@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:3000',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getNotes() {
+    return apiClient.get('/notes')
+  },
+  addNote(text) {
+    return apiClient.post('/notes', JSON.stringify({ text }))
+  }
+}
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,31 @@
+import { createStore } from 'vuex'
+import NoteService from '@/services/NoteService.js'
+
+export default createStore({
+  state() {
+    return {
+      notes: [{ id: 1, text: 'A note from the Vuex store!' }]
+    }
+  },
+  mutations: {
+    FETCH_NOTES(state) {
+      NoteService.getNotes()
+        .then(response => {
+          state.notes = response.data
+        })
+        .catch(error => {
+          console.log('There was an error:', error.response)
+        })
+    },
+    ADD_NOTE(state, note) {
+      NoteService.addNote(note)
+        .then(() => {
+          this.commit('FETCH_NOTES')
+        })
+        .catch(error => {
+          console.error(error)
+        })
+    }
+  },
+  actions: {}
+})
Author	SHA1	Message	Date
Lukáš Kucharczyk	a4cf194672	Implement actually adding notes to the db.	2020-09-09 18:15:54 +02:00
Lukáš Kucharczyk	1ace587458	Refactor axios code into service.	2020-09-08 19:08:45 +02:00
Lukáš Kucharczyk	4a3e5e2557	Remove reduntant use statement.	2020-09-08 19:02:40 +02:00
Lukáš Kucharczyk	f123001228	Load notes from local json file.	2020-09-08 19:02:21 +02:00
Lukáš Kucharczyk	6aa5105c48	Use Vuex to load and add notes.	2020-09-07 19:58:02 +02:00
Lukáš Kucharczyk	aba92e2025	Update packages and add vuex.	2020-09-07 19:13:02 +02:00
Lukáš Kucharczyk	bdd3e52916	Add eslint config.	2020-09-07 19:12:14 +02:00
Lukáš Kucharczyk	e3d6d0c379	Fix assigning note IDs.	2020-08-25 22:46:25 +02:00
Lukáš Kucharczyk	41c0cbf7d2	Improve styles.	2020-08-25 22:45:44 +02:00
Lukáš Kucharczyk	7e0f332f76	Add shortcut hints.	2020-08-25 22:44:56 +02:00
Lukáš Kucharczyk	75f03fdf24	Fix hj shortcuts activating in textarea.	2020-08-25 17:53:41 +02:00
Lukáš Kucharczyk	bafb84499e	Remove custom placeholder solution with standard HTML.	2020-08-25 16:39:06 +02:00
Lukáš Kucharczyk	1229625f56	Add more styles to NoteList.	2020-08-25 16:08:05 +02:00
Lukáš Kucharczyk	8d6be9c37f	Add k and j keybinds for moving within the list.	2020-08-25 16:07:37 +02:00
Lukáš Kucharczyk	6d8c2f3215	Export Vue instance for debugging.	2020-08-25 16:06:28 +02:00
Lukáš Kucharczyk	d7ace44625	Default to system font.	2020-08-25 16:05:53 +02:00
Lukáš Kucharczyk	170f3b3873	Add basic styles.	2020-08-25 14:09:58 +02:00
Lukáš Kucharczyk	4d484f6040	Add onfocus/onblur to textarea.	2020-08-25 14:09:39 +02:00
Lukáš Kucharczyk	ff782cbd11	More fixes due to dumb merge.	2020-08-25 14:04:46 +02:00