From ba02f264841698cb7456aa60c83438438fce8241 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Thu, 28 Jul 2022 17:03:42 +0300
Subject: [PATCH 01/26] Install nuxt dependency

---
 starter-project-web-vue2/package-lock.json | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/starter-project-web-vue2/package-lock.json b/starter-project-web-vue2/package-lock.json
index 21424987..a2edce30 100644
--- a/starter-project-web-vue2/package-lock.json
+++ b/starter-project-web-vue2/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "starter-project-web-vue2",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/auth": "4.9.1",
@@ -3798,9 +3799,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -4733,7 +4731,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2 || ^2.0.0",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -6647,7 +6644,6 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -8464,8 +8460,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -12571,7 +12566,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -13810,7 +13804,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -20961,10 +20954,8 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.1"
+        "neo-async": "^2.5.0"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -21042,7 +21033,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",

From d26db67792895da686fcbbd2d86800882166cf46 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Fri, 29 Jul 2022 13:09:20 +0300
Subject: [PATCH 02/26] Create link from landing page to my blog page

---
 .DS_Store                                     | Bin 12292 -> 14340 bytes
 starter-project-web-vue2/pages/index.vue      |   7 ++++-
 .../pages/natnaelT/index.vue                  |  27 ++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 starter-project-web-vue2/pages/natnaelT/index.vue

