Pr #57,

package.json

@@ -13,6 +13,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@uiw/react-md-editor": "^2.1.11",
     "apollo-boost": "^0.4.7",
     "gh-pages": "^2.2.0",
     "graphql": "^14.5.8",

src/Components/Common/LoaderSvg.js

@@ -9,9 +9,9 @@ export default function LoaderSvg({ fill }) {
       xmlns="http://www.w3.org/2000/svg"
       stroke={fill}
     >
-      <g fill="none" fill-rule="evenodd">
-        <g transform="translate(1 1)" stroke-width="2">
-          <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
+      <g fill="none" fillRule="evenodd">
+        <g transform="translate(1 1)" strokeWidth="2">
+          <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
           <path d="M36 18c0-9.94-8.06-18-18-18">
             <animateTransform
               attributeName="transform"

src/Components/Header/LoginOverlay.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const LoginOverlay = styled.div`  
+  position: absolute;
+  background-color: #2E3440BD;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex; 
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+`;

src/Components/Header/index.js

@@ -3,4 +3,5 @@ export { HeaderWrapper } from './HeaderWrapper'
 export { HeaderTitle } from './HeaderTitle'
 export { HeaderSubtitle } from './HeaderSubtitle'
 export { Header } from './Header'
-export { GithubLogin } from './GithubLogin'
+export { GithubLogin } from './GithubLogin'
+export { LoginOverlay } from './LoginOverlay'

src/Components/Post/Comment/CommentInput.js

@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+// import SimpleMdeReact from "react-simplemde-editor";
+// import "easymde/dist/easymde.min.css";
+import MDEditor from "@uiw/react-md-editor";
+import styled from "styled-components";
+
+import { CommentSubmitButton } from "../Comment";
+
+const Editor = styled(MDEditor)`
+  background-color: unset !important;
+  box-shadow: unset !important; 
+  color: ${(props) => props.theme.text};
+  border: ${(props) => props.theme.text} solid 1px;
+  border-radius: 10px;
+  filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -o-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -ms-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -moz-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -webkit-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+`
+
+export const CommentInput = ({updateComments}) => {
+  const [value, setValue] = useState("");
+  const userToken = localStorage.getItem('githubToken');
+
+  return (
+    userToken ?
+    <> 
+     <Editor value={value} onChange={setValue} height="120" visiableDragbar={false} preview={"edit"} />
+     <CommentSubmitButton disabled={value === "" ? true : false} onClick={e => updateComments(e, value)}>
+       submit
+     </CommentSubmitButton>
+    </>
+    :   
+    <> 
+      <Editor value={value} onChange={setValue} height="120" visiableDragbar={false} preview={"edit"} blur/>
+      <CommentSubmitButton disabled={true} blur>
+        Submit
+      </CommentSubmitButton>
+    </>
+
+  )
+
+};

src/Components/Post/Comment/CommentInputContainer.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const CommentInputContainer = styled.div`  
+  margin-top: 3rem;
+  width: 100%;
+  color: ${(props) => props.theme.text};
+  border-radius: 10px;
+  position: relative;
+`;

src/Components/Post/Comment/CommentSubmitButton.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const CommentSubmitButton = styled.button`
+  outline: none;
+  border: 1px solid;
+  font-size: 22px;
+  font-family: "Shadows Into Light", serif;
+  border-radius: 5px;
+  padding: 0px 20px 0 20px;
+  cursor: pointer;
+  filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -o-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -ms-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -moz-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+  -webkit-filter: ${(props) => props.blur ? "blur(2px)" : "unset" };
+
+  background-color: ${ props => props.theme.body };
+  color: ${ props => props.theme.text };
+  text-decoration: none;
+  margin: 15px auto 0px auto;
+
+  :hover {
+    background-color: ${ props => props.theme.mode === 'light' ? '#373737' : '#6B8096' };
+    color: white;
+  }
+
+  :focus, :active {
+    background-color: ${ props => props.theme.mode === 'light' ? '#3c3a3aab' : '#59636Fab' };
+    color: #ffffffad;
+  }
+
+  :disabled {
+    background-color: ${ props => props.theme.mode === 'light' ? '#3c3a3aab' : '#59636Fab' };
+    cursor: not-allowed;
+    color: #ffffffad;
+  }
+`;

src/Components/Post/Comment/index.js

@@ -2,3 +2,6 @@ export {Comment} from "./Comment";
 export {CommentContainer} from "./CommentContainer";
 export {CommentLink} from "./CommentLink";
 export {CommentLinkContainer} from "./CommentLinkContainer";
+export {CommentInput} from "./CommentInput";
+export {CommentInputContainer} from "./CommentInputContainer";
+export {CommentSubmitButton} from "./CommentSubmitButton";

src/Containers/BlogPost.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
+import ReactDOMServer from 'react-dom/server'
 import moment from "moment";
-import Markdown from "markdown-to-jsx";
+import Markdown, { compiler } from "markdown-to-jsx";
 import readingTime from "reading-time";
 import { GithubSelector, GithubCounter } from "react-reactions";
 import { userClient } from '../Utils/apollo'
@@ -45,7 +46,7 @@ export default function BlogHome() {
         }
         updatedAt
         id
-        comments(first:100) {
+        comments(first:100, orderBy: {direction: DESC, field: UPDATED_AT }) {
           nodes {
             author {
               ... on User {
@@ -65,6 +66,30 @@ export default function BlogHome() {
     }
   }
   `;
+  const GET_RECENT_COMMENT = gql`query {
+    repository(owner: "${config.githubUserName}", name: "${config.githubRepo}") {
+      issue(number: ${issueNumber}) {
+        comments(last:1) {
+          nodes {
+            author {
+              ... on User {
+                avatarUrl
+                name
+                login
+              }
+            }
+            body
+            bodyHTML
+            bodyText
+            publishedAt
+            updatedAt
+          }
+        }
+      }
+    }
+  }
+  `;
+
   const [post, setPost] = useState([]);
   const [postNodeId, setPostNodeId] = useState('');
   const [reactionPopup, setReactionPopup] = useState(false);
@@ -91,7 +116,6 @@ export default function BlogHome() {
 
     setPostReactions(reactions_array);
   }, []);
-
   const toggleReaction = async (emoji) => {
     let reactions = postReactions;
     const user = await getAuthenticatedUser();
@@ -107,16 +131,16 @@ export default function BlogHome() {
       await userClient(userToken).mutate({
         mutation: gql`
           mutation AddReaction {
-            addReaction(input:{subjectId:"${postNodeId}",content:${getNameByEmoji(emoji)},clientMutationId:"${user.node_id}"}) {
+            addReaction(input:{subjectId:"${postNodeId}",content:${getNameByEmoji(emoji)}, clientMutationId:"${user.node_id}"}) {
               reaction {
                 id
               }
             }
           }
         `
       });
-
       reactions.push(reactionToAdd);
+
     } else {
       // Remove the reaction
       await userClient(userToken).mutate({
@@ -130,7 +154,6 @@ export default function BlogHome() {
           }
         `
       });
-
       // Remove the reaction from the state
       reactions = reactions.filter(r => !(r.by === user.login && r.emoji === emoji))
     }
@@ -139,7 +162,34 @@ export default function BlogHome() {
     reactionsContainer.current.forceUpdate(); // refresh the counter
     setReactionPopup(false); // hiding the reactions choice
   }
-
+
+  // Adds a new comment 
+  const handleSubmitComment = async (e, value) => {
+    e.preventDefault();
+    const user = await getAuthenticatedUser();  
+    await userClient(userToken).mutate({
+      mutation: gql`
+          mutation AddComment {
+            addComment (input:{body:"${ReactDOMServer.renderToString(compiler(value, {wrapper: null})).replaceAll('"', "'")}", subjectId: "${postNodeId}" ,clientMutationId:"${user.node_id}"}) {
+              subject { 
+                id 
+              }
+            }
+          }
+        `
+      }
+    )
+    // retrieve the last comment
+    let d = await userClient(userToken).query({
+      query: GET_RECENT_COMMENT
+      }
+    )
+    let comment = d.data.repository.issue.comments.nodes[0];
+
+    // update on the front-end
+    setPostComments([comment, ...postComments,]);
+  }
+
   useEffect(() => {
     if (!loading) {
       if (data) {
@@ -157,12 +207,14 @@ export default function BlogHome() {
   }
 
   const onBackClick = () => {
-    // ifthe previous page does not exist in the history list. this method to load the previous (or next) URL in the history list.
-    window.history.go();
+    // if the previous page does not exist in the history list. this method to load the previous (or next) URL in the history list.
+    // window.history.go(); <this code does not do as what is subscribed above, comment for now>
+
     // The back() method loads the previous URL in the history list.
     window.history.back();
   };
 
+
   return (
     <>
       {post.title && (
@@ -212,7 +264,7 @@ export default function BlogHome() {
             onSelect={emoji => toggleReaction(emoji)}
             onAdd={() => setReactionPopup(!reactionPopup)}
           />
-          <CommentsSection postUrl={post.url} comments={postComments} />
+          <CommentsSection postUrl={post.url} comments={postComments} updateComments={handleSubmitComment} />
         </PostContainer>
       )}
     </>

src/Containers/CommentsSection.js

@@ -4,16 +4,37 @@ import {
   Comment,
   CommentLink,
   CommentLinkContainer,
+  CommentInputContainer,
+  CommentInput
 } from "../Components/Post/Comment";
+import { LoginOverlay, GithubLogin } from '../Components/Header';
+
+const CommentsSection = ({postUrl, comments, subjectId, updateComments}) => {
+
+  const userToken = localStorage.getItem('githubToken');
 
-const CommentsSection = ({postUrl, comments}) => {
   return (
     <>
-      <CommentLinkContainer>
-        <CommentLink href={postUrl + "#issue-comment-box"} target="_blank">
+        <CommentLinkContainer>
+          <CommentLink>
           Post a comment
-        </CommentLink>
-      </CommentLinkContainer>
+          </CommentLink>
+        </CommentLinkContainer>
+
+        <CommentInputContainer>
+        {!userToken
+          ?
+            <>
+              <CommentInput height="185px" />
+              <LoginOverlay>
+                <GithubLogin isAbsolute={false} />
+              </LoginOverlay>
+            </>
+          : <CommentInput updateComments={updateComments} subjectId={subjectId}/>
+
+        }
+        </CommentInputContainer>
+
       {comments.map((v, id) => (
         <Comment comment={v} key={id} />
       ))}

src/Containers/GithubCallback.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-
 import { config } from '../config'
 import { getAuthenticatedUser } from '../Utils/auth'
 import { Loader } from '../Components/Common/Loader'
@@ -11,7 +10,7 @@ const GithubCallback = () => {
 
   const authenticate = async (code) => {
     // Apparently we need to use a proxy to make this request (CORS blocked for client-side only applications)
-    const response = await fetch('https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', {
+    const response = await fetch('https://proxy-for-cors-headers-prod.herokuapp.com/https://github.com/login/oauth/access_token', {
       method: 'POST',
       body: new URLSearchParams({
         client_id: OAuthClientID,

src/index.css

@@ -43,6 +43,8 @@ li {
   margin-top: 21px;
 }
 
+
+
 p,
 i,
 a,
@@ -78,19 +80,34 @@ code {
   padding: 3px 5px;
 }
 
-pre > code {
+pre > code:not(.w-md-editor-text-input) {
   background: transparent !important;
   font-family: "Quicksand";
   font-size: 18px;
   padding: 0px;
 }
 
-pre {
+pre:not(.w-md-editor-text-pre, .wmde-markdown-color) {
   margin-top: 30px;
   border-radius: 10px;
   padding: 20px !important;
 }
 
+/* solves the styling bugs of w-md-editor */
+.w-md-editor-text-input {
+  -webkit-text-fill-color: unset !important;
+}
+.w-md-editor-text-pre {
+  visibility: hidden;
+}
+.w-md-editor-toolbar{
+  background: unset;
+}
+/* .w-md-editor-content {
+  height: 85px;
+} */
+
+
 mark,
 .highlighted {
   background: #7dffb3;