From e6b11d6d0fad8f001a9915a456a1da5fd734f071 Mon Sep 17 00:00:00 2001
From: kms <aaaa727@khu.ac.kr>
Date: Tue, 6 Dec 2022 00:43:01 +0900
Subject: [PATCH 1/4] feat: [FE] Comment API Add.

---
 .../article/service/CommentServiceImpl.java   |  7 ++---
 src/vite-frontend/src/api/index.ts            | 24 ++++++++++++++++-
 .../src/components/commentList.vue            | 27 ++++++++++++++++---
 src/vite-frontend/src/router/index.ts         |  2 +-
 src/vite-frontend/src/views/ArticleUpdate.vue | 16 +++++------
 .../src/views/TheArticleDetail.vue            | 27 ++++++++++++++-----
 6 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/src/main/java/com/io/realworld/domain/aggregate/article/service/CommentServiceImpl.java b/src/main/java/com/io/realworld/domain/aggregate/article/service/CommentServiceImpl.java
index 7875636..e6ad1b8 100644
--- a/src/main/java/com/io/realworld/domain/aggregate/article/service/CommentServiceImpl.java
+++ b/src/main/java/com/io/realworld/domain/aggregate/article/service/CommentServiceImpl.java
@@ -61,9 +61,10 @@ public class CommentServiceImpl implements CommentService {
         if (article.isEmpty()) {
             throw new CustomException(Error.ARTICLE_NOT_FOUND);
         }
+        System.out.println(user.get().getUsername()+"!!");
         Comment comment = commentRepository.save(Comment.builder().body(commentdto.getBody()).article(article.get()).author(user.get()).build());
 
-        return convertComment(userAuth, article.get(), comment);
+        return convertComment(userAuth, comment);
     }
 
     @Override
@@ -80,9 +81,9 @@ public class CommentServiceImpl implements CommentService {
         commentRepository.delete(comment.get());
     }
 
-    private CommentResponse convertComment(UserAuth userAuth, Article article, Comment comment) {
+    private CommentResponse convertComment(UserAuth userAuth, Comment comment) {
 
-        ProfileResponse profile = profileService.getProfile(userAuth, article.getAuthor().getUsername());
+        ProfileResponse profile = profileService.getProfile(userAuth, userAuth.getUsername());
 
         return CommentResponse.builder()
                 .id(comment.getId())
diff --git a/src/vite-frontend/src/api/index.ts b/src/vite-frontend/src/api/index.ts
index 020ab42..d63b5dc 100644
--- a/src/vite-frontend/src/api/index.ts
+++ b/src/vite-frontend/src/api/index.ts
@@ -74,7 +74,7 @@ const createArticle = async (article: object | undefined): Promise<AxiosResponse
     })
 }
 
-const updateArticle = async (article: object | undefined, slug: string): Promise<AxiosResponse> => {
+const updateArticle = async (article: object | undefined, slug: string | undefined): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     return await axiosService.put('/api/articles/' + slug, { article },{
         headers :{
@@ -84,6 +84,16 @@ const updateArticle = async (article: object | undefined, slug: string): Promise
     })
 }
 
+const deleteArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
+    let currentToken = localStorage.getItem("token");
+    return await axiosService.delete('/api/articles/' + slug,{
+        headers :{
+            Authorization : "TOKEN " + currentToken,
+            "Content-Type": `application/json`,
+        }
+    })
+}
+
 const listArticles = async (): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     if(currentToken == null){
@@ -171,6 +181,17 @@ const getCommentsFromArticle = async (slug: string | undefined): Promise<AxiosRe
     }
 }
 
+const deleteCommentsFromArticle = async (slug: string | undefined, id: number): Promise<AxiosResponse> => {
+    let currentToken = localStorage.getItem("token");
+    return await axiosService.delete('/api/articles/' + slug + '/comments/' + id,{
+        headers:{
+            Authorization : "TOKEN " + currentToken,
+            "Content-Type": `application/json`,
+        }
+    });
+}
+
+
 const favoriteArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     return await axiosService.post('/api/articles/' + slug + '/favorite',{},
@@ -206,5 +227,6 @@ export { signUp, signIn,
          addCommentToArticle, getCommentsFromArticle,
          favoriteArticle, unFavoriteArticle,
          listArticlesByFavorite, updateArticle,
+         deleteArticle, deleteCommentsFromArticle,
          getTags
         }
\ No newline at end of file
diff --git a/src/vite-frontend/src/components/commentList.vue b/src/vite-frontend/src/components/commentList.vue
index a2e8294..1e54e2e 100644
--- a/src/vite-frontend/src/components/commentList.vue
+++ b/src/vite-frontend/src/components/commentList.vue
@@ -7,17 +7,21 @@
       <a href="javascript:(0)" class="comment-author" @click="viewProfile">
         <img :src="comment.author.image" class="comment-author-img"/>
       </a>
-      &nbsp;
       <a href="javascript:(0)" class="comment-author" @click="viewProfile">{{comment.author.username}}</a>
       <span class="date-posted">{{convertDate(comment.updatedAt)}}</span>
+      <span v-if="isMe" class="mod-options" @click="deleteComment">
+        <i class="ion-trash-a"></i>
+      </span>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent,} from "vue";
+import {defineComponent, defineEmits, onMounted, ref,} from "vue";
 import convertDate from "@/ts/common";
 import router from "@/router";