diff --git a/.DS_Store b/.DS_Store
index 9c48bff11f454b5ee2de1336fc40774f649e61d2..ec7f309ce2400802a7715f03215d14ac8a6d6549 100644
GIT binary patch
delta 139
zcmZokXem%&U|?W$DortDU@!nOIe-{M3-ADmb_NCoo{0+jjM^ImcFQx$Z01p5WM-6@
zyhllsy^NuhA(g>s@;qhN&2GxgEQ}0`*(Eq6S%KPsz<?V_xFQ>~S&;EP^JIP<Umhli
SEfyeklQVQCZr-E9%?to$;TMen

delta 146
zcmZoEXh~3DU|?W$DortDV9)?EIe-{M3-ADmb_NCo?uiQej9ME5cFQwLZ{|^8WS(rS
zV!63lxtWELadLy0<mAWViZVd8tUwF|8r(p_6<PmgLB{vYlle`2c^DzaGXQCW$r&aS
QCl`vVY>rZ0!-Oyi01FQqo&W#<

diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index d55af3a6..62ea34cd 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -37,7 +37,12 @@ export default {
           description: 'Summer Intern',
           link:
             '/abraham',
-        },
+        },{
+          name: "Natnael Tedros",
+          description: 'Summer Intern',
+          link:
+            '/natnaelT',
+        }
       ],
     }
   },
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
new file mode 100644
index 00000000..dbf68e69
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Test Blog Page</h1>
+    <p>This is where the content of the blog would go! List of all the blogs.</p>
+  </div>
+</template>
+
+<script>
+export default {
+    head(){// used to increase the page's detail for the SEO
+        return {
+            title: "Blog App",
+            meta: [{
+                hid:"description",
+                name:"Blog page",
+                content:"Blog to save thoughts"
+            }]
+        }
+    }
+}
+</script>
+
+<style>
+p{
+    font-style: italic;
+}
+</style>
\ No newline at end of file

From ed09872ffa9efc02fabb43a64201d3afc47e3e25 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Fri, 29 Jul 2022 19:40:51 +0300
Subject: [PATCH 03/26] Create an Add Blog page

---
 .../components/natnaelT/NatnaelAddBlog.vue    | 34 +++++++++++++++++++
 .../pages/natnaelT/NatnaelAddBlog.vue         | 34 +++++++++++++++++++
 .../pages/natnaelT/index.vue                  | 31 ++++++++++++-----
 3 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
 create mode 100644 starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue

diff --git a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
new file mode 100644
index 00000000..c1c9e987
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Add your blog below:</h1>
+    <form>
+        <input type="text" name="title" placeholder="Write your title here...">
+        <input type="text" name="content" placeholder="Write your blog content here...">
+        <input class="submit" type="submit" name="Save Blog">
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'NatnaelAddBlog'
+}
+</script>
+
+<style>
+h1{
+    display: flex;
+    color: green;
+}
+
+input{
+    font-style: italic;
+    display: block;
+}
+
+.submit{
+    background-color: chartreuse;
+    display: flex;
+    justify-content:flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
new file mode 100644
index 00000000..185597d7
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Add your blog below:</h1>
+    <form>
+        <input type="text" name="title" placeholder="Write your title here...">
+        <input type="text" name="content" placeholder="Write your blog content here...">
+        <input class="submit" type="submit" name="Save Blog">
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'NatnaelAddBlog'
+}
+</script>
+
+<style>
+h1{
+    display: flex;
+    color: blue;
+}
+
+input{
+    font-style: italic;
+    display: block;
+}
+
+.submit{
+    background-color:blue;
+    display: flex;
+    justify-content:flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index dbf68e69..a653a956 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,27 +1,42 @@
 <template>
-  <div>
+  <div class="addblog">
     <h1>Test Blog Page</h1>
     <p>This is where the content of the blog would go! List of all the blogs.</p>
+    <nuxt-link to='/natnaelT/NatnaelAddBlog'>Add a new Blog</nuxt-link>
   </div>
 </template>
 
 <script>
+import NatnaelAddBlog from '~/components/natnaelT/NatnaelAddBlog'
 export default {
-    head(){// used to increase the page's detail for the SEO
+    head() {
         return {
             title: "Blog App",
             meta: [{
-                hid:"description",
-                name:"Blog page",
-                content:"Blog to save thoughts"
-            }]
-        }
+                    hid: "description",
+                    name: "Blog page",
+                    content: "Blog to save thoughts"
+                }]
+        };
+    },
+    comments: {
+        NatnaelAddBlog
     }
 }
 </script>
 
 <style>
-p{
+
+.addblog p{
     font-style: italic;
 }
+
+.addblog nuxt-link{
+    display: inline-block;
+    background: blue;
+    color: aliceblue;
+    padding: 0.3rem 1rem;
+    margin-right: 0.5rem;
+}
+
 </style>
\ No newline at end of file

From 0f3021f5a57fb4737d8476019f4d7b035f568c7a Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Sat, 30 Jul 2022 22:24:22 +0300
Subject: [PATCH 04/26] include Create Add and Delete blog functionalities

---
 .../components/natnaelT/AddBlogButton.vue     | 17 ++++
 .../components/natnaelT/AddBlogForm.vue       | 86 +++++++++++++++++++
 .../components/natnaelT/BlogList.vue          | 22 +++++
 .../components/natnaelT/NatnaelAddBlog.vue    | 34 --------
 .../components/natnaelT/SingleBlog.vue        | 28 ++++++
 .../pages/natnaelT/NatnaelAddBlog.vue         | 34 --------
 .../pages/natnaelT/index.vue                  | 68 ++++++++++++++-
 7 files changed, 217 insertions(+), 72 deletions(-)
 create mode 100644 starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/BlogList.vue
 delete mode 100644 starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/SingleBlog.vue
 delete mode 100644 starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
new file mode 100644
index 00000000..1620cd36
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -0,0 +1,17 @@
+<template>
+    <button class="btn" :style="{ background: 'color' }" @click="onClick()">{{text}}</button>
+</template>
+<script>
+export default {
+    name:'AddBlogButton',
+    props:{
+        text: String,
+        color: String
+    },
+    methods:{
+        onClick(){
+             this.$emit("toggle-add-blog")
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
new file mode 100644
index 00000000..492496b1
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -0,0 +1,86 @@
+<template>
+  <form @submit="onSubmit" class="add-form">
+    <div class="form-control">
+      <label>Title of Blog</label>
+      <input type="text" v-model="title" name="content" placeholder="Blog Title here..." />
+    </div>
+    <div class="form-control">
+      <label>Content of Blog</label>
+      <input
+        type="text"
+        v-model="content"
+        name="content"
+        placeholder="Write here..."
+      />
+    </div>
+    <input type="submit" value="Save Task" class="btn" />
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'AddBlogForm',
+  data() {
+    return {
+      title: '',
+      content: ''
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      if (!this.title) {
+        alert('Please add a task')
+        return
+      }
+      const newBlog = {
+        id: Math.floor(Math.random() * 100000),
+        title: this.title,
+        content: this.content
+      }
+      this.$emit('add-blog', newBlog)
+      this.title = ''
+      this.content = ''
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.add-form {
+  margin-bottom: 40px;
+}
+
+.form-control {
+  margin: 20px 0;
+}
+
+.form-control label {
+  display: block;
+}
+
+.form-control input {
+  width: 100%;
+  height: 40px;
+  margin: 5px;
+  padding: 3px 7px;
+  font-size: 17px;
+}
+
+.form-control-check {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-control-check label {
+  flex: 1;
+}
+
+.form-control-check input {
+  flex: 2;
+  height: 20px;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
new file mode 100644
index 00000000..4884a1aa
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -0,0 +1,22 @@
+<template>
+<div>
+<div v-for="blog in blogs" :key="blog.id">
+    <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
+  </div>
+</div>
+</template>
+
+<script>
+import SingleBlog from './SingleBlog.vue'
+export default {
+name:"BlogList",
+props:{
+blogs: Array
+},
+components:{
+    SingleBlog
+},
+emits: ["delete-blog"]
+}
+</script>
+
diff --git a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
deleted file mode 100644
index c1c9e987..00000000
--- a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <h1>Add your blog below:</h1>
-    <form>
-        <input type="text" name="title" placeholder="Write your title here...">
-        <input type="text" name="content" placeholder="Write your blog content here...">
-        <input class="submit" type="submit" name="Save Blog">
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'NatnaelAddBlog'
-}
-</script>
-
-<style>
-h1{
-    display: flex;
-    color: green;
-}
-
-input{
-    font-style: italic;
-    display: block;
-}
-
-.submit{
-    background-color: chartreuse;
-    display: flex;
-    justify-content:flex-end;
-}
-</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
new file mode 100644
index 00000000..9b467cdc
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h3>{{blog.title}}</h3>
+    <p>{{blog.content}}</p>
+    <button class="btn">Update</button>
+    <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "SingleBlog",
+    props: {
+        blog: Object
+    },
+    emits: ["delete-blog"]
+}
+</script>
+<style>
+
+.btn {
+    display: flex;
+    padding: 2px; 
+    margin: 1px;
+    border-radius: 0.5px;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
deleted file mode 100644
index 185597d7..00000000
--- a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <h1>Add your blog below:</h1>
-    <form>
-        <input type="text" name="title" placeholder="Write your title here...">
-        <input type="text" name="content" placeholder="Write your blog content here...">
-        <input class="submit" type="submit" name="Save Blog">
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'NatnaelAddBlog'
-}
-</script>
-
-<style>
-h1{
-    display: flex;
-    color: blue;
-}
-
-input{
-    font-style: italic;
-    display: block;
-}
-
-.submit{
-    background-color:blue;
-    display: flex;
-    justify-content:flex-end;
-}
-</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index a653a956..a8cd7bc8 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,14 +1,31 @@
 <template>
   <div class="addblog">
+    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
+    <div v-if="showAddBlog">
+    <AddBlogForm @add-blog="addBlog"/>
+    </div>
     <h1>Test Blog Page</h1>
     <p>This is where the content of the blog would go! List of all the blogs.</p>
-    <nuxt-link to='/natnaelT/NatnaelAddBlog'>Add a new Blog</nuxt-link>
+    <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
   </div>
 </template>
 
 <script>
-import NatnaelAddBlog from '~/components/natnaelT/NatnaelAddBlog'
+import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
+import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
+import BlogList from '~/components/natnaelT/BlogList.vue';
 export default {
+    components: {
+    AddBlogButton,
+    AddBlogForm,
+    BlogList
+},
+    data() {
+        return{
+            blogs:[],
+            showAddBlog: true
+        }
+    },
     head() {
         return {
             title: "Blog App",
@@ -19,9 +36,42 @@ export default {
                 }]
         };
     },
-    comments: {
-        NatnaelAddBlog
+    
+    created(){
+            this.blogs = [{
+                id: 1,
+                title: "Blog test one",
+                content: "This is the content of the test Blog one"
+            },
+            {
+                id: 2,
+                title: "Blog test two",
+                content: "This is the content of the test Blog two"
+            },
+            {
+                id: 3,
+                title: "Blog test three",
+                content: "This is the content of the test Blog three"
+            },
+            {
+                id: 4,
+                title: "Blog test four",
+                content: "This is the content of the test Blog four"
+            }]
+        },
+    
+    methods:{
+        addBlog(blog){
+            this.blogs = [...this.blogs,blog]
+        },
+        deleteBlog(id){
+            this.blogs = this.blogs.filter((blog) => blog.id !== id)
+        },
+        toggleAddBlog(){
+            this.showAddBlog = !this.showAddBlog
+        }
     }
+    
 }
 </script>
 
@@ -39,4 +89,14 @@ export default {
     margin-right: 0.5rem;
 }
 
+.btn{
+    background: blue;
+    padding: 5px 10px;
+    color: white;
+    display: inline-block;
+    margin: 2px;
+    border-radius: 10px;
+
+}
+
 </style>
\ No newline at end of file

From fd5bbf37b5b5b0ddd4c85cd0ae9119be23e7febb Mon Sep 17 00:00:00 2001
From: AndualemSebsbe <andualemsebsbe1@gmail.com>
Date: Sun, 31 Jul 2022 17:22:29 +0300
Subject: [PATCH 05/26] [web] andualem added basic UI

---
 .../components/andualem/AndualemAddBlog.vue   |  0
 .../components/andualem/AndualemBlogPost.vue  |  0
 .../components/andualem/NavigationBar.vue     |  0
 .../components/andualem/UserAuthForm.vue      |  0
 starter-project-web-vue2/package-lock.json    | 16 +---
 .../pages/andualem/index.vue                  | 74 +++++++++++++++++++
 starter-project-web-vue2/pages/index.vue      |  6 ++
 7 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 starter-project-web-vue2/components/andualem/AndualemAddBlog.vue
 create mode 100644 starter-project-web-vue2/components/andualem/AndualemBlogPost.vue
 create mode 100644 starter-project-web-vue2/components/andualem/NavigationBar.vue
 create mode 100644 starter-project-web-vue2/components/andualem/UserAuthForm.vue
 create mode 100644 starter-project-web-vue2/pages/andualem/index.vue

diff --git a/starter-project-web-vue2/components/andualem/AndualemAddBlog.vue b/starter-project-web-vue2/components/andualem/AndualemAddBlog.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/starter-project-web-vue2/components/andualem/AndualemBlogPost.vue b/starter-project-web-vue2/components/andualem/AndualemBlogPost.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/starter-project-web-vue2/components/andualem/NavigationBar.vue b/starter-project-web-vue2/components/andualem/NavigationBar.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/starter-project-web-vue2/components/andualem/UserAuthForm.vue b/starter-project-web-vue2/components/andualem/UserAuthForm.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/starter-project-web-vue2/package-lock.json b/starter-project-web-vue2/package-lock.json
index 21424987..a2edce30 100644
--- a/starter-project-web-vue2/package-lock.json
+++ b/starter-project-web-vue2/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "starter-project-web-vue2",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/auth": "4.9.1",
@@ -3798,9 +3799,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -4733,7 +4731,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2 || ^2.0.0",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -6647,7 +6644,6 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -8464,8 +8460,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -12571,7 +12566,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -13810,7 +13804,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -20961,10 +20954,8 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.1"
+        "neo-async": "^2.5.0"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -21042,7 +21033,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
diff --git a/starter-project-web-vue2/pages/andualem/index.vue b/starter-project-web-vue2/pages/andualem/index.vue
new file mode 100644
index 00000000..dfe5493c
--- /dev/null
+++ b/starter-project-web-vue2/pages/andualem/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <v-app>
+    <v-dialog max-width="600px">
+        <template v-slot: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-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-card-text>
+        </v-card>
+    </v-dialog>
+        
+   <!-- <v-card> -->
+    <div 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-col>
+    </div>
+  <!-- </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"},
+            ]
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index d55af3a6..c820f1be 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -38,6 +38,12 @@ export default {
           link:
             '/abraham',
         },
+         {
+          name: "Andualem Sebsbe",
+          description: 'Summer Intern',
+          link:
+            '/andualem',
+        },
       ],
     }
   },

From 17c8f1da629512e5b6b228c7aaec9a59ac134b8e Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Mon, 1 Aug 2022 20:46:53 +0300
Subject: [PATCH 06/26] Get data from the blog backend

---
 .../pages/natnaelT/index.vue                  | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index a8cd7bc8..465b3dfa 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -23,7 +23,7 @@ export default {
     data() {
         return{
             blogs:[],
-            showAddBlog: true
+            showAddBlog: false
         }
     },
     head() {
@@ -37,38 +37,32 @@ export default {
         };
     },
     
-    created(){
-            this.blogs = [{
-                id: 1,
-                title: "Blog test one",
-                content: "This is the content of the test Blog one"
-            },
-            {
-                id: 2,
-                title: "Blog test two",
-                content: "This is the content of the test Blog two"
-            },
-            {
-                id: 3,
-                title: "Blog test three",
-                content: "This is the content of the test Blog three"
-            },
-            {
-                id: 4,
-                title: "Blog test four",
-                content: "This is the content of the test Blog four"
-            }]
+    async created(){
+            this.blogs = await this.fetchBlog()
         },
     
     methods:{
-        addBlog(blog){
-            this.blogs = [...this.blogs,blog]
+        async addBlog(blog){
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all', {
+                method: "POST",
+                headers:{
+                    'Content-type': "applicatio/json",
+                },
+                body: JSON.stringify(blog)
+            })
+            const data = await res.json()
+            this.blogs = [...this.blogs,data]
         },
         deleteBlog(id){
             this.blogs = this.blogs.filter((blog) => blog.id !== id)
         },
         toggleAddBlog(){
             this.showAddBlog = !this.showAddBlog
+        },
+        async fetchBlog(){
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all')
+            const data = await res.json()
+            return data
         }
     }
     

From 309ab4ed92ca6b8720347fc5060b682e691c3142 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Tue, 2 Aug 2022 12:40:38 +0300
Subject: [PATCH 07/26] Add basic UI

---
 .../components/natnaelT/AddBlogButton.vue          |  4 ++--
 .../components/natnaelT/AddBlogForm.vue            | 14 +++++++-------
 .../components/natnaelT/BlogList.vue               |  4 +++-
 .../components/natnaelT/SingleBlog.vue             | 11 +++++++++--
 starter-project-web-vue2/pages/natnaelT/index.vue  | 11 ++++++-----
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
index 1620cd36..7470e690 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="btn" :style="{ background: 'color' }" @click="onClick()">{{text}}</button>
+    <button class="btn" :style="{ background: 'color', display: 'center'}" @click="onClick()">{{text}}</button>
 </template>
 <script>
 export default {
@@ -14,4 +14,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 492496b1..578743e9 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -1,19 +1,19 @@
 <template>
-  <form @submit="onSubmit" class="add-form">
+  <form class="add-form" @submit="onSubmit">
     <div class="form-control">
-      <label>Title of Blog</label>
-      <input type="text" v-model="title" name="content" placeholder="Blog Title here..." />
+      <label>Title</label>
+      <input v-model="title" type="text" name="content" placeholder="Blog Title here..." />
     </div>
     <div class="form-control">
-      <label>Content of Blog</label>
+      <label>Content</label>
       <input
-        type="text"
         v-model="content"
+        type="text"
         name="content"
         placeholder="Write here..."
       />
     </div>
-    <input type="submit" value="Save Task" class="btn" />
+    <input type="submit" value="Save Blog" class="btn" />
   </form>
 </template>
 
@@ -34,7 +34,7 @@ export default {
         return
       }
       const newBlog = {
-        id: Math.floor(Math.random() * 100000),
+        // id: Math.floor(Math.random() * 100000),
         title: this.title,
         content: this.content
       }
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 4884a1aa..64cb45ef 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -2,6 +2,9 @@
 <div>
 <div v-for="blog in blogs" :key="blog.id">
     <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
+    <p>
+      
+    </p>
   </div>
 </div>
 </template>
@@ -19,4 +22,3 @@ components:{
 emits: ["delete-blog"]
 }
 </script>
-
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index 9b467cdc..6702f9a0 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h3>{{blog.title}}</h3>
+  <div class="singleblog">
+    <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
     <button class="btn">Update</button>
     <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
@@ -25,4 +25,11 @@ export default {
     border-radius: 0.5px;
 }
 
+.singleblog{
+  background: 	#D3D3D3;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 15px;
+}
+
 </style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index 465b3dfa..c780c882 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="addblog">
     <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
-    <div v-if="showAddBlog">
+    <div class="addblogform" v-if="showAddBlog">
     <AddBlogForm @add-blog="addBlog"/>
     </div>
-    <h1>Test Blog Page</h1>
-    <p>This is where the content of the blog would go! List of all the blogs.</p>
+    <div class="bloglist">
     <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
+    </div>
   </div>
 </template>
 
@@ -43,10 +43,10 @@ export default {
     
     methods:{
         async addBlog(blog){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all', {
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/', {
                 method: "POST",
                 headers:{
-                    'Content-type': "applicatio/json",
+                    'Content-type': "application/json"
                 },
                 body: JSON.stringify(blog)
             })
@@ -84,6 +84,7 @@ export default {
 }
 
 .btn{
+    justify-content: center;
     background: blue;
     padding: 5px 10px;
     color: white;

From c5f5b8a9e9d7d0500e3e91b8bda156c49e68a011 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Tue, 2 Aug 2022 12:44:57 +0300
Subject: [PATCH 08/26] fixed warnings

---
 starter-project-web-vue2/components/natnaelT/SingleBlog.vue | 2 +-
 starter-project-web-vue2/pages/natnaelT/index.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index 6702f9a0..cb0932ec 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -3,7 +3,7 @@
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
     <button class="btn">Update</button>
-    <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
+    <button class="btn" @click="$emit('delete-blog',blog.id)">Delete</button>
   </div>
 </template>
 
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index c780c882..7b8c5832 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="addblog">
     <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
-    <div class="addblogform" v-if="showAddBlog">
+    <div v-if="showAddBlog" class="addblogform">
     <AddBlogForm @add-blog="addBlog"/>
     </div>
     <div class="bloglist">

From a997e578319ee17b05a1e103c21c4fc9ecddba54 Mon Sep 17 00:00:00 2001
From: Liben Hailu <libenhailu04@gmail.com>
Date: Tue, 2 Aug 2022 16:49:10 +0300
Subject: [PATCH 09/26] [web] Implement Article CRUD (#255)

* [web] Implement Article CRUD
---
 .../components/liben/LibenArticle.vue         |  74 ++++++++++
 .../components/liben/LibenArticleComment.vue  |  35 +++++
 .../components/liben/LibenArticleDetail.vue   |  70 +++++++++
 .../components/liben/LibenArticleForm.vue     |  72 +++++++++
 .../components/liben/LibenArticleSearch.vue   |  49 +++++++
 .../components/liben/LibenCommentForm.vue     |  53 +++++++
 .../components/liben/LibenDialog.vue          |  68 +++++++++
 .../components/liben/LoadingBar.vue           |  36 +++++
 starter-project-web-vue2/layouts/error.vue    |  56 +++----
 .../middleware/unauthorized.js                |   7 +
 starter-project-web-vue2/nuxt.config.js       |  11 +-
 starter-project-web-vue2/package-lock.json    | 138 +++++-------------
 starter-project-web-vue2/package.json         |   1 +
 starter-project-web-vue2/pages/index.vue      |  14 +-
 .../pages/liben/articles/_id/edit.vue         |  42 ++++++
 .../pages/liben/articles/_id/index.vue        |  52 +++++++
 .../pages/liben/articles/create.vue           |  34 +++++
 .../pages/liben/articles/index.vue            |  34 +++++
 starter-project-web-vue2/store/liben.js       |  77 ++++++++++
 19 files changed, 789 insertions(+), 134 deletions(-)
 create mode 100644 starter-project-web-vue2/components/liben/LibenArticle.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenArticleComment.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenArticleDetail.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenArticleForm.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenArticleSearch.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenCommentForm.vue
 create mode 100644 starter-project-web-vue2/components/liben/LibenDialog.vue
 create mode 100644 starter-project-web-vue2/components/liben/LoadingBar.vue
 create mode 100644 starter-project-web-vue2/middleware/unauthorized.js
 create mode 100644 starter-project-web-vue2/pages/liben/articles/_id/edit.vue
 create mode 100644 starter-project-web-vue2/pages/liben/articles/_id/index.vue
 create mode 100644 starter-project-web-vue2/pages/liben/articles/create.vue
 create mode 100644 starter-project-web-vue2/pages/liben/articles/index.vue
 create mode 100644 starter-project-web-vue2/store/liben.js

diff --git a/starter-project-web-vue2/components/liben/LibenArticle.vue b/starter-project-web-vue2/components/liben/LibenArticle.vue
new file mode 100644
index 00000000..779e0573
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenArticle.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card
+    class="mx-auto my-12"
+    max-width="374"
+    style="margin: 12px"
+    :to="`/liben/articles/${article._id}`"
+  >
+    <v-card-title>{{ article.title }}</v-card-title>
+
+    <v-card-text>
+      <v-row align="center" class="mx-0">
+        <v-rating
+          :value="calculateRating(article.rating)"
+          color="amber"
+          dense
+          half-increments
+          readonly
+          size="14"
+          style="padding-left: 8px"
+        ></v-rating>
+
+        <div class="grey--text ms-4" style="padding-left: 8px">
+          by {{ article.authorUserId.fullName }}
+        </div>
+      </v-row>
+
+      <div class="my-4 text-subtitle-1" style="margin-top: 8px">
+        {{ formatTime(article.updatedAt) }}
+      </div>
+
+      <div>
+        {{ article.description }}
+      </div>
+    </v-card-text>
+
+    <v-divider class="mx-4"></v-divider>
+
+    <v-card-title>Tags</v-card-title>
+
+    <v-card-text>
+      <v-chip-group v-if="article.categories" column>
+        <v-chip v-for="(cat, index) in article.categories" :key="index">{{
+          cat
+        }}</v-chip>
+      </v-chip-group>
+      <v-card-text v-else>No tags</v-card-text>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  props: {
+    article: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    calculateRating(obj) {
+      const values = Object.values(obj)
+      const size = Object.keys(obj).length
+      const sum = values.reduce((accumulator, value) => {
+        return accumulator + value
+      }, 0)
+      return sum / size
+    },
+    formatTime(t) {
+      return moment(t).fromNow()
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenArticleComment.vue b/starter-project-web-vue2/components/liben/LibenArticleComment.vue
new file mode 100644
index 00000000..a6a63281
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenArticleComment.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <v-divider></v-divider>
+
+    <v-list-item>
+      <v-list-item-avatar>
+        <v-img src="https://cdn.vuetifyjs.com/images/lists/1.jpg"></v-img>
+      </v-list-item-avatar>
+
+      <v-list-item-content>
+        <v-list-item-subtitle>{{ comment.user.fullName }}</v-list-item-subtitle>
+        <v-list-item-title>{{ comment.text }}</v-list-item-title>
+        <v-list-item-subtitle>{{
+          formatTime(comment.updatedAt)
+        }}</v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  props: {
+    comment: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    formatTime(t) {
+      return moment(t).fromNow()
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenArticleDetail.vue b/starter-project-web-vue2/components/liben/LibenArticleDetail.vue
new file mode 100644
index 00000000..a2d9fe09
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenArticleDetail.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <v-container>
+      <v-row class="float-right" no-gutters>
+        <v-col>
+          <v-btn icon left text :to="`/liben/articles/${article._id}/edit`">
+            <v-icon> mdi-pencil </v-icon>
+          </v-btn>
+        </v-col>
+        <v-col>
+          <v-btn icon @click.stop="dialog = true">
+            <v-icon> mdi-delete </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- dialog -->
+    <LibenDialog
+      :id="article._id"
+      :title="article.title"
+      :visible="dialog"
+      @close="dialog = false"
+    />
+    <h1>{{ article.title }}</h1>
+    <v-container>
+      <v-row>
+        <span>{{ formatTime(article.updatedAt) }}</span>
+        <v-spacer></v-spacer>
+        <span>by {{ article.authorUserId.fullName }}</span>
+      </v-row>
+    </v-container>
+    <p style="font-size: 22px">{{ article.description }}</p>
+
+    <v-carousel v-if="article.imageUrls && article.imageUrls.length != 0">
+      <v-carousel-item
+        v-for="(item, i) in article.imageUrls"
+        :key="i"
+        :src="item"
+        reverse-transition="fade-transition"
+        transition="fade-transition"
+      ></v-carousel-item>
+    </v-carousel>
+
+    <p style="font-size: 22px">{{ article.content }}</p>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import LibenDialog from './LibenDialog.vue'
+export default {
+  components: { LibenDialog },
+  props: {
+    article: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+  methods: {
+    formatTime(t) {
+      return moment(t).fromNow()
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenArticleForm.vue b/starter-project-web-vue2/components/liben/LibenArticleForm.vue
new file mode 100644
index 00000000..8c38dd85
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenArticleForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <form ref="form">
+    <v-text-field
+      v-model="formData.title"
+      :rules="reqRules"
+      label="Title"
+      required
+    ></v-text-field>
+
+    <v-text-field
+      v-model="formData.description"
+      :rules="reqRules"
+      label="Description"
+      required
+    ></v-text-field>
+
+    <v-textarea
+      v-model="formData.content"
+      :rules="reqRules"
+      label="Content"
+      required
+    ></v-textarea>
+
+    <v-text-field
+      v-model="formData.categories"
+      label="Categories comma separated"
+    ></v-text-field>
+
+    <v-btn class="mr-4" @click="submit"> submit </v-btn>
+    <v-btn @click="clear"> clear </v-btn>
+  </form>
+</template>
+<script>
+export default {
+  props: {
+    article: {
+      type: Object,
+      default: () => ({ empty: true }),
+    },
+  },
+  data() {
+    return {
+      formData: { title: '', description: '', content: '', categories: '' },
+      reqRules: [(v) => !!v || 'This field is required'],
+    }
+  },
+  created() {
+    if (!this.article.empty) {
+      this.formData.title = this.article.title
+      this.formData.description = this.article.description
+      this.formData.content = this.article.content
+      this.formData.categories =
+        this.article.categories && this.article.categories.join()
+    }
+  },
+  methods: {
+    submit() {
+      this.formData.categories =
+        this.formData.categories &&
+        this.formData.categories.split(',').map((item) => item.trim())
+      this.$emit('on-submit', this.formData)
+    },
+    clear() {
+      this.$refs.form.reset()
+      this.formData.title = ''
+      this.formData.description = ''
+      this.formData.content = ''
+      this.formData.categories = ''
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenArticleSearch.vue b/starter-project-web-vue2/components/liben/LibenArticleSearch.vue
new file mode 100644
index 00000000..807b2e6c
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenArticleSearch.vue
@@ -0,0 +1,49 @@
+<template>
+  <v-form>
+    <v-container>
+      <v-row justify="center">
+        <v-col cols="12" md="6">
+          <v-container>
+            <v-text-field
+              v-model="message"
+              append-outer-icon="mdi-magnify"
+              clear-icon="mdi-close-circle"
+              clearable
+              label="Search"
+              type="text"
+              @click:append-outer="search"
+              @click:clear="clearMessage"
+            ></v-text-field>
+          </v-container>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  data: () => ({
+    message: '',
+  }),
+
+  methods: {
+    ...mapActions('liben', ['searchArticle']),
+    async search() {
+      if (this.message) {
+        try {
+          await this.searchArticle(this.message)
+        } catch (e) {
+          return this.$nuxt.error({
+            statusCode: e.statusCode,
+            message: e.message,
+          })
+        }
+      }
+    },
+    clearMessage() {
+      this.message = ''
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenCommentForm.vue b/starter-project-web-vue2/components/liben/LibenCommentForm.vue
new file mode 100644
index 00000000..a1602f4d
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenCommentForm.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-toolbar color="cyan">
+    <v-toolbar-title>
+      <v-container>
+        <v-text-field
+          v-model="comment"
+          label="Comment..."
+          :rules="rules"
+          hide-details="auto"
+        ></v-text-field>
+      </v-container>
+    </v-toolbar-title>
+
+    <v-spacer></v-spacer>
+
+    <v-btn icon @click="addComment">
+      <v-icon> mdi-arrow-up-bold-box-outline</v-icon>
+    </v-btn>
+  </v-toolbar>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      rules: [
+        (value) => !!value || 'Required.',
+        (value) => (value && value.length >= 3) || 'Min 3 characters',
+      ],
+      comment: '',
+    }
+  },
+  methods: {
+    ...mapActions('liben', ['createComment']),
+    async addComment() {
+      if (this.comment) {
+        try {
+          await this.createComment({
+            id: this.$route.params.id,
+            text: this.comment,
+          })
+          this.comment = ''
+        } catch (e) {
+          return this.$nuxt.error({
+            statusCode: e.statusCode,
+            message: e.message,
+          })
+        }
+      }
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LibenDialog.vue b/starter-project-web-vue2/components/liben/LibenDialog.vue
new file mode 100644
index 00000000..9a935877
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LibenDialog.vue
@@ -0,0 +1,68 @@
+<template>
+  <v-row justify="center">
+    <v-dialog v-model="show" max-width="290">
+      <v-card>
+        <v-card-title class="text-h5">
+          Are you sure you want to delete {{ title }}?
+        </v-card-title>
+
+        <v-card-text> Remember this action is irreversible. </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn color="green darken-1" text @click="show = false">
+            Cancel
+          </v-btn>
+
+          <v-btn color="green darken-1" text @click="removeArticle(id)">
+            Delete
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  props: {
+    visible: Boolean,
+    title: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        if (!value) {
+          this.$emit('close')
+        }
+      },
+    },
+  },
+  methods: {
+    ...mapActions('liben', ['deleteArticle']),
+    async removeArticle(id) {
+      try {
+        await this.deleteArticle(id)
+        this.show = false
+        this.$router.back()
+      } catch (e) {
+        return this.$nuxt.error({
+          statusCode: e.statusCode,
+          message: e.message,
+        })
+      }
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/liben/LoadingBar.vue b/starter-project-web-vue2/components/liben/LoadingBar.vue
new file mode 100644
index 00000000..bb7730bf
--- /dev/null
+++ b/starter-project-web-vue2/components/liben/LoadingBar.vue
@@ -0,0 +1,36 @@
+<template>
+  <div v-if="loading" class="loading-page">
+    <p>Loading...</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    loading: false,
+  }),
+  methods: {
+    start() {
+      this.loading = true
+    },
+    finish() {
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.loading-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(255 255 255 / 80%);
+  text-align: center;
+  padding-top: 200px;
+  font-size: 30px;
+  font-family: sans-serif;
+}
+</style>
diff --git a/starter-project-web-vue2/layouts/error.vue b/starter-project-web-vue2/layouts/error.vue
index 6834bd8e..c686e775 100644
--- a/starter-project-web-vue2/layouts/error.vue
+++ b/starter-project-web-vue2/layouts/error.vue
@@ -1,43 +1,45 @@
 <template>
-  <v-app dark>
-    <h1 v-if="error.statusCode === 404">
-      {{ pageNotFound }}
-    </h1>
-    <h1 v-else>
-      {{ otherError }}
-    </h1>
-    <NuxtLink to="/"> Home page </NuxtLink>
-  </v-app>
+  <div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="90"
+      height="90"
+      fill="#DBE1EC"
+      viewBox="0 0 48 48"
+    >
+      <path
+        d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"
+      />
+    </svg>
+    <div class="title">
+      {{ message }}
+    </div>
+    <p v-if="statusCode === 404">
+      <nuxt-link to="/"> Return to homepage </nuxt-link>
+    </p>
+  </div>
 </template>
-
 <script>
 export default {
-  name: 'EmptyLayout',
-  layout: 'empty',
+  name: 'NuxtError',
   props: {
     error: {
       type: Object,
       default: null,
     },
   },
-  data() {
-    return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred',
-    }
-  },
   head() {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
     return {
-      title,
+      title: this.message,
     }
   },
+  computed: {
+    statusCode() {
+      return (this.error && this.error.statusCode) || 500
+    },
+    message() {
+      return this.error.message
+    },
+  },
 }
 </script>
-
-<style scoped>
-h1 {
-  font-size: 20px;
-}
-</style>
diff --git a/starter-project-web-vue2/middleware/unauthorized.js b/starter-project-web-vue2/middleware/unauthorized.js
new file mode 100644
index 00000000..e7b9e611
--- /dev/null
+++ b/starter-project-web-vue2/middleware/unauthorized.js
@@ -0,0 +1,7 @@
+export default function ({ $axios, redirect }) {
+  $axios.onError((error) => {
+    if (error.response.status === 401 || error.response.status === 403) {
+      redirect('/abraham/login')
+    }
+  })
+}
diff --git a/starter-project-web-vue2/nuxt.config.js b/starter-project-web-vue2/nuxt.config.js
index edc51496..c0c5e996 100644
--- a/starter-project-web-vue2/nuxt.config.js
+++ b/starter-project-web-vue2/nuxt.config.js
@@ -1,5 +1,4 @@
 import colors from 'vuetify/es5/util/colors'
-
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -20,6 +19,8 @@ export default {
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [],
 
+  loading: '@/components/liben/LoadingBar.vue',
+
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],
 
@@ -39,6 +40,10 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   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: {
     customVariables: ['~/assets/variables.scss'],
@@ -61,6 +66,10 @@ export default {
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
 
+  router: {
+    middleware: 'unauthorized',
+  },
+
   auth: {
     strategies: {
       local: {
diff --git a/starter-project-web-vue2/package-lock.json b/starter-project-web-vue2/package-lock.json
index a2edce30..c70b818e 100644
--- a/starter-project-web-vue2/package-lock.json
+++ b/starter-project-web-vue2/package-lock.json
@@ -12,6 +12,7 @@
         "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
         "@nuxtjs/axios": "^5.13.6",
         "core-js": "^3.19.3",
+        "moment": "^2.29.4",
         "nuxt": "^2.15.8",
         "vue-server-renderer": "^2.6.14",
         "vue-template-compiler": "^2.6.14",
@@ -5974,7 +5975,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
       "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "file-uri-to-path": "1.0.0"
       }
@@ -9721,7 +9722,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
       "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/fill-range": {
       "version": "7.0.1",
@@ -10016,19 +10017,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -14527,6 +14515,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -14586,12 +14582,6 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
-    "node_modules/nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "optional": true
-    },
     "node_modules/nanoid": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
@@ -21074,24 +21064,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/watchpack-chokidar2/node_modules/fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
     "node_modules/watchpack-chokidar2/node_modules/glob-parent": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -26132,8 +26104,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -26173,14 +26144,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -26505,8 +26474,7 @@
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "babel-jest": {
       "version": "27.5.1",
@@ -26896,7 +26864,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
       "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "file-uri-to-path": "1.0.0"
       }
@@ -29058,15 +29026,13 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-config-standard": {
       "version": "16.0.3",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-16.0.3.tgz",
       "integrity": "sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
@@ -29299,8 +29265,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-5.2.0.tgz",
       "integrity": "sha512-SftLb1pUG01QYq2A/hGAWfDRXqYD82zE7j7TopDOyNdU+7SvvoXREls/+PRTY17vUXzXnZA/zfnyKgRH6x4JJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-plugin-unicorn": {
       "version": "39.0.0",
@@ -29776,7 +29741,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
       "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "devOptional": true
+      "dev": true
     },
     "fill-range": {
       "version": "7.0.1",
@@ -30000,12 +29965,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -32092,8 +32051,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -33347,6 +33305,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -33396,12 +33359,6 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
-    "nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "optional": true
-    },
     "nanoid": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
@@ -34531,8 +34488,7 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
           "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -36875,8 +36831,7 @@
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
           "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "balanced-match": {
           "version": "2.0.0",
@@ -36931,8 +36886,7 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
           "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "type-fest": {
           "version": "0.18.1",
@@ -36956,22 +36910,19 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-html/-/stylelint-config-html-1.1.0.tgz",
       "integrity": "sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "stylelint-config-prettier": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz",
       "integrity": "sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "stylelint-config-recommended": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-8.0.0.tgz",
       "integrity": "sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "stylelint-config-recommended-vue": {
       "version": "1.4.0",
@@ -37008,8 +36959,7 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz",
           "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -37377,8 +37327,7 @@
     "time-fix-plugin": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/time-fix-plugin/-/time-fix-plugin-2.0.7.tgz",
-      "integrity": "sha512-uVFet1LQToeUX0rTcSiYVYVoGuBpc8gP/2jnlUzuHMHe+gux6XLsNzxLUweabMwiUj5ejhoIMsUI55nVSEa/Vw==",
-      "requires": {}
+      "integrity": "sha512-uVFet1LQToeUX0rTcSiYVYVoGuBpc8gP/2jnlUzuHMHe+gux6XLsNzxLUweabMwiUj5ejhoIMsUI55nVSEa/Vw=="
     },
     "timers-browserify": {
       "version": "2.0.12",
@@ -38294,8 +38243,7 @@
     "vuetify": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.7.tgz",
-      "integrity": "sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw==",
-      "requires": {}
+      "integrity": "sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw=="
     },
     "vuetify-loader": {
       "version": "1.9.2",
@@ -38321,8 +38269,7 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "requires": {}
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
     "w3c-hr-time": {
       "version": "1.0.2",
@@ -38458,16 +38405,6 @@
             "to-regex-range": "^2.1.0"
           }
         },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
-        },
         "glob-parent": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -39347,8 +39284,7 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "requires": {}
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/starter-project-web-vue2/package.json b/starter-project-web-vue2/package.json
index 918272f2..cfb420df 100644
--- a/starter-project-web-vue2/package.json
+++ b/starter-project-web-vue2/package.json
@@ -20,6 +20,7 @@
     "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
     "@nuxtjs/axios": "^5.13.6",
     "core-js": "^3.19.3",
+    "moment": "^2.29.4",
     "nuxt": "^2.15.8",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 25cbe6df..f4de04f5 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -53,15 +53,19 @@ export default {
           link: '/ruth',
         },
         {
-          name: "Keiredin Aman",
+          name: 'Keiredin Aman',
           description: 'Summer Intern',
           link: '/keiredin',
         },
-         {
-          name: "Andualem Sebsbe",
+        {
+          name: 'Andualem Sebsbe',
           description: 'Summer Intern',
-          link:
-            '/andualem',
+          link: '/andualem',
+        },
+        {
+          name: 'Liben',
+          description: 'Web Team Member',
+          link: '/liben/articles',
         },
       ],
     }
diff --git a/starter-project-web-vue2/pages/liben/articles/_id/edit.vue b/starter-project-web-vue2/pages/liben/articles/_id/edit.vue
new file mode 100644
index 00000000..f011ce93
--- /dev/null
+++ b/starter-project-web-vue2/pages/liben/articles/_id/edit.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col md="8" cols="12">
+        <h1>Edit Article</h1>
+        <LibenArticleForm :article="article" @on-submit="editArticle" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  async fetch({ store, params, error }) {
+    try {
+      await store.dispatch('liben/getArticle', params.id)
+    } catch (e) {
+      error({
+        statusCode: 503,
+        message: 'Unable to fetch articles at this time. Please try agin.',
+      })
+    }
+  },
+  computed: {
+    ...mapGetters('liben', ['article']),
+  },
+  methods: {
+    ...mapActions('liben', ['updateArticle']),
+    async editArticle(articleForm) {
+      try {
+        await this.updateArticle({ _id: this.article._id, ...articleForm })
+        this.$router.back()
+      } catch (e) {
+        return this.$nuxt.error({
+          statusCode: e.statusCode,
+          message: e.message,
+        })
+      }
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/liben/articles/_id/index.vue b/starter-project-web-vue2/pages/liben/articles/_id/index.vue
new file mode 100644
index 00000000..31fc3e25
--- /dev/null
+++ b/starter-project-web-vue2/pages/liben/articles/_id/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col md="12">
+        <v-row no-gutters>
+          <v-col cols="12" md="8">
+            <LibenArticleDetail :article="article" />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-container>
+              <LibenCommentForm />
+              <v-card max-width="450" class="mx-auto">
+                <v-list three-line>
+                  <v-subheader>Comments</v-subheader>
+                  <LibenArticleComment
+                    v-for="comment in comments"
+                    :key="comment._id"
+                    :comment="comment"
+                  />
+                </v-list>
+              </v-card>
+            </v-container>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import LibenArticleDetail from '@/components/liben/LibenArticleDetail.vue'
+import LibenArticleComment from '@/components/liben/LibenArticleComment.vue'
+import LibenCommentForm from '@/components/liben/LibenCommentForm.vue'
+export default {
+  components: { LibenArticleDetail, LibenArticleComment, LibenCommentForm },
+  async fetch({ store, error, params }) {
+    try {
+      await store.dispatch('liben/getArticle', params.id)
+      await store.dispatch('liben/getComments', params.id)
+    } catch (e) {
+      error({
+        statusCode: 503,
+        message: 'Unable to fetch article. #' + params.id,
+      })
+    }
+  },
+  computed: {
+    ...mapGetters('liben', ['article', 'comments']),
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/liben/articles/create.vue b/starter-project-web-vue2/pages/liben/articles/create.vue
new file mode 100644
index 00000000..068e74b4
--- /dev/null
+++ b/starter-project-web-vue2/pages/liben/articles/create.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col md="8" cols="12">
+        <h1>Create Article</h1>
+        <LibenArticleForm @on-submit="createNewArticle" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  middleware({ store, redirect }) {
+    if (!store.state.auth.loggedIn) {
+      return redirect('/abraham/login')
+    }
+  },
+  methods: {
+    ...mapActions('liben', ['createArticle']),
+    async createNewArticle(articleForm) {
+      try {
+        await this.createArticle(articleForm)
+        this.$router.back()
+      } catch (e) {
+        return this.$nuxt.error({
+          statusCode: e.statusCode,
+          message: e.message,
+        })
+      }
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/liben/articles/index.vue b/starter-project-web-vue2/pages/liben/articles/index.vue
new file mode 100644
index 00000000..55fa1f6a
--- /dev/null
+++ b/starter-project-web-vue2/pages/liben/articles/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <v-btn to="/liben/articles/create"> Create Article </v-btn>
+    <LibenArticleSearch />
+    <v-container>
+      <v-row no-gutters>
+        <v-col v-for="article in articles" :key="article.id" md="4" cols="12">
+          <LibenArticle :article="article" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import LibenArticleSearch from '@/components/liben/LibenArticleSearch.vue'
+export default {
+  components: { LibenArticleSearch },
+  async fetch({ store, error }) {
+    try {
+      await store.dispatch('liben/getArticles')
+    } catch (e) {
+      error({
+        statusCode: 503,
+        message: 'Unable to fetch articles at this time. Please try agin.',
+      })
+    }
+  },
+  computed: {
+    ...mapGetters('liben', ['articles']),
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/store/liben.js b/starter-project-web-vue2/store/liben.js
new file mode 100644
index 00000000..334c3a06
--- /dev/null
+++ b/starter-project-web-vue2/store/liben.js
@@ -0,0 +1,77 @@
+export const state = () => ({
+  articles: [],
+  article: {},
+  comments: [],
+})
+
+export const getters = {
+  articles: (state) => state.articles,
+  article: (state) => state.article,
+  comments: (state) => state.comments,
+}
+
+export const actions = {
+  async getArticles({ commit }) {
+    const response = await this.$axios.get('articles/all')
+    commit('SET_ARTICLES', response.data)
+  },
+  async getArticle({ commit }, id) {
+    const response = await this.$axios.get(`articles/${id}`)
+    commit('SET_ARTICLE', response.data)
+  },
+  async createArticle({ commit }, article) {
+    const response = await this.$axios.post('articles', article)
+    commit('SET_NEWARTICLE', response.data)
+  },
+  async updateArticle({ commit }, article) {
+    const response = await this.$axios.patch(`articles/${article._id}`, article)
+    commit('UPDATE_ARTICLE', response.data)
+  },
+  async deleteArticle({ commit }, id) {
+    await this.$axios.delete(`articles/${id}`)
+    commit('DELETE_ARTICLE', id)
+  },
+  async searchArticle({ commit }, term) {
+    const response = await this.$axios.get(
+      `articles/search/?search-term=${term}`
+    )
+    commit('SET_ARTICLES', response.data)
+  },
+  async getComments({ commit }, id) {
+    const response = await this.$axios.get(`comments/${id}`)
+    commit('SET_COMMENTS', response.data)
+  },
+  async createComment({ commit }, { id, text }) {
+    const response = await this.$axios.post(`comments/${id}`, { text })
+    commit('SET_COMMENT', response.data)
+  },
+}
+
+export const mutations = {
+  SET_ARTICLES: (state, articles) => {
+    state.articles = articles
+  },
+  SET_ARTICLE(state, article) {
+    state.article = article
+  },
+  SET_NEWARTICLE: (state, article) => {
+    state.articles = [article, ...state.articles]
+  },
+  DELETE_ARTICLE: (state, id) => {
+    state.articles = state.articles.filter((article) => article.id !== id)
+  },
+  SET_COMMENTS: (state, comments) => {
+    state.comments = comments
+  },
+  SET_COMMENT: (state, comment) => {
+    state.comments = [comment, ...state.comments]
+  },
+  UPDATE_ARTICLE: (state, updatedArticle) => {
+    const index = state.articles.findIndex(
+      (article) => article.id === updatedArticle.id
+    )
+    if (index !== -1) {
+      state.articles.splice(index, 1, updatedArticle)
+    }
+  },
+}

From 5ced8f1c330d345f82ca0d41b4ba25dd3a62cde9 Mon Sep 17 00:00:00 2001
From: Yared <90713646+Yared04@users.noreply.github.com>
Date: Wed, 3 Aug 2022 16:51:09 +0300
Subject: [PATCH 10/26] Yared.demo project UI (#270)

* create the UI

* [web] implement vuex state management

* [web] implement CRUD functionalities

* [web] add authentication and fix previous comments
---
 .../components/yared/AddBlog.vue              | 76 +++++++++++++++++++
 .../components/yared/Blog.vue                 | 67 ++++++++++++++++
 .../components/yared/Blogs.vue                | 44 +++++++++++
 .../components/yared/UpdateBlog.vue           | 56 ++++++++++++++
 starter-project-web-vue2/package-lock.json    |  2 +-
 starter-project-web-vue2/package.json         |  2 +-
 starter-project-web-vue2/pages/index.vue      |  5 ++
 starter-project-web-vue2/pages/yared/_id.vue  | 32 ++++++++
 .../pages/yared/index.vue                     | 15 ++++
 .../pages/yared/login.vue                     | 53 +++++++++++++
 .../pages/yared/register.vue                  | 61 +++++++++++++++
 starter-project-web-vue2/store/yared.js       | 44 +++++++++++
 12 files changed, 455 insertions(+), 2 deletions(-)
 create mode 100644 starter-project-web-vue2/components/yared/AddBlog.vue
 create mode 100644 starter-project-web-vue2/components/yared/Blog.vue
 create mode 100644 starter-project-web-vue2/components/yared/Blogs.vue
 create mode 100644 starter-project-web-vue2/components/yared/UpdateBlog.vue
 create mode 100644 starter-project-web-vue2/pages/yared/_id.vue
 create mode 100644 starter-project-web-vue2/pages/yared/index.vue
 create mode 100644 starter-project-web-vue2/pages/yared/login.vue
 create mode 100644 starter-project-web-vue2/pages/yared/register.vue
 create mode 100644 starter-project-web-vue2/store/yared.js

diff --git a/starter-project-web-vue2/components/yared/AddBlog.vue b/starter-project-web-vue2/components/yared/AddBlog.vue
new file mode 100644
index 00000000..4a47e1ab
--- /dev/null
+++ b/starter-project-web-vue2/components/yared/AddBlog.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <v-dialog max-width="600px">
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="blue"
+          fab
+          dark
+          elevation="10"
+          style="position: fixed; bottom: 10%; right: 5%"
+          v-on="on"
+        >
+          <v-icon>mdi-plus-thick</v-icon>
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          <h2>Add a New Blog</h2>
+        </v-card-title>
+        <v-form class="px-12">
+          <v-text-field
+            v-model="newBlog.title"
+            :counter="20"
+            label="Title"
+            required
+          ></v-text-field>
+
+          <v-text-field
+            v-model="newBlog.content"
+            label="Content"
+            required
+          ></v-text-field>
+
+          <v-text-field v-model="newBlog.imageUrl" label="image"></v-text-field>
+
+          <v-btn color="success" class="ma-4" @click="onSubmit">
+            Add Blog
+          </v-btn>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'AddBlog',
+  data() {
+    return {
+      newBlog: {
+        title: '',
+        content: '',
+        description: 'this is a sample description',
+        imageUrl: '',
+      },
+    }
+  },
+  methods: {
+    ...mapActions({
+      addBlog: 'yared/addBlog',
+    }),
+    clearForm() {
+      this.newBlog.title = ''
+      this.newBlog.content = ''
+      this.newBlog.imageUrl = ''
+    },
+    onSubmit() {
+      // e.preventDefault()
+      this.addBlog(this.newBlog)
+      this.clearForm()
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/yared/Blog.vue b/starter-project-web-vue2/components/yared/Blog.vue
new file mode 100644
index 00000000..13b4d87b
--- /dev/null
+++ b/starter-project-web-vue2/components/yared/Blog.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-col>
+    <v-card class="mx-auto" max-width="400">
+      <v-img class="white--text align-end" height="200px" :src="img">
+        <v-card-title>
+          <nuxt-link
+            style="text-decoration: none; color: #fff"
+            :to="`/yared/${blog._id}`"
+            nuxt
+            >{{ blog.title }}</nuxt-link
+          >
+        </v-card-title>
+      </v-img>
+
+      <v-card-subtitle class="pb-0"> ID: {{ blog._id }} </v-card-subtitle>
+      <v-card-actions>
+        <UpdateBlog :blog="blog" />
+        <v-btn
+          style="position: absolute; right: 0%"
+          class="mx-2"
+          fab
+          dark
+          small
+          color="red"
+          @click="dltBlg(blog._id)"
+        >
+          <v-icon dark> mdi-minus </v-icon>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import UpdateBlog from './UpdateBlog.vue'
+export default {
+  name: 'Blog',
+  components: {
+    UpdateBlog,
+  },
+  props: {
+    blog: Object,
+  },
+  data() {
+    return {
+      img: this.setImg(),
+    }
+  },
+
+  methods: {
+    ...mapActions({
+      deleteBlog: 'yared/deleteBlog',
+    }),
+    setImg() {
+      return this.blog.imageUrls.length > 0
+        ? this.blog.imageUrls[0]
+        : 'https://cdn.vuetifyjs.com/images/cards/docks.jpg'
+    },
+    dltBlg(id) {
+      if (confirm('Are you sure?')) {
+        this.deleteBlog(id)
+      }
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/yared/Blogs.vue b/starter-project-web-vue2/components/yared/Blogs.vue
new file mode 100644
index 00000000..b75073cd
--- /dev/null
+++ b/starter-project-web-vue2/components/yared/Blogs.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div class="d-flex">
+      <h1>List of Blogs</h1>
+      <v-spacer />
+      <div v-if="$auth.loggedIn">
+        <v-btn color="red" text @click="$auth.logout()">Log Out</v-btn>
+      </div>
+      <div v-else>
+        <v-btn text to="yared/login">Log In</v-btn>
+        <v-btn text to="yared/register">Sign Up</v-btn>
+      </div>
+    </div>
+    <hr />
+    <div v-for="blog in blogs" :key="blog.id">
+      <Blog :blog="blog" />
+    </div>
+    <AddBlog />
+  </div>
+</template>
+<script>
+import { mapActions, mapState } from 'vuex'
+import Blog from './Blog.vue'
+import AddBlog from './AddBlog.vue'
+
+export default {
+  name: 'Blogs',
+  components: {
+    Blog,
+    AddBlog,
+  },
+  computed: {
+    ...mapState('yared', ['blogs']),
+  },
+  methods: {
+    ...mapActions({
+      fetchBlogs: 'yared/fetchBlogs',
+    }),
+  },
+  created() {
+    this.fetchBlogs()
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/yared/UpdateBlog.vue b/starter-project-web-vue2/components/yared/UpdateBlog.vue
new file mode 100644
index 00000000..ce308dc9
--- /dev/null
+++ b/starter-project-web-vue2/components/yared/UpdateBlog.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-dialog max-width="600">
+    <template #activator="{ on, attrs }">
+      <v-btn v-bind="attrs" color="yellow" v-on="on"> Update </v-btn>
+    </template>
+    <v-card>
+      <v-card-title>
+        <h2>Update Blog</h2>
+      </v-card-title>
+      <v-form class="px-12">
+        <v-text-field
+          v-model="currentBlog.title"
+          :counter="20"
+          label="Title"
+          required
+        >
+        </v-text-field>
+
+        <v-text-field v-model="currentBlog.content" label="Content" required>
+        </v-text-field>
+
+        <v-btn color="success" class="ma-4" @click="onUpdate">
+          Update Blog
+        </v-btn>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  props: {
+    blog: Object,
+  },
+  data() {
+    return {
+      currentBlog: {
+        id: this.blog._id,
+        title: this.blog.title,
+        content: this.blog.content,
+      },
+    }
+  },
+  methods: {
+    ...mapActions({
+      updateBlog: 'yared/updateBlog',
+    }),
+    onUpdate(e) {
+      // e.preventDefault()
+      this.updateBlog(this.currentBlog)
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/package-lock.json b/starter-project-web-vue2/package-lock.json
index c70b818e..fd18b662 100644
--- a/starter-project-web-vue2/package-lock.json
+++ b/starter-project-web-vue2/package-lock.json
@@ -17,7 +17,7 @@
         "vue-server-renderer": "^2.6.14",
         "vue-template-compiler": "^2.6.14",
         "vuetify": "^2.6.1",
-        "webpack": "^4.46.0"
+        "webpack": "^4.45.0"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.16.3",
diff --git a/starter-project-web-vue2/package.json b/starter-project-web-vue2/package.json
index cfb420df..0ed01f98 100644
--- a/starter-project-web-vue2/package.json
+++ b/starter-project-web-vue2/package.json
@@ -25,7 +25,7 @@
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "vuetify": "^2.6.1",
-    "webpack": "^4.46.0"
+    "webpack": "^4.45.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index f4de04f5..85300395 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -67,6 +67,11 @@ export default {
           description: 'Web Team Member',
           link: '/liben/articles',
         },
+        {
+          name: 'Yared Tegegn',
+          description: 'Group 32 Student',
+          link: '/yared',
+        },
       ],
     }
   },
diff --git a/starter-project-web-vue2/pages/yared/_id.vue b/starter-project-web-vue2/pages/yared/_id.vue
new file mode 100644
index 00000000..4bafe682
--- /dev/null
+++ b/starter-project-web-vue2/pages/yared/_id.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>{{ blog.title }}</h1>
+    <hr />
+    <div class="text-justify pa-4">
+      <p>{{ blog.content }}</p>
+    </div>
+    <small>Created at: {{ blog.createdAt }}</small>
+    <br />
+    <v-btn absolute style="right: 9%" to="/yared" elevation="2" nuxt
+      >Go Back</v-btn
+    >
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'BlogDetail',
+  async fetch({ store, params }) {
+    try {
+      const response = await store.dispatch('yared/fetchBlog', params.id)
+      this.blog = response.data
+    } catch (e) {
+      // error()
+    }
+  },
+  computed: {
+    ...mapState('yared', ['blog']),
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/yared/index.vue b/starter-project-web-vue2/pages/yared/index.vue
new file mode 100644
index 00000000..9ad9b4a3
--- /dev/null
+++ b/starter-project-web-vue2/pages/yared/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="d-inline">
+    <Blogs />
+  </div>
+</template>
+
+<script>
+import Blogs from '../../components/yared/Blogs.vue'
+export default {
+  name: 'Home',
+  components: {
+    Blogs,
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/yared/login.vue b/starter-project-web-vue2/pages/yared/login.vue
new file mode 100644
index 00000000..cea78426
--- /dev/null
+++ b/starter-project-web-vue2/pages/yared/login.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-container>
+    <h1>Login</h1>
+    <hr />
+    <v-form ref="form" v-model="valid" class="pa-md-14" lazy-validation>
+      <v-text-field
+        v-model="userInfo.email"
+        :rules="[emailFormat()]"
+        label="E-mail"
+        required
+      ></v-text-field>
+
+      <v-text-field
+        v-model="userInfo.password"
+        :rules="[minLength('password', 3)]"
+        type="password"
+        label="Password"
+        required
+      ></v-text-field>
+      <v-btn
+        :disabled="!valid"
+        color="success"
+        class="mr-4"
+        @click="loginUser(userInfo)"
+      >
+        Login
+      </v-btn>
+    </v-form>
+  </v-container>
+</template>
+<script>
+import validations from '~/utils/validations'
+export default {
+  name: 'Login',
+  data() {
+    return {
+      valid: false,
+      userInfo: {
+        email: 'aben@gmail.com',
+        password: '123',
+      },
+      ...validations,
+    }
+  },
+  methods: {
+    async loginUser(loginInfo) {
+      await this.$auth.loginWith('local', {
+        data: loginInfo,
+      })
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/yared/register.vue b/starter-project-web-vue2/pages/yared/register.vue
new file mode 100644
index 00000000..544fc047
--- /dev/null
+++ b/starter-project-web-vue2/pages/yared/register.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <h1>Register</h1>
+    <hr />
+    <v-form ref="form" v-model="valid" class="pa-md-14" lazy-validation>
+      <v-text-field
+        v-model="userInfo.name"
+        :rules="[maxLength('name', 20)]"
+        label="Full Name"
+        required
+      ></v-text-field>
+      <v-text-field
+        v-model="userInfo.email"
+        :rules="[emailFormat()]"
+        label="E-mail"
+        required
+      ></v-text-field>
+
+      <v-text-field
+        v-model="userInfo.password"
+        :rules="[minLength('password', 3)]"
+        type="password"
+        label="Password"
+        required
+      ></v-text-field>
+      <v-btn
+        :disabled="!valid"
+        color="success"
+        class="mr-4"
+        @click="registerUser(userInfo)"
+      >
+        Sign up
+      </v-btn>
+    </v-form>
+  </v-container>
+</template>
+<script>
+import validations from '~/utils/validations'
+export default {
+  name: 'Login',
+  data() {
+    return {
+      valid: false,
+      userInfo: {
+        fullName: '',
+        email: '',
+        password: '',
+      },
+      ...validations,
+    }
+  },
+  methods: {
+    async registerUser(regInfo) {
+      await this.$axios.post('api/user', regInfo)
+      this.$auth.loginWith('local', {
+        data: regInfo,
+      })
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/store/yared.js b/starter-project-web-vue2/store/yared.js
new file mode 100644
index 00000000..1f146621
--- /dev/null
+++ b/starter-project-web-vue2/store/yared.js
@@ -0,0 +1,44 @@
+export default {
+  namespaced: true,
+  state: {
+    blogs: [],
+    blog: {},
+  },
+  actions: {
+    async fetchBlog({ commit }, id) {
+      const res = await this.$axios.get(`articles/${id}`)
+      commit('displayBlog', res.data)
+    },
+    async fetchBlogs({ commit }) {
+      const res = await this.$axios.get('articles/all')
+      const data = res.data.reverse()
+      commit('setBlogs', data)
+    },
+    async addBlog({ commit }, newBlog) {
+      const res = await this.$axios.post('articles', newBlog)
+      commit('addBlog', res.data)
+    },
+    async deleteBlog({ commit }, id) {
+      await this.$axios.delete(`articles/${id}`)
+      commit('deleteBlog', id)
+    },
+    async updateBlog({ commit }, updBlog) {
+      const res = await this.$axios.patch(`articles/${updBlog.id}`, updBlog)
+      commit('updateBlog', res.data)
+    },
+  },
+  mutations: {
+    displayBlog: (state, blog) => (state.blog = blog),
+    setBlogs: (state, blogs) => (state.blogs = blogs),
+    addBlog: (state, blog) => state.blogs.unshift(blog),
+    deleteBlog: (state, id) =>
+      (state.blogs = state.blogs.filter((blog) => blog._id !== id)),
+    updateBlog: (state, updBlog) => {
+      const idx = state.blogs.findIndex((blog) => blog.id === updBlog.id)
+      if (idx !== -1) {
+        console.log('hi');
+        state.blogs.splice(idx, 1, updBlog)
+      }
+    },
+  },
+}

From a141f83292441ac99c6ee5d54ff1490020a79a06 Mon Sep 17 00:00:00 2001
From: Mintesnot Bezabhi <61611671+Mintaa911@users.noreply.github.com>
Date: Wed, 3 Aug 2022 17:36:42 +0300
Subject: [PATCH 11/26] [WEB]: folder restructure to work with team

* [web]: sample structure for the demo

* [web]: folder rename to PascalCase

* [web]: remove feature folder from store

* [web]: fix a bug inside index page

* [web]: fix deployment bug
---
 .../components/mintesnot/Layout.jsx           |  13 ++
 .../components/mintesnot/NavBar.jsx           |  84 ++++++++
 .../components/mintesnot/blog/Comments.jsx    |  38 ++++
 .../components/mintesnot/blog/Details.jsx     |  41 ++++
 .../mintesnot/blog/SingleComment.jsx          |  42 ++++
 .../components/mintesnot/blog/blogCard.tsx    |  58 ++++++
 .../mintesnot/blog/blogPostDialog.tsx         |  36 ++++
 .../mintesnot/blog/blogPostForm.tsx           |  54 +++++
 .../mintesnot/blog/blogPostTextField.tsx      |  33 +++
 .../mintesnot/blog/postBlogButton.tsx         |  25 +++
 .../mintesnot/profile/ProfileCard.tsx         | 193 ++++++++++++++++++
 .../pages/mintesnot/blog/[id]/index.tsx       |  34 +++
 .../pages/mintesnot/index.tsx                 |  60 ++++++
 .../pages/mintesnot/profile.tsx               |   1 +
 starter-project-web-react/store/hooks.ts      |   6 +
 .../store/mintesnot/app.ts                    |  20 ++
 .../store/mintesnot/blog/Blog.ts              |  48 +++++
 .../store/mintesnot/blog/BlogApiSlice.ts      |  44 ++++
 18 files changed, 830 insertions(+)
 create mode 100644 starter-project-web-react/components/mintesnot/Layout.jsx
 create mode 100644 starter-project-web-react/components/mintesnot/NavBar.jsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/Comments.jsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/Details.jsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/SingleComment.jsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/blogCard.tsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/blogPostTextField.tsx
 create mode 100644 starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
 create mode 100644 starter-project-web-react/components/mintesnot/profile/ProfileCard.tsx
 create mode 100644 starter-project-web-react/pages/mintesnot/blog/[id]/index.tsx
 create mode 100644 starter-project-web-react/pages/mintesnot/index.tsx
 create mode 100644 starter-project-web-react/pages/mintesnot/profile.tsx
 create mode 100644 starter-project-web-react/store/hooks.ts
 create mode 100644 starter-project-web-react/store/mintesnot/app.ts
 create mode 100644 starter-project-web-react/store/mintesnot/blog/Blog.ts
 create mode 100644 starter-project-web-react/store/mintesnot/blog/BlogApiSlice.ts

diff --git a/starter-project-web-react/components/mintesnot/Layout.jsx b/starter-project-web-react/components/mintesnot/Layout.jsx
new file mode 100644
index 00000000..5832c2f7
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/Layout.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import NavBar from './NavBar'
+
+const Layout = ({children}) => {
+  return (
+    <main>
+        <NavBar />
+        {children}
+    </main>
+  )
+}
+
+export default Layout
\ No newline at end of file
diff --git a/starter-project-web-react/components/mintesnot/NavBar.jsx b/starter-project-web-react/components/mintesnot/NavBar.jsx
new file mode 100644
index 00000000..e3d161b9
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/NavBar.jsx
@@ -0,0 +1,84 @@
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+import LogoutIcon from '@mui/icons-material/Logout'
+import Button from '@mui/material/Button'
+import { useSession, signOut } from 'next-auth/react'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+
+export default function ButtonAppBar() {
+  const pages = ['Products', 'Pricing', 'Blog']
+  const { data: session } = useSession()
+  const [user, setUser] = useState({ email: '', fullname: '', image: '' })
+  const router = useRouter()
+
+  const logoutHandler = () => {
+    signOut({ callbackUrl: `${window.location.origin}/auth/login` })
+  }
+
+  useEffect(() => {
+    if (session) {
+      setUser({
+        ...user,
+        fullname: session.user.name,
+        email: session.user.email,
+      })
+    }
+  })
+
+  const openProfile = () => {
+    router.push('/mintesnot/profile')
+  }
+  const backToHome = () => {
+    router.push('/')
+  }
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{ flexGrow: 1 }}
+            onClick={backToHome}
+          >
+            Blog App (React Demo)
+          </Typography>
+          {session ? (
+            <>
+              <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+                {pages.map((page) => (
+                  <Button
+                    key={page}
+                    sx={{ my: 2, color: 'white', display: 'block' }}
+                  >
+                    {page}
+                  </Button>
+                ))}
+              </Box>
+
+              <Typography variant="h6" sx={{ margin: '5px' }}>
+                {user.fullname}
+              </Typography>
+              <Avatar
+                name="profile"
+                alt="Remy Sharp"
+                src={user.image}
+                onClick={openProfile}
+              />
+              <LogoutIcon
+                sx={{ mx: '10px' }}
+                onClick={logoutHandler}
+              ></LogoutIcon>
+            </>
+          ) : (
+            ''
+          )}
+        </Toolbar>
+      </AppBar>
+    </Box>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/Comments.jsx b/starter-project-web-react/components/mintesnot/blog/Comments.jsx
new file mode 100644
index 00000000..24aa5ec0
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/Comments.jsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import {
+  Box,
+  Card,
+  CardContent,
+  TextField,
+  List,
+  InputAdornment,
+} from '@mui/material/Box'
+import AddCommentOutlined from '@mui/icons-material/AddCommentOutlined'
+
+export default function Comments({ blog }) {
+  return (
+    <Card sx={{ minWidth: 275 }} variant="outlined">
+      <CardContent>
+        <Box px={2}>
+          <TextField
+            fullWidth
+            label="Leave a comment!"
+            id="commentForm"
+            variant="standard"
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <AddCommentOutlined />
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Box>
+        <List
+          className="comment-list"
+          sx={{ width: '100%', maxHeight: 500, overflow: 'auto' }}
+        ></List>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/Details.jsx b/starter-project-web-react/components/mintesnot/blog/Details.jsx
new file mode 100644
index 00000000..80c81e71
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/Details.jsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import Moment from 'moment'
+import Typography from '@mui/material/Typography'
+import Image from 'next/image'
+
+const Details = ({ blog }) => {
+  const formattedDate = Moment(blog.createdAt).format('MMMM DD, YYYY')
+  return (
+    <div>
+      <Typography variant="h2" component="div">
+        {blog.title}
+      </Typography>
+      <Typography variant="subtitle1" gutterBottom component="div" mb={2}>
+        Posted on <em>`{formattedDate}`</em> by{' '}
+        <b>{blog.authorUserId.fullName}</b>
+      </Typography>
+
+      <Typography variant="body1" gutterBottom mt={4}>
+        {blog.content}
+      </Typography>
+
+      {blog.imageUrls ? (
+        blog.imageUrls.map((url, index) => (
+          <Image
+            key={index}
+            src={url}
+            layout="responsive"
+            width={'100%'}
+            height={'50%'}
+            objectFit="cover"
+            alt="alternative"
+          />
+        ))
+      ) : (
+        <></>
+      )}
+    </div>
+  )
+}
+
+export default Details
diff --git a/starter-project-web-react/components/mintesnot/blog/SingleComment.jsx b/starter-project-web-react/components/mintesnot/blog/SingleComment.jsx
new file mode 100644
index 00000000..b1e6ff6b
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/SingleComment.jsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import Moment from 'moment';
+
+
+export default function SingleComment({comment, divider}) {
+  const formattedDate = Moment(comment.created_at).fromNow()
+  return (
+    <Box>
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar alt={comment.user.fullName} src={comment.img} />
+        </ListItemAvatar>
+        <ListItemText
+          primary={comment.user.fullName}
+          secondary={
+            <React.Fragment>
+              <Typography
+                  sx={{ display: 'inline' }}
+                  component="span"
+                  variant="body2"
+                  color="text.primary"
+              >
+                  {formattedDate}
+              </Typography>
+              {' — ' + comment.text}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      {
+          divider && <Divider variant="inset" component="li" />
+      }
+    </Box>
+  );
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/blogCard.tsx b/starter-project-web-react/components/mintesnot/blog/blogCard.tsx
new file mode 100644
index 00000000..4305509f
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/blogCard.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react'
+import Card from '@mui/material/Card'
+import Box from '@mui/material/Box'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import { red } from '@mui/material/colors'
+import Link from 'next/link'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+
+export default function BlogCard({ blog }: any) {
+  const { _id, title, content, authorUserId } = blog
+  const author = authorUserId.fullName
+  return (
+    <Link
+      href={{
+        pathname: 'mintesnot/blog/[id]',
+        query: { id: _id },
+      }}
+      passHref
+      as={`mintesnot/blog/${_id}`}
+    >
+      <Card sx={{ bgcolor: '#cfe8fc', maxWidth: '345', my: 4, mx: 0 }}>
+        <Box display="inline-block" sx={{ m: 3 }}>
+          <CardHeader
+            avatar={
+              <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
+                {author.charAt(0).toUpperCase()}
+              </Avatar>
+            }
+            title={author.charAt(0).toUpperCase() + author.slice(1)}
+            subheader="September 14, 2016"
+          />
+          <CardContent>
+            <Typography
+              fontWeight="fontWeightBold"
+              gutterBottom
+              variant="h5"
+              component="div"
+            >
+              {title}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {content}
+            </Typography>
+          </CardContent>
+          <CardActions>
+            <a>
+              <Button size="small">Read More</Button>
+            </a>
+          </CardActions>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx b/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
new file mode 100644
index 00000000..5d9eb337
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+  Box,
+  DialogActions,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  useMediaQuery,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import BlogPostForm from './BlogPostForm'
+
+export default function BlogPostDialog({ open, handleClose }: any) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  return (
+    <Dialog
+      fullScreen={fullScreen}
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="responsive-dialog-title"
+      fullWidth
+    >
+      <DialogTitle id="responsive-dialog-title">
+        <Box ml={3}>
+          <h3>Blog Post</h3>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <BlogPostForm handleClose={handleClose} />
+      </DialogContent>
+      <DialogActions></DialogActions>
+    </Dialog>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx b/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
new file mode 100644
index 00000000..87c43892
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Box, Button } from '@mui/material'
+import { Formik, Form } from 'formik'
+import * as Yup from 'yup'
+import BlogPostTextField from './BlogPostTextField'
+
+type handle = () => void
+interface props {
+  handleClose: handle
+}
+export default function BlogPostForm({ handleClose }: props) {
+  const INITIAL_FORM_STATE = {
+    title: '',
+    content: '',
+  }
+  const FORM_VALIDATION = Yup.object().shape({
+    title: Yup.string().min(1).required(),
+    content: Yup.string().required(),
+  })
+  return (
+    <Box mb={5} mx={3}>
+      <Formik
+        initialValues={{
+          ...INITIAL_FORM_STATE,
+        }}
+        validationSchema={FORM_VALIDATION}
+        onSubmit={() => {
+          handleClose()
+        }}
+      >
+        <Form>
+          <Box py={4}>
+            <BlogPostTextField name="title" otherProps={{ label: 'Title' }} />
+          </Box>
+          <Box pb={4}>
+            <BlogPostTextField
+              name="content"
+              otherProps={{
+                fullWidth: true,
+                id: 'outlined-multiline-static',
+                label: 'Content',
+                multiline: true,
+                rows: 4,
+              }}
+            />
+          </Box>
+          <Button type="submit" size="large" fullWidth variant="outlined">
+            POST
+          </Button>
+        </Form>
+      </Formik>
+    </Box>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/blog/blogPostTextField.tsx b/starter-project-web-react/components/mintesnot/blog/blogPostTextField.tsx
new file mode 100644
index 00000000..705e15ec
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/blogPostTextField.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { TextField } from '@mui/material'
+import { useField } from 'formik'
+interface props {
+  name:string,
+  otherProps:any
+}
+export default function BlogPostTextField({
+    name,
+    otherProps
+}:props) {
+    const [field, mata]:any = useField(name);
+
+  const configTextfield = {
+    ...field,
+    ...otherProps,
+    fullWidth: true,
+    variant: 'outlined',
+    error:false,
+    helperText :"",
+    id:'fullwidth'
+  };
+  // (configTextfield)
+  if (mata && mata.touched && mata.error) {
+    configTextfield.error = true;
+    configTextfield.helperText = mata.error;
+  }
+  return (
+  
+        <TextField {...configTextfield} />
+
+  )
+}
\ No newline at end of file
diff --git a/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx b/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
new file mode 100644
index 00000000..a65d2766
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Button, Typography } from '@mui/material'
+import BlogPostDialog from './BlogPostDialog'
+
+export default function PostBlog(props: any) {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+  return (
+    <div>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        <Typography fontWeight="fontWeightBold" color="text.secondary">
+          Post Blog
+        </Typography>
+      </Button>
+      <BlogPostDialog open={open} handleClose={handleClose} />
+    </div>
+  )
+}
diff --git a/starter-project-web-react/components/mintesnot/profile/ProfileCard.tsx b/starter-project-web-react/components/mintesnot/profile/ProfileCard.tsx
new file mode 100644
index 00000000..eeb45a9e
--- /dev/null
+++ b/starter-project-web-react/components/mintesnot/profile/ProfileCard.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { Card, Box, Avatar, Switch, Grid, CardContent } from '@mui/material'
+import LocationOn from '@mui/icons-material/LocationOn'
+
+import {
+  Alert,
+  AlertTitle,
+  CardHeader,
+  CircularProgress,
+  TextField,
+  Button,
+} from '@mui/material'
+import { useState, useEffect } from 'react'
+import * as yup from 'yup'
+import { useSession } from 'next-auth/react'
+import { Form, Formik } from 'formik'
+import AuthApiCall from '../../../util/AuthApiCall'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+import { useRouter } from 'next/router'
+
+const ProfileCard = () => {
+  const { data: session } = useSession()
+  const router = useRouter()
+
+  const INITIAL_STATE = {
+    firstname: session?.user?.name?.split(' ')[0] || '',
+    lastname: session?.user?.name?.split(' ')[1] || '',
+    email: session?.user?.email || '',
+    password: '',
+    confirmPassword: '',
+  }
+
+  const [INITIAL_STATE_VALUE, setInitialValue] = useState(INITIAL_STATE)
+  const [isUpdated, setIsUpdated] = useState(false)
+  const [updateFail, setUpdateFailed] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const FORM_VALIDATION = yup.object().shape({
+    firstname: yup.string().required('Required'),
+    lastname: yup.string().required('Required'),
+    email: yup.string().required('Required').email('Invalid Email'),
+    password: yup.string().min(8).required('Required'),
+    confirmPassword: yup.string().min(8).required('Required'),
+  })
+
+  return (
+    <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+      <Box sx={{ width: '25%', m: 10 }}>
+        <Grid
+          container
+          spacing={0}
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Avatar />
+        </Grid>
+
+        <Card>
+          <CardHeader
+            title={session?.user?.name || ''}
+            subheader="CEO / CO-FOUNDER"
+          />
+          <CardContent sx={{ flex: '1 0 auto' }}>
+            <LocationOn /> Scranton, PA
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+              Repudiandae aliquam voluptatibus sint accusamus sit cupiditate at
+              cumque doloribus nesciunt, deserunt, nam perspiciatis, sapiente
+              itaque? Totam rerum beatae hic facilis quia?
+            </p>
+          </CardContent>
+          <Switch /> Online
+        </Card>
+      </Box>
+      <Box
+        sx={{
+          '& .MuiTextField-root': { m: 2.5, width: '25ch' },
+          width: '50%',
+          m: 5,
+        }}
+      >
+        <Formik
+          initialValues={INITIAL_STATE_VALUE}
+          validationSchema={FORM_VALIDATION}
+          onSubmit={async (value) => {
+            setLoading(true)
+            if (value.password !== value.confirmPassword) {
+              setUpdateFailed("Password don't match")
+            } else {
+              const user = {
+                fullName: `${value.firstname} ${value.lastname}`,
+                email: value.email,
+                password: value.password,
+              }
+              const res = await AuthApiCall.UpdateUser(
+                user,
+                session?.id,
+                session?.access_token
+              )
+              if (res) {
+                setIsUpdated(true)
+              } else {
+                setUpdateFailed('User Update Failed!')
+              }
+              setLoading(false)
+            }
+          }}
+        >
+          <Form>
+            <Grid container spacing={2}>
+              <Grid>
+                <TextField name="firstname" label="First Name" />
+              </Grid>
+              <Grid>
+                <TextField name="lastname" label="Last Name" />
+              </Grid>
+              <Grid>
+                <TextField name="email" label="Email" />
+              </Grid>
+              <Grid>
+                <TextField name="password" label="Password" type="password" />
+              </Grid>
+              <Grid>
+                <TextField
+                  name="confirmPassword"
+                  label="Confirm Password"
+                  type="password"
+                />
+              </Grid>
+              <Grid item xs={12} sx={{ mt: 1 }}>
+                <Button variant="contained" fullWidth sx={{ width: 'auto' }}>
+                  {' '}
+                  {!loading ? (
+                    'Update'
+                  ) : (
+                    <CircularProgress sx={{ color: '#fff' }} />
+                  )}
+                </Button>
+              </Grid>
+            </Grid>
+          </Form>
+        </Formik>
+      </Box>
+      {isUpdated ? (
+        <Alert
+          severity="success"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={() => {
+                setIsUpdated(false)
+              }}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+          sx={{ mb: 2 }}
+        >
+          <AlertTitle>Success</AlertTitle>
+          <strong>User Registered Successfully!</strong>
+        </Alert>
+      ) : updateFail ? (
+        <Alert
+          severity="error"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={() => {
+                setUpdateFailed('')
+              }}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+          sx={{ mb: 2 }}
+        >
+          <AlertTitle>Failed</AlertTitle>
+          <strong>User Failed to register!</strong>
+        </Alert>
+      ) : (
+        ''
+      )}
+    </Grid>
+  )
+}
+
+export default ProfileCard
diff --git a/starter-project-web-react/pages/mintesnot/blog/[id]/index.tsx b/starter-project-web-react/pages/mintesnot/blog/[id]/index.tsx
new file mode 100644
index 00000000..061f7dff
--- /dev/null
+++ b/starter-project-web-react/pages/mintesnot/blog/[id]/index.tsx
@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+import { CircularProgress, Container, Box, Grid } from '@mui/material'
+
+import Details from '../../../../components/mintesnot/blog/Details'
+import { useFetchSinglBlogQuery } from '../../../../store/mintesnot/blog/BlogApiSlice'
+const BlogDetail = () => {
+  const router = useRouter()
+  const { data = {}, isFetching } = useFetchSinglBlogQuery(
+    router.query.id as string
+  )
+
+  return (
+    <Container sx={{ mt: 5 }}>
+      <Grid container spacing={4}>
+        <Grid item xs={8}>
+          {!isFetching ? (
+            <Details blog={data} />
+          ) : (
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              sx={{ display: 'flex', mt: 5 }}
+            >
+              <CircularProgress size="40%" sx={{ m: 5, p: 6 }} />
+            </Box>
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default BlogDetail
diff --git a/starter-project-web-react/pages/mintesnot/index.tsx b/starter-project-web-react/pages/mintesnot/index.tsx
new file mode 100644
index 00000000..d36c31e6
--- /dev/null
+++ b/starter-project-web-react/pages/mintesnot/index.tsx
@@ -0,0 +1,60 @@
+import react from 'react'
+import { Box, Container, Grid, Typography, Divider } from '@mui/material'
+
+import CircularProgress from '@mui/material/CircularProgress'
+import { useFetchBlogsQuery } from '../../store/mintesnot/blog/BlogApiSlice'
+import PostBlog from '../../components/mintesnot/blog/PostBlogButton'
+import BlogCard from '../../components/mintesnot/blog/BlogCard'
+
+const Blogs = () => {
+  const { data = [], isFetching } = useFetchBlogsQuery()
+
+  return (
+    <Container>
+      <Grid container spacing={2} sx={{ mt: 4 }}>
+        <Grid item xs={6} md={6} sx={{ pl: 2 }}>
+          <Typography
+            gutterBottom
+            fontWeight="fontWeightBold"
+            variant="h5"
+            component="div"
+          >
+            Blogs
+          </Typography>
+        </Grid>
+        <Grid item justifyContent="flex-end" xs={6} md={6} sx={{}}>
+          <Grid container justifyContent="flex-end" sx={{ m: 0, p: 0 }}>
+            <PostBlog />
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Divider variant="middle" />
+        </Grid>
+      </Grid>
+
+      {isFetching ? (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          sx={{ display: 'flex', mt: 5 }}
+        >
+          <CircularProgress size="40%" sx={{ m: 5, p: 6 }} />
+        </Box>
+      ) : (
+        <Box
+          sx={{ width: '100%', ml: 0, px: 0 }}
+          display="inline-block"
+          alignItems="center"
+          justifyContent="center"
+        >
+          {data.map((blog: any) => {
+            return <BlogCard blog={blog} key={blog._id} />
+          })}
+        </Box>
+      )}
+    </Container>
+  )
+}
+
+export default Blogs
diff --git a/starter-project-web-react/pages/mintesnot/profile.tsx b/starter-project-web-react/pages/mintesnot/profile.tsx
new file mode 100644
index 00000000..b1c6ea43
--- /dev/null
+++ b/starter-project-web-react/pages/mintesnot/profile.tsx
@@ -0,0 +1 @@
+export default {}
diff --git a/starter-project-web-react/store/hooks.ts b/starter-project-web-react/store/hooks.ts
new file mode 100644
index 00000000..d2843e8a
--- /dev/null
+++ b/starter-project-web-react/store/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './configureStore'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file
diff --git a/starter-project-web-react/store/mintesnot/app.ts b/starter-project-web-react/store/mintesnot/app.ts
new file mode 100644
index 00000000..b5432396
--- /dev/null
+++ b/starter-project-web-react/store/mintesnot/app.ts
@@ -0,0 +1,20 @@
+import { configureStore,  } from "@reduxjs/toolkit";
+import blogReducer from "./blog/Blog"
+import { blogApiSlice } from "./blog/BlogApiSlice";
+
+export const store = configureStore({
+    reducer:{
+        blog: blogReducer,
+        [blogApiSlice.reducerPath]: blogApiSlice.reducer
+    },
+    middleware: (getDefaultMiddleware)=>{
+        return getDefaultMiddleware().concat(blogApiSlice.middleware)
+    }
+    
+})
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
+
+
+
diff --git a/starter-project-web-react/store/mintesnot/blog/Blog.ts b/starter-project-web-react/store/mintesnot/blog/Blog.ts
new file mode 100644
index 00000000..53021799
--- /dev/null
+++ b/starter-project-web-react/store/mintesnot/blog/Blog.ts
@@ -0,0 +1,48 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type {RootState} from "../app"
+
+interface BlogState {
+        value: object[],
+        loading: boolean,
+        commentLoading:boolean,
+        error:string | null,
+        singleBlog: object,
+        comments: object[]  
+}
+
+const initialState = {
+      value: [],
+      loading: false,
+      commentLoading: false,
+      error: null,
+      singleBlog: {},
+      comments:[]
+} as BlogState
+
+export const blogSlice = createSlice({
+    name: 'blog',
+    initialState,
+    reducers:{
+          postAdded: (state, action:PayloadAction<object, string>) => {
+            state.value = [...state.value, action.payload]
+            state.loading = false
+            state.error = null
+          },
+          singleLoaded: (state, action:PayloadAction<object[], string>) => {
+            state.singleBlog = action.payload
+            state.loading = false
+            state.error = null
+          }, 
+          commentsLoaded: (state, action:PayloadAction<object[], string>) => {
+            state.comments = action.payload
+            state.commentLoading = false
+          },
+          commentAdded: (state) => {
+            state.commentLoading = false
+          }
+    }
+})
+
+export const { postAdded, commentAdded , singleLoaded, commentsLoaded } = blogSlice.actions
+
+export default blogSlice.reducer
\ No newline at end of file
diff --git a/starter-project-web-react/store/mintesnot/blog/BlogApiSlice.ts b/starter-project-web-react/store/mintesnot/blog/BlogApiSlice.ts
new file mode 100644
index 00000000..77b16332
--- /dev/null
+++ b/starter-project-web-react/store/mintesnot/blog/BlogApiSlice.ts
@@ -0,0 +1,44 @@
+import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'
+
+
+interface Blog
+    {
+        _id: "",
+        authorUserId: {
+          fullName: "",
+          email: "",
+          __v: 0
+        },
+        title: "",
+        content: "",
+        imageUrls: [],
+        rating: {},
+        description: "",
+        createdAt: "",
+        updatedAt: "",
+        __v: 0
+      
+}
+
+export const blogApiSlice = createApi({
+    reducerPath: 'api',
+    baseQuery: fetchBaseQuery({
+        baseUrl:'https://blog-app-backend.onrender.com/api'
+    }),
+    endpoints(builder){
+        return {
+            fetchBlogs: builder.query<Blog[], number|void>({
+                query(limit = 10){
+                    return `/articles/all`
+                }
+            }),
+            fetchSinglBlog: builder.query<Blog, string|void>({
+                query(id) {
+                    return `/articles/${id}`
+                },
+            })
+        }
+    }
+})
+
+export const {useFetchBlogsQuery, useFetchSinglBlogQuery} = blogApiSlice
\ No newline at end of file

From 6629dbf8a3328981842e1a778687580ff5fa6402 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Wed, 3 Aug 2022 19:51:06 +0300
Subject: [PATCH 12/26] Add Vuex and edit UI with vuetify

---
 .../components/natnaelT/AddBlogButton.vue     |  2 +-
 .../components/natnaelT/AddBlogForm.vue       |  9 ++--
 .../components/natnaelT/BlogList.vue          | 42 +++++++++++----
 .../components/natnaelT/SingleBlog.vue        | 29 +++--------
 .../pages/natnaelT/_id.vue                    | 22 ++++++++
 .../pages/natnaelT/index.vue                  | 52 ++++++-------------
 starter-project-web-vue2/store/natnaelT.js    | 33 ++++++++++++
 7 files changed, 117 insertions(+), 72 deletions(-)
 create mode 100644 starter-project-web-vue2/pages/natnaelT/_id.vue
 create mode 100644 starter-project-web-vue2/store/natnaelT.js

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
index 7470e690..523b03da 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="btn" :style="{ background: 'color', display: 'center'}" @click="onClick()">{{text}}</button>
+    <v-btn @click="onClick()">{{text}}</v-btn>
 </template>
 <script>
 export default {
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 578743e9..3ccd82c4 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -18,8 +18,10 @@
 </template>
 
 <script>
+import {mapActions} from 'vuex'
 export default {
   name: 'AddBlogForm',
+  
   data() {
     return {
       title: '',
@@ -27,18 +29,19 @@ export default {
     }
   },
   methods: {
+    ...mapActions('natnaelT',['addBlog']),
+
     onSubmit(e) {
       e.preventDefault()
       if (!this.title) {
-        alert('Please add a task')
+        alert('Please add a blog')
         return
       }
       const newBlog = {
-        // id: Math.floor(Math.random() * 100000),
         title: this.title,
         content: this.content
       }
-      this.$emit('add-blog', newBlog)
+      this.addBlog(newBlog)
       this.title = ''
       this.content = ''
     },
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 64cb45ef..6d67007c 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -1,24 +1,46 @@
 <template>
 <div>
-<div v-for="blog in blogs" :key="blog.id">
-    <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
-    <p>
-      
-    </p>
+<div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
+    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)"/>
+    
   </div>
 </div>
 </template>
 
 <script>
-import SingleBlog from './SingleBlog.vue'
+import {mapGetters, mapActions} from "vuex";
+import SingleBlog from './SingleBlog.vue';
+
 export default {
 name:"BlogList",
-props:{
-blogs: Array
+methods:{
+    ...mapActions('natnaelT',['fetchBlogs','deleteBlog']),
+},
+computed: mapGetters('natnaelT',['allBlogs']),
+created(){
+    this.fetchBlogs();
 },
+
 components:{
     SingleBlog
-},
-emits: ["delete-blog"]
+}
 }
 </script>
+<style>
+
+.btn {
+    display: flex;
+    padding: 1px; 
+    margin: 1px;
+    border-radius: 0.5px;
+}
+
+.singleblog{
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 15px;
+  box-shadow: 1px 1px 4px gray;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index cb0932ec..be9edc1d 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="singleblog">
+  <div class="card">
+    <v-card-text>
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
-    <button class="btn">Update</button>
-    <button class="btn" @click="$emit('delete-blog',blog.id)">Delete</button>
+    <v-btn class="btn">Update</v-btn>
+    <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
+    </v-card-text>
+    
+    <!-- <nuxt-link :to="{ path: '/natnaelT/_id', query:{a:1,b:2}}">Show more</nuxt-link> -->
   </div>
 </template>
 
@@ -15,21 +19,4 @@ export default {
     },
     emits: ["delete-blog"]
 }
-</script>
-<style>
-
-.btn {
-    display: flex;
-    padding: 2px; 
-    margin: 1px;
-    border-radius: 0.5px;
-}
-
-.singleblog{
-  background: 	#D3D3D3;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 15px;
-}
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
new file mode 100644
index 00000000..b8a250ad
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/> -->
+  <div>
+    <h1>Ola detail page</h1>
+  </div>
+</template>
+
+<script>
+// import SingleBlog from '~/components/natnaelT/SingleBlog.vue'
+export default {
+    data() {
+        return{
+            blog: {}
+        }
+    },
+    // created(){
+    //         this.blog = this.$route.query
+    //         console.log(blog);
+    //     },
+components: blog
+}
+</script>
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index 7b8c5832..0892162b 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="addblog">
-    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
+    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog()" />
     <div v-if="showAddBlog" class="addblogform">
-    <AddBlogForm @add-blog="addBlog"/>
+    <AddBlogForm />
     </div>
     <div class="bloglist">
-    <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
+    <BlogList /> 
     </div>
   </div>
 </template>
 
 <script>
+
 import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
 import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
 import BlogList from '~/components/natnaelT/BlogList.vue';
 export default {
+    data() {
+        return {
+            showAddBlog: false
+            }
+    },
     components: {
     AddBlogButton,
     AddBlogForm,
     BlogList
-},
-    data() {
-        return{
-            blogs:[],
-            showAddBlog: false
-        }
     },
     head() {
         return {
@@ -36,36 +36,14 @@ export default {
                 }]
         };
     },
-    
-    async created(){
-            this.blogs = await this.fetchBlog()
-        },
-    
+ 
     methods:{
-        async addBlog(blog){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/', {
-                method: "POST",
-                headers:{
-                    'Content-type': "application/json"
-                },
-                body: JSON.stringify(blog)
-            })
-            const data = await res.json()
-            this.blogs = [...this.blogs,data]
-        },
-        deleteBlog(id){
-            this.blogs = this.blogs.filter((blog) => blog.id !== id)
-        },
         toggleAddBlog(){
-            this.showAddBlog = !this.showAddBlog
-        },
-        async fetchBlog(){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all')
-            const data = await res.json()
-            return data
-        }
+        this.showAddBlog = !this.showAddBlog
+    },
     }
     
+    
 }
 </script>
 
@@ -85,9 +63,9 @@ export default {
 
 .btn{
     justify-content: center;
-    background: blue;
+    background: lightblue;
     padding: 5px 10px;
-    color: white;
+    color: black;
     display: inline-block;
     margin: 2px;
     border-radius: 10px;
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
new file mode 100644
index 00000000..cdc98048
--- /dev/null
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+const state = {
+  blogs: [],
+}
+const getters = {
+    allBlogs: (state) => state.blogs 
+}
+const actions = {
+async fetchBlogs({ commit }){
+    const response = await axios.get('https://blog-app-backend.onrender.com/api/articles/all');
+    commit('setBlogs',response.data)
+},
+async addBlog({commit}, blog){
+    const response = await axios.post('https://blog-app-backend.onrender.com/api/articles/', {blog});
+    commit('newBlog',response.data);
+},
+async deleteBlog({commit},id){
+    await axios.delete(`https://blog-app-backend.onrender.com/api/articles/${id}`);
+    commit('removeBlog',id)
+},
+};
+const mutations = {
+    setBlogs: (state,blogs) => (state.blogs = blogs),
+    newBlog: (state,blog) => (state.blogs.unshift(blog)),
+    removeBlog: (state,id) => (state.blogs = state.blogs.filter(todo => todo.id !== id))
+}
+export default{
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file

From 642e2e69053f9b8c8ce71802a88d93bdb322fdc3 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Wed, 3 Aug 2022 21:31:57 +0300
Subject: [PATCH 13/26] Add _id page for each blogs

---
 .../components/natnaelT/BlogList.vue          |  4 +-
 .../components/natnaelT/SingleBlog.vue        | 11 +++--
 .../pages/natnaelT/_id.vue                    | 46 +++++++++++++------
 starter-project-web-vue2/store/natnaelT.js    |  3 ++
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 6d67007c..5e0bf02f 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 <div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
-    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)"/>
+    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)" @update-blog="updateBlog(blog.id)"/>
     
   </div>
 </div>
