[web] blog list

starter-project-web-vue2/.eslintrc.js

@@ -2,19 +2,14 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parserOptions: {
     parser: '@babel/eslint-parser',
-    requireConfigFile: false
+    requireConfigFile: false,
   },
-  extends: [
-    '@nuxtjs',
-    'plugin:nuxt/recommended',
-    'prettier'
-  ],
-  plugins: [
-  ],
+  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
+  plugins: [],
   rules: {
     'vue/multi-word-component-names': 'off',
   },

starter-project-web-vue2/README.md

@@ -16,7 +16,7 @@
 
 6. Add a file called index.vue in your pages folder. This page will be used to display a list of blogs.
 
-7. Add a file called _id.vue in your pages folder. This page will be used to display a single blog.
+7. Add a file called \_id.vue in your pages folder. This page will be used to display a single blog.
 
 8. Add any components you want to use in your pages to your components folder. (ex. the component used to display a single blog on the list page.)
 
@@ -45,7 +45,7 @@
 
 ### End to End Testing
 
-. . . 
+. . .
 
 ## Build Setup
 

starter-project-web-vue2/assets/variables.css

@@ -1 +1 @@
-/* No CSS *//*# sourceMappingURL=variables.css.map */
+/* No CSS */ /*# sourceMappingURL=variables.css.map */

starter-project-web-vue2/commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};
+  extends: ['@commitlint/config-conventional'],
+}

starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue

@@ -1,6 +1,6 @@
 <template>
   <v-dialog max-width="600px">
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-btn color="primary" dark v-on="on">
         <v-icon left> mdi-plus </v-icon>
         Add Blog</v-btn
@@ -15,7 +15,7 @@
           <v-text-field v-model="blogTitle" label="Title" />
           <v-textarea v-model="blogContent" label="Content" />
           <v-spacer></v-spacer>
-          <v-btn @click="onSubmit" class="success mx-0 mt-3">Add Blog</v-btn>
+          <v-btn class="success mx-0 mt-3" @click="onSubmit">Add Blog</v-btn>
         </v-form>
       </v-card-text>
     </v-card>

starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue

@@ -6,20 +6,20 @@
     <v-container v-if="edit_area" class="px-0 black--text">
       <p class="edit-post">Edit Post</p>
       <v-text-field
+        v-model="blog_title"
         outlined
         class="text-black"
         :value="current.title"
         label="Title"
-        v-model="blog_title"
       />
       <v-text-field
+        v-model="blog_content"
         outlined
         class="text-black"
         :value="current.body"
         label="Content"
-        v-model="blog_content"
       />
-      <v-btn @click="update" class="pa-2 mb-2 mx-7 mt-3" dark>Save</v-btn>
+      <v-btn class="pa-2 mb-2 mx-7 mt-3" dark @click="update">Save</v-btn>
     </v-container>
 
     <v-row
@@ -49,12 +49,12 @@
               </v-card-text>
             </v-col>
             <v-col cols="1">
-              <v-btn left text @click="editArea(blog)" class="grey--text">
+              <v-btn left text class="grey--text" @click="editArea(blog)">
                 <v-icon> mdi-pencil </v-icon>
               </v-btn>
             </v-col>
             <v-col cols="1">
-              <v-btn @click="deleteBlog(blog.id)" left text class="grey--text">
+              <v-btn left text class="grey--text" @click="deleteBlog(blog.id)">
                 <v-icon> mdi-delete </v-icon>
               </v-btn>
             </v-col>

starter-project-web-vue2/components/abraham/UserAuthForm.vue

@@ -1,10 +1,10 @@
 <template>
   <v-form v-model="valid" class="pa-5 py-0 mx-auto grey lighten-5 mb-6">
     <v-text-field
+      v-if="hasNamee"
       v-model="userInfo.name"
       label="Name"
       :rules="[required('name')]"
-      v-if="hasNamee"
     />
 
     <v-text-field
@@ -18,9 +18,9 @@
       label="Password"
       :type="showPassword ? 'text' : 'password'"
       :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-      @click:append="showPassword = !showPassword"
       counter="true"
       :rules="[required('password'), minLength('password', 3)]"
+      @click:append="showPassword = !showPassword"
     />
 
     <v-btn @click="submitForm(userInfo)">{{ buttonText }}</v-btn>
