Initial release

mosinve · Jul 4, 2019 · 7bc13de · 7bc13de
1 parent 046a022
commit 7bc13de
Show file tree

Hide file tree

Showing 20 changed files with 593 additions and 211 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,17 @@
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+
+  extends: ["plugin:vue/recommended", "@vue/prettier"],
+
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-console": "off",
+    "no-debugger": "off"
   },
+
   parserOptions: {
     parser: "babel-eslint"
   }

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "get-bored",
+  "name": "bored-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,10 +9,14 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vue-toasted": "^1.1.27",
+    "vuetify": "^1.5.5",
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
@@ -29,7 +33,11 @@
     "lint-staged": "^8.1.5",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.10"
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.5.0",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.2.2"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>get-bored</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,29 +1,28 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
-  </div>
+  <v-app>
+    <v-toolbar app tabs dense>
+      <v-toolbar-title class="headline text-uppercase">
+        <span>Bored?</span>
+        <span class="font-weight-thin">No more!</span>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-toolbar-items>
+        <v-btn :to="{ name: 'Activity' }" append exact flat>
+          Activity
+        </v-btn>
+        <v-btn :to="{ name: 'Activities' }" append flat>
+          My List
+        </v-btn>
+      </v-toolbar-items>
+    </v-toolbar>
+    <v-content>
+      <router-view />
+    </v-content>
+  </v-app>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<script>
+export default {
+  name: "App"
+};
+</script>
diff --git a/src/api/index.js b/src/api/index.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+import qs from "qs";
+
+const instance = axios.create({
+  baseURL: "http://www.boredapi.com/api",
+  paramsSerializer: function(params) {
+    return qs.stringify(params, { strictNullHandling: true });
+  }
+});
+
+export default {
+  getActivity(params) {
+    return instance.get("activity", {
+      params: { ...params }
+    });
+  }
+};
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,13 @@
 import Vue from "vue";
+import "./plugins/vuetify";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import Toasted from "vue-toasted";
 
+Vue.use(Toasted, {
+  duration: 500
+});
 Vue.config.productionTip = false;
 
 new Vue({

diff --git a/src/models/Activity.js b/src/models/Activity.js
@@ -0,0 +1,7 @@
+export class Activity {
+  constructor({ type, participants, price } = {}) {
+    this.type = type;
+    this.participants = participants;
+    this.price = price;
+  }
+}
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from "vue";
+import Vuetify from "vuetify/lib";
+import "vuetify/src/stylus/app.styl";
+
+Vue.use(Vuetify, {
+  iconfont: "fa"
+});
diff --git a/src/router.js b/src/router.js
@@ -1,6 +1,5 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
 
 Vue.use(Router);
 
@@ -10,17 +9,17 @@ export default new Router({
   routes: [
     {
       path: "/",
-      name: "home",
-      component: Home
+      name: "Activity",
+      component: () =>
+        import(/* webpackChunkName: "Activity" */ "@/views/PageActivity")
     },
     {
-      path: "/about",
-      name: "about",
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
+      path: "/list",
+      name: "Activities",
       component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+        import(
+          /* webpackChunkName: "Activities" */ "@/views/PageActivitiesList"
+        )
     }
   ]
 });
diff --git a/src/store.js b/src/store.js
@@ -1,10 +1,46 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import createPersistedState from "vuex-persistedstate";
+import api from "@/api";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  plugins: [createPersistedState({ paths: ["activitiesList"] })],
+  state: {
+    activity: {},
+    activitiesList: []
+  },
+  mutations: {
+    setActivity(state, activity) {
+      state.activity = activity;
+    },
+    addToList(state) {
+      state.activitiesList.push(state.activity);
+    },
+    removeFromList(state, activity) {
+      state.activitiesList = state.activitiesList.filter(
+        ({ key }) => key !== activity.key
+      );
+    },
+    clearAll(state) {
+      state.activitiesList = [];
+    }
+  },
+  actions: {
+    async loadActivity({ commit }, params = {}) {
+      const { data: activity } = await api.getActivity(params);
+      commit("setActivity", activity);
+    },
+    async saveActivityToList({ state, commit }) {
+      if (
+        state.activitiesList.some(
+          ({ key }) => state.activity.key && key === state.activity.key
+        )
+      ) {
+        return Promise.reject("You already saved this activity");
+      }
+      commit("addToList");
+    }
+  }
 });
diff --git a/src/views/About.vue b/src/views/About.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue