comment articles wip

yannicklescure · Apr 19, 2022 · 4a40b9f · 4a40b9f
1 parent 68e1d7e
commit 4a40b9f
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 3 deletions.
diff --git a/client/src/components/Article/Actions.js b/client/src/components/Article/Actions.js
@@ -4,15 +4,17 @@ import { COLORS } from "../../constants";
 import Like from "../Like";
 import Bookmark from "../Bookmark";
 
-const Actions = ({ article }) => {
+const Actions = ({ article, handleShowComments }) => {
   return (
     <Wrapper>
       <Container>
         <div>{article.views} views</div>
         <Like article={article} />
       </Container>
       <Container>
-        <FaRegCommentAlt />
+        <Comments onClick={handleShowComments}>
+          <FaRegCommentAlt />
+        </Comments>
         <Bookmark article={article} />
         <FaShare />
       </Container>
@@ -32,5 +34,15 @@ const Container = styled.div`
   color: ${COLORS.secondary};
   gap: 16px;
 `;
+const Comments = styled.button`
+  display: flex;
+  align-items: center;
+  background: none;
+  outline: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: 16px;
+`;
 
 export default Actions;
diff --git a/client/src/components/Article/Article.js b/client/src/components/Article/Article.js
@@ -3,16 +3,30 @@ import Content from './Content';
 import Head from './Head';
 import Actions from './Actions';
 import Tags from "./Tags";
+import Comments from "../Comments";
+import { useState } from "react";
 
 const Article = ({ user, article }) => {
+  const [show, setShow] = useState(false);
+  const handleShowComments = () => {
+    setShow(!show);
+  }
+
   return (
     <Wrapper>
       <Head user={user} article={article} />
       <Title>{article.title}</Title>
       <StyledImg src={article.imageSrc} />
       <Content article={article} />
       <Tags article={article} />
-      <Actions article={article} />
+      <Actions
+        article={article}
+        handleShowComments={handleShowComments}
+      />
+      <Comments 
+        show={show}
+        handleShowComments={handleShowComments}
+      />
     </Wrapper>
   )
 }

diff --git a/client/src/components/Comments/Comments.js b/client/src/components/Comments/Comments.js
@@ -0,0 +1,104 @@
+import styled, { keyframes } from "styled-components";
+import { COLORS } from "../../constants";
+import { FaTimes, FaRegCommentAlt } from "react-icons/fa";
+import { useEffect, useState } from "react";
+
+const Comments = ({ show, handleShowComments }) => {
+  const [display, setDisplay] = useState(show);
+
+  useEffect(() => {
+    if (show) {
+      setDisplay(true);
+    }
+    else {
+      setTimeout(() => setDisplay(false), 250);
+    }
+  }, [show]);
+
+  return (
+    <Wrapper
+      show={show}
+      display={display}
+    >
+      <Top>
+        <TopTitle>
+          <Icon><FaRegCommentAlt /></Icon>
+          <div>Comments</div>
+        </TopTitle>
+        <Close 
+          show={show}
+          onClick={handleShowComments}
+        >
+          <FaTimes />
+        </Close>
+      </Top>
+      <Content>
+        Comments
+      </Content>
+    </Wrapper>
+  )
+}
+
+const slideIn = keyframes`
+  from {
+    right: -33vw;
+  }
+
+  to {
+    right: 0;
+  }
+`;
+const slideOut = keyframes`
+  from {
+    right: 0;
+  }
+
+  to {
+    right: -33vw;
+  }
+`;
+const Wrapper = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: ${({display}) => display ? 'block' : 'none'};
+  width: 33vw;
+  height: 100vh;
+  background-color: ${COLORS.white};
+  padding: 16px;
+  animation: ${({show}) => show ? slideIn : slideOut} 300ms ease;
+  border-left: 1px solid ${COLORS.secondary};
+`;
+const Top = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${COLORS.secondary};
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+`;
+const Close = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+`;
+const TopTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const Icon = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export default Comments;
diff --git a/client/src/components/Comments/index.js b/client/src/components/Comments/index.js
@@ -0,0 +1,3 @@
+import Comments from './Comments';
+
+export default Comments;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Comments from './Comments';

		export default Comments;