From db7848e0db06c56460ab793b8f37d6b820e4f84d Mon Sep 17 00:00:00 2001
From: AndualemSebsbe <andualemsebsbe1@gmail.com>
Date: Fri, 5 Aug 2022 20:43:43 +0300
Subject: [PATCH 1/2] [web] andualem added CRUD operations

---
 starter-project-web-vue2/.eslintrc.js         |  13 +-
 starter-project-web-vue2/README.md            |   4 +-
 starter-project-web-vue2/assets/variables.css |   2 +-
 starter-project-web-vue2/commitlint.config.js |   4 +-
 .../components/abraham/AbrahamAddBlog.vue     |   4 +-
 .../components/abraham/AbrahamBlogPost.vue    |  10 +-
 .../components/abraham/UserAuthForm.vue       |   6 +-
 .../components/andualem/AndualemAddBlog.vue   |   0
 .../components/andualem/AndualemBlogPost.vue  |   0
 .../components/andualem/NavigationBar.vue     |   0
 .../components/andualem/UserAuthForm.vue      |   0
 starter-project-web-vue2/jest.config.js       |  14 +-
 starter-project-web-vue2/layouts/default.vue  |  50 ++---
 starter-project-web-vue2/nuxt.config.js       |  30 +--
 .../pages/abraham/login.vue                   |   4 +-
 .../pages/abraham/register.vue                |   6 +-
 .../pages/andualem/_id.vue                    |  54 +++++
 .../pages/andualem/index.vue                  | 195 ++++++++++++------
 starter-project-web-vue2/pages/index.vue      |  12 +-
 starter-project-web-vue2/store/andualem.js    |  51 +++++
 starter-project-web-vue2/stylelint.config.js  |   4 +-
 starter-project-web-vue2/utils/validations.js |  36 ++--
 22 files changed, 318 insertions(+), 181 deletions(-)
 delete mode 100644 starter-project-web-vue2/components/andualem/AndualemAddBlog.vue
 delete mode 100644 starter-project-web-vue2/components/andualem/AndualemBlogPost.vue
 delete mode 100644 starter-project-web-vue2/components/andualem/NavigationBar.vue
 delete mode 100644 starter-project-web-vue2/components/andualem/UserAuthForm.vue
 create mode 100644 starter-project-web-vue2/pages/andualem/_id.vue
 create mode 100644 starter-project-web-vue2/store/andualem.js

diff --git a/starter-project-web-vue2/.eslintrc.js b/starter-project-web-vue2/.eslintrc.js
index b7166f48..63024360 100644
--- a/starter-project-web-vue2/.eslintrc.js
+++ b/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',
   },
diff --git a/starter-project-web-vue2/README.md b/starter-project-web-vue2/README.md
index f7e1208a..92c2d3a4 100644
--- a/starter-project-web-vue2/README.md
+++ b/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
 
diff --git a/starter-project-web-vue2/assets/variables.css b/starter-project-web-vue2/assets/variables.css
index f3e2dc35..9e3adf33 100644
--- a/starter-project-web-vue2/assets/variables.css
+++ b/starter-project-web-vue2/assets/variables.css
@@ -1 +1 @@
-/* No CSS *//*# sourceMappingURL=variables.css.map */
\ No newline at end of file
+/* No CSS */ /*# sourceMappingURL=variables.css.map */
diff --git a/starter-project-web-vue2/commitlint.config.js b/starter-project-web-vue2/commitlint.config.js
index 69b4242c..98ee7dfc 100644
--- a/starter-project-web-vue2/commitlint.config.js
+++ b/starter-project-web-vue2/commitlint.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};
+  extends: ['@commitlint/config-conventional'],
+}
diff --git a/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue b/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue
index 605fb891..cd560b82 100644
--- a/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue
+++ b/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>
diff --git a/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue b/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue
index 821cf566..bd6176a6 100644
--- a/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue
+++ b/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>
diff --git a/starter-project-web-vue2/components/abraham/UserAuthForm.vue b/starter-project-web-vue2/components/abraham/UserAuthForm.vue
index be92bd31..233acfdc 100644
--- a/starter-project-web-vue2/components/abraham/UserAuthForm.vue
+++ b/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>
 