@@ -30,6 +30,7 @@
 <script>
 import validations from '@/utils/validations'
 export default {
+  props: ['submitForm', 'buttonText', 'hasNamee'],
   data() {
     return {
       valid: false,
@@ -42,7 +43,6 @@ export default {
       ...validations,
     }
   },
-  props: ['submitForm', 'buttonText', 'hasNamee'],
 }
 </script>
 

starter-project-web-vue2/components/dagmawit/BlogPost.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-card max-width="900" class="mx-auto">
+    <v-container>
+      <h1 align="center">Blog Posts</h1>
+      <v-row v-for="blogPost in allBlogPosts" :key="blogPost.id" dense>
+        <v-col cols="12">
+          <v-card color="#1F7087" dark>
+            <div class="d-flex flex-no-wrap justify-space-between">
+              <div>
+                <v-card-title class="text-h5">
+                  {{ blogPost.title }}
+                </v-card-title>
+
+                <v-card-subtitle>{{ blogPost.content }}</v-card-subtitle>
+                <nuxt-link :to="'/dagmawit/' + blogPost._id">
+                  <v-card-actions>
+                    <v-btn text class="grey--text"> Read More </v-btn>
+                  </v-card-actions>
+                </nuxt-link>
+              </div>
+              <div>
+                <v-btn text class="grey--text">
+                  <v-icon> mdi-pencil </v-icon>
+                </v-btn>
+
+                <v-btn text class="grey--text">
+                  <v-icon> mdi-delete </v-icon>
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- <v-card-actions>
+              <v-btn text :to="'/dagmawit/' + blog._id"> Read More </v-btn>
+            </v-card-actions> -->
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'BlogPost',
+  methods: {
+    ...mapActions('dagmawit', ['fetchBlogPosts']),
+  },
+  computed: mapGetters('dagmawit', ['allBlogPosts']),
+  created() {
+    this.fetchBlogPosts()
+  },
+}
+</script>

starter-project-web-vue2/jest.config.js

@@ -2,21 +2,17 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    '^vue$': 'vue/dist/vue.common.js',
   },
-  moduleFileExtensions: [
-    'js',
-    'vue',
-    'json'
-  ],
+  moduleFileExtensions: ['js', 'vue', 'json'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '.*\\.(vue)$': 'vue-jest',
   },
   collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    '<rootDir>/pages/**/*.vue',
   ],
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
 }

starter-project-web-vue2/layouts/default.vue

@@ -24,36 +24,20 @@
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-app-bar
-      :clipped-left="clipped"
-      fixed
-      app
-    >
+    <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn
-        icon
-        @click.stop="miniVariant = !miniVariant"
-      >
+      <v-btn icon @click.stop="miniVariant = !miniVariant">
         <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="clipped = !clipped"
-      >
+      <v-btn icon @click.stop="clipped = !clipped">
         <v-icon>mdi-application</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="fixed = !fixed"
-      >
+      <v-btn icon @click.stop="fixed = !fixed">
         <v-icon>mdi-minus</v-icon>
       </v-btn>
       <v-toolbar-title v-text="title" />
       <v-spacer />
-      <v-btn
-        icon
-        @click.stop="rightDrawer = !rightDrawer"
-      >
+      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
         <v-icon>mdi-menu</v-icon>
       </v-btn>
     </v-app-bar>
@@ -62,27 +46,17 @@
         <Nuxt />
       </v-container>
     </v-main>
-    <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
-      temporary
-      fixed
-    >
+    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
       <v-list>
         <v-list-item @click.native="right = !right">
           <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
+            <v-icon light> mdi-repeat </v-icon>
           </v-list-item-action>
           <v-list-item-title>Switch drawer (click me)</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-footer
-      :absolute="!fixed"
-      app
-    >
+    <v-footer :absolute="!fixed" app>
       <span>&copy; {{ new Date().getFullYear() }}</span>
     </v-footer>
   </v-app>
@@ -91,7 +65,7 @@
 <script>
 export default {
   name: 'DefaultLayout',
-  data () {
+  data() {
     return {
       clipped: false,
       drawer: false,
@@ -100,14 +74,14 @@ export default {
         {
           icon: 'mdi-apps',
           title: 'Welcome',
-          to: '/'
+          to: '/',
         },
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'Practice'
+      title: 'Practice',
     }
-  }
+  },
 }
 </script>

starter-project-web-vue2/nuxt.config.js

@@ -6,26 +6,22 @@ export default {
     titleTemplate: '%s - starter-project-web-vue2',
     title: 'starter-project-web-vue2',
     htmlAttrs: {
-      lang: 'en'
+      lang: 'en',
     },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '' },
-      { name: 'format-detection', content: 'telephone=no' }
+      { name: 'format-detection', content: 'telephone=no' },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [
-  ],
+  css: [],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-  ],
+  plugins: [],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -41,10 +37,11 @@ export default {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
-    '@nuxtjs/axios',
-    '@nuxtjs/auth-next',
-  ],
+  modules: ['@nuxtjs/axios', '@nuxtjs/auth-next'],
+
+  axios: {
+    baseURL: 'https://blog-app-backend.onrender.com/api/',
+  },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
@@ -59,15 +56,14 @@ export default {
           info: colors.teal.lighten1,
           warning: colors.amber.base,
           error: colors.deepOrange.accent4,
-          success: colors.green.accent3
-        }
-      }
-    }
+          success: colors.green.accent3,
+        },
+      },
+    },
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {
-  },
+  build: {},
 
   auth: {
     strategies: {