+
+import {useStore} from "vuex";
 export default defineComponent({
   name: "commentList",
   props:{
@@ -36,7 +40,10 @@ export default defineComponent({
       }
     }
   },
-  setup(props){
+  setup(props, {emit}){
+    const store = useStore();
+
+    const isMe = ref(false);
 
     const viewProfile = () => {
       router.push({
@@ -44,7 +51,19 @@ export default defineComponent({
         params: {username: props.comment.author.username}})
     }
 
-    return { convertDate, viewProfile}
+    const deleteComment = () => {
+      emit('delete:comment', props.comment.id);
+    }
+
+    onMounted(async () => {
+      if(store.state.username == props.comment.author.username){
+        isMe.value = true;
+      }else{
+        isMe.value = false;
+      }
+    })
+
+    return { isMe, convertDate, viewProfile, deleteComment}
   }
 
 })
diff --git a/src/vite-frontend/src/router/index.ts b/src/vite-frontend/src/router/index.ts
index 98aa2cc..bbac2c3 100644
--- a/src/vite-frontend/src/router/index.ts
+++ b/src/vite-frontend/src/router/index.ts
@@ -34,7 +34,7 @@ const routes = [
         component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheArticle.vue')
     },
     {
-        path: "/editor/@:slug",
+        path: "/editor/:slug",
         name: "ArticleUpdateEditor",
         component: () => import(/* webpackChunkName "inputTag" */ '@/views/ArticleUpdate.vue'),
         props: true
diff --git a/src/vite-frontend/src/views/ArticleUpdate.vue b/src/vite-frontend/src/views/ArticleUpdate.vue
index cc8378b..d272c90 100644
--- a/src/vite-frontend/src/views/ArticleUpdate.vue
+++ b/src/vite-frontend/src/views/ArticleUpdate.vue
@@ -31,33 +31,29 @@
 </template>
 
 <script lang="ts">
-import { reactive } from "vue";
+import { reactive, defineComponent } from "vue";
 import { updateArticle } from "@/api/index.js";
 import router from "@/router";
 
-export default {
+export default defineComponent({
   name: "ArticleUpdate",
   props:{
     slug: String,
   },
-  setup(){
+  setup(props){
     const article = reactive({
       title: "",
       description: "",
       body: "",
     })
 
-    const getSlug = (title:string) => {
-      return title.replace(' ','-');
-    }
 
     const updateContent = async () => {
-      const slug = getSlug(article.title);
       try{
-        await updateArticle(article, slug);
+        const { data } = await updateArticle(article, props.slug);
         await router.push({
           name:"ArticleDetail",
-          params: {slug}
+          params: {slug: data.article.slug}
         })
       }catch (error: any){
         alert(error);
@@ -66,7 +62,7 @@ export default {
 
     return { article, updateContent }
   }
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/vite-frontend/src/views/TheArticleDetail.vue b/src/vite-frontend/src/views/TheArticleDetail.vue
index 01dfae2..41fecf2 100644
--- a/src/vite-frontend/src/views/TheArticleDetail.vue
+++ b/src/vite-frontend/src/views/TheArticleDetail.vue
@@ -16,7 +16,7 @@
               <i class="ion-edit"></i>
               Edit Article
           </button>
-          <button v-if= "isMe" class="btn btn-outline-danger btn-sm" @click="followUpdate(articleDetail.article.author.following)">
+          <button v-if= "isMe" class="btn btn-outline-danger btn-sm" @click="articleDelete()">
               <i class="ion-trash-a"></i>
               Delete Article
           </button>
@@ -62,11 +62,11 @@
             <a href="javascript:void(0)" class="author" @click="viewProfile">{{ articleDetail.article.author.username }}</a>
             <span class="date">{{convertDate(articleDetail.article.createdAt)}}</span>
           </div>
-          <button v-if= "isMe" class="btn btn-sm btn-outline-secondary" @click="followUpdate(articleDetail.article.author.following)">
+          <button v-if= "isMe" class="btn btn-sm btn-outline-secondary" @click="articleUpdate()">
             <i class="ion-edit"></i>
             Edit Article
           </button>
-          <button v-if= "isMe" class="btn btn-outline-danger btn-sm" @click="followUpdate(articleDetail.article.author.following)">
+          <button v-if= "isMe" class="btn btn-outline-danger btn-sm" @click="articleDelete()">
             <i class="ion-trash-a"></i>
             Delete Article
           </button>
@@ -112,6 +112,7 @@
           <comment-list v-for="(comment,index) in getCommentList.comment"
                :key="comment.id"
                :comment="comment"
+               @delete:comment="deleteComment"
                :imgs="comment.author.image">
           </comment-list>
         </div>
@@ -130,7 +131,7 @@ import router from "@/router";
 import { useStore } from "vuex";
 import convertDate from "@/ts/common";
 import {
-  addCommentToArticle,
+  addCommentToArticle, deleteArticle, deleteCommentsFromArticle,
   favoriteArticle,
   followUser,
   getArticle,
@@ -157,7 +158,7 @@ export default defineComponent({
     })
 
     const getCommentList = reactive({
-      comment: reactive([{id:0,author:{image:""}}])
+      comment: reactive([{id:0,author:{username:"",image:""}}])
     })
 
     const articleDetail = reactive({
@@ -188,11 +189,18 @@ export default defineComponent({
 
     const articleUpdate = async () => {
       await router.push({
-        name: 'ArticleEditor',
+        name: 'ArticleUpdateEditor',
         params: {slug: articleDetail.article.slug}
       })
     }
 
+    const articleDelete = async () => {
+      await deleteArticle(articleDetail.article.slug);
+      await router.push({
+        name: 'Home'
+      })
+    }
+
     const followUpdate = async (followState: boolean) => {
       if(token == ''){
         await router.push({name:"Login"});
@@ -241,6 +249,11 @@ export default defineComponent({
       }
     }
 
+    const deleteComment = async (commentId: number) => {
+      await deleteCommentsFromArticle(articleDetail.article.slug,commentId);
+      getCommentList.comment.splice(commentId,1);
+    }
+
     onMounted(async ()=>{
       try{
         const { data } = await getArticle(props.slug);
@@ -260,7 +273,7 @@ export default defineComponent({
       }
     })
 
-    return { isMe, articleDetail, comment, getCommentList, convertDate, viewProfile, articleUpdate, followUpdate, favoriteUpdate, sendComment }
+    return { isMe, articleDetail, comment, getCommentList, convertDate, deleteComment, viewProfile, articleUpdate, followUpdate, favoriteUpdate, sendComment, articleDelete }
   }
 })
 </script>

From c897d26762ec7c001453a849f14cafa4809f7bac Mon Sep 17 00:00:00 2001
From: minseokkang <30401054+kkminseok@users.noreply.github.com>
Date: Tue, 6 Dec 2022 01:00:06 +0900
Subject: [PATCH 2/4] Update README.md

---
 README.md | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5f3c06f..980c5bb 100644
--- a/README.md
+++ b/README.md
@@ -35,4 +35,27 @@ you can See Vue.js + SpringBoot FullStack Web Site Demo
 
 #### **Total 82% Code Coverage**
 
-------
+-----
+
+# How it works
+
+- Spring Boot(Java)
+  - JPA
+  - Security
+- H2
+- Vue3
+    - Vite
+    - vuerouter
+    - vuex
+- localStorage
+
+# Getting started
+
+## Run Local
+```shell
+./gradlew bootRun
+```
+
+
+
+

From e1f0ccfd9cb4f0864ce5a7a1120fca75b97a3798 Mon Sep 17 00:00:00 2001
From: minseokkang <30401054+kkminseok@users.noreply.github.com>
Date: Tue, 6 Dec 2022 01:05:49 +0900
Subject: [PATCH 3/4] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 980c5bb..ed620df 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,10 @@ you can See Vue.js + SpringBoot FullStack Web Site Demo
 ./gradlew bootRun
 ```
 
+# FrontEnd
+
+**I don't know much about the front end. I wanted to create a visible application, so I adopted and implemented that framework.**
+
 
 
 

From 22a42d09202effb4c99eadae4fba8551686ff3db Mon Sep 17 00:00:00 2001
From: minseokkang <30401054+kkminseok@users.noreply.github.com>
Date: Tue, 6 Dec 2022 01:06:20 +0900
Subject: [PATCH 4/4] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ed620df..b4967c9 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,6 @@ you can See Vue.js + SpringBoot FullStack Web Site Demo
 
 **I don't know much about the front end. I wanted to create a visible application, so I adopted and implemented that framework.**
 
-
+But my codes are simple codes that even beginners can easily see.