diff --git a/starter-project-web-vue2/components/andualem/AndualemAddBlog.vue b/starter-project-web-vue2/components/andualem/AndualemAddBlog.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/starter-project-web-vue2/components/andualem/AndualemBlogPost.vue b/starter-project-web-vue2/components/andualem/AndualemBlogPost.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/starter-project-web-vue2/components/andualem/NavigationBar.vue b/starter-project-web-vue2/components/andualem/NavigationBar.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/starter-project-web-vue2/components/andualem/UserAuthForm.vue b/starter-project-web-vue2/components/andualem/UserAuthForm.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/starter-project-web-vue2/jest.config.js b/starter-project-web-vue2/jest.config.js
index 87065302..5fa973b2 100644
--- a/starter-project-web-vue2/jest.config.js
+++ b/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',
 }
diff --git a/starter-project-web-vue2/layouts/default.vue b/starter-project-web-vue2/layouts/default.vue
index 2bf5acda..df451b4b 100644
--- a/starter-project-web-vue2/layouts/default.vue
+++ b/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>
diff --git a/starter-project-web-vue2/nuxt.config.js b/starter-project-web-vue2/nuxt.config.js
index e302d366..edc51496 100644
--- a/starter-project-web-vue2/nuxt.config.js
+++ b/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,7 @@ export default {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
-    '@nuxtjs/axios',
-    '@nuxtjs/auth-next',
-  ],
+  modules: ['@nuxtjs/axios', '@nuxtjs/auth-next'],
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
@@ -59,15 +52,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: {
diff --git a/starter-project-web-vue2/pages/abraham/login.vue b/starter-project-web-vue2/pages/abraham/login.vue
index d4fb4d77..e5384d3b 100644
--- a/starter-project-web-vue2/pages/abraham/login.vue
+++ b/starter-project-web-vue2/pages/abraham/login.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <h1>LogIn</h1>
-    <UserAuthForm buttonText="Login" :submitForm="loginUser" />
+    <UserAuthForm button-text="Login" :submit-form="loginUser" />
   </v-container>
 </template>
 
@@ -13,7 +13,7 @@ export default {
   },
   methods: {
     async loginUser(loginInfo) {
-      const res = await this.$auth.loginWith('local', {
+      await this.$auth.loginWith('local', {
         data: loginInfo,
       })
     },
diff --git a/starter-project-web-vue2/pages/abraham/register.vue b/starter-project-web-vue2/pages/abraham/register.vue
index b5f87301..ef8a5d8e 100644
--- a/starter-project-web-vue2/pages/abraham/register.vue
+++ b/starter-project-web-vue2/pages/abraham/register.vue
@@ -2,9 +2,9 @@
   <v-contair>
     <h1>Register</h1>
     <UserAuthForm
-      buttonText="Register"
-      :submitForm="registerUser"
-      hasNamee="true"
+      button-text="Register"
+      :submit-form="registerUser"
+      has-namee="true"
     />
   </v-contair>
 </template>
diff --git a/starter-project-web-vue2/pages/andualem/_id.vue b/starter-project-web-vue2/pages/andualem/_id.vue
new file mode 100644
index 00000000..dd7b9a62
--- /dev/null
+++ b/starter-project-web-vue2/pages/andualem/_id.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <nuxt-link style="text-decoration: none" :to="'/andualem/'">
+      <v-btn class="success">Back to Blogs</v-btn>
+    </nuxt-link>
+    <h2>Title: {{ title }}</h2>
+    <hr />
+    <h4>{{ content }}</h4>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  data() {
+    return {
+      content: '',
+      title: '',
+    }
+  },
+  async created() {
+    const config = {
+      headers: {
+        Accept: 'application/json',
+      },
+    }
+    try {
+      const res = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
+        config
+      )
+      console.log(res)
+      this.content = res.data.content
+      this.title = res.data.title
+    } catch (err) {
+      console.log(err)
+    }
+  },
+}
+</script>
+<style>
+h2 {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 15pt;
+  margin-top: 25px;
+  margin-bottom: 20px;
+}
+
+h4 {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+  margin-top: 25px;
+}
+</style>
diff --git a/starter-project-web-vue2/pages/andualem/index.vue b/starter-project-web-vue2/pages/andualem/index.vue
index dfe5493c..e7a19332 100644
--- a/starter-project-web-vue2/pages/andualem/index.vue
+++ b/starter-project-web-vue2/pages/andualem/index.vue
@@ -1,74 +1,141 @@
 <template>
-    <v-app>
-    <v-dialog max-width="600px">
-        <template v-slot:activator="{ on }">
-            <v-btn v-on="on">
-                Add Blog
-            </v-btn>
-        </template>
+  <v-app>
+    <v-container>
+      <v-container>
+        <v-dialog max-width="600px">
+          <template #activator="{ on }">
+            <v-btn v-on="on"> Add Blog </v-btn>
+          </template>
 
-        <v-card>
-            <v-card-title>
-                Add a New Blog
-            </v-card-title>
+          <v-card>
+            <v-card-title> Add a New Blog </v-card-title>
             <v-card-text>
-                 <v-text-field
-                v-model="blogTitle"
-                :value="text-title"
-                label="title"
-                outlined
-                >
-                </v-text-field>
-                
-                <v-textarea
-                v-model="blogContent"
-                label="content"
-                >
-                
-                </v-textarea>
-                <v-btn @click="onSubmit" >Add Blog</v-btn>
+              <v-text-field v-model="blogTitle" label="title" outlined>
+              </v-text-field>
+
+              <v-textarea v-model="blogContent" label="content"> </v-textarea>
+              <v-btn @click="onSubmit">Add Blog</v-btn>
             </v-card-text>
-        </v-card>
-    </v-dialog>
-        
-   <!-- <v-card> -->
-    <div v-for="(item, index) in blogs" :key="index">
+          </v-card>
+        </v-dialog>
+      </v-container>
+      <v-container>
+        <div v-if="isEdit">
+          <v-col cols="12">
+            <p class="edit-post">Edit post</p>
+            <v-text-field
+              :v-model="blogTitle"
+              :value="current.title"
+              label="Title"
+              placeholder="title"
+            >
+            </v-text-field>
+            <v-textarea
+              :v-model="blogContent"
+              :value="current.content"
+              label="content"
+              placeholder="content"
+            >
+            </v-textarea>
+            <v-btn @click="update">Save</v-btn>
+          </v-col>
+        </div>
+      </v-container>
+      <!-- <v-card> -->
+
+      <v-row v-for="(item, index) in blogs" :key="index">
         <v-col cols="12">
-            <v-card color="white">
-                <v-row>
-                    <v-col cols="10">
-                        <v-card-title>
-                            <h1>{{item.title}}</h1>
-                        </v-card-title>
-                        <v-card-text>
-                            <p>{{item.content}}</p>
-                        </v-card-text>
-                    </v-col>
-                    <v-btn cols="1" left text class="grey--text">
-                       <v-icon>mdi-pencil</v-icon>
-                    </v-btn>
-                    <v-btn cols="1" left text class="grey--text">
-                       <v-icon>mdi-delete</v-icon>
-                    </v-btn>
-                </v-row>
-            </v-card>
+          <v-card color="white">
+            <v-row>
+              <v-col cols="10">
+                <v-card-title>
+                  <nuxt-link
+                    style="text-decoration: none; color: inherit"
+                    :to="'/andualem/' + item._id"
+                  >
+                    <h1>{{ item.title }}</h1>
+                  </nuxt-link>
+                </v-card-title>
+                <v-card-text>
+                  <p>{{ item.content }}</p>
+                </v-card-text>
+              </v-col>
+              <v-btn
+                left
+                text
+                class="grey--text"
+                cols="1"
+                @click="edit_area(item)"
+              >
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn
+                left
+                text
+                class="grey--text"
+                cols="1"
+                @click="deleteBlog(item._id)"
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </v-row>
+          </v-card>
         </v-col>
-    </div>
-  <!-- </v-card> -->
- </v-app>
+      </v-row>
+    </v-container>
+    <!-- </v-card> -->
+  </v-app>
 </template>
 <script>
-export default{
-    data(){
-        return {
-            blog:{title:"this is a titile", content:"this is a contet"},
-            blogs:[
-                {title:"this is a titile", content:"this is a contet"},
-                {title:"this is a titile", content:"this is a contet"},
-                {title:"this is a titile", content:"this is a contet"},
-                {title:"this is a titile", content:"this is a contet"},
-            ]
-        }
+import { mapState, mapActions } from 'Vuex'
+export default {
+  name: 'Index',
+  data() {
+    return {
+      current: {},
+      blogTitle: '',
+      blogContent: '',
+      blogPost: {},
+      isEdit: false,
     }
+  },
+  computed: { ...mapState('andualem', ['blogs']) },
+  created() {
+    this.fetchBlogs()
+    console.log(this.$auth.user)
+  },
+  methods: {
+    ...mapActions('andualem', [
+      'fetchBlogs',
+      'updateBlog',
+      'addBlog',
+      'deleteBlog',
+    ]),
+    edit_area(blog) {
+      this.isEdit = !this.isEdit
+      this.current = blog
+    },
+    update() {
+      // e.preventDefault()
+      this.isEdit = !this.isEdit
+
+      this.updateBlog({
+        id: this.current._id,
+        title: this.current.title,
+        content: this.current.content,
+      })
+    },
+    onSubmit(e) {
+      e.preventDefault()
+      this.blogPost = {
+        title: this.blogTitle,
+        content: this.blogContent,
+        description: 'description',
+      }
+      this.addBlog(this.blogPost)
+      this.blogContent = ''
+      this.blogTitle = ''
+    },
+  },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index c820f1be..90a9e495 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -33,16 +33,14 @@ export default {
     return {
       members: [
         {
-          name: "Abraham Tadesse",
+          name: 'Abraham Tadesse',
           description: 'Summer Intern',
-          link:
-            '/abraham',
+          link: '/abraham',
         },
-         {
-          name: "Andualem Sebsbe",
+        {
+          name: 'Andualem Sebsbe',
           description: 'Summer Intern',
-          link:
-            '/andualem',
+          link: '/andualem',
         },
       ],
     }
diff --git a/starter-project-web-vue2/store/andualem.js b/starter-project-web-vue2/store/andualem.js
new file mode 100644
index 00000000..886f2774
--- /dev/null
+++ b/starter-project-web-vue2/store/andualem.js
@@ -0,0 +1,51 @@
+// import axios from 'axios'
+
+export const state = {
+  blogs: [],
+}
+
+export const actions = {
+  async fetchBlogs({ commit }) {
+    const response = await this.$axios.get(
+      'https://blog-app-backend.onrender.com/api/articles/all'
+    )
+
+    commit('setBlogs', response.data.reverse())
+  },
+  async addBlog({ commit }, blogPost) {
+    const response = await this.$axios.post(
+      'https://blog-app-backend.onrender.com/api/articles',
+      blogPost
+    )
+    commit('newBlog', response.data)
+  },
+  async updateBlog({ commit }, updBlog) {
+    // console.log(updBlog.id)
+    const response = await this.$axios.patch(
+      `https://blog-app-backend.onrender.com/api/articles/${updBlog.id}`,
+      updBlog
+    )
+    commit('updateBlog', response.data)
+  },
+
+  async deleteBlog({ commit }, id) {
+    // console.log(id)
+    await this.$axios.delete(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+    commit('removeBlog', id)
+  },
+}
+
+export const mutations = {
+  setBlogs: (state, blogs) => (state.blogs = blogs),
+  newBlog: (state, blog) => state.blogs.unshift(blog),
+  updateBlog: (state, updBlog) => {
+    const index = state.blogs.findIndex((blog) => blog._id === updBlog.id)
+    if (index !== -1) {
+      state.blogs.splice(index, 1, updBlog)
+    }
+  },
+  removeBlog: (state, id) =>
+    (state.blogs = state.blogs.filter((blog) => blog._id !== id)),
+}
diff --git a/starter-project-web-vue2/stylelint.config.js b/starter-project-web-vue2/stylelint.config.js
index c497a20a..e57a2fad 100644
--- a/starter-project-web-vue2/stylelint.config.js
+++ b/starter-project-web-vue2/stylelint.config.js
@@ -3,9 +3,9 @@ module.exports = {
   extends: [
     'stylelint-config-standard',
     'stylelint-config-recommended-vue',
-    'stylelint-config-prettier'
+    'stylelint-config-prettier',
   ],
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
-  rules: {}
+  rules: {},
 }
diff --git a/starter-project-web-vue2/utils/validations.js b/starter-project-web-vue2/utils/validations.js
index 64b9e6e0..ae481557 100644
--- a/starter-project-web-vue2/utils/validations.js
+++ b/starter-project-web-vue2/utils/validations.js
@@ -1,25 +1,35 @@
-let required = (propertyType, customErrorMessage) => { 
-  return v => v && v.length > 0 || customErrorMessage || `You must input a ${propertyType}`
+const required = (propertyType, customErrorMessage) => {
+  return (v) =>
+    (v && v.length > 0) ||
+    customErrorMessage ||
+    `You must input a ${propertyType}`
 }
-let minLength = (propertyType, minLength) => {
-  return v => {
-    if(!v){ return true; }
+const minLength = (propertyType, minLength) => {
+  return (v) => {
+    if (!v) {
+      return true
+    }
 
-    return v.length >= minLength || `${propertyType} must be at least ${minLength} characters`;
+    return (
+      v.length >= minLength ||
+      `${propertyType} must be at least ${minLength} characters`
+    )
   }
 }
-let maxLength = (propertyType, maxLength) => {
-  return v => v && v.length <= maxLength || `${propertyType} must be less than ${maxLength} characters`
+const maxLength = (propertyType, maxLength) => {
+  return (v) =>
+    (v && v.length <= maxLength) ||
+    `${propertyType} must be less than ${maxLength} characters`
 }
 
-let emailFormat = () => {
-  let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,24})+$/
-  return v => v && regex.test(v) || "Must be a valid email"
+const emailFormat = () => {
+  const regex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,24})+$/
+  return (v) => (v && regex.test(v)) || 'Must be a valid email'
 }
 
 export default {
   required,
   minLength,
   maxLength,
-  emailFormat
-}
\ No newline at end of file
+  emailFormat,
+}

From 86dd32e3adf130e645314678ad3cdec40ba2a635 Mon Sep 17 00:00:00 2001
From: AndualemSebsbe <andualemsebsbe1@gmail.com>
Date: Sat, 6 Aug 2022 03:47:28 +0300
Subject: [PATCH 2/2] [web] andualem added

---
 .../pages/abraham/_id.vue                     |  9 ++----
 .../pages/andualem/_id.vue                    | 31 +++++--------------
 .../pages/andualem/index.vue                  |  1 -
 3 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/starter-project-web-vue2/pages/abraham/_id.vue b/starter-project-web-vue2/pages/abraham/_id.vue
index 802b0a39..f110f660 100644
--- a/starter-project-web-vue2/pages/abraham/_id.vue
+++ b/starter-project-web-vue2/pages/abraham/_id.vue
@@ -12,8 +12,6 @@
 </template>
 
 <script>
-import axios from 'axios'
-
 export default {
   data() {
     return {
@@ -28,17 +26,14 @@ export default {
       },
     }
     try {
-      const res = await axios.get(
+      const res = await this.$axios.get(
         `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
         config
       )
-      console.log(res)
 
       this.content = res.data.content
       this.title = res.data.title
-    } catch (err) {
-      console.log(err)
-    }
+    } catch (err) {}
   },
 }
 </script>
diff --git a/starter-project-web-vue2/pages/andualem/_id.vue b/starter-project-web-vue2/pages/andualem/_id.vue
index dd7b9a62..b313b373 100644
--- a/starter-project-web-vue2/pages/andualem/_id.vue
+++ b/starter-project-web-vue2/pages/andualem/_id.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <nuxt-link style="text-decoration: none" :to="'/andualem/'">
-      <v-btn class="success">Back to Blogs</v-btn>
-    </nuxt-link>
+    <nuxt-link :to="'/andualem/'">
+      <v-btn dark class="success pa-2 mb-2 mx-7 mt-3"
+        >Back To Blogs</v-btn
+      ></nuxt-link
+    >
     <h2>Title: {{ title }}</h2>
     <hr />
     <h4>{{ content }}</h4>
@@ -10,7 +12,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 export default {
   data() {
     return {
@@ -25,30 +26,14 @@ export default {
       },
     }
     try {
-      const res = await axios.get(
+      const res = await this.$axios.get(
         `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
         config
       )
-      console.log(res)
+
       this.content = res.data.content
       this.title = res.data.title
-    } catch (err) {
-      console.log(err)
-    }
+    } catch (err) {}
   },
 }
 </script>
-<style>
-h2 {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 15pt;
-  margin-top: 25px;
-  margin-bottom: 20px;
-}
-
-h4 {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12pt;
-  margin-top: 25px;
-}
-</style>
diff --git a/starter-project-web-vue2/pages/andualem/index.vue b/starter-project-web-vue2/pages/andualem/index.vue
index e7a19332..664e63ca 100644
--- a/starter-project-web-vue2/pages/andualem/index.vue
+++ b/starter-project-web-vue2/pages/andualem/index.vue
@@ -102,7 +102,6 @@ export default {
   computed: { ...mapState('andualem', ['blogs']) },
   created() {
     this.fetchBlogs()
-    console.log(this.$auth.user)
   },
   methods: {
     ...mapActions('andualem', [