From 485b237dd7acaa8818e94f5989cc6e85da4a8567 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Mon, 22 Jun 2020 17:01:49 -0700
Subject: [PATCH 01/16] sample comment

---
 pages/article/[pid].tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/article/[pid].tsx b/pages/article/[pid].tsx
index 7d2b7f0..b794146 100644
--- a/pages/article/[pid].tsx
+++ b/pages/article/[pid].tsx
@@ -1,3 +1,5 @@
+// EDIT HERE
+
 import marked from "marked";
 import Router, { useRouter } from "next/router";
 import React from "react";

From af108383f5be0d13a625bda627150005b4af37e8 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Tue, 23 Jun 2020 22:07:42 -0700
Subject: [PATCH 02/16] wip, error message if not logged in, wip for input box

---
 components/article/ArticlePreview.tsx |   3 +
 components/comment/CommentList.tsx    | 101 +++++++++++++++++++++++++-
 pages/article/[pid].tsx               |  13 ++++
 3 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/components/article/ArticlePreview.tsx b/components/article/ArticlePreview.tsx
index 2668532..7ad716a 100644
--- a/components/article/ArticlePreview.tsx
+++ b/components/article/ArticlePreview.tsx
@@ -26,8 +26,11 @@ const ArticlePreview = ({ article }) => {
 
   const handleClickFavorite = async (slug) => {
     if (!isLoggedIn) {
+      console.log("[ARTICLEPREVIEW] not logged in")
       Router.push(`/user/login`);
       return;
+    } else {
+      console.log("[ARTICLEPREVIEW] already logged in")
     }
 
     setPreview({
diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index d3ccdad..f26d1d7 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -2,6 +2,15 @@ import { useRouter } from "next/router";
 import React from "react";
 import useSWR from "swr";
 
+
+// ADDED
+import {message, Form, Button, List, Input} from 'antd';
+const { TextArea } = Input;
+import checkLogin from "../../lib/utils/checkLogin";
+import storage from "../../lib/utils/storage";
+//import handleClickReplyTo from "../../pages/article/[pid]"
+// END ADDED
+
 import CommentInput from "./CommentInput";
 import ErrorMessage from "../common/ErrorMessage";
 import LoadingSpinner from "../common/LoadingSpinner";
@@ -11,7 +20,41 @@ import { SERVER_BASE_URL } from "../../lib/utils/constant";
 import fetcher from "../../lib/utils/fetcher";
 import { Comment, Avatar } from 'antd';
 
+// ADDED
+const Editor = ({onChange, onSubmit, submitting, value }) => (
+  <>
+    <Form.Item>
+  <TextArea rows={4} onChange={onChange} value={value} />
+</Form.Item>
+<Form.Item>
+  <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
+    Add Comment
+  </Button>
+</Form.Item>
+  </>
+)
+// END ADDED
+
 const CommentList = () => {
+
+// ADDED
+const { data: currentUser } = useSWR("user", storage);
+const isLoggedIn = checkLogin(currentUser)
+
+const handleClickReplyTo = () => {
+  console.log("In HandleClickReplyTo")
+  if (isLoggedIn) {
+    console.log("ALREADY LOGGED IN")
+
+
+  } else {
+    console.log("NOT YET LOGGED IN")
+    message.info("Please log in to reply", 10)
+  }
+}
+// END ADDED
+
+
   const router = useRouter();
   const {
     query: { pid },
@@ -32,13 +75,31 @@ const CommentList = () => {
     );
 
   const { comments } = data;
-
+  
+  
   const recurseComments = (comments) => {
-    return (
+    // ADDED  
+    var state = {
+      comments: [],
+      submitting: false,
+      value: '',
+    };
+    
+  console.log("[COMMENTS] HI8")
+  
+   // END ADDED 
+   return (
+   
       comments.map((comment: CommentType) => (
         <Comment
           key={comment.id}
-          actions={[<span key="comment-nested-reply-to">Reply to</span>]}
+          actions= {[
+            
+            <span key="comment-nested-reply-to"
+            onClick= {() => handleClickReplyTo()}>Reply to HI8</span>
+          ]}
+          
+          
           author={comment.author.username}
           avatar={
             <Avatar
@@ -47,20 +108,54 @@ const CommentList = () => {
             />
           }
           content={
+            //style = "display:none;"
             <p>{comment.body}</p>
+            /*
+            <Editor onChange={console.log("onchange")}//this.handleChange}
+              onSubmit={console.log("onsubmit")}//this.handleSubmit}
+              submitting={false}//submitting}
+              value={'HEYWORLD'}//value}
+            />
+            */
           }
+          //children = []
         >
           {comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null}
         </Comment>
+        
+        /*
+        <Editor onChange={console.log("onchange")}//this.handleChange}
+              onSubmit={console.log("onsubmit")}//this.handleSubmit}
+              submitting={false}//submitting}
+              value={'HEYWORLD'}//value}
+            />
+          */
+
       )))
   }
 
   return (
     <div>
       <CommentInput />
+      <Editor onChange={console.log("onchange")}//this.handleChange}
+              onSubmit={console.log("onsubmit")}//this.handleSubmit}
+              submitting={false}//submitting}
+              value={'HEYWORLD'}//value}
+            />
+      
       {recurseComments(comments)}
+
     </div>
   );
 };
 
+// ADDED
+/*
+class App extends React.Component {
+
+}
+*/
+// END ADDED
+
+
 export default CommentList;
diff --git a/pages/article/[pid].tsx b/pages/article/[pid].tsx
index b794146..9739e39 100644
--- a/pages/article/[pid].tsx
+++ b/pages/article/[pid].tsx
@@ -18,6 +18,7 @@ import CommentList from "../../components/comment/CommentList";
 import ArticleAPI from "../../lib/api/article";
 import { Article } from "../../lib/types/articleType";
 import ArticleTags from "../../components/article/ArticleTags";
+import { emitKeypressEvents } from "readline";
 
 const ArticleContain = styled.div`  
   width: 880px;
@@ -84,6 +85,18 @@ const ArticlePage = (initialArticle) => {
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser);
 
+  // ADDED
+  const handleClickReplyTo = () => {
+    if (!isLoggedIn) {
+      console.log("[PID]Not logged in");
+    }
+    else {
+      console.log("[PID] Yes Logged in");
+    }
+  };
+  // END ADDED
+
+
   const handleClickFavorite = async slug => {
     if (!isLoggedIn) {
       Router.push(`/user/login`);

From 9148d36bd4175f8e8d18f65b7917ce1717a02adc Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Wed, 24 Jun 2020 21:35:56 -0700
Subject: [PATCH 03/16] wip with editor box, todo find how to update content of
 each comment in commentlist to include editorbox if applicable

---
 components/comment/CommentList.tsx | 103 ++++++++++++++-------------
 components/comment/EditorBox.tsx   | 107 +++++++++++++++++++++++++++++
 lib/types/commentType.ts           |   1 +
 3 files changed, 164 insertions(+), 47 deletions(-)
 create mode 100644 components/comment/EditorBox.tsx

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index f26d1d7..2ecbba3 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -4,10 +4,12 @@ import useSWR from "swr";
 
 
 // ADDED
+import { Component } from 'react';
 import {message, Form, Button, List, Input} from 'antd';
 const { TextArea } = Input;
 import checkLogin from "../../lib/utils/checkLogin";
 import storage from "../../lib/utils/storage";
+import EditorBox from "./EditorBox";
 //import handleClickReplyTo from "../../pages/article/[pid]"
 // END ADDED
 
@@ -35,24 +37,42 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 )
 // END ADDED
 
-const CommentList = () => {
+var clickedReplyTo = true;
+var count = 0;
 
-// ADDED
-const { data: currentUser } = useSWR("user", storage);
-const isLoggedIn = checkLogin(currentUser)
+const CommentList = () => {
 
-const handleClickReplyTo = () => {
-  console.log("In HandleClickReplyTo")
-  if (isLoggedIn) {
-    console.log("ALREADY LOGGED IN")
+  // ADDED
+  const { data: currentUser } = useSWR("user", storage);
+  const isLoggedIn = checkLogin(currentUser)
+
+  const handleClickReplyTo = (comment) => {
+    console.log("In HandleClickReplyTo")
+    if (isLoggedIn) {
+      console.log("ALREADY LOGGED IN, Clicked")
+      clickedReplyTo = true;
+      console.log("comment ID", comment.id, "*");
+      console.log("replyToClicked?" , comment.replyToClicked, "*")
+      comment.replyToClicked = true;
+      console.log("replyToClicked?" , comment.replyToClicked, "*")
+      count = count + 1;
+      return (
+        <div>
+          <CommentInput />
+                
+          {recurseComments(comments)}
+    
+        </div>
+      );
+      
 
 
-  } else {
-    console.log("NOT YET LOGGED IN")
-    message.info("Please log in to reply", 10)
+    } else {
+      console.log("NOT YET LOGGED IN")
+      message.info("Please log in to reply", 10)
+    }
   }
-}
-// END ADDED
+  // END ADDED
 
 
   const router = useRouter();
@@ -78,16 +98,20 @@ const handleClickReplyTo = () => {
   
   
   const recurseComments = (comments) => {
-    // ADDED  
-    var state = {
-      comments: [],
-      submitting: false,
-      value: '',
-    };
     
-  console.log("[COMMENTS] HI8")
-  
-   // END ADDED 
+        
+    for (let aComment of comments) {
+      //aComment.replyToClicked = false;
+      console.log("this is ", aComment.id, "&", aComment.replyToClicked, "*");
+      
+    }
+    
+    console.log(comments.length, "ok");
+
+    
+
+    // END ADDED 
+
    return (
    
       comments.map((comment: CommentType) => (
@@ -96,7 +120,7 @@ const handleClickReplyTo = () => {
           actions= {[
             
             <span key="comment-nested-reply-to"
-            onClick= {() => handleClickReplyTo()}>Reply to HI8</span>
+            onClick= {() => handleClickReplyTo(comment)}>Reply to HI8</span>
           ]}
           
           
@@ -108,41 +132,26 @@ const handleClickReplyTo = () => {
             />
           }
           content={
-            //style = "display:none;"
-            <p>{comment.body}</p>
-            /*
-            <Editor onChange={console.log("onchange")}//this.handleChange}
-              onSubmit={console.log("onsubmit")}//this.handleSubmit}
-              submitting={false}//submitting}
-              value={'HEYWORLD'}//value}
-            />
-            */
+            <div>
+              <p>{comment.body + String(count) + String(comment.replyToClicked)}
+              </p>
+              <EditorBox thisValue = {comment.replyToClicked} />
+            </div>
+            
+            
           }
-          //children = []
         >
+            
           {comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null}
         </Comment>
         
-        /*
-        <Editor onChange={console.log("onchange")}//this.handleChange}
-              onSubmit={console.log("onsubmit")}//this.handleSubmit}
-              submitting={false}//submitting}
-              value={'HEYWORLD'}//value}
-            />
-          */
-
+        
       )))
   }
 
   return (
     <div>
       <CommentInput />
-      <Editor onChange={console.log("onchange")}//this.handleChange}
-              onSubmit={console.log("onsubmit")}//this.handleSubmit}
-              submitting={false}//submitting}
-              value={'HEYWORLD'}//value}
-            />
-      
       {recurseComments(comments)}
 
     </div>
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
new file mode 100644
index 0000000..74c9ee3
--- /dev/null
+++ b/components/comment/EditorBox.tsx
@@ -0,0 +1,107 @@
+import axios from "axios";
+import { useRouter } from "next/router";
+import React from "react";
+import useSWR, { trigger } from "swr";
+
+import CustomImage from "../common/CustomImage";
+import CustomLink from "../common/CustomLink";
+import checkLogin from "../../lib/utils/checkLogin";
+import { SERVER_BASE_URL } from "../../lib/utils/constant";
+import storage from "../../lib/utils/storage";
+
+
+import {message, Form, Button, List, Input} from 'antd';
+const { TextArea } = Input;
+
+/*<Editor onChange={console.log("onchange")}//this.handleChange}
+              onSubmit={console.log("onsubmit")}//this.handleSubmit}
+              submitting={false}//submitting}
+              value={'HEYWORLD'}//value}
+            />
+*/
+
+// ADDED
+const Editor = ({onChange, onSubmit, submitting, value }) => (
+  <>
+    <Form.Item>
+  <TextArea rows={4} onChange={onChange} value={value} />
+</Form.Item>
+<Form.Item>
+  <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
+    Add Comment
+  </Button>
+</Form.Item>
+  </>
+)
+// END ADDED
+
+const EditorBox = (thisValue) => {
+    const { data: currentUser } = useSWR("user", storage);
+    const isLoggedIn = checkLogin(currentUser);
+    const router = useRouter();
+    const {
+      query: { pid },
+    } = router;
+  
+    const [content, setContent] = React.useState("");
+    const [isLoading, setLoading] = React.useState(false);
+  
+    const handleChange = React.useCallback((e) => {
+      setContent(e.target.value);
+    }, []);
+  
+    const handleSubmit = async (e) => {
+      e.preventDefault();
+      setLoading(true);
+      await axios.post(
+        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
+        JSON.stringify({
+          comment: {
+            body: content,
+          },
+        }),
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Token ${encodeURIComponent(currentUser?.token)}`,
+          },
+        }
+      );
+      setLoading(false);
+      setContent("");
+      trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
+    };
+    var clickedReplyTo = thisValue.thisValue;
+    clickedReplyTo = true;
+    console.log("clicekdReplyTo is ", clickedReplyTo, '*');
+
+    console.log("IN EDITORBOX");
+    if (!isLoggedIn && !clickedReplyTo) {
+        return (
+            <p>
+                Not Logged In RN
+            </p>
+        );
+
+    } else if (isLoggedIn && clickedReplyTo) {
+      return (
+        <Editor onChange={console.log("onchange")}//this.handleChange}
+              onSubmit={console.log("onsubmit" + clickedReplyTo)}//this.handleSubmit}
+              submitting={false}//submitting}
+              value={'HEYWORLD is Logged In'}//value}
+            />
+      );
+    }
+    return (
+        <p>
+            Logged In RN
+
+        </p>
+        
+        
+            
+    );
+
+};
+
+export default EditorBox;
\ No newline at end of file
diff --git a/lib/types/commentType.ts b/lib/types/commentType.ts
index 183016f..123ffc6 100644
--- a/lib/types/commentType.ts
+++ b/lib/types/commentType.ts
@@ -10,6 +10,7 @@ export type CommentType = {
   author: Author;
   updatedAt: number;
   parentComment: CommentChildren;
+  replyToClicked: boolean;
 };
 
 export type Author = {

From 3d1486ce74cb4654065dd49563df196322ead5c0 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Thu, 25 Jun 2020 22:21:47 -0700
Subject: [PATCH 04/16] wip toggle for ReplyTo button to have a text Editor
 box; TODO: post to publish comment after in ReplyTo Editor box, fix the
 toggling to only show/hide the text editor box for corresponding ReplyTo, and
 hide all editor boxes at initializaiton

---
 components/comment/CommentInput.tsx |  3 +++
 components/comment/CommentList.tsx  | 31 +++++++++++++++++++++++++----
 components/comment/EditorBox.tsx    | 18 ++++++++++-------
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/components/comment/CommentInput.tsx b/components/comment/CommentInput.tsx
index bffdf89..df7491a 100644
--- a/components/comment/CommentInput.tsx
+++ b/components/comment/CommentInput.tsx
@@ -10,6 +10,9 @@ import { SERVER_BASE_URL } from "../../lib/utils/constant";
 import storage from "../../lib/utils/storage";
 
 const CommentInput = () => {
+
+  console.log("CommentInput: entered here");
+
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser);
   const router = useRouter();
diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 2ecbba3..7a34fb0 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -35,11 +35,19 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 </Form.Item>
   </>
 )
+
+
+
+
 // END ADDED
 
 var clickedReplyTo = true;
 var count = 0;
-
+/*
+const showEditor {
+    display: none;
+  }
+*/
 const CommentList = () => {
 
   // ADDED
@@ -47,10 +55,19 @@ const CommentList = () => {
   const isLoggedIn = checkLogin(currentUser)
 
   const handleClickReplyTo = (comment) => {
+
     console.log("In HandleClickReplyTo")
     if (isLoggedIn) {
       console.log("ALREADY LOGGED IN, Clicked")
       clickedReplyTo = true;
+
+      var x = document.getElementById("showEditor");
+      if (x.style.display === "block") {
+        x.style.display = "none";
+      } else {
+        x.style.display = "block";
+      }
+
       console.log("comment ID", comment.id, "*");
       console.log("replyToClicked?" , comment.replyToClicked, "*")
       comment.replyToClicked = true;
@@ -72,6 +89,8 @@ const CommentList = () => {
       message.info("Please log in to reply", 10)
     }
   }
+
+
   // END ADDED
 
 
@@ -120,7 +139,7 @@ const CommentList = () => {
           actions= {[
             
             <span key="comment-nested-reply-to"
-            onClick= {() => handleClickReplyTo(comment)}>Reply to HI8</span>
+            onClick= {() => handleClickReplyTo(comment)}>Reply to</span>
           ]}
           
           
@@ -133,9 +152,13 @@ const CommentList = () => {
           }
           content={
             <div>
-              <p>{comment.body + String(count) + String(comment.replyToClicked)}
+              <p>{comment.body}
               </p>
-              <EditorBox thisValue = {comment.replyToClicked} />
+              <div id="showEditor">
+                
+                <EditorBox />
+              
+              </div>
             </div>
             
             
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index 74c9ee3..b07ddf0 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -35,7 +35,8 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 )
 // END ADDED
 
-const EditorBox = (thisValue) => {
+const EditorBox = () => {
+    console.log("EditorBox: entered here");
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
     const router = useRouter();
@@ -47,10 +48,12 @@ const EditorBox = (thisValue) => {
     const [isLoading, setLoading] = React.useState(false);
   
     const handleChange = React.useCallback((e) => {
+      console.log("EditorBox: called handleChange");
       setContent(e.target.value);
     }, []);
   
     const handleSubmit = async (e) => {
+      console.log("EditorBox: Called handleSubmit");
       e.preventDefault();
       setLoading(true);
       await axios.post(
@@ -71,12 +74,12 @@ const EditorBox = (thisValue) => {
       setContent("");
       trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
     };
-    var clickedReplyTo = thisValue.thisValue;
+    var clickedReplyTo;// = thisValue.thisValue;
     clickedReplyTo = true;
     console.log("clicekdReplyTo is ", clickedReplyTo, '*');
 
     console.log("IN EDITORBOX");
-    if (!isLoggedIn && !clickedReplyTo) {
+    if (!isLoggedIn) {//} && !clickedReplyTo) {
         return (
             <p>
                 Not Logged In RN
@@ -85,10 +88,11 @@ const EditorBox = (thisValue) => {
 
     } else if (isLoggedIn && clickedReplyTo) {
       return (
-        <Editor onChange={console.log("onchange")}//this.handleChange}
-              onSubmit={console.log("onsubmit" + clickedReplyTo)}//this.handleSubmit}
-              submitting={false}//submitting}
-              value={'HEYWORLD is Logged In'}//value}
+        <Editor 
+              onChange={handleChange}
+              onSubmit={handleSubmit}
+              submitting = { isLoading }
+              value={ content }
             />
       );
     }

From 2cf57049a59f244980154cb7b6e2d39f7f650493 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Fri, 26 Jun 2020 22:11:44 -0700
Subject: [PATCH 05/16] wip, TODO: post ReplyTo comments under its parent
 comment, not under entire comments list; Toggle for ReplyTo button to
 show/hide Editor Box

---
 components/comment/CommentList.tsx | 63 ++++++++++--------------------
 components/comment/EditorBox.tsx   |  6 +--
 2 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 7a34fb0..97c0f9f 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -23,26 +23,13 @@ import fetcher from "../../lib/utils/fetcher";
 import { Comment, Avatar } from 'antd';
 
 // ADDED
-const Editor = ({onChange, onSubmit, submitting, value }) => (
-  <>
-    <Form.Item>
-  <TextArea rows={4} onChange={onChange} value={value} />
-</Form.Item>
-<Form.Item>
-  <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
-    Add Comment
-  </Button>
-</Form.Item>
-  </>
-)
-
-
-
 
 // END ADDED
 
 var clickedReplyTo = true;
 var count = 0;
+//var x = document.getElementById("showEditor");
+
 /*
 const showEditor {
     display: none;
@@ -50,6 +37,8 @@ const showEditor {
 */
 const CommentList = () => {
 
+
+
   // ADDED
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser)
@@ -61,18 +50,11 @@ const CommentList = () => {
       console.log("ALREADY LOGGED IN, Clicked")
       clickedReplyTo = true;
 
-      var x = document.getElementById("showEditor");
-      if (x.style.display === "block") {
-        x.style.display = "none";
-      } else {
-        x.style.display = "block";
-      }
-
-      console.log("comment ID", comment.id, "*");
-      console.log("replyToClicked?" , comment.replyToClicked, "*")
       comment.replyToClicked = true;
       console.log("replyToClicked?" , comment.replyToClicked, "*")
       count = count + 1;
+      
+      /*
       return (
         <div>
           <CommentInput />
@@ -81,7 +63,8 @@ const CommentList = () => {
     
         </div>
       );
-      
+      */
+     return;
 
 
     } else {
@@ -132,14 +115,16 @@ const CommentList = () => {
     // END ADDED 
 
    return (
-   
+      
       comments.map((comment: CommentType) => (
+        
         <Comment
           key={comment.id}
           actions= {[
             
             <span key="comment-nested-reply-to"
             onClick= {() => handleClickReplyTo(comment)}>Reply to</span>
+
           ]}
           
           
@@ -154,18 +139,19 @@ const CommentList = () => {
             <div>
               <p>{comment.body}
               </p>
-              <div id="showEditor">
-                
-                <EditorBox />
-              
-              </div>
-            </div>
             
+              {String(comment.author.username) == 'amyhuycu' ? <EditorBox commentId = {comment.id}/> : null }
+
+            </div>
+            }
             
-          }
+          
+          
         >
-            
-          {comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null}
+          
+          {
+          comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null
+          }
         </Comment>
         
         
@@ -181,13 +167,6 @@ const CommentList = () => {
   );
 };
 
-// ADDED
-/*
-class App extends React.Component {
-
-}
-*/
-// END ADDED
 
 
 export default CommentList;
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index b07ddf0..71bee3e 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -35,7 +35,7 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 )
 // END ADDED
 
-const EditorBox = () => {
+const EditorBox = ( {commentId} ) => {
     console.log("EditorBox: entered here");
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
@@ -57,7 +57,7 @@ const EditorBox = () => {
       e.preventDefault();
       setLoading(true);
       await axios.post(
-        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
+        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments/${commentId}`,
         JSON.stringify({
           comment: {
             body: content,
@@ -90,7 +90,7 @@ const EditorBox = () => {
       return (
         <Editor 
               onChange={handleChange}
-              onSubmit={handleSubmit}
+              onSubmit={ handleSubmit }
               submitting = { isLoading }
               value={ content }
             />

From 2b28c8c625eb1e75e2f40ef305ce2257ac21c717 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sat, 27 Jun 2020 19:22:29 -0700
Subject: [PATCH 06/16] wip, not working

---
 components/comment/CommentList.tsx | 96 +++++++++++++++++++++++++-----
 components/comment/EditorBox.tsx   |  4 +-
 lib/types/commentType.ts           |  4 +-
 3 files changed, 84 insertions(+), 20 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 97c0f9f..d8c7bea 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -55,6 +55,14 @@ const CommentList = () => {
       count = count + 1;
       
       /*
+      var x = document.getElementById("showBox");
+      if (x.style.display === "none") {
+        x.style.display = "block";
+      } else {
+        x.style.display = "none";
+      }
+      */
+      
       return (
         <div>
           <CommentInput />
@@ -63,7 +71,7 @@ const CommentList = () => {
     
         </div>
       );
-      */
+      
      return;
 
 
@@ -101,16 +109,16 @@ const CommentList = () => {
   
   const recurseComments = (comments) => {
     
-        
+    
     for (let aComment of comments) {
       //aComment.replyToClicked = false;
       console.log("this is ", aComment.id, "&", aComment.replyToClicked, "*");
       
     }
-    
-    console.log(comments.length, "ok");
+    /*
+    console.log(comments.length, "ok");//, comment.parentComment.comments + "*");
 
-    
+    */
 
     // END ADDED 
 
@@ -121,11 +129,31 @@ const CommentList = () => {
         <Comment
           key={comment.id}
           actions= {[
-            
-            <span key="comment-nested-reply-to"
-            onClick= {() => handleClickReplyTo(comment)}>Reply to</span>
+             
+              
+              <span key="comment-nested-reply-to"
+              onClick= {() => 
+                handleClickReplyTo(comment)
+                
+              } 
+              
+              >Reply to</span>
+
+              
+            ,
 
+            <div>
+            {
+                comment.replyToClicked ? 
+                  <EditorBox 
+                    onChange = {comment.replyToClicked} 
+                    commentId = {comment.parentComment.comments}
+                  /> : <p>HEYO</p>
+              } 
+            </div>
+            
           ]}
+
           
           
           author={comment.author.username}
@@ -137,16 +165,22 @@ const CommentList = () => {
           }
           content={
             <div>
-              <p>{comment.body}
+              <p>{comment.body} 
               </p>
-            
-              {String(comment.author.username) == 'amyhuycu' ? <EditorBox commentId = {comment.id}/> : null }
-
+              
+              <p>
+              {
+                comment.replyToClicked ? 
+                  <EditorBox 
+                    onChange = {comment.replyToClicked} 
+                    commentId = {comment.parentComment.comments}
+                  /> : <p>HERE</p>
+              } 
+              </p>
+              
+              
             </div>
-            }
-            
-          
-          
+          }
         >
           
           {
@@ -170,3 +204,33 @@ const CommentList = () => {
 
 
 export default CommentList;
+
+
+
+//style="display:none">
+
+/*
+<div id="showBox" >
+                <EditorBox commentId = {comment.id} />
+
+              </div>
+
+{comment.replyToClicked ? <EditorBox onChange = {comment.replyToClicked} commentId = {comment.parentComment.comments}/> : null }
+
+              */
+
+
+/*
+             actions= {[
+            
+              <span key="comment-nested-reply-to"
+              onClick= {() => 
+                handleClickReplyTo(comment)
+              
+              } 
+              
+              >Reply to</span>
+  
+            ]}
+
+            */
\ No newline at end of file
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index 71bee3e..ec481c7 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -35,7 +35,7 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 )
 // END ADDED
 
-const EditorBox = ( {commentId} ) => {
+const EditorBox = ( {onChange, commentId} ) => {
     console.log("EditorBox: entered here");
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
@@ -57,7 +57,7 @@ const EditorBox = ( {commentId} ) => {
       e.preventDefault();
       setLoading(true);
       await axios.post(
-        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments/${commentId}`,
+        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
         JSON.stringify({
           comment: {
             body: content,
diff --git a/lib/types/commentType.ts b/lib/types/commentType.ts
index 123ffc6..515a3e1 100644
--- a/lib/types/commentType.ts
+++ b/lib/types/commentType.ts
@@ -10,7 +10,7 @@ export type CommentType = {
   author: Author;
   updatedAt: number;
   parentComment: CommentChildren;
-  replyToClicked: boolean;
+  replyToClicked: boolean;  
 };
 
 export type Author = {
@@ -22,4 +22,4 @@ export type Author = {
 
 export type CommentChildren = {
   comments: CommentType[];
-}
\ No newline at end of file
+}

From c72dbfcb4ea2c187a32625cac09914e0ee7efd06 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sat, 27 Jun 2020 22:04:26 -0700
Subject: [PATCH 07/16] wip, not yet working

---
 backend/conduit/articles/models.py |  1 +
 components/comment/CommentList.tsx | 81 +++++++++---------------------
 components/comment/EditorBox.tsx   |  6 ---
 3 files changed, 25 insertions(+), 63 deletions(-)

diff --git a/backend/conduit/articles/models.py b/backend/conduit/articles/models.py
index 001b9c2..b024c20 100644
--- a/backend/conduit/articles/models.py
+++ b/backend/conduit/articles/models.py
@@ -42,6 +42,7 @@ class Comment(Model, SurrogatePK):
     article_id = reference_col('article', nullable=True)
     comment_id = Column(db.Integer, db.ForeignKey('comment.id'), nullable=True)
     parentComment = relationship('Comment', backref=db.backref('parent', remote_side=[id]), lazy='dynamic')
+    replyToClicked = True
 
     def __init__(self, article, author, body, comment_id=None, **kwargs):
         db.Model.__init__(self, author=author, body=body, article=article, **kwargs)
diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index d8c7bea..86bbb3e 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -28,13 +28,7 @@ import { Comment, Avatar } from 'antd';
 
 var clickedReplyTo = true;
 var count = 0;
-//var x = document.getElementById("showEditor");
 
-/*
-const showEditor {
-    display: none;
-  }
-*/
 const CommentList = () => {
 
 
@@ -48,10 +42,8 @@ const CommentList = () => {
     console.log("In HandleClickReplyTo")
     if (isLoggedIn) {
       console.log("ALREADY LOGGED IN, Clicked")
-      clickedReplyTo = true;
 
       comment.replyToClicked = true;
-      console.log("replyToClicked?" , comment.replyToClicked, "*")
       count = count + 1;
       
       /*
@@ -76,7 +68,6 @@ const CommentList = () => {
 
 
     } else {
-      console.log("NOT YET LOGGED IN")
       message.info("Please log in to reply", 10)
     }
   }
@@ -111,14 +102,8 @@ const CommentList = () => {
     
     
     for (let aComment of comments) {
-      //aComment.replyToClicked = false;
       console.log("this is ", aComment.id, "&", aComment.replyToClicked, "*");
-      
     }
-    /*
-    console.log(comments.length, "ok");//, comment.parentComment.comments + "*");
-
-    */
 
     // END ADDED 
 
@@ -134,23 +119,30 @@ const CommentList = () => {
               <span key="comment-nested-reply-to"
               onClick= {() => 
                 handleClickReplyTo(comment)
-                
+                /*
+                comment.replyToClicked === true ? 
+                  <EditorBox 
+                    onChange = {comment.replyToClicked} 
+                    commentId = {comment.parentComment.comments}
+                  /> : <p>replyToClicked Not clikced</p>
+                */
               } 
               
               >Reply to</span>
 
               
             ,
-
-            <div>
-            {
-                comment.replyToClicked ? 
+            <p>
+              {
+                  
+                comment.replyToClicked === true ? 
                   <EditorBox 
                     onChange = {comment.replyToClicked} 
                     commentId = {comment.parentComment.comments}
-                  /> : <p>HEYO</p>
-              } 
-            </div>
+                  /> :  <p>NOT replyToClicked</p>
+              }
+              </p>
+            
             
           ]}
 
@@ -165,17 +157,21 @@ const CommentList = () => {
           }
           content={
             <div>
-              <p>{comment.body} 
+              <p>
+                {
+                  comment.body
+                } 
               </p>
               
               <p>
               {
-                comment.replyToClicked ? 
+                  comment.replyToClicked ? 
                   <EditorBox 
                     onChange = {comment.replyToClicked} 
                     commentId = {comment.parentComment.comments}
-                  /> : <p>HERE</p>
-              } 
+                  /> : <p>NOT replyToClicked</p>
+                 
+              }
               </p>
               
               
@@ -184,7 +180,7 @@ const CommentList = () => {
         >
           
           {
-          comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null
+          comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : console.log(comment.id +"is" + comment.replyToClicked)
           }
         </Comment>
         
@@ -205,32 +201,3 @@ const CommentList = () => {
 
 export default CommentList;
 
-
-
-//style="display:none">
-
-/*
-<div id="showBox" >
-                <EditorBox commentId = {comment.id} />
-
-              </div>
-
-{comment.replyToClicked ? <EditorBox onChange = {comment.replyToClicked} commentId = {comment.parentComment.comments}/> : null }
-
-              */
-
-
-/*
-             actions= {[
-            
-              <span key="comment-nested-reply-to"
-              onClick= {() => 
-                handleClickReplyTo(comment)
-              
-              } 
-              
-              >Reply to</span>
-  
-            ]}
-
-            */
\ No newline at end of file
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index ec481c7..b962286 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -13,12 +13,6 @@ import storage from "../../lib/utils/storage";
 import {message, Form, Button, List, Input} from 'antd';
 const { TextArea } = Input;
 
-/*<Editor onChange={console.log("onchange")}//this.handleChange}
-              onSubmit={console.log("onsubmit")}//this.handleSubmit}
-              submitting={false}//submitting}
-              value={'HEYWORLD'}//value}
-            />
-*/
 
 // ADDED
 const Editor = ({onChange, onSubmit, submitting, value }) => (

From c3d239eead663e1c6b0f89170f846a072d501c08 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 28 Jun 2020 13:48:39 -0700
Subject: [PATCH 08/16] toggles editor box for all comments ReplyTos at once
 with useState

---
 components/comment/CommentList.tsx | 45 +++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 86bbb3e..0afa303 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 
 // ADDED
 import { Component } from 'react';
+import { useState } from 'react';
 import {message, Form, Button, List, Input} from 'antd';
 const { TextArea } = Input;
 import checkLogin from "../../lib/utils/checkLogin";
@@ -30,7 +31,7 @@ var clickedReplyTo = true;
 var count = 0;
 
 const CommentList = () => {
-
+  const [clickedComment, setClick] = useState(0);
 
 
   // ADDED
@@ -39,6 +40,8 @@ const CommentList = () => {
 
   const handleClickReplyTo = (comment) => {
 
+    //const [clickedComment, setClick] = useState(0);
+
     console.log("In HandleClickReplyTo")
     if (isLoggedIn) {
       console.log("ALREADY LOGGED IN, Clicked")
@@ -46,6 +49,11 @@ const CommentList = () => {
       comment.replyToClicked = true;
       count = count + 1;
       
+      if (clickedComment === 1) {
+        setClick(0);
+      } else {
+        setClick(1);
+      }
       /*
       var x = document.getElementById("showBox");
       if (x.style.display === "none") {
@@ -99,12 +107,13 @@ const CommentList = () => {
   
   
   const recurseComments = (comments) => {
+    //const [clickedComment, setClick] = useState(0);
     
-    
+    /*
     for (let aComment of comments) {
       console.log("this is ", aComment.id, "&", aComment.replyToClicked, "*");
     }
-
+    */
     // END ADDED 
 
    return (
@@ -119,6 +128,7 @@ const CommentList = () => {
               <span key="comment-nested-reply-to"
               onClick= {() => 
                 handleClickReplyTo(comment)
+                //setClick(1)
                 /*
                 comment.replyToClicked === true ? 
                   <EditorBox 
@@ -128,14 +138,14 @@ const CommentList = () => {
                 */
               } 
               
-              >Reply to</span>
+            >Reply to {comment.replyToClicked}</span>
 
               
             ,
             <p>
               {
-                  
-                comment.replyToClicked === true ? 
+                clickedComment === 1 ?  
+                //comment.replyToClicked === true ? 
                   <EditorBox 
                     onChange = {comment.replyToClicked} 
                     commentId = {comment.parentComment.comments}
@@ -163,16 +173,7 @@ const CommentList = () => {
                 } 
               </p>
               
-              <p>
-              {
-                  comment.replyToClicked ? 
-                  <EditorBox 
-                    onChange = {comment.replyToClicked} 
-                    commentId = {comment.parentComment.comments}
-                  /> : <p>NOT replyToClicked</p>
-                 
-              }
-              </p>
+              
               
               
             </div>
@@ -201,3 +202,15 @@ const CommentList = () => {
 
 export default CommentList;
 
+/*
+<p>
+              {
+                  comment.replyToClicked ? 
+                  <EditorBox 
+                    onChange = {comment.replyToClicked} 
+                    commentId = {comment.parentComment.comments}
+                  /> : <p>NOT replyToClicked</p>
+                 
+              }
+              </p>
+*/
\ No newline at end of file

From 6f547c4262f7a8b8832445c7d6337039b131f158 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 28 Jun 2020 14:09:17 -0700
Subject: [PATCH 09/16] mild cleanup

---
 components/comment/CommentList.tsx | 52 ++++++++++++------------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 0afa303..f4363f5 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 
 // ADDED
 import { Component } from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {message, Form, Button, List, Input} from 'antd';
 const { TextArea } = Input;
 import checkLogin from "../../lib/utils/checkLogin";
@@ -62,7 +62,7 @@ const CommentList = () => {
         x.style.display = "none";
       }
       */
-      
+      /*
       return (
         <div>
           <CommentInput />
@@ -71,7 +71,7 @@ const CommentList = () => {
     
         </div>
       );
-      
+      */
      return;
 
 
@@ -126,33 +126,12 @@ const CommentList = () => {
              
               
               <span key="comment-nested-reply-to"
-              onClick= {() => 
-                handleClickReplyTo(comment)
+                onClick= {() => 
+                  handleClickReplyTo(comment)
                 //setClick(1)
-                /*
-                comment.replyToClicked === true ? 
-                  <EditorBox 
-                    onChange = {comment.replyToClicked} 
-                    commentId = {comment.parentComment.comments}
-                  /> : <p>replyToClicked Not clikced</p>
-                */
               } 
               
-            >Reply to {comment.replyToClicked}</span>
-
-              
-            ,
-            <p>
-              {
-                clickedComment === 1 ?  
-                //comment.replyToClicked === true ? 
-                  <EditorBox 
-                    onChange = {comment.replyToClicked} 
-                    commentId = {comment.parentComment.comments}
-                  /> :  <p>NOT replyToClicked</p>
-              }
-              </p>
-            
+            >Reply to </span>
             
           ]}
 
@@ -172,17 +151,26 @@ const CommentList = () => {
                   comment.body
                 } 
               </p>
-              
-              
-              
-              
+              <p>
+              {
+                clickedComment === 1 ?  
+                  
+                  <EditorBox 
+                    onChange = {comment.replyToClicked} 
+                    commentId = {comment.parentComment.comments}
+                  /> :  null
+                  
+              }
+            </p>
+
             </div>
           }
         >
           
           {
-          comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : console.log(comment.id +"is" + comment.replyToClicked)
+            comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : console.log(comment.id +"is" + comment.replyToClicked)
           }
+
         </Comment>
         
         

From 244837d8fa5c29ddce0e03d6a9528ce4b8f45791 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 28 Jun 2020 15:40:32 -0700
Subject: [PATCH 10/16] some wip for toggling show/hide EditorBox

---
 backend/conduit/articles/models.py |   2 +-
 components/comment/CommentList.tsx | 113 ++++++++++-------------------
 components/comment/EditorBox.tsx   |   4 +-
 lib/types/commentType.ts           |   1 -
 4 files changed, 40 insertions(+), 80 deletions(-)

diff --git a/backend/conduit/articles/models.py b/backend/conduit/articles/models.py
index b024c20..378ebd3 100644
--- a/backend/conduit/articles/models.py
+++ b/backend/conduit/articles/models.py
@@ -42,7 +42,7 @@ class Comment(Model, SurrogatePK):
     article_id = reference_col('article', nullable=True)
     comment_id = Column(db.Integer, db.ForeignKey('comment.id'), nullable=True)
     parentComment = relationship('Comment', backref=db.backref('parent', remote_side=[id]), lazy='dynamic')
-    replyToClicked = True
+
 
     def __init__(self, article, author, body, comment_id=None, **kwargs):
         db.Model.__init__(self, author=author, body=body, article=article, **kwargs)
diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index f4363f5..9b74d91 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import React from "react";
 import useSWR from "swr";
 
-
 // ADDED
 import { Component } from 'react';
 import { useState, useEffect } from 'react';
@@ -11,7 +10,6 @@ const { TextArea } = Input;
 import checkLogin from "../../lib/utils/checkLogin";
 import storage from "../../lib/utils/storage";
 import EditorBox from "./EditorBox";
-//import handleClickReplyTo from "../../pages/article/[pid]"
 // END ADDED
 
 import CommentInput from "./CommentInput";
@@ -23,15 +21,9 @@ import { SERVER_BASE_URL } from "../../lib/utils/constant";
 import fetcher from "../../lib/utils/fetcher";
 import { Comment, Avatar } from 'antd';
 
-// ADDED
-
-// END ADDED
-
-var clickedReplyTo = true;
-var count = 0;
 
 const CommentList = () => {
-  const [clickedComment, setClick] = useState(0);
+  var [clickedComment, setClick] = useState( [] );
 
 
   // ADDED
@@ -40,39 +32,27 @@ const CommentList = () => {
 
   const handleClickReplyTo = (comment) => {
 
-    //const [clickedComment, setClick] = useState(0);
-
-    console.log("In HandleClickReplyTo")
     if (isLoggedIn) {
       console.log("ALREADY LOGGED IN, Clicked")
 
-      comment.replyToClicked = true;
-      count = count + 1;
       
-      if (clickedComment === 1) {
-        setClick(0);
-      } else {
-        setClick(1);
-      }
-      /*
-      var x = document.getElementById("showBox");
-      if (x.style.display === "none") {
-        x.style.display = "block";
+      if (clickedComment.includes(comment.id)) {
+        // Code to hide editor Box via 'Reply To' button
+        // NOT YET WORKING
+        
+        console.log("Clicked, to hide it", comment.id)
+        let temp = clickedComment;
+        let spot = temp.indexOf(comment.id);
+        if (spot > -1) {
+          temp.splice(spot, 1);
+        }
+        setClick(clickedComment = temp);
+        
       } else {
-        x.style.display = "none";
+        // Code to show editor box via 'Reply To' button
+        //console.log("Clicked, to show it", comment.id) // or comment.createdAt
+        setClick(clickedComment.concat( comment.id ));
       }
-      */
-      /*
-      return (
-        <div>
-          <CommentInput />
-                
-          {recurseComments(comments)}
-    
-        </div>
-      );
-      */
-     return;
 
 
     } else {
@@ -107,14 +87,7 @@ const CommentList = () => {
   
   
   const recurseComments = (comments) => {
-    //const [clickedComment, setClick] = useState(0);
     
-    /*
-    for (let aComment of comments) {
-      console.log("this is ", aComment.id, "&", aComment.replyToClicked, "*");
-    }
-    */
-    // END ADDED 
 
    return (
       
@@ -123,19 +96,22 @@ const CommentList = () => {
         <Comment
           key={comment.id}
           actions= {[
-             
-              
-              <span key="comment-nested-reply-to"
-                onClick= {() => 
-                  handleClickReplyTo(comment)
-                //setClick(1)
+            clickedComment.includes(comment.id) ?
+            <span key="comment-nested-reply-to" 
+              onClick = {() =>
+                handleClickReplyTo(comment)
+              }
+            >Hide Editor Box</span>
+            :
+            <span key="comment-nested-reply-to"
+              onClick= {() => 
+                handleClickReplyTo(comment)
               } 
-              
+    
             >Reply to </span>
             
+              
           ]}
-
-          
           
           author={comment.author.username}
           avatar={
@@ -152,23 +128,21 @@ const CommentList = () => {
                 } 
               </p>
               <p>
-              {
-                clickedComment === 1 ?  
-                  
-                  <EditorBox 
-                    onChange = {comment.replyToClicked} 
-                    commentId = {comment.parentComment.comments}
-                  /> :  null
-                  
-              }
-            </p>
+                {
+                  clickedComment.includes(comment.id) ?  
+                    
+                    <EditorBox 
+                      commentId = {comment.parentComment.comments}
+                    /> :  null    
+                }
+              </p>
 
             </div>
           }
         >
           
           {
-            comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : console.log(comment.id +"is" + comment.replyToClicked)
+            comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null
           }
 
         </Comment>
@@ -189,16 +163,3 @@ const CommentList = () => {
 
 
 export default CommentList;
-
-/*
-<p>
-              {
-                  comment.replyToClicked ? 
-                  <EditorBox 
-                    onChange = {comment.replyToClicked} 
-                    commentId = {comment.parentComment.comments}
-                  /> : <p>NOT replyToClicked</p>
-                 
-              }
-              </p>
-*/
\ No newline at end of file
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index b962286..3e465f4 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -29,7 +29,7 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 )
 // END ADDED
 
-const EditorBox = ( {onChange, commentId} ) => {
+const EditorBox = ( {commentId} ) => {
     console.log("EditorBox: entered here");
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
@@ -51,7 +51,7 @@ const EditorBox = ( {onChange, commentId} ) => {
       e.preventDefault();
       setLoading(true);
       await axios.post(
-        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
+        `${SERVER_BASE_URL}/articles/${pid}/comments`,
         JSON.stringify({
           comment: {
             body: content,
diff --git a/lib/types/commentType.ts b/lib/types/commentType.ts
index 515a3e1..49b3d97 100644
--- a/lib/types/commentType.ts
+++ b/lib/types/commentType.ts
@@ -10,7 +10,6 @@ export type CommentType = {
   author: Author;
   updatedAt: number;
   parentComment: CommentChildren;
-  replyToClicked: boolean;  
 };
 
 export type Author = {

From 91e1e2e4c752c131a11d1f6dbe9a9082e7f6738d Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 28 Jun 2020 21:06:26 -0700
Subject: [PATCH 11/16] comments under the correct nested comment

---
 components/comment/CommentInput.tsx |  2 --
 components/comment/CommentList.tsx  |  9 +++------
 components/comment/EditorBox.tsx    | 23 ++++++++---------------
 3 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/components/comment/CommentInput.tsx b/components/comment/CommentInput.tsx
index df7491a..0301c96 100644
--- a/components/comment/CommentInput.tsx
+++ b/components/comment/CommentInput.tsx
@@ -11,8 +11,6 @@ import storage from "../../lib/utils/storage";
 
 const CommentInput = () => {
 
-  console.log("CommentInput: entered here");
-
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser);
   const router = useRouter();
diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 9b74d91..6add59d 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -33,14 +33,11 @@ const CommentList = () => {
   const handleClickReplyTo = (comment) => {
 
     if (isLoggedIn) {
-      console.log("ALREADY LOGGED IN, Clicked")
-
       
       if (clickedComment.includes(comment.id)) {
         // Code to hide editor Box via 'Reply To' button
         // NOT YET WORKING
-        
-        console.log("Clicked, to hide it", comment.id)
+
         let temp = clickedComment;
         let spot = temp.indexOf(comment.id);
         if (spot > -1) {
@@ -124,7 +121,7 @@ const CommentList = () => {
             <div>
               <p>
                 {
-                  comment.body
+                  comment.body + comment.id
                 } 
               </p>
               <p>
@@ -132,7 +129,7 @@ const CommentList = () => {
                   clickedComment.includes(comment.id) ?  
                     
                     <EditorBox 
-                      commentId = {comment.parentComment.comments}
+                      commentId = {comment.id}
                     /> :  null    
                 }
               </p>
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index 3e465f4..ae886e6 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -14,8 +14,7 @@ import {message, Form, Button, List, Input} from 'antd';
 const { TextArea } = Input;
 
 
-// ADDED
-const Editor = ({onChange, onSubmit, submitting, value }) => (
+const Editor = ({onChange, onSubmit, submitting, value, id }) => (
   <>
     <Form.Item>
   <TextArea rows={4} onChange={onChange} value={value} />
@@ -27,10 +26,8 @@ const Editor = ({onChange, onSubmit, submitting, value }) => (
 </Form.Item>
   </>
 )
-// END ADDED
 
 const EditorBox = ( {commentId} ) => {
-    console.log("EditorBox: entered here");
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
     const router = useRouter();
@@ -39,22 +36,23 @@ const EditorBox = ( {commentId} ) => {
     } = router;
   
     const [content, setContent] = React.useState("");
+    const [theId, setId] = React.useState("");
     const [isLoading, setLoading] = React.useState(false);
   
     const handleChange = React.useCallback((e) => {
-      console.log("EditorBox: called handleChange");
       setContent(e.target.value);
+      setId(e.target.id);
     }, []);
   
     const handleSubmit = async (e) => {
-      console.log("EditorBox: Called handleSubmit");
       e.preventDefault();
       setLoading(true);
       await axios.post(
-        `${SERVER_BASE_URL}/articles/${pid}/comments`,
+        `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
         JSON.stringify({
           comment: {
             body: content,
+            comment_id: commentId,
           },
         }),
         {
@@ -68,11 +66,7 @@ const EditorBox = ( {commentId} ) => {
       setContent("");
       trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
     };
-    var clickedReplyTo;// = thisValue.thisValue;
-    clickedReplyTo = true;
-    console.log("clicekdReplyTo is ", clickedReplyTo, '*');
 
-    console.log("IN EDITORBOX");
     if (!isLoggedIn) {//} && !clickedReplyTo) {
         return (
             <p>
@@ -80,13 +74,14 @@ const EditorBox = ( {commentId} ) => {
             </p>
         );
 
-    } else if (isLoggedIn && clickedReplyTo) {
+    } else if (isLoggedIn) {
       return (
         <Editor 
               onChange={handleChange}
               onSubmit={ handleSubmit }
               submitting = { isLoading }
               value={ content }
+              id = { theId }
             />
       );
     }
@@ -95,9 +90,7 @@ const EditorBox = ( {commentId} ) => {
             Logged In RN
 
         </p>
-        
-        
-            
+           
     );
 
 };

From 493a021c4a2e82a8369475f4088e1ab7150a5384 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 28 Jun 2020 23:08:51 -0700
Subject: [PATCH 12/16] Hide Editor option works with lagging, cleanup code and
 comments added into code

---
 components/comment/CommentList.tsx | 50 +++++++++++++-----------------
 components/comment/EditorBox.tsx   | 40 +++++++++---------------
 2 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 6add59d..133a98e 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -2,15 +2,11 @@ import { useRouter } from "next/router";
 import React from "react";
 import useSWR from "swr";
 
-// ADDED
-import { Component } from 'react';
-import { useState, useEffect } from 'react';
-import {message, Form, Button, List, Input} from 'antd';
-const { TextArea } = Input;
+import { useState } from 'react';
+import { message } from 'antd';
 import checkLogin from "../../lib/utils/checkLogin";
 import storage from "../../lib/utils/storage";
 import EditorBox from "./EditorBox";
-// END ADDED
 
 import CommentInput from "./CommentInput";
 import ErrorMessage from "../common/ErrorMessage";
@@ -23,10 +19,10 @@ import { Comment, Avatar } from 'antd';
 
 
 const CommentList = () => {
+  // clickedComment is an array to store the ids of the comments that have clicked the Reply To button
+  // These comments will have the Editor Box and Hide Box button available
   var [clickedComment, setClick] = useState( [] );
 
-
-  // ADDED
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser)
 
@@ -35,32 +31,27 @@ const CommentList = () => {
     if (isLoggedIn) {
       
       if (clickedComment.includes(comment.id)) {
-        // Code to hide editor Box via 'Reply To' button
-        // NOT YET WORKING
-
+        // Code to hide editor Box via 'Hide Editor' button
+        // NOTE: There is a lag in closing the Editor Box
+    
         let temp = clickedComment;
         let spot = temp.indexOf(comment.id);
         if (spot > -1) {
           temp.splice(spot, 1);
         }
-        setClick(clickedComment = temp);
+        setClick(temp);
         
       } else {
         // Code to show editor box via 'Reply To' button
-        //console.log("Clicked, to show it", comment.id) // or comment.createdAt
         setClick(clickedComment.concat( comment.id ));
       }
 
 
-    } else {
+    } else { // Not Logged In
       message.info("Please log in to reply", 10)
     }
   }
 
-
-  // END ADDED
-
-
   const router = useRouter();
   const {
     query: { pid },
@@ -82,10 +73,9 @@ const CommentList = () => {
 
   const { comments } = data;
   
-  
+
   const recurseComments = (comments) => {
     
-
    return (
       
       comments.map((comment: CommentType) => (
@@ -93,12 +83,18 @@ const CommentList = () => {
         <Comment
           key={comment.id}
           actions= {[
+            /*
+            If the clickedComment array contains this id, then the Editor Box is currently visible
+            so offer option to Hide Editor
+            Else, the clickedComment array does NOT contain this id, 
+            so offer option to Reply To 
+            */
             clickedComment.includes(comment.id) ?
             <span key="comment-nested-reply-to" 
               onClick = {() =>
                 handleClickReplyTo(comment)
               }
-            >Hide Editor Box</span>
+            >Hide Editor</span>
             :
             <span key="comment-nested-reply-to"
               onClick= {() => 
@@ -106,7 +102,6 @@ const CommentList = () => {
               } 
     
             >Reply to </span>
-            
               
           ]}
           
@@ -120,14 +115,14 @@ const CommentList = () => {
           content={
             <div>
               <p>
-                {
-                  comment.body + comment.id
-                } 
+                { comment.body } 
               </p>
               <p>
                 {
+                  /*
+                  If the clickedComment array contains this id, then show the Editor Box
+                  */
                   clickedComment.includes(comment.id) ?  
-                    
                     <EditorBox 
                       commentId = {comment.id}
                     /> :  null    
@@ -144,7 +139,6 @@ const CommentList = () => {
 
         </Comment>
         
-        
       )))
   }
 
@@ -157,6 +151,4 @@ const CommentList = () => {
   );
 };
 
-
-
 export default CommentList;
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index ae886e6..7077884 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -1,29 +1,29 @@
+// Based on CommentInput.tsx
+
 import axios from "axios";
 import { useRouter } from "next/router";
 import React from "react";
 import useSWR, { trigger } from "swr";
 
-import CustomImage from "../common/CustomImage";
-import CustomLink from "../common/CustomLink";
 import checkLogin from "../../lib/utils/checkLogin";
 import { SERVER_BASE_URL } from "../../lib/utils/constant";
 import storage from "../../lib/utils/storage";
 
 
-import {message, Form, Button, List, Input} from 'antd';
+import { Form, Button, Input} from 'antd';
 const { TextArea } = Input;
 
 
-const Editor = ({onChange, onSubmit, submitting, value, id }) => (
+const Editor = ( { onChange, onSubmit, submitting, value } ) => (
   <>
     <Form.Item>
-  <TextArea rows={4} onChange={onChange} value={value} />
-</Form.Item>
-<Form.Item>
-  <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
-    Add Comment
-  </Button>
-</Form.Item>
+      <TextArea rows={4} onChange={onChange} value={value} />
+    </Form.Item>
+    <Form.Item>
+      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
+        Add Comment
+      </Button>
+    </Form.Item>
   </>
 )
 
@@ -36,12 +36,10 @@ const EditorBox = ( {commentId} ) => {
     } = router;
   
     const [content, setContent] = React.useState("");
-    const [theId, setId] = React.useState("");
     const [isLoading, setLoading] = React.useState(false);
   
     const handleChange = React.useCallback((e) => {
       setContent(e.target.value);
-      setId(e.target.id);
     }, []);
   
     const handleSubmit = async (e) => {
@@ -67,31 +65,21 @@ const EditorBox = ( {commentId} ) => {
       trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
     };
 
-    if (!isLoggedIn) {//} && !clickedReplyTo) {
+    if (!isLoggedIn) {
         return (
-            <p>
-                Not Logged In RN
-            </p>
+            null
         );
 
-    } else if (isLoggedIn) {
+    } else { // is Logged In
       return (
         <Editor 
               onChange={handleChange}
               onSubmit={ handleSubmit }
               submitting = { isLoading }
               value={ content }
-              id = { theId }
             />
       );
     }
-    return (
-        <p>
-            Logged In RN
-
-        </p>
-           
-    );
 
 };
 

From 45eea9d50ce3119c75a4c2204fcd6e046e5f3245 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Wed, 1 Jul 2020 20:14:07 -0700
Subject: [PATCH 13/16] only opens one editor box at a time

---
 components/comment/CommentList.tsx | 47 +++++++++---------------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 133a98e..01ae608 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -19,9 +19,8 @@ import { Comment, Avatar } from 'antd';
 
 
 const CommentList = () => {
-  // clickedComment is an array to store the ids of the comments that have clicked the Reply To button
-  // These comments will have the Editor Box and Hide Box button available
-  var [clickedComment, setClick] = useState( [] );
+  // clickedComment is the value of the id of the comment that has clicked the Reply To button
+  var [clickedComment, setClick] = useState( '' );
 
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser)
@@ -29,25 +28,9 @@ const CommentList = () => {
   const handleClickReplyTo = (comment) => {
 
     if (isLoggedIn) {
-      
-      if (clickedComment.includes(comment.id)) {
-        // Code to hide editor Box via 'Hide Editor' button
-        // NOTE: There is a lag in closing the Editor Box
-    
-        let temp = clickedComment;
-        let spot = temp.indexOf(comment.id);
-        if (spot > -1) {
-          temp.splice(spot, 1);
-        }
-        setClick(temp);
-        
-      } else {
-        // Code to show editor box via 'Reply To' button
-        setClick(clickedComment.concat( comment.id ));
-      }
-
-
-    } else { // Not Logged In
+      setClick( comment.id );
+    } 
+    else { // Not Logged In
       message.info("Please log in to reply", 10)
     }
   }
@@ -84,17 +67,13 @@ const CommentList = () => {
           key={comment.id}
           actions= {[
             /*
-            If the clickedComment array contains this id, then the Editor Box is currently visible
-            so offer option to Hide Editor
-            Else, the clickedComment array does NOT contain this id, 
-            so offer option to Reply To 
+            If the clickedComment has this id, then there is the Editor Box, so hide the Reply To
+            Else, the clickedComment does NOT have this id, 
+            so show the Reply To option
             */
-            clickedComment.includes(comment.id) ?
-            <span key="comment-nested-reply-to" 
-              onClick = {() =>
-                handleClickReplyTo(comment)
-              }
-            >Hide Editor</span>
+            
+            clickedComment == comment.id ?
+            null
             :
             <span key="comment-nested-reply-to"
               onClick= {() => 
@@ -120,9 +99,9 @@ const CommentList = () => {
               <p>
                 {
                   /*
-                  If the clickedComment array contains this id, then show the Editor Box
+                  If the clickedComment has this id, then show the Editor Box
                   */
-                  clickedComment.includes(comment.id) ?  
+                  clickedComment == comment.id ?  
                     <EditorBox 
                       commentId = {comment.id}
                     /> :  null    

From 2b469bb0512467b87b1649fb10dc41ed1f257d4c Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Wed, 1 Jul 2020 20:24:45 -0700
Subject: [PATCH 14/16] removed print stmts / comments

---
 components/article/ArticlePreview.tsx |  5 +----
 pages/article/[pid].tsx               | 12 ------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/components/article/ArticlePreview.tsx b/components/article/ArticlePreview.tsx
index 7ad716a..2e49e48 100644
--- a/components/article/ArticlePreview.tsx
+++ b/components/article/ArticlePreview.tsx
@@ -26,12 +26,9 @@ const ArticlePreview = ({ article }) => {
 
   const handleClickFavorite = async (slug) => {
     if (!isLoggedIn) {
-      console.log("[ARTICLEPREVIEW] not logged in")
       Router.push(`/user/login`);
       return;
-    } else {
-      console.log("[ARTICLEPREVIEW] already logged in")
-    }
+    } 
 
     setPreview({
       ...preview,
diff --git a/pages/article/[pid].tsx b/pages/article/[pid].tsx
index 9739e39..435f3d8 100644
--- a/pages/article/[pid].tsx
+++ b/pages/article/[pid].tsx
@@ -1,4 +1,3 @@
-// EDIT HERE
 
 import marked from "marked";
 import Router, { useRouter } from "next/router";
@@ -85,17 +84,6 @@ const ArticlePage = (initialArticle) => {
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser);
 
-  // ADDED
-  const handleClickReplyTo = () => {
-    if (!isLoggedIn) {
-      console.log("[PID]Not logged in");
-    }
-    else {
-      console.log("[PID] Yes Logged in");
-    }
-  };
-  // END ADDED
-
 
   const handleClickFavorite = async slug => {
     if (!isLoggedIn) {

From 96590580be529a20e9035eed4d1a9c8027ea8b87 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 5 Jul 2020 14:17:58 -0700
Subject: [PATCH 15/16] closes editor box after submit

---
 components/comment/CommentList.tsx | 23 ++++++++++++++++++++---
 components/comment/EditorBox.tsx   | 18 ++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 01ae608..21e5b13 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -21,10 +21,17 @@ import { Comment, Avatar } from 'antd';
 const CommentList = () => {
   // clickedComment is the value of the id of the comment that has clicked the Reply To button
   var [clickedComment, setClick] = useState( '' );
+  var [submittedReply, setSubmit] = useState( false );
 
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser)
 
+  const getSubmitData = (handleClick) => {
+    console.log("Getting Submit data")
+    console.log("IT is ", handleClick, "OK")
+    setClick( handleClick );
+  }
+
   const handleClickReplyTo = (comment) => {
 
     if (isLoggedIn) {
@@ -80,8 +87,14 @@ const CommentList = () => {
                 handleClickReplyTo(comment)
               } 
     
-            >Reply to </span>
-              
+            >Reply to </span>,
+
+            /*
+            submittedReply == true ?
+            clickedComment = '-1'
+            :
+            null
+            */
           ]}
           
           author={comment.author.username}
@@ -104,11 +117,15 @@ const CommentList = () => {
                   clickedComment == comment.id ?  
                     <EditorBox 
                       commentId = {comment.id}
-                    /> :  null    
+                      handleClick = { getSubmitData }
+                    /> 
+                    :
+                    <p>ClickedComment is { clickedComment } ok </p>    
                 }
               </p>
 
             </div>
+            
           }
         >
           
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index 7077884..7504531 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -13,6 +13,8 @@ import storage from "../../lib/utils/storage";
 import { Form, Button, Input} from 'antd';
 const { TextArea } = Input;
 
+var clickedSubmit = false;
+var submittedReply = false;
 
 const Editor = ( { onChange, onSubmit, submitting, value } ) => (
   <>
@@ -27,7 +29,7 @@ const Editor = ( { onChange, onSubmit, submitting, value } ) => (
   </>
 )
 
-const EditorBox = ( {commentId} ) => {
+const EditorBox = (  props  ) => {
     const { data: currentUser } = useSWR("user", storage);
     const isLoggedIn = checkLogin(currentUser);
     const router = useRouter();
@@ -37,6 +39,8 @@ const EditorBox = ( {commentId} ) => {
   
     const [content, setContent] = React.useState("");
     const [isLoading, setLoading] = React.useState(false);
+
+    clickedSubmit = false;
   
     const handleChange = React.useCallback((e) => {
       setContent(e.target.value);
@@ -50,7 +54,7 @@ const EditorBox = ( {commentId} ) => {
         JSON.stringify({
           comment: {
             body: content,
-            comment_id: commentId,
+            comment_id: props.commentId,
           },
         }),
         {
@@ -63,6 +67,12 @@ const EditorBox = ( {commentId} ) => {
       setLoading(false);
       setContent("");
       trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
+      
+      console.log("EditorBox: set it to true")
+      clickedSubmit = true;
+
+      props.handleClick("CLICKEDIT");
+
     };
 
     if (!isLoggedIn) {
@@ -73,11 +83,11 @@ const EditorBox = ( {commentId} ) => {
     } else { // is Logged In
       return (
         <Editor 
-              onChange={handleChange}
+              onChange={ handleChange }
               onSubmit={ handleSubmit }
               submitting = { isLoading }
               value={ content }
-            />
+        />
       );
     }
 

From 0af23abf03d9da6d72833c1a33c3886cb6ab0023 Mon Sep 17 00:00:00 2001
From: amyhuycu <amycu@ucdavis.edu>
Date: Sun, 5 Jul 2020 14:23:08 -0700
Subject: [PATCH 16/16] cleaned up code

---
 components/comment/CommentList.tsx | 16 ++++------------
 components/comment/EditorBox.tsx   |  7 ++-----
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/components/comment/CommentList.tsx b/components/comment/CommentList.tsx
index 21e5b13..2c8b305 100644
--- a/components/comment/CommentList.tsx
+++ b/components/comment/CommentList.tsx
@@ -21,14 +21,12 @@ import { Comment, Avatar } from 'antd';
 const CommentList = () => {
   // clickedComment is the value of the id of the comment that has clicked the Reply To button
   var [clickedComment, setClick] = useState( '' );
-  var [submittedReply, setSubmit] = useState( false );
 
   const { data: currentUser } = useSWR("user", storage);
   const isLoggedIn = checkLogin(currentUser)
 
-  const getSubmitData = (handleClick) => {
-    console.log("Getting Submit data")
-    console.log("IT is ", handleClick, "OK")
+  // After the editor box is submitted, this sets the clickedComment ID back to default (-1)
+  const setSubmitData = (handleClick) => {
     setClick( handleClick );
   }
 
@@ -89,12 +87,6 @@ const CommentList = () => {
     
             >Reply to </span>,
 
-            /*
-            submittedReply == true ?
-            clickedComment = '-1'
-            :
-            null
-            */
           ]}
           
           author={comment.author.username}
@@ -117,10 +109,10 @@ const CommentList = () => {
                   clickedComment == comment.id ?  
                     <EditorBox 
                       commentId = {comment.id}
-                      handleClick = { getSubmitData }
+                      handleClick = { setSubmitData }
                     /> 
                     :
-                    <p>ClickedComment is { clickedComment } ok </p>    
+                    null   
                 }
               </p>
 
diff --git a/components/comment/EditorBox.tsx b/components/comment/EditorBox.tsx
index 7504531..df754ad 100644
--- a/components/comment/EditorBox.tsx
+++ b/components/comment/EditorBox.tsx
@@ -14,7 +14,6 @@ import { Form, Button, Input} from 'antd';
 const { TextArea } = Input;
 
 var clickedSubmit = false;
-var submittedReply = false;
 
 const Editor = ( { onChange, onSubmit, submitting, value } ) => (
   <>
@@ -68,10 +67,8 @@ const EditorBox = (  props  ) => {
       setContent("");
       trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
       
-      console.log("EditorBox: set it to true")
-      clickedSubmit = true;
-
-      props.handleClick("CLICKEDIT");
+      // This editor box has been submitted, so set the CommentID to -1 to hide the editor box
+      props.handleClick("-1");
 
     };