@@ -14,7 +14,7 @@ import SingleBlog from './SingleBlog.vue';
 export default {
 name:"BlogList",
 methods:{
-    ...mapActions('natnaelT',['fetchBlogs','deleteBlog']),
+    ...mapActions('natnaelT',['fetchBlogs','deleteBlog','updateBlog']),
 },
 computed: mapGetters('natnaelT',['allBlogs']),
 created(){
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index be9edc1d..8deed2be 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -3,11 +3,14 @@
     <v-card-text>
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
-    <v-btn class="btn">Update</v-btn>
+    <v-btn class="btn" @click="$emit('update-blog',blog.id)">Update</v-btn>
     <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
+    <nuxt-link style="text-decoration: none;" :to="'/natnaelT/'+ blog._id">
+    <v-btn>
+      Show more
+    </v-btn> 
+    </nuxt-link>
     </v-card-text>
-    
-    <!-- <nuxt-link :to="{ path: '/natnaelT/_id', query:{a:1,b:2}}">Show more</nuxt-link> -->
   </div>
 </template>
 
@@ -17,6 +20,6 @@ export default {
     props: {
         blog: Object
     },
-    emits: ["delete-blog"]
+    emits: ["delete-blog","update-blog"]
 }
 </script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
index b8a250ad..f0d55619 100644
--- a/starter-project-web-vue2/pages/natnaelT/_id.vue
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -1,22 +1,42 @@
 <template>
-  <!-- <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/> -->
   <div>
-    <h1>Ola detail page</h1>
+    <nuxt-link to="/natnaelT/">
+      <v-btn class="ma-2" color="#1F7087" dark>
+        <v-icon dark left> mdi-arrow-left </v-icon>Back
+      </v-btn>
+    </nuxt-link>
+    <v-card>
+      <h2>{{blog.title}}</h2>
+      <v-container>
+        <p>{{blog.content}}</p>
+      </v-container>
+    </v-card>
   </div>
 </template>
 
 <script>
-// import SingleBlog from '~/components/natnaelT/SingleBlog.vue'
+import axios from 'axios'
 export default {
-    data() {
-        return{
-            blog: {}
-        }
-    },
-    // created(){
-    //         this.blog = this.$route.query
-    //         console.log(blog);
-    //     },
-components: blog
+  data() {
+    return {
+      blog: {
+        title: '',
+        content: '',
+      },
+    }
+  },
+  async created() {
+    try {
+      const response = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`
+      )
+      this.blog = response.data
+    } catch (err) {
+      this.$nuxt.error({
+        statusCode: err.statusCode,
+        message: err.message,
+      })
+    }
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
index cdc98048..423fb8ef 100644
--- a/starter-project-web-vue2/store/natnaelT.js
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -19,6 +19,9 @@ async deleteBlog({commit},id){
     await axios.delete(`https://blog-app-backend.onrender.com/api/articles/${id}`);
     commit('removeBlog',id)
 },
+async updateBlog({commit},id){
+    await axios.patch(`https://blog-app-backend.onrender.com/api/articles/${id}`)
+}
 };
 const mutations = {
     setBlogs: (state,blogs) => (state.blogs = blogs),

From ca856d21ee2ae4c41fef556091620ea66d4dd41e Mon Sep 17 00:00:00 2001
From: Yohans Hailu <95067604+YohansHailu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 21:32:26 +0300
Subject: [PATCH 14/26] Yohans.web.demo (#256)

* [web][yohans] added some basic ui and simple database mocking array

* [web][yohans] added some state for the blogs
---
 .../components/yohans/AddBlog.vue             | 21 ++++++++++++
 .../components/yohans/BlogItem.vue            | 33 +++++++++++++++++++
 .../components/yohans/BlogList.vue            | 22 +++++++++++++
 starter-project-web-vue2/pages/index.vue      |  8 +++--
 .../pages/yohans/_blogDetail.vue              | 19 +++++++++++
 .../pages/yohans/index.vue                    | 15 +++++++++
 starter-project-web-vue2/store/yohans.js      |  8 +++++
 7 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 starter-project-web-vue2/components/yohans/AddBlog.vue
 create mode 100644 starter-project-web-vue2/components/yohans/BlogItem.vue
 create mode 100644 starter-project-web-vue2/components/yohans/BlogList.vue
 create mode 100644 starter-project-web-vue2/pages/yohans/_blogDetail.vue
 create mode 100644 starter-project-web-vue2/pages/yohans/index.vue
 create mode 100644 starter-project-web-vue2/store/yohans.js

diff --git a/starter-project-web-vue2/components/yohans/AddBlog.vue b/starter-project-web-vue2/components/yohans/AddBlog.vue
new file mode 100644
index 00000000..2d634e38
--- /dev/null
+++ b/starter-project-web-vue2/components/yohans/AddBlog.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-dialog max-width="600px">
+    <template v-slot:activator="{ on }">
+      <v-btn color="primary" v-on="on">
+        <v-icon left> mdi-plus </v-icon>
+        add blog
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title> add blog</v-card-title>
+      <v-card-text>
+        <v-form>
+          <v-text-field label="title"></v-text-field>
+          <v-textarea label="content"></v-textarea>
+          <v-btn color="secondary"> add blog </v-btn>
+          <v-spacer></v-spacer>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/starter-project-web-vue2/components/yohans/BlogItem.vue b/starter-project-web-vue2/components/yohans/BlogItem.vue
new file mode 100644
index 00000000..01a3a3d5
--- /dev/null
+++ b/starter-project-web-vue2/components/yohans/BlogItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-card class="pa-10 ma-5">
+    <v-row>
+      <v-col cols="9">
+        <nuxt-link style="text-decoration: none" :to="`/yohans/ ${blog.id}`">{{
+          blog.title
+        }}</nuxt-link>
+        <p>{{ blog.content }}</p>
+      </v-col>
+
+      <v-col cols="1">
+        <v-btn left text>
+          <v-icon>mdi-pencil</v-icon>
+        </v-btn>
+      </v-col>
+
+      <v-col cols="1">
+        <v-btn left text>
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+// do this by prop
+export default {
+  props: {
+    blog: { title: String, content: String },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/yohans/BlogList.vue b/starter-project-web-vue2/components/yohans/BlogList.vue
new file mode 100644
index 00000000..b598f61f
--- /dev/null
+++ b/starter-project-web-vue2/components/yohans/BlogList.vue
@@ -0,0 +1,22 @@
+<template>
+  <v-container>
+    <div v-for="ablog in blogs" :key="ablog.id">
+      <BlogItem :blog="ablog"></BlogItem>
+    </div>
+  </v-container>
+</template>
+<script>
+import BlogItem from './BlogItem.vue'
+export default {
+  name: 'BlogList',
+  components: { BlogItem },
+
+  computed: {
+    blogs() {
+      return this.$store.state.yohans.blogs
+    },
+  },
+
+  created() {},
+}
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 85300395..84673bab 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -38,9 +38,11 @@ export default {
           link: '/abraham',
         },
         {
-          name: 'Aymen Mohammednur',
-          description: 'Group 31 Member',
-          link: '/aymen',
+          name: 'yohans',
+          description: 'Summer Intern',
+          link: '/yohans',
+          description: 'Summer Intern',
+          link: '/abraham',
         },
         {
           name: 'Amsale Gebrehana',
diff --git a/starter-project-web-vue2/pages/yohans/_blogDetail.vue b/starter-project-web-vue2/pages/yohans/_blogDetail.vue
new file mode 100644
index 00000000..aa4332ec
--- /dev/null
+++ b/starter-project-web-vue2/pages/yohans/_blogDetail.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-app>
+    <h1>{{ blog.title }}</h1>
+    <hr />
+    <p>{{ blog.content }}</p>
+  </v-app>
+</template>
+<script>
+export default {
+  computed: {
+    blogs() {
+      return this.$store.state.yohans.blogs
+    },
+    blog() {
+      return this.blogs[+this.$route.params.blogDetail - 1]
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/yohans/index.vue b/starter-project-web-vue2/pages/yohans/index.vue
new file mode 100644
index 00000000..c012002d
--- /dev/null
+++ b/starter-project-web-vue2/pages/yohans/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-app>
+    <v-main>
+      <AddBlog></AddBlog>
+      <BlogList></BlogList>
+    </v-main>
+  </v-app>
+</template>
+<script>
+import BlogList from '../../components/yohans/BlogList.vue'
+export default {
+  name: 'IndexPage',
+  components: { BlogList },
+}
+</script>
diff --git a/starter-project-web-vue2/store/yohans.js b/starter-project-web-vue2/store/yohans.js
new file mode 100644
index 00000000..8e9eb12e
--- /dev/null
+++ b/starter-project-web-vue2/store/yohans.js
@@ -0,0 +1,8 @@
+export const state = () => ({
+  blogs: [
+    { id: 1, title: 'a', content: 'content of a' },
+    { id: 2, title: 'b', content: 'content of b' },
+    { id: 3, title: 'c', content: 'content of c' },
+    { id: 4, title: 'd', content: 'content of d' },
+  ],
+})

From 1065f2d421f6d8166c42bca93e5a73e550a4dbb6 Mon Sep 17 00:00:00 2001
From: Mintesnot Bezabhi <61611671+Mintaa911@users.noreply.github.com>
Date: Wed, 3 Aug 2022 22:21:29 +0300
Subject: [PATCH 15/26] [WEB]: folder restructure

* [web]: sample structure for the demo

* [web]: remove feature folder from store

* [web]: file rename issue with git solved

* [WEB]: fix deploy error
---
 .../components/NavBar.jsx                     |  2 +-
 .../components/mintesnot/NavBar.jsx           |  2 +-
 .../mintesnot/blog/blogPostDialog.tsx         |  2 +-
 .../mintesnot/blog/blogPostForm.tsx           |  2 +-
 .../mintesnot/blog/postBlogButton.tsx         |  2 +-
 .../pages/blog/[id]/index.jsx                 |  6 ++----
 starter-project-web-react/pages/blogs.tsx     | 20 +++++++++----------
 .../pages/mintesnot/index.tsx                 |  5 ++---
 .../pages/mintesnot/profile.tsx               |  5 ++++-
 .../store/mintesnot/app.ts                    |  1 +
 10 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/starter-project-web-react/components/NavBar.jsx b/starter-project-web-react/components/NavBar.jsx
index 4a87fd0e..7394b4ab 100644
--- a/starter-project-web-react/components/NavBar.jsx
+++ b/starter-project-web-react/components/NavBar.jsx
@@ -27,7 +27,7 @@ export default function ButtonAppBar() {
         email: session.user.email,
       })
     }
-  }, [])
+  }, [session, user])
 
   const openProfile = () => {
     router.push('/profile')
diff --git a/starter-project-web-react/components/mintesnot/NavBar.jsx b/starter-project-web-react/components/mintesnot/NavBar.jsx
index e3d161b9..de0e3f30 100644
--- a/starter-project-web-react/components/mintesnot/NavBar.jsx
+++ b/starter-project-web-react/components/mintesnot/NavBar.jsx
@@ -27,7 +27,7 @@ export default function ButtonAppBar() {
         email: session.user.email,
       })
     }
-  })
+  }, [session, user])
 
   const openProfile = () => {
     router.push('/mintesnot/profile')
diff --git a/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx b/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
index 5d9eb337..949ab224 100644
--- a/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
+++ b/starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
@@ -8,7 +8,7 @@ import {
   useMediaQuery,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import BlogPostForm from './BlogPostForm'
+import BlogPostForm from './blogPostForm'
 
 export default function BlogPostDialog({ open, handleClose }: any) {
   const theme = useTheme()
diff --git a/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx b/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
index 87c43892..05a19bcc 100644
--- a/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
+++ b/starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Box, Button } from '@mui/material'
 import { Formik, Form } from 'formik'
 import * as Yup from 'yup'
-import BlogPostTextField from './BlogPostTextField'
+import BlogPostTextField from './blogPostTextField'
 
 type handle = () => void
 interface props {
diff --git a/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx b/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
index a65d2766..d8e27ef9 100644
--- a/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
+++ b/starter-project-web-react/components/mintesnot/blog/postBlogButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Button, Typography } from '@mui/material'
-import BlogPostDialog from './BlogPostDialog'
+import BlogPostDialog from './blogPostDialog'
 
 export default function PostBlog(props: any) {
   const [open, setOpen] = useState(false)
diff --git a/starter-project-web-react/pages/blog/[id]/index.jsx b/starter-project-web-react/pages/blog/[id]/index.jsx
index f3cbfcbf..122464df 100644
--- a/starter-project-web-react/pages/blog/[id]/index.jsx
+++ b/starter-project-web-react/pages/blog/[id]/index.jsx
@@ -8,18 +8,16 @@ import { useSelector, useDispatch } from 'react-redux'
 import { getSingleBlog, loadSingleBlog } from '../../../store/slices/blogs'
 import { getSession } from 'next-auth/react'
 
-
 const BlogDetail = () => {
   const blog = useSelector((state) => getSingleBlog(state))
 
   const dispatch = useDispatch()
-  
+
   const router = useRouter()
 
   useEffect(() => {
-    
     dispatch(loadSingleBlog(router.query.id))
-  }, [])
+  })
 
   return (
     <Container sx={{ mt: 5 }} mt={5}>
diff --git a/starter-project-web-react/pages/blogs.tsx b/starter-project-web-react/pages/blogs.tsx
index 58121a8f..cc09f71a 100644
--- a/starter-project-web-react/pages/blogs.tsx
+++ b/starter-project-web-react/pages/blogs.tsx
@@ -21,21 +21,19 @@ const Blogs = () => {
   const isLoading = useSelector((state: any) => isBlogLoading(state))
   useEffect(() => {
     dispatch(loadBlogs() as any)
-  }, [])
+  })
 
   const [pageNumber, setPageNumber] = useState(0)
   const blogsPerPage = 5
   const pagesVisited = pageNumber * blogsPerPage
 
   const displayBlogs = blogs
-    .slice(pagesVisited, pagesVisited+blogsPerPage)
+    .slice(pagesVisited, pagesVisited + blogsPerPage)
     .map((blog: any) => {
-      return (
-        <BlogCard blog={blog} key={blog._id} />
-      )
+      return <BlogCard blog={blog} key={blog._id} />
     })
 
-  const pageCount = Math.ceil(blogs.length/blogsPerPage)
+  const pageCount = Math.ceil(blogs.length / blogsPerPage)
 
   const changePage = (event: { selected: react.SetStateAction<number> }) => {
     setPageNumber(event.selected)
@@ -85,11 +83,11 @@ const Blogs = () => {
             nextLabel="Next"
             pageCount={pageCount}
             onPageChange={changePage}
-            containerClassName={"paginationBttns"}
-            previousLinkClassName={"previousBttn"}
-            nextLinkClassName={"nextBttn"}
-            disabledClassName={"paginationDisabled"}
-            activeClassName={"paginationActive"}
+            containerClassName={'paginationBttns'}
+            previousLinkClassName={'previousBttn'}
+            nextLinkClassName={'nextBttn'}
+            disabledClassName={'paginationDisabled'}
+            activeClassName={'paginationActive'}
           />
         </Box>
       )}
diff --git a/starter-project-web-react/pages/mintesnot/index.tsx b/starter-project-web-react/pages/mintesnot/index.tsx
index d36c31e6..86ad5caa 100644
--- a/starter-project-web-react/pages/mintesnot/index.tsx
+++ b/starter-project-web-react/pages/mintesnot/index.tsx
@@ -1,10 +1,9 @@
 import react from 'react'
 import { Box, Container, Grid, Typography, Divider } from '@mui/material'
-
 import CircularProgress from '@mui/material/CircularProgress'
 import { useFetchBlogsQuery } from '../../store/mintesnot/blog/BlogApiSlice'
-import PostBlog from '../../components/mintesnot/blog/PostBlogButton'
-import BlogCard from '../../components/mintesnot/blog/BlogCard'
+import PostBlog from '../../components/mintesnot/blog/postBlogButton'
+import BlogCard from '../../components/mintesnot/blog/blogCard'
 
 const Blogs = () => {
   const { data = [], isFetching } = useFetchBlogsQuery()
diff --git a/starter-project-web-react/pages/mintesnot/profile.tsx b/starter-project-web-react/pages/mintesnot/profile.tsx
index b1c6ea43..c8fb7f99 100644
--- a/starter-project-web-react/pages/mintesnot/profile.tsx
+++ b/starter-project-web-react/pages/mintesnot/profile.tsx
@@ -1 +1,4 @@
-export default {}
+const ProfilePage = () => {
+  return <></>
+}
+export default ProfilePage
diff --git a/starter-project-web-react/store/mintesnot/app.ts b/starter-project-web-react/store/mintesnot/app.ts
index b5432396..9886924d 100644
--- a/starter-project-web-react/store/mintesnot/app.ts
+++ b/starter-project-web-react/store/mintesnot/app.ts
@@ -2,6 +2,7 @@ import { configureStore,  } from "@reduxjs/toolkit";
 import blogReducer from "./blog/Blog"
 import { blogApiSlice } from "./blog/BlogApiSlice";
 
+
 export const store = configureStore({
     reducer:{
         blog: blogReducer,

From 5f684c67b4f83d47d51700eb29298fefc08374a8 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Fri, 29 Jul 2022 13:09:20 +0300
Subject: [PATCH 16/26] Create link from landing page to my blog page

---
 .DS_Store                                     | Bin 12292 -> 14340 bytes
 starter-project-web-vue2/pages/index.vue      |   7 +++--
 .../pages/natnaelT/index.vue                  |  27 ++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 starter-project-web-vue2/pages/natnaelT/index.vue

diff --git a/.DS_Store b/.DS_Store
index 9c48bff11f454b5ee2de1336fc40774f649e61d2..ec7f309ce2400802a7715f03215d14ac8a6d6549 100644
GIT binary patch
delta 139
zcmZokXem%&U|?W$DortDU@!nOIe-{M3-ADmb_NCoo{0+jjM^ImcFQx$Z01p5WM-6@
zyhllsy^NuhA(g>s@;qhN&2GxgEQ}0`*(Eq6S%KPsz<?V_xFQ>~S&;EP^JIP<Umhli
SEfyeklQVQCZr-E9%?to$;TMen

delta 146
zcmZoEXh~3DU|?W$DortDV9)?EIe-{M3-ADmb_NCo?uiQej9ME5cFQwLZ{|^8WS(rS
zV!63lxtWELadLy0<mAWViZVd8tUwF|8r(p_6<PmgLB{vYlle`2c^DzaGXQCW$r&aS
QCl`vVY>rZ0!-Oyi01FQqo&W#<

diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 84673bab..06e944b4 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -41,8 +41,6 @@ export default {
           name: 'yohans',
           description: 'Summer Intern',
           link: '/yohans',
-          description: 'Summer Intern',
-          link: '/abraham',
         },
         {
           name: 'Amsale Gebrehana',
@@ -74,6 +72,11 @@ export default {
           description: 'Group 32 Student',
           link: '/yared',
         },
+        {
+          name: "Natnael Tedros",
+          description: 'Summer Intern',
+          link: '/natnaelT',
+        }
       ],
     }
   },
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
new file mode 100644
index 00000000..dbf68e69
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Test Blog Page</h1>
+    <p>This is where the content of the blog would go! List of all the blogs.</p>
+  </div>
+</template>
+
+<script>
+export default {
+    head(){// used to increase the page's detail for the SEO
+        return {
+            title: "Blog App",
+            meta: [{
+                hid:"description",
+                name:"Blog page",
+                content:"Blog to save thoughts"
+            }]
+        }
+    }
+}
+</script>
+
+<style>
+p{
+    font-style: italic;
+}
+</style>
\ No newline at end of file

From 7649b1d4084089888f956a11db3cbec8d8f9a5b7 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Fri, 29 Jul 2022 19:40:51 +0300
Subject: [PATCH 17/26] Create an Add Blog page

---
 .../components/natnaelT/NatnaelAddBlog.vue    | 34 +++++++++++++++++++
 .../pages/natnaelT/NatnaelAddBlog.vue         | 34 +++++++++++++++++++
 .../pages/natnaelT/index.vue                  | 31 ++++++++++++-----
 3 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
 create mode 100644 starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue

diff --git a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
new file mode 100644
index 00000000..c1c9e987
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Add your blog below:</h1>
+    <form>
+        <input type="text" name="title" placeholder="Write your title here...">
+        <input type="text" name="content" placeholder="Write your blog content here...">
+        <input class="submit" type="submit" name="Save Blog">
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'NatnaelAddBlog'
+}
+</script>
+
+<style>
+h1{
+    display: flex;
+    color: green;
+}
+
+input{
+    font-style: italic;
+    display: block;
+}
+
+.submit{
+    background-color: chartreuse;
+    display: flex;
+    justify-content:flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
new file mode 100644
index 00000000..185597d7
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Add your blog below:</h1>
+    <form>
+        <input type="text" name="title" placeholder="Write your title here...">
+        <input type="text" name="content" placeholder="Write your blog content here...">
+        <input class="submit" type="submit" name="Save Blog">
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'NatnaelAddBlog'
+}
+</script>
+
+<style>
+h1{
+    display: flex;
+    color: blue;
+}
+
+input{
+    font-style: italic;
+    display: block;
+}
+
+.submit{
+    background-color:blue;
+    display: flex;
+    justify-content:flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index dbf68e69..a653a956 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,27 +1,42 @@
 <template>
-  <div>
+  <div class="addblog">
     <h1>Test Blog Page</h1>
     <p>This is where the content of the blog would go! List of all the blogs.</p>
+    <nuxt-link to='/natnaelT/NatnaelAddBlog'>Add a new Blog</nuxt-link>
   </div>
 </template>
 
 <script>
+import NatnaelAddBlog from '~/components/natnaelT/NatnaelAddBlog'
 export default {
-    head(){// used to increase the page's detail for the SEO
+    head() {
         return {
             title: "Blog App",
             meta: [{
-                hid:"description",
-                name:"Blog page",
-                content:"Blog to save thoughts"
-            }]
-        }
+                    hid: "description",
+                    name: "Blog page",
+                    content: "Blog to save thoughts"
+                }]
+        };
+    },
+    comments: {
+        NatnaelAddBlog
     }
 }
 </script>
 
 <style>
-p{
+
+.addblog p{
     font-style: italic;
 }
+
+.addblog nuxt-link{
+    display: inline-block;
+    background: blue;
+    color: aliceblue;
+    padding: 0.3rem 1rem;
+    margin-right: 0.5rem;
+}
+
 </style>
\ No newline at end of file

From 28b20aeedf4a877812d3dc07d168b1cee9400b91 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Sat, 30 Jul 2022 22:24:22 +0300
Subject: [PATCH 18/26] include Create Add and Delete blog functionalities

---
 .../components/natnaelT/AddBlogButton.vue     | 17 ++++
 .../components/natnaelT/AddBlogForm.vue       | 86 +++++++++++++++++++
 .../components/natnaelT/BlogList.vue          | 22 +++++
 .../components/natnaelT/NatnaelAddBlog.vue    | 34 --------
 .../components/natnaelT/SingleBlog.vue        | 28 ++++++
 .../pages/natnaelT/NatnaelAddBlog.vue         | 34 --------
 .../pages/natnaelT/index.vue                  | 68 ++++++++++++++-
 7 files changed, 217 insertions(+), 72 deletions(-)
 create mode 100644 starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/BlogList.vue
 delete mode 100644 starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
 create mode 100644 starter-project-web-vue2/components/natnaelT/SingleBlog.vue
 delete mode 100644 starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
new file mode 100644
index 00000000..1620cd36
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -0,0 +1,17 @@
+<template>
+    <button class="btn" :style="{ background: 'color' }" @click="onClick()">{{text}}</button>
+</template>
+<script>
+export default {
+    name:'AddBlogButton',
+    props:{
+        text: String,
+        color: String
+    },
+    methods:{
+        onClick(){
+             this.$emit("toggle-add-blog")
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
new file mode 100644
index 00000000..492496b1
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -0,0 +1,86 @@
+<template>
+  <form @submit="onSubmit" class="add-form">
+    <div class="form-control">
+      <label>Title of Blog</label>
+      <input type="text" v-model="title" name="content" placeholder="Blog Title here..." />
+    </div>
+    <div class="form-control">
+      <label>Content of Blog</label>
+      <input
+        type="text"
+        v-model="content"
+        name="content"
+        placeholder="Write here..."
+      />
+    </div>
+    <input type="submit" value="Save Task" class="btn" />
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'AddBlogForm',
+  data() {
+    return {
+      title: '',
+      content: ''
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      if (!this.title) {
+        alert('Please add a task')
+        return
+      }
+      const newBlog = {
+        id: Math.floor(Math.random() * 100000),
+        title: this.title,
+        content: this.content
+      }
+      this.$emit('add-blog', newBlog)
+      this.title = ''
+      this.content = ''
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.add-form {
+  margin-bottom: 40px;
+}
+
+.form-control {
+  margin: 20px 0;
+}
+
+.form-control label {
+  display: block;
+}
+
+.form-control input {
+  width: 100%;
+  height: 40px;
+  margin: 5px;
+  padding: 3px 7px;
+  font-size: 17px;
+}
+
+.form-control-check {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-control-check label {
+  flex: 1;
+}
+
+.form-control-check input {
+  flex: 2;
+  height: 20px;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
new file mode 100644
index 00000000..4884a1aa
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -0,0 +1,22 @@
+<template>
+<div>
+<div v-for="blog in blogs" :key="blog.id">
+    <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
+  </div>
+</div>
+</template>
+
+<script>
+import SingleBlog from './SingleBlog.vue'
+export default {
+name:"BlogList",
+props:{
+blogs: Array
+},
+components:{
+    SingleBlog
+},
+emits: ["delete-blog"]
+}
+</script>
+
diff --git a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
deleted file mode 100644
index c1c9e987..00000000
--- a/starter-project-web-vue2/components/natnaelT/NatnaelAddBlog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <h1>Add your blog below:</h1>
-    <form>
-        <input type="text" name="title" placeholder="Write your title here...">
-        <input type="text" name="content" placeholder="Write your blog content here...">
-        <input class="submit" type="submit" name="Save Blog">
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'NatnaelAddBlog'
-}
-</script>
-
-<style>
-h1{
-    display: flex;
-    color: green;
-}
-
-input{
-    font-style: italic;
-    display: block;
-}
-
-.submit{
-    background-color: chartreuse;
-    display: flex;
-    justify-content:flex-end;
-}
-</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
new file mode 100644
index 00000000..9b467cdc
--- /dev/null
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h3>{{blog.title}}</h3>
+    <p>{{blog.content}}</p>
+    <button class="btn">Update</button>
+    <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "SingleBlog",
+    props: {
+        blog: Object
+    },
+    emits: ["delete-blog"]
+}
+</script>
+<style>
+
+.btn {
+    display: flex;
+    padding: 2px; 
+    margin: 1px;
+    border-radius: 0.5px;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue b/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
deleted file mode 100644
index 185597d7..00000000
--- a/starter-project-web-vue2/pages/natnaelT/NatnaelAddBlog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <h1>Add your blog below:</h1>
-    <form>
-        <input type="text" name="title" placeholder="Write your title here...">
-        <input type="text" name="content" placeholder="Write your blog content here...">
-        <input class="submit" type="submit" name="Save Blog">
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'NatnaelAddBlog'
-}
-</script>
-
-<style>
-h1{
-    display: flex;
-    color: blue;
-}
-
-input{
-    font-style: italic;
-    display: block;
-}
-
-.submit{
-    background-color:blue;
-    display: flex;
-    justify-content:flex-end;
-}
-</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index a653a956..a8cd7bc8 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,14 +1,31 @@
 <template>
   <div class="addblog">
+    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
+    <div v-if="showAddBlog">
+    <AddBlogForm @add-blog="addBlog"/>
+    </div>
     <h1>Test Blog Page</h1>
     <p>This is where the content of the blog would go! List of all the blogs.</p>
-    <nuxt-link to='/natnaelT/NatnaelAddBlog'>Add a new Blog</nuxt-link>
+    <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
   </div>
 </template>
 
 <script>
-import NatnaelAddBlog from '~/components/natnaelT/NatnaelAddBlog'
+import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
+import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
+import BlogList from '~/components/natnaelT/BlogList.vue';
 export default {
+    components: {
+    AddBlogButton,
+    AddBlogForm,
+    BlogList
+},
+    data() {
+        return{
+            blogs:[],
+            showAddBlog: true
+        }
+    },
     head() {
         return {
             title: "Blog App",
@@ -19,9 +36,42 @@ export default {
                 }]
         };
     },
-    comments: {
-        NatnaelAddBlog
+    
+    created(){
+            this.blogs = [{
+                id: 1,
+                title: "Blog test one",
+                content: "This is the content of the test Blog one"
+            },
+            {
+                id: 2,
+                title: "Blog test two",
+                content: "This is the content of the test Blog two"
+            },
+            {
+                id: 3,
+                title: "Blog test three",
+                content: "This is the content of the test Blog three"
+            },
+            {
+                id: 4,
+                title: "Blog test four",
+                content: "This is the content of the test Blog four"
+            }]
+        },
+    
+    methods:{
+        addBlog(blog){
+            this.blogs = [...this.blogs,blog]
+        },
+        deleteBlog(id){
+            this.blogs = this.blogs.filter((blog) => blog.id !== id)
+        },
+        toggleAddBlog(){
+            this.showAddBlog = !this.showAddBlog
+        }
     }
+    
 }
 </script>
 
@@ -39,4 +89,14 @@ export default {
     margin-right: 0.5rem;
 }
 
+.btn{
+    background: blue;
+    padding: 5px 10px;
+    color: white;
+    display: inline-block;
+    margin: 2px;
+    border-radius: 10px;
+
+}
+
 </style>
\ No newline at end of file

From e76da36a22497567272755792ce806d6bde6351c Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Mon, 1 Aug 2022 20:46:53 +0300
Subject: [PATCH 19/26] Get data from the blog backend

---
 .../pages/natnaelT/index.vue                  | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index a8cd7bc8..465b3dfa 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -23,7 +23,7 @@ export default {
     data() {
         return{
             blogs:[],
-            showAddBlog: true
+            showAddBlog: false
         }
     },
     head() {
@@ -37,38 +37,32 @@ export default {
         };
     },
     
-    created(){
-            this.blogs = [{
-                id: 1,
-                title: "Blog test one",
-                content: "This is the content of the test Blog one"
-            },
-            {
-                id: 2,
-                title: "Blog test two",
-                content: "This is the content of the test Blog two"
-            },
-            {
-                id: 3,
-                title: "Blog test three",
-                content: "This is the content of the test Blog three"
-            },
-            {
-                id: 4,
-                title: "Blog test four",
-                content: "This is the content of the test Blog four"
-            }]
+    async created(){
+            this.blogs = await this.fetchBlog()
         },
     
     methods:{
-        addBlog(blog){
-            this.blogs = [...this.blogs,blog]
+        async addBlog(blog){
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all', {
+                method: "POST",
+                headers:{
+                    'Content-type': "applicatio/json",
+                },
+                body: JSON.stringify(blog)
+            })
+            const data = await res.json()
+            this.blogs = [...this.blogs,data]
         },
         deleteBlog(id){
             this.blogs = this.blogs.filter((blog) => blog.id !== id)
         },
         toggleAddBlog(){
             this.showAddBlog = !this.showAddBlog
+        },
+        async fetchBlog(){
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all')
+            const data = await res.json()
+            return data
         }
     }
     

From 87308a9130b3e91d4c46a6ccfd9f3722eb3caeac Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Tue, 2 Aug 2022 12:40:38 +0300
Subject: [PATCH 20/26] Add basic UI

---
 .../components/natnaelT/AddBlogButton.vue          |  4 ++--
 .../components/natnaelT/AddBlogForm.vue            | 14 +++++++-------
 .../components/natnaelT/BlogList.vue               |  4 +++-
 .../components/natnaelT/SingleBlog.vue             | 11 +++++++++--
 starter-project-web-vue2/pages/natnaelT/index.vue  | 11 ++++++-----
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
index 1620cd36..7470e690 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="btn" :style="{ background: 'color' }" @click="onClick()">{{text}}</button>
+    <button class="btn" :style="{ background: 'color', display: 'center'}" @click="onClick()">{{text}}</button>
 </template>
 <script>
 export default {
@@ -14,4 +14,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 492496b1..578743e9 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -1,19 +1,19 @@
 <template>
-  <form @submit="onSubmit" class="add-form">
+  <form class="add-form" @submit="onSubmit">
     <div class="form-control">
-      <label>Title of Blog</label>
-      <input type="text" v-model="title" name="content" placeholder="Blog Title here..." />
+      <label>Title</label>
+      <input v-model="title" type="text" name="content" placeholder="Blog Title here..." />
     </div>
     <div class="form-control">
-      <label>Content of Blog</label>
+      <label>Content</label>
       <input
-        type="text"
         v-model="content"
+        type="text"
         name="content"
         placeholder="Write here..."
       />
     </div>
-    <input type="submit" value="Save Task" class="btn" />
+    <input type="submit" value="Save Blog" class="btn" />
   </form>
 </template>
 
@@ -34,7 +34,7 @@ export default {
         return
       }
       const newBlog = {
-        id: Math.floor(Math.random() * 100000),
+        // id: Math.floor(Math.random() * 100000),
         title: this.title,
         content: this.content
       }
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 4884a1aa..64cb45ef 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -2,6 +2,9 @@
 <div>
 <div v-for="blog in blogs" :key="blog.id">
     <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
+    <p>
+      
+    </p>
   </div>
 </div>
 </template>
@@ -19,4 +22,3 @@ components:{
 emits: ["delete-blog"]
 }
 </script>
-
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index 9b467cdc..6702f9a0 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h3>{{blog.title}}</h3>
+  <div class="singleblog">
+    <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
     <button class="btn">Update</button>
     <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
@@ -25,4 +25,11 @@ export default {
     border-radius: 0.5px;
 }
 
+.singleblog{
+  background: 	#D3D3D3;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 15px;
+}
+
 </style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index 465b3dfa..c780c882 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="addblog">
     <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
-    <div v-if="showAddBlog">
+    <div class="addblogform" v-if="showAddBlog">
     <AddBlogForm @add-blog="addBlog"/>
     </div>
-    <h1>Test Blog Page</h1>
-    <p>This is where the content of the blog would go! List of all the blogs.</p>
+    <div class="bloglist">
     <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
+    </div>
   </div>
 </template>
 
@@ -43,10 +43,10 @@ export default {
     
     methods:{
         async addBlog(blog){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all', {
+            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/', {
                 method: "POST",
                 headers:{
-                    'Content-type': "applicatio/json",
+                    'Content-type': "application/json"
                 },
                 body: JSON.stringify(blog)
             })
@@ -84,6 +84,7 @@ export default {
 }
 
 .btn{
+    justify-content: center;
     background: blue;
     padding: 5px 10px;
     color: white;

From 3767785e226bec01ca6e84d8c8b15d8d858db4c9 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Tue, 2 Aug 2022 12:44:57 +0300
Subject: [PATCH 21/26] fixed warnings

---
 starter-project-web-vue2/components/natnaelT/SingleBlog.vue | 2 +-
 starter-project-web-vue2/pages/natnaelT/index.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index 6702f9a0..cb0932ec 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -3,7 +3,7 @@
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
     <button class="btn">Update</button>
-    <button @click="$emit('delete-blog',blog.id)" class="btn">Delete</button>
+    <button class="btn" @click="$emit('delete-blog',blog.id)">Delete</button>
   </div>
 </template>
 
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index c780c882..7b8c5832 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="addblog">
     <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
-    <div class="addblogform" v-if="showAddBlog">
+    <div v-if="showAddBlog" class="addblogform">
     <AddBlogForm @add-blog="addBlog"/>
     </div>
     <div class="bloglist">

From 06e816fda15c5b6e4c6cf73f067f1fb1da1fc7bf Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Wed, 3 Aug 2022 19:51:06 +0300
Subject: [PATCH 22/26] Add Vuex and edit UI with vuetify

---
 .../components/natnaelT/AddBlogButton.vue     |  2 +-
 .../components/natnaelT/AddBlogForm.vue       |  9 ++--
 .../components/natnaelT/BlogList.vue          | 42 +++++++++++----
 .../components/natnaelT/SingleBlog.vue        | 29 +++--------
 .../pages/natnaelT/_id.vue                    | 22 ++++++++
 .../pages/natnaelT/index.vue                  | 52 ++++++-------------
 starter-project-web-vue2/store/natnaelT.js    | 33 ++++++++++++
 7 files changed, 117 insertions(+), 72 deletions(-)
 create mode 100644 starter-project-web-vue2/pages/natnaelT/_id.vue
 create mode 100644 starter-project-web-vue2/store/natnaelT.js

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
index 7470e690..523b03da 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="btn" :style="{ background: 'color', display: 'center'}" @click="onClick()">{{text}}</button>
+    <v-btn @click="onClick()">{{text}}</v-btn>
 </template>
 <script>
 export default {
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 578743e9..3ccd82c4 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -18,8 +18,10 @@
 </template>
 
 <script>
+import {mapActions} from 'vuex'
 export default {
   name: 'AddBlogForm',
+  
   data() {
     return {
       title: '',
@@ -27,18 +29,19 @@ export default {
     }
   },
   methods: {
+    ...mapActions('natnaelT',['addBlog']),
+
     onSubmit(e) {
       e.preventDefault()
       if (!this.title) {
-        alert('Please add a task')
+        alert('Please add a blog')
         return
       }
       const newBlog = {
-        // id: Math.floor(Math.random() * 100000),
         title: this.title,
         content: this.content
       }
-      this.$emit('add-blog', newBlog)
+      this.addBlog(newBlog)
       this.title = ''
       this.content = ''
     },
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 64cb45ef..6d67007c 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -1,24 +1,46 @@
 <template>
 <div>
-<div v-for="blog in blogs" :key="blog.id">
-    <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/>
-    <p>
-      
-    </p>
+<div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
+    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)"/>
+    
   </div>
 </div>
 </template>
 
 <script>
-import SingleBlog from './SingleBlog.vue'
+import {mapGetters, mapActions} from "vuex";
+import SingleBlog from './SingleBlog.vue';
+
 export default {
 name:"BlogList",
-props:{
-blogs: Array
+methods:{
+    ...mapActions('natnaelT',['fetchBlogs','deleteBlog']),
+},
+computed: mapGetters('natnaelT',['allBlogs']),
+created(){
+    this.fetchBlogs();
 },
+
 components:{
     SingleBlog
-},
-emits: ["delete-blog"]
+}
 }
 </script>
+<style>
+
+.btn {
+    display: flex;
+    padding: 1px; 
+    margin: 1px;
+    border-radius: 0.5px;
+}
+
+.singleblog{
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 15px;
+  box-shadow: 1px 1px 4px gray;
+}
+
+</style>
\ No newline at end of file
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index cb0932ec..be9edc1d 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="singleblog">
+  <div class="card">
+    <v-card-text>
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
-    <button class="btn">Update</button>
-    <button class="btn" @click="$emit('delete-blog',blog.id)">Delete</button>
+    <v-btn class="btn">Update</v-btn>
+    <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
+    </v-card-text>
+    
+    <!-- <nuxt-link :to="{ path: '/natnaelT/_id', query:{a:1,b:2}}">Show more</nuxt-link> -->
   </div>
 </template>
 
@@ -15,21 +19,4 @@ export default {
     },
     emits: ["delete-blog"]
 }
-</script>
-<style>
-
-.btn {
-    display: flex;
-    padding: 2px; 
-    margin: 1px;
-    border-radius: 0.5px;
-}
-
-.singleblog{
-  background: 	#D3D3D3;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 15px;
-}
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
new file mode 100644
index 00000000..b8a250ad
--- /dev/null
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/> -->
+  <div>
+    <h1>Ola detail page</h1>
+  </div>
+</template>
+
+<script>
+// import SingleBlog from '~/components/natnaelT/SingleBlog.vue'
+export default {
+    data() {
+        return{
+            blog: {}
+        }
+    },
+    // created(){
+    //         this.blog = this.$route.query
+    //         console.log(blog);
+    //     },
+components: blog
+}
+</script>
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index 7b8c5832..0892162b 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="addblog">
-    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog"/>
+    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog()" />
     <div v-if="showAddBlog" class="addblogform">
-    <AddBlogForm @add-blog="addBlog"/>
+    <AddBlogForm />
     </div>
     <div class="bloglist">
-    <BlogList :blogs="blogs" @delete-blog="deleteBlog"/>
+    <BlogList /> 
     </div>
   </div>
 </template>
 
 <script>
+
 import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
 import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
 import BlogList from '~/components/natnaelT/BlogList.vue';
 export default {
+    data() {
+        return {
+            showAddBlog: false
+            }
+    },
     components: {
     AddBlogButton,
     AddBlogForm,
     BlogList
-},
-    data() {
-        return{
-            blogs:[],
-            showAddBlog: false
-        }
     },
     head() {
         return {
@@ -36,36 +36,14 @@ export default {
                 }]
         };
     },
-    
-    async created(){
-            this.blogs = await this.fetchBlog()
-        },
-    
+ 
     methods:{
-        async addBlog(blog){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/', {
-                method: "POST",
-                headers:{
-                    'Content-type': "application/json"
-                },
-                body: JSON.stringify(blog)
-            })
-            const data = await res.json()
-            this.blogs = [...this.blogs,data]
-        },
-        deleteBlog(id){
-            this.blogs = this.blogs.filter((blog) => blog.id !== id)
-        },
         toggleAddBlog(){
-            this.showAddBlog = !this.showAddBlog
-        },
-        async fetchBlog(){
-            const res = await fetch('https://blog-app-backend.onrender.com/api/articles/all')
-            const data = await res.json()
-            return data
-        }
+        this.showAddBlog = !this.showAddBlog
+    },
     }
     
+    
 }
 </script>
 
@@ -85,9 +63,9 @@ export default {
 
 .btn{
     justify-content: center;
-    background: blue;
+    background: lightblue;
     padding: 5px 10px;
-    color: white;
+    color: black;
     display: inline-block;
     margin: 2px;
     border-radius: 10px;
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
new file mode 100644
index 00000000..cdc98048
--- /dev/null
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+const state = {
+  blogs: [],
+}
+const getters = {
+    allBlogs: (state) => state.blogs 
+}
+const actions = {
+async fetchBlogs({ commit }){
+    const response = await axios.get('https://blog-app-backend.onrender.com/api/articles/all');
+    commit('setBlogs',response.data)
+},
+async addBlog({commit}, blog){
+    const response = await axios.post('https://blog-app-backend.onrender.com/api/articles/', {blog});
+    commit('newBlog',response.data);
+},
+async deleteBlog({commit},id){
+    await axios.delete(`https://blog-app-backend.onrender.com/api/articles/${id}`);
+    commit('removeBlog',id)
+},
+};
+const mutations = {
+    setBlogs: (state,blogs) => (state.blogs = blogs),
+    newBlog: (state,blog) => (state.blogs.unshift(blog)),
+    removeBlog: (state,id) => (state.blogs = state.blogs.filter(todo => todo.id !== id))
+}
+export default{
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file

From ccfe2f6b10c6923eb4c38b71599a48a583369083 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Wed, 3 Aug 2022 21:31:57 +0300
Subject: [PATCH 23/26] Add _id page for each blogs

---
 .../components/natnaelT/BlogList.vue          |  4 +-
 .../components/natnaelT/SingleBlog.vue        | 11 +++--
 .../pages/natnaelT/_id.vue                    | 46 +++++++++++++------
 starter-project-web-vue2/store/natnaelT.js    |  3 ++
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 6d67007c..5e0bf02f 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 <div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
-    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)"/>
+    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)" @update-blog="updateBlog(blog.id)"/>
     
   </div>
 </div>
@@ -14,7 +14,7 @@ import SingleBlog from './SingleBlog.vue';
 export default {
 name:"BlogList",
 methods:{
-    ...mapActions('natnaelT',['fetchBlogs','deleteBlog']),
+    ...mapActions('natnaelT',['fetchBlogs','deleteBlog','updateBlog']),
 },
 computed: mapGetters('natnaelT',['allBlogs']),
 created(){
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index be9edc1d..8deed2be 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -3,11 +3,14 @@
     <v-card-text>
     <h2>{{blog.title}}</h2>
     <p>{{blog.content}}</p>
-    <v-btn class="btn">Update</v-btn>
+    <v-btn class="btn" @click="$emit('update-blog',blog.id)">Update</v-btn>
     <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
+    <nuxt-link style="text-decoration: none;" :to="'/natnaelT/'+ blog._id">
+    <v-btn>
+      Show more
+    </v-btn> 
+    </nuxt-link>
     </v-card-text>
-    
-    <!-- <nuxt-link :to="{ path: '/natnaelT/_id', query:{a:1,b:2}}">Show more</nuxt-link> -->
   </div>
 </template>
 
@@ -17,6 +20,6 @@ export default {
     props: {
         blog: Object
     },
-    emits: ["delete-blog"]
+    emits: ["delete-blog","update-blog"]
 }
 </script>
\ No newline at end of file
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
index b8a250ad..f0d55619 100644
--- a/starter-project-web-vue2/pages/natnaelT/_id.vue
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -1,22 +1,42 @@
 <template>
-  <!-- <SingleBlog :blog="blog" @delete-blog="$emit('delete-blog',blog.id)"/> -->
   <div>
-    <h1>Ola detail page</h1>
+    <nuxt-link to="/natnaelT/">
+      <v-btn class="ma-2" color="#1F7087" dark>
+        <v-icon dark left> mdi-arrow-left </v-icon>Back
+      </v-btn>
+    </nuxt-link>
+    <v-card>
+      <h2>{{blog.title}}</h2>
+      <v-container>
+        <p>{{blog.content}}</p>
+      </v-container>
+    </v-card>
   </div>
 </template>
 
 <script>
-// import SingleBlog from '~/components/natnaelT/SingleBlog.vue'
+import axios from 'axios'
 export default {
-    data() {
-        return{
-            blog: {}
-        }
-    },
-    // created(){
-    //         this.blog = this.$route.query
-    //         console.log(blog);
-    //     },
-components: blog
+  data() {
+    return {
+      blog: {
+        title: '',
+        content: '',
+      },
+    }
+  },
+  async created() {
+    try {
+      const response = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`
+      )
+      this.blog = response.data
+    } catch (err) {
+      this.$nuxt.error({
+        statusCode: err.statusCode,
+        message: err.message,
+      })
+    }
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
index cdc98048..423fb8ef 100644
--- a/starter-project-web-vue2/store/natnaelT.js
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -19,6 +19,9 @@ async deleteBlog({commit},id){
     await axios.delete(`https://blog-app-backend.onrender.com/api/articles/${id}`);
     commit('removeBlog',id)
 },
+async updateBlog({commit},id){
+    await axios.patch(`https://blog-app-backend.onrender.com/api/articles/${id}`)
+}
 };
 const mutations = {
     setBlogs: (state,blogs) => (state.blogs = blogs),

From 3cb2e348e6eb2782225bcda57825cf11d9bf2ef0 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Thu, 4 Aug 2022 11:13:30 +0300
Subject: [PATCH 24/26] [web] add vuex and vuetify

---
 .../components/natnaelT/AddBlogButton.vue     |  20 ++--
 .../components/natnaelT/AddBlogForm.vue       |  66 ++++++-----
 .../components/natnaelT/BlogList.vue          |  53 ++++-----
 .../components/natnaelT/SingleBlog.vue        |  28 +++--
 starter-project-web-vue2/nuxt.config.js       |   3 +-
 .../pages/natnaelT/_id.vue                    |   4 +-
 .../pages/natnaelT/index.vue                  | 104 +++++++++---------
 .../pages/sileshi/README.md                   |   0
 starter-project-web-vue2/store/natnaelT.js    |  60 +++++-----
 9 files changed, 177 insertions(+), 161 deletions(-)
 create mode 100644 starter-project-web-vue2/pages/sileshi/README.md

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
index 523b03da..ab5503d3 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogButton.vue
@@ -1,17 +1,17 @@
 <template>
-    <v-btn @click="onClick()">{{text}}</v-btn>
+  <v-btn @click="onClick()">{{ text }}</v-btn>
 </template>
 <script>
 export default {
-    name:'AddBlogButton',
-    props:{
-        text: String,
-        color: String
+  name: 'AddBlogButton',
+  props: {
+    text: String,
+    color: String,
+  },
+  methods: {
+    onClick() {
+      this.$emit('toggle-add-blog')
     },
-    methods:{
-        onClick(){
-             this.$emit("toggle-add-blog")
-        }
-    }
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 3ccd82c4..21b1e684 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -1,56 +1,63 @@
 <template>
-  <form class="add-form" @submit="onSubmit">
+  <v-form class="add-form">
     <div class="form-control">
-      <label>Title</label>
-      <input v-model="title" type="text" name="content" placeholder="Blog Title here..." />
+      <v-text-field
+        v-model="blog.title"
+        label="Title"
+        type="text"
+        name="content"
+        placeholder="Blog Title here..."
+      ></v-text-field>
     </div>
     <div class="form-control">
-      <label>Content</label>
-      <input
-        v-model="content"
+      <v-text-field
+        v-model="blog.content"
+        label="Content"
         type="text"
         name="content"
         placeholder="Write here..."
-      />
+      ></v-text-field>
     </div>
-    <input type="submit" value="Save Blog" class="btn" />
-  </form>
+    <div class="form-control">
+      <v-text-field
+        v-model="blog.description"
+        label="Description"
+        type="text"
+        name="description"
+        placeholder="Write here..."
+      ></v-text-field>
+    </div>
+    <v-btn value="Save Blog" class="btn" @click="onSubmit()">Save Blog</v-btn>
+  </v-form>
 </template>
 
 <script>
-import {mapActions} from 'vuex'
+import { mapActions } from 'vuex'
 export default {
   name: 'AddBlogForm',
-  
+
   data() {
     return {
-      title: '',
-      content: ''
+      blog: {
+        title: '',
+        content: '',
+        description: '',
+      },
     }
   },
   methods: {
-    ...mapActions('natnaelT',['addBlog']),
+    ...mapActions('natnaelT', ['addBlog']),
 
-    onSubmit(e) {
-      e.preventDefault()
-      if (!this.title) {
-        alert('Please add a blog')
-        return
-      }
-      const newBlog = {
-        title: this.title,
-        content: this.content
-      }
-      this.addBlog(newBlog)
-      this.title = ''
-      this.content = ''
+    onSubmit() {
+      this.addBlog(this.blog)
+      // this.title = ''
+      // this.content = ''
     },
   },
 }
 </script>
 
 <style scoped>
-
 .add-form {
   margin-bottom: 40px;
 }
@@ -85,5 +92,4 @@ export default {
   flex: 2;
   height: 20px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 5e0bf02f..66bee0a7 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -1,46 +1,47 @@
 <template>
-<div>
-<div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
-    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)" @update-blog="updateBlog(blog.id)"/>
-    
+  <div>
+    <div v-for="blog in allBlogs" :key="blog.id" class="singleblog">
+      <SingleBlog
+        :blog="blog"
+        @delete-blog="deleteBlog(blog.id)"
+        @update-blog="updateBlog(blog.id)"
+      />
+    </div>
   </div>
-</div>
 </template>
 
 <script>
-import {mapGetters, mapActions} from "vuex";
-import SingleBlog from './SingleBlog.vue';
+import { mapGetters, mapActions } from 'vuex'
+import SingleBlog from './SingleBlog.vue'
 
 export default {
-name:"BlogList",
-methods:{
-    ...mapActions('natnaelT',['fetchBlogs','deleteBlog','updateBlog']),
-},
-computed: mapGetters('natnaelT',['allBlogs']),
-created(){
-    this.fetchBlogs();
-},
+  name: 'BlogList',
+  methods: {
+    ...mapActions('natnaelT', ['fetchBlogs', 'deleteBlog', 'updateBlog']),
+  },
+  computed: mapGetters('natnaelT', ['allBlogs']),
+  created() {
+    this.fetchBlogs()
+  },
 
-components:{
-    SingleBlog
-}
+  components: {
+    SingleBlog,
+  },
 }
 </script>
 <style>
-
 .btn {
-    display: flex;
-    padding: 1px; 
-    margin: 1px;
-    border-radius: 0.5px;
+  display: flex;
+  padding: 1px;
+  margin: 1px;
+  border-radius: 0.5px;
 }
 
-.singleblog{
+.singleblog {
   border: 1px solid;
   border-radius: 6px;
   padding: 10px;
   margin: 15px;
   box-shadow: 1px 1px 4px gray;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
index 8deed2be..0976a21d 100644
--- a/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
+++ b/starter-project-web-vue2/components/natnaelT/SingleBlog.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="card">
     <v-card-text>
-    <h2>{{blog.title}}</h2>
-    <p>{{blog.content}}</p>
-    <v-btn class="btn" @click="$emit('update-blog',blog.id)">Update</v-btn>
-    <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
-    <nuxt-link style="text-decoration: none;" :to="'/natnaelT/'+ blog._id">
-    <v-btn>
-      Show more
-    </v-btn> 
-    </nuxt-link>
+      <h2>{{ blog.title }}</h2>
+      <p>{{ blog.content }}</p>
+      <v-btn class="btn" @click="$emit('update-blog', blog.id)">Update</v-btn>
+      <v-btn class="btn" @click="$emit('delete-blog', blog.id)">Delete</v-btn>
+      <nuxt-link style="text-decoration: none" :to="'/natnaelT/' + blog._id">
+        <v-btn> Show more </v-btn>
+      </nuxt-link>
     </v-card-text>
   </div>
 </template>
 
 <script>
 export default {
-    name: "SingleBlog",
-    props: {
-        blog: Object
-    },
-    emits: ["delete-blog","update-blog"]
+  name: 'SingleBlog',
+  props: {
+    blog: Object,
+  },
+  emits: ['delete-blog', 'update-blog'],
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/starter-project-web-vue2/nuxt.config.js b/starter-project-web-vue2/nuxt.config.js
index c0c5e996..5757b2b2 100644
--- a/starter-project-web-vue2/nuxt.config.js
+++ b/starter-project-web-vue2/nuxt.config.js
@@ -65,11 +65,12 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
-
+  
   router: {
     middleware: 'unauthorized',
   },
 
+
   auth: {
     strategies: {
       local: {
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
index f0d55619..c7cc2684 100644
--- a/starter-project-web-vue2/pages/natnaelT/_id.vue
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -6,9 +6,9 @@
       </v-btn>
     </nuxt-link>
     <v-card>
-      <h2>{{blog.title}}</h2>
+      <h2>{{ blog.title }}</h2>
       <v-container>
-        <p>{{blog.content}}</p>
+        <p>{{ blog.content }}</p>
       </v-container>
     </v-card>
   </div>
diff --git a/starter-project-web-vue2/pages/natnaelT/index.vue b/starter-project-web-vue2/pages/natnaelT/index.vue
index 0892162b..a41d4f03 100644
--- a/starter-project-web-vue2/pages/natnaelT/index.vue
+++ b/starter-project-web-vue2/pages/natnaelT/index.vue
@@ -1,75 +1,75 @@
 <template>
   <div class="addblog">
-    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog()" />
+    <AddBlogButton
+      :text="showAddBlog ? 'Close' : 'Add Blog'"
+      :color="showAddBlog ? 'red' : 'blue'"
+      @toggle-add-blog="toggleAddBlog()"
+    />
     <div v-if="showAddBlog" class="addblogform">
-    <AddBlogForm />
+      <AddBlogForm />
     </div>
     <div class="bloglist">
-    <BlogList /> 
+      <BlogList />
     </div>
   </div>
 </template>
 
 <script>
-
-import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
-import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
-import BlogList from '~/components/natnaelT/BlogList.vue';
+import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue'
+import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue'
+import BlogList from '~/components/natnaelT/BlogList.vue'
 export default {
-    data() {
-        return {
-            showAddBlog: false
-            }
-    },
-    components: {
+  components: {
     AddBlogButton,
     AddBlogForm,
-    BlogList
-    },
-    head() {
-        return {
-            title: "Blog App",
-            meta: [{
-                    hid: "description",
-                    name: "Blog page",
-                    content: "Blog to save thoughts"
-                }]
-        };
-    },
- 
-    methods:{
-        toggleAddBlog(){
-        this.showAddBlog = !this.showAddBlog
-    },
+    BlogList,
+  },
+  data() {
+    return {
+      showAddBlog: false,
+    }
+  },
+  head() {
+    return {
+      title: 'Blog App',
+      meta: [
+        {
+          hid: 'description',
+          name: 'Blog page',
+          content: 'Blog to save thoughts',
+        },
+      ],
     }
-    
-    
+  },
+
+  methods: {
+    toggleAddBlog() {
+      this.showAddBlog = !this.showAddBlog
+    },
+  },
 }
 </script>
 
 <style>
-
-.addblog p{
-    font-style: italic;
+.addblog p {
+  font-style: italic;
 }
 
-.addblog nuxt-link{
-    display: inline-block;
-    background: blue;
-    color: aliceblue;
-    padding: 0.3rem 1rem;
-    margin-right: 0.5rem;
+.addblog nuxt-link {
+  display: inline-block;
+  background: blue;
+  color: aliceblue;
+  padding: 0.3rem 1rem;
+  margin-right: 0.5rem;
 }
 
-.btn{
-    justify-content: center;
-    background: lightblue;
-    padding: 5px 10px;
-    color: black;
-    display: inline-block;
-    margin: 2px;
-    border-radius: 10px;
-
+.btn {
+  justify-content: center;
+  background: lightblue;
+  padding: 5px 10px;
+  color: black;
+  display: inline-block;
+  margin: 2px;
+  border-radius: 10px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/starter-project-web-vue2/pages/sileshi/README.md b/starter-project-web-vue2/pages/sileshi/README.md
new file mode 100644
index 00000000..e69de29b
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
index 423fb8ef..6f492f4d 100644
--- a/starter-project-web-vue2/store/natnaelT.js
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -4,33 +4,43 @@ const state = {
   blogs: [],
 }
 const getters = {
-    allBlogs: (state) => state.blogs 
+  allBlogs: (state) => state.blogs,
 }
 const actions = {
-async fetchBlogs({ commit }){
-    const response = await axios.get('https://blog-app-backend.onrender.com/api/articles/all');
-    commit('setBlogs',response.data)
-},
-async addBlog({commit}, blog){
-    const response = await axios.post('https://blog-app-backend.onrender.com/api/articles/', {blog});
-    commit('newBlog',response.data);
-},
-async deleteBlog({commit},id){
-    await axios.delete(`https://blog-app-backend.onrender.com/api/articles/${id}`);
-    commit('removeBlog',id)
-},
-async updateBlog({commit},id){
-    await axios.patch(`https://blog-app-backend.onrender.com/api/articles/${id}`)
+  async fetchBlogs({ commit }) {
+    const response = await axios.get(
+      'https://blog-app-backend.onrender.com/api/articles/all'
+    )
+    commit('setBlogs', response.data)
+  },
+  async addBlog({ commit }, blog) {
+    const response = await axios.post(
+      'https://blog-app-backend.onrender.com/api/articles/',
+      blog
+    )
+    commit('newBlog', response.data)
+  },
+  async deleteBlog({ commit }, id) {
+    await axios.delete(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+    commit('removeBlog', id)
+  },
+  async updateBlog({ commit }, id) {
+    await axios.patch(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+  },
 }
-};
 const mutations = {
-    setBlogs: (state,blogs) => (state.blogs = blogs),
-    newBlog: (state,blog) => (state.blogs.unshift(blog)),
-    removeBlog: (state,id) => (state.blogs = state.blogs.filter(todo => todo.id !== id))
+  setBlogs: (state, blogs) => (state.blogs = blogs),
+  newBlog: (state, blog) => state.blogs.unshift(blog),
+  removeBlog: (state, id) =>
+    (state.blogs = state.blogs.filter((todo) => todo.id !== id)),
+}
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
 }
-export default{
-    state,
-    getters,
-    actions,
-    mutations
-}
\ No newline at end of file

From 16a47a0ae38010f6c331093d1c02c47d53c90631 Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Thu, 4 Aug 2022 12:29:27 +0300
Subject: [PATCH 25/26] [web] Edit previously commented pr

---
 .../components/natnaelT/AddBlogForm.vue       | 18 ++++--
 .../components/natnaelT/BlogList.vue          |  4 +-
 starter-project-web-vue2/package-lock.json    | 57 ++++++++++++-------
 starter-project-web-vue2/pages/index.vue      |  2 +-
 .../pages/natnaelT/_id.vue                    |  7 +--
 starter-project-web-vue2/store/natnaelT.js    | 18 +++---
 6 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index 21b1e684..aa4abdba 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -7,6 +7,7 @@
         type="text"
         name="content"
         placeholder="Blog Title here..."
+        required
       ></v-text-field>
     </div>
     <div class="form-control">
@@ -16,6 +17,7 @@
         type="text"
         name="content"
         placeholder="Write here..."
+        required
       ></v-text-field>
     </div>
     <div class="form-control">
@@ -25,9 +27,10 @@
         type="text"
         name="description"
         placeholder="Write here..."
+        required
       ></v-text-field>
     </div>
-    <v-btn value="Save Blog" class="btn" @click="onSubmit()">Save Blog</v-btn>
+    <v-btn class="btn" @click="onSubmit()">Save Blog</v-btn>
   </v-form>
 </template>
 
@@ -48,11 +51,16 @@ export default {
   methods: {
     ...mapActions('natnaelT', ['addBlog']),
 
-    onSubmit() {
-      this.addBlog(this.blog)
-      // this.title = ''
-      // this.content = ''
+    clearForm(){
+      this.blog.title = ''
+      this.blog.content = ''
+      this.blog.description = ''
     },
+    onSubmit() {
+      this.addBlog(this.blog);
+      this.clearForm();
+    }
+
   },
 }
 </script>
diff --git a/starter-project-web-vue2/components/natnaelT/BlogList.vue b/starter-project-web-vue2/components/natnaelT/BlogList.vue
index 66bee0a7..a69ca503 100644
--- a/starter-project-web-vue2/components/natnaelT/BlogList.vue
+++ b/starter-project-web-vue2/components/natnaelT/BlogList.vue
@@ -3,8 +3,8 @@
     <div v-for="blog in allBlogs" :key="blog.id" class="singleblog">
       <SingleBlog
         :blog="blog"
-        @delete-blog="deleteBlog(blog.id)"
-        @update-blog="updateBlog(blog.id)"
+        @delete-blog="deleteBlog(blog._id)"
+        @update-blog="updateBlog(blog._id)"
       />
     </div>
   </div>
diff --git a/starter-project-web-vue2/package-lock.json b/starter-project-web-vue2/package-lock.json
index fd18b662..f8431058 100644
--- a/starter-project-web-vue2/package-lock.json
+++ b/starter-project-web-vue2/package-lock.json
@@ -26104,7 +26104,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -26144,12 +26145,14 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -26474,7 +26477,8 @@
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "babel-jest": {
       "version": "27.5.1",
@@ -29026,13 +29030,15 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-config-standard": {
       "version": "16.0.3",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-16.0.3.tgz",
       "integrity": "sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
@@ -29265,7 +29271,8 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-5.2.0.tgz",
       "integrity": "sha512-SftLb1pUG01QYq2A/hGAWfDRXqYD82zE7j7TopDOyNdU+7SvvoXREls/+PRTY17vUXzXnZA/zfnyKgRH6x4JJw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-unicorn": {
       "version": "39.0.0",
@@ -32051,7 +32058,8 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -34488,7 +34496,8 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
           "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -36831,7 +36840,8 @@
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
           "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "balanced-match": {
           "version": "2.0.0",
@@ -36886,7 +36896,8 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
           "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "type-fest": {
           "version": "0.18.1",
@@ -36910,19 +36921,22 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-html/-/stylelint-config-html-1.1.0.tgz",
       "integrity": "sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "stylelint-config-prettier": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz",
       "integrity": "sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "stylelint-config-recommended": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-8.0.0.tgz",
       "integrity": "sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "stylelint-config-recommended-vue": {
       "version": "1.4.0",
@@ -36959,7 +36973,8 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz",
           "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -37327,7 +37342,8 @@
     "time-fix-plugin": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/time-fix-plugin/-/time-fix-plugin-2.0.7.tgz",
-      "integrity": "sha512-uVFet1LQToeUX0rTcSiYVYVoGuBpc8gP/2jnlUzuHMHe+gux6XLsNzxLUweabMwiUj5ejhoIMsUI55nVSEa/Vw=="
+      "integrity": "sha512-uVFet1LQToeUX0rTcSiYVYVoGuBpc8gP/2jnlUzuHMHe+gux6XLsNzxLUweabMwiUj5ejhoIMsUI55nVSEa/Vw==",
+      "requires": {}
     },
     "timers-browserify": {
       "version": "2.0.12",
@@ -38243,7 +38259,8 @@
     "vuetify": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.7.tgz",
-      "integrity": "sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw=="
+      "integrity": "sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw==",
+      "requires": {}
     },
     "vuetify-loader": {
       "version": "1.9.2",
@@ -38269,7 +38286,8 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
     },
     "w3c-hr-time": {
       "version": "1.0.2",
@@ -39284,7 +39302,8 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 06e944b4..65abbcf1 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -74,7 +74,7 @@ export default {
         },
         {
           name: "Natnael Tedros",
-          description: 'Summer Intern',
+          description: 'G32 Web Team Member',
           link: '/natnaelT',
         }
       ],
diff --git a/starter-project-web-vue2/pages/natnaelT/_id.vue b/starter-project-web-vue2/pages/natnaelT/_id.vue
index c7cc2684..39884a1c 100644
--- a/starter-project-web-vue2/pages/natnaelT/_id.vue
+++ b/starter-project-web-vue2/pages/natnaelT/_id.vue
@@ -6,8 +6,8 @@
       </v-btn>
     </nuxt-link>
     <v-card>
-      <h2>{{ blog.title }}</h2>
       <v-container>
+        <h2>{{ blog.title }}</h2>
         <p>{{ blog.content }}</p>
       </v-container>
     </v-card>
@@ -15,7 +15,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 export default {
   data() {
     return {
@@ -27,8 +26,8 @@ export default {
   },
   async created() {
     try {
-      const response = await axios.get(
-        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`
+      const response = await this.$axios.get(
+        `articles/${this.$route.params.id}`
       )
       this.blog = response.data
     } catch (err) {
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
index 6f492f4d..ea805698 100644
--- a/starter-project-web-vue2/store/natnaelT.js
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -1,5 +1,3 @@
-import axios from 'axios'
-
 const state = {
   blogs: [],
 }
@@ -8,27 +6,27 @@ const getters = {
 }
 const actions = {
   async fetchBlogs({ commit }) {
-    const response = await axios.get(
-      'https://blog-app-backend.onrender.com/api/articles/all'
+    const response = await this.$axios.get(
+        'articles/all'
     )
     commit('setBlogs', response.data)
   },
   async addBlog({ commit }, blog) {
-    const response = await axios.post(
-      'https://blog-app-backend.onrender.com/api/articles/',
+    const response = await this.$axios.post(
+      'articles/',
       blog
     )
     commit('newBlog', response.data)
   },
   async deleteBlog({ commit }, id) {
-    await axios.delete(
-      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    await this.$axios.delete(
+      `articles/${id}`
     )
     commit('removeBlog', id)
   },
   async updateBlog({ commit }, id) {
-    await axios.patch(
-      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    await this.$axios.patch(
+      `articles/${id}`
     )
   },
 }

From f035e355195051a4ae3e75246a6e7dbd2f8fb5ef Mon Sep 17 00:00:00 2001
From: Nati_Tedros <tedros.natnael@gmail.com>
Date: Thu, 4 Aug 2022 12:31:05 +0300
Subject: [PATCH 26/26] [web] Edited previously commented pr

---
 .../components/keiredin/KeiredinBlogPost.vue  |  61 +++------
 .../components/keiredin/KeiredinNewBlog.vue   |  11 +-
 .../components/natnaelT/AddBlogForm.vue       |   9 +-
 .../components/yohans/AddBlog.vue             |   2 +-
 starter-project-web-vue2/nuxt.config.js       |   3 +-
 .../pages/andualem/index.vue                  | 119 ++++++++----------
 starter-project-web-vue2/pages/index.vue      |   4 +-
 .../pages/keiredin/_id.vue                    |  13 +-
 .../pages/keiredin/index.vue                  |   1 -
 starter-project-web-vue2/store/natnaelT.js    |  17 +--
 starter-project-web-vue2/store/yared.js       |   2 +-
 starter-project-web-vue2/vercel.json          |  16 +--
 12 files changed, 100 insertions(+), 158 deletions(-)

diff --git a/starter-project-web-vue2/components/keiredin/KeiredinBlogPost.vue b/starter-project-web-vue2/components/keiredin/KeiredinBlogPost.vue
index 78eb7563..77048be5 100644
--- a/starter-project-web-vue2/components/keiredin/KeiredinBlogPost.vue
+++ b/starter-project-web-vue2/components/keiredin/KeiredinBlogPost.vue
@@ -1,39 +1,25 @@
 <!-- eslint-disable vue/no-multiple-template-root -->
 <template>
   <v-container>
-    <v-container >
+    <v-container>
       <AddBlog />
-  </v-container>
-  <v-row
-    class="pa-5 py-0 mx-auto grey lighten-5 mb-6"
-    sm="6"
-    md="3"
-  >
-    <v-col cols="12">
-        <v-card
-          class="mx-0"
-          color="#26c6da"
-          dark
-          max-width="500"
-        >
+    </v-container>
+    <v-row class="pa-5 py-0 mx-auto grey lighten-5 mb-6" sm="6" md="3">
+      <v-col cols="12">
+        <v-card class="mx-0" color="#26c6da" dark max-width="500">
           <v-card-title>
             <nuxt-link
-                style="text-decoration: none; color: inherit"
-                :to="'/keiredin/id'"
-              >
-
-              <v-icon
-                large
-                left
-              >
-                mdi-twitter
-              </v-icon>
+              style="text-decoration: none; color: inherit"
+              :to="'/keiredin/id'"
+            >
+              <v-icon large left> mdi-twitter </v-icon>
               <span class="text-h6 font-weight-bold">Title</span>
             </nuxt-link>
           </v-card-title>
 
           <v-card-text class="text-h5 font-weight-light">
-            "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
+            "Turns out semicolon-less style is easier and safer in TS because
+            most gotcha edge cases are type invalid as well."
           </v-card-text>
 
           <v-card-actions>
@@ -50,30 +36,22 @@
                 <v-list-item-title>Evan You</v-list-item-title>
               </v-list-item-content>
 
-              <v-row
-                align="center"
-                justify="end"
-              >
+              <v-row align="center" justify="end">
                 <v-btn depressed color="#26c6da">
-                  <v-icon >
-                    mdi-pencil
-                  </v-icon>
-                  <span class="subheading ">edit</span>
+                  <v-icon> mdi-pencil </v-icon>
+                  <span class="subheading">edit</span>
                 </v-btn>
 
                 <v-btn depressed color="#26c6da">
-                  <v-icon class="mr-1">
-                    mdi-delete
-                  </v-icon>
+                  <v-icon class="mr-1"> mdi-delete </v-icon>
                   <span class="subheading">delete</span>
                 </v-btn>
-
               </v-row>
             </v-list-item>
           </v-card-actions>
         </v-card>
-    </v-col>
-  </v-row>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -82,8 +60,7 @@ import AddBlog from '../keiredin/KeiredinNewBlog.vue'
 export default {
   name: 'BlogPost',
   components: {
-    AddBlog
-  }
-
+    AddBlog,
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/components/keiredin/KeiredinNewBlog.vue b/starter-project-web-vue2/components/keiredin/KeiredinNewBlog.vue
index 16eabd54..d0ea8ef9 100644
--- a/starter-project-web-vue2/components/keiredin/KeiredinNewBlog.vue
+++ b/starter-project-web-vue2/components/keiredin/KeiredinNewBlog.vue
@@ -1,11 +1,7 @@
 <template>
   <v-dialog max-width="900px">
     <template #activator="{ on, attrs }">
-      <v-btn
-        color="primary"
-        dark
-        v-bind="attrs"
-        v-on="on">
+      <v-btn color="primary" dark v-bind="attrs" v-on="on">
         <v-icon left> mdi-plus </v-icon>
         Add New Blog</v-btn
       >
@@ -26,13 +22,8 @@
   </v-dialog>
 </template>
 
-
 <script>
 export default {
   name: 'AddBlog',
 }
 </script>
-
-
-
-
diff --git a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
index aa4abdba..9ca2ef62 100644
--- a/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
+++ b/starter-project-web-vue2/components/natnaelT/AddBlogForm.vue
@@ -51,16 +51,15 @@ export default {
   methods: {
     ...mapActions('natnaelT', ['addBlog']),
 
-    clearForm(){
+    clearForm() {
       this.blog.title = ''
       this.blog.content = ''
       this.blog.description = ''
     },
     onSubmit() {
-      this.addBlog(this.blog);
-      this.clearForm();
-    }
-
+      this.addBlog(this.blog)
+      this.clearForm()
+    },
   },
 }
 </script>
diff --git a/starter-project-web-vue2/components/yohans/AddBlog.vue b/starter-project-web-vue2/components/yohans/AddBlog.vue
index 2d634e38..c8de278c 100644
--- a/starter-project-web-vue2/components/yohans/AddBlog.vue
+++ b/starter-project-web-vue2/components/yohans/AddBlog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog max-width="600px">
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-btn color="primary" v-on="on">
         <v-icon left> mdi-plus </v-icon>
         add blog
diff --git a/starter-project-web-vue2/nuxt.config.js b/starter-project-web-vue2/nuxt.config.js
index 5757b2b2..c0c5e996 100644
--- a/starter-project-web-vue2/nuxt.config.js
+++ b/starter-project-web-vue2/nuxt.config.js
@@ -65,12 +65,11 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
-  
+
   router: {
     middleware: 'unauthorized',
   },
 
-
   auth: {
     strategies: {
       local: {
diff --git a/starter-project-web-vue2/pages/andualem/index.vue b/starter-project-web-vue2/pages/andualem/index.vue
index dfe5493c..d2ccb6b6 100644
--- a/starter-project-web-vue2/pages/andualem/index.vue
+++ b/starter-project-web-vue2/pages/andualem/index.vue
@@ -1,74 +1,65 @@
 <template>
-    <v-app>
+  <v-app>
     <v-dialog max-width="600px">
-        <template v-slot:activator="{ on }">
-            <v-btn v-on="on">
-                Add Blog
-            </v-btn>
-        </template>
+      <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-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-card-text>
-        </v-card>
+      <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-card-text>
+      </v-card>
     </v-dialog>
-        
-   <!-- <v-card> -->
+
+    <!-- <v-card> -->
     <div 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-col>
+      <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-col>
     </div>
-  <!-- </v-card> -->
- </v-app>
+    <!-- </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"},
-            ]
-        }
+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' },
+      ],
     }
+  },
 }
-</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 65abbcf1..978ec13e 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -73,10 +73,10 @@ export default {
           link: '/yared',
         },
         {
-          name: "Natnael Tedros",
+          name: 'Natnael Tedros',
           description: 'G32 Web Team Member',
           link: '/natnaelT',
-        }
+        },
       ],
     }
   },
diff --git a/starter-project-web-vue2/pages/keiredin/_id.vue b/starter-project-web-vue2/pages/keiredin/_id.vue
index 9524a081..8207f2bf 100644
--- a/starter-project-web-vue2/pages/keiredin/_id.vue
+++ b/starter-project-web-vue2/pages/keiredin/_id.vue
@@ -2,22 +2,17 @@
   <div>
     <nuxt-link style="text-decoration: none; color: inherit" :to="'/keiredin/'">
       <v-btn dark class="success pa-2 mb-2 mx-7 mt-3">
-        <v-icon class="mr-2">
-          mdi-arrow-left-bold-circle
-        </v-icon>
+        <v-icon class="mr-2"> mdi-arrow-left-bold-circle </v-icon>
         <span>Back To Blogs</span>
       </v-btn>
     </nuxt-link>
-    <h2>Title: </h2>
+    <h2>Title:</h2>
     <hr />
-    <h4>Content: </h4>
+    <h4>Content:</h4>
     <hr />
   </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
-
diff --git a/starter-project-web-vue2/pages/keiredin/index.vue b/starter-project-web-vue2/pages/keiredin/index.vue
index 02d842ef..2819c04d 100644
--- a/starter-project-web-vue2/pages/keiredin/index.vue
+++ b/starter-project-web-vue2/pages/keiredin/index.vue
@@ -13,4 +13,3 @@ export default {
   components: { BlogPost },
 }
 </script>
-
diff --git a/starter-project-web-vue2/store/natnaelT.js b/starter-project-web-vue2/store/natnaelT.js
index ea805698..f1c245bd 100644
--- a/starter-project-web-vue2/store/natnaelT.js
+++ b/starter-project-web-vue2/store/natnaelT.js
@@ -6,28 +6,19 @@ const getters = {
 }
 const actions = {
   async fetchBlogs({ commit }) {
-    const response = await this.$axios.get(
-        'articles/all'
-    )
+    const response = await this.$axios.get('articles/all')
     commit('setBlogs', response.data)
   },
   async addBlog({ commit }, blog) {
-    const response = await this.$axios.post(
-      'articles/',
-      blog
-    )
+    const response = await this.$axios.post('articles/', blog)
     commit('newBlog', response.data)
   },
   async deleteBlog({ commit }, id) {
-    await this.$axios.delete(
-      `articles/${id}`
-    )
+    await this.$axios.delete(`articles/${id}`)
     commit('removeBlog', id)
   },
   async updateBlog({ commit }, id) {
-    await this.$axios.patch(
-      `articles/${id}`
-    )
+    await this.$axios.patch(`articles/${id}`)
   },
 }
 const mutations = {
diff --git a/starter-project-web-vue2/store/yared.js b/starter-project-web-vue2/store/yared.js
index 1f146621..e3c06883 100644
--- a/starter-project-web-vue2/store/yared.js
+++ b/starter-project-web-vue2/store/yared.js
@@ -36,7 +36,7 @@ export default {
     updateBlog: (state, updBlog) => {
       const idx = state.blogs.findIndex((blog) => blog.id === updBlog.id)
       if (idx !== -1) {
-        console.log('hi');
+        console.log('hi')
         state.blogs.splice(idx, 1, updBlog)
       }
     },
diff --git a/starter-project-web-vue2/vercel.json b/starter-project-web-vue2/vercel.json
index e8d29499..9d3e5cee 100644
--- a/starter-project-web-vue2/vercel.json
+++ b/starter-project-web-vue2/vercel.json
@@ -1,9 +1,9 @@
 {
-    "builds": [
-      {
-        "src": "nuxt.config.js",
-        "use": "@nuxtjs/vercel-builder",
-        "config": {}
-      }
-    ]
-  }
\ No newline at end of file
+  "builds": [
+    {
+      "src": "nuxt.config.js",
+      "use": "@nuxtjs/vercel-builder",
+      "config": {}
+    }
+  ]
+}