Merge branch 'network-page-wireframe' of https://github.com/Ronnie018/Reentry into network-page-wireframe

Author: Ronnie018

src/components/Leftside.jsx

@@ -37,7 +37,7 @@ const Leftside = (props) => {
           </a>
         </UserInfo>
         <Widget>
-          <a>
+          <nav>
             <div>
               <Link to="/notifications">
                 <span>Notifications</span>
@@ -50,7 +50,7 @@ const Leftside = (props) => {
               </Link>
             </div>
             <AiOutlineUserAdd />
-          </a>
+          </nav>
         </Widget>
         <Item>
           <span>

src/components/Posts/ArticleMenuButton.jsx

@@ -40,6 +40,8 @@ export function ArticleMenuButton({ articleText, articleId, fileType }) {
 
   async function deleteArticle(articleId) {
     const articleRef = db.collection("articles").doc(articleId);
+    const commentsRef = articleRef.collection("comments");
+
     const fileRef = fileType ? storage.refFromURL(fileType) : null;
 
     if (fileRef) {
@@ -50,6 +52,11 @@ export function ArticleMenuButton({ articleText, articleId, fileType }) {
     await articleRef.delete().then(() => {
       console.log("article deleted");
     });
+    commentsRef.get().then((querySnapshot) => {
+      querySnapshot.docs.forEach((snapshot) => {
+        snapshot.ref.delete();
+      });
+    });
   }
 
   return (

src/components/Posts/SinglePost.jsx

@@ -166,8 +166,9 @@ export function SinglePost({ article, id }) {
         <>
           <p style={{ textAlign: "left", marginLeft: "15px" }}>Comments:</p>
           <div style={{ maxHeight: "300px", overflow: "scroll" }}>
-            {comments.map((comment) => (
+            {comments.map((comment, i) => (
               <SingleComment
+                key={i}
                 comment={comment}
                 articleAuthor={article.actor.uid}
                 articleId={id}

src/components/Posts/comments/AddComment/index.jsx

@@ -1,16 +1,24 @@
 import Container from "./styledComments";
 import { Button, ButtonGroup } from "@material-ui/core";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import db, { auth } from "../../../../firebase";
+import { commentValidador } from "../../../../services/validators/commentValidations";
 
 export function AddComment({ articleId, setshowCommentBox }) {
   const [commentText, setcommentText] = useState("");
+  const form = useRef();
 
   async function addCommentToFireStoreDocument(e, articleId) {
     const user = auth.currentUser;
-    e.preventDefault();
+
+    try {
+      e.preventDefault();
+    } catch (e) {
+      console.log(e.message);
+    }
 
     const timestamp = new Date();
+
     const comment = {
       text: commentText,
       postedBy: user.displayName,
@@ -19,20 +27,49 @@ export function AddComment({ articleId, setshowCommentBox }) {
       commenterProfilePic: user.photoURL,
     };
 
+    const validator = new commentValidador(comment);
+
+    if (!validator.isValid) {
+      return window.alert(
+        "validation error during validation of ",
+        validator.currentField
+      );
+    }
+
     const articleRef = db.collection("articles").doc(articleId);
     const commentsRef = articleRef.collection("comments");
     const response = await commentsRef.add(comment);
 
     setshowCommentBox(false);
   }
 
+  const keyController = {
+    ctrl: false,
+  };
+
+  const handleMessageKeyDown = (e) => {
+    if (e.key === "Control") {
+      keyController.ctrl = true;
+    }
+    if (e.key === "Enter" && keyController.ctrl) {
+      addCommentToFireStoreDocument(e, articleId);
+    }
+  };
+
+  const handleMessageKeyUp = (e) => {
+    if (e.key === "Control") {
+      keyController.ctrl = false;
+    }
+  };
+
   return (
-    <Container>
+    <Container onKeyDown={handleMessageKeyDown} onKeyUp={handleMessageKeyUp}>
       <div className="picture-wrapper">
         <img src={auth.currentUser.photoURL} alt="commenter profile picture" />
       </div>
       <div className="comment-container">
         <form
+          ref={form}
           onSubmit={(e) => addCommentToFireStoreDocument(e, articleId)}
           className="comment-form"
         >

src/components/Posts/comments/SingleComment/styledSingleComment.jsx

@@ -13,6 +13,7 @@ const Container = styled.div`
     img {
       border-radius: 5px;
       width: 100%;
+      font-size: 0;
     }
   }
   .comment-content-container {

src/components/Welcome.jsx

@@ -10,7 +10,7 @@ import {
   Section,
   Hero,
 } from "../styles/stylesWelcome";
-import { Link, Navigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const Welcome = (props) => {
   useEffect(() => {
@@ -115,31 +115,39 @@ function parallax(e) {
 }
 
 function move(elm, event) {
-  const speed = elm.getAttribute("speed");
-  const defaultTop = Number(elm.getAttribute("top"));
-  const defaultLeft = Number(elm.getAttribute("left"));
+  try {
+    const speed = elm.getAttribute("speed");
+    const defaultTop = Number(elm.getAttribute("top"));
+    const defaultLeft = Number(elm.getAttribute("left"));
 
-  const x = (window.innerWidth - event.pageX * speed) / 100;
-  const y = (window.innerHeight - event.pageY * speed) / 100;
+    const x = (window.innerWidth - event.pageX * speed) / 100;
+    const y = (window.innerHeight - event.pageY * speed) / 100;
 
-  const yValue = defaultTop + y;
-  const xValue = defaultLeft + x;
+    const yValue = defaultTop + y;
+    const xValue = defaultLeft + x;
 
-  elm.style.setProperty("top", `${yValue}px`);
-  elm.style.setProperty("left", `${xValue}px`);
+    elm.style.setProperty("top", `${yValue}px`);
+    elm.style.setProperty("left", `${xValue}px`);
+  } catch (e) {
+    console.log(e.message);
+  }
 }
 
 function moveChain(elm, event) {
-  const speed = elm.getAttribute("speed");
-  const defaultTop = Number(elm.getAttribute("top"));
-  const defaultLeft = Number(elm.getAttribute("left"));
+  try {
+    const speed = elm.getAttribute("speed");
+    const defaultTop = Number(elm.getAttribute("top"));
+    const defaultLeft = Number(elm.getAttribute("left"));
 
-  const x = (window.innerWidth - event.pageX * speed) / 100;
-  const y = (window.innerHeight - event.pageY * speed) / 100;
+    const x = (window.innerWidth - event.pageX * speed) / 100;
+    const y = (window.innerHeight - event.pageY * speed) / 100;
 
-  const yValue = defaultTop + y;
-  const xValue = defaultLeft + x;
+    const yValue = defaultTop + y;
+    const xValue = defaultLeft + x;
 
-  elm.style.setProperty("top", `${yValue}px`);
-  elm.style.setProperty("left", `${xValue > 0 ? 0 : xValue}px`);
+    elm.style.setProperty("top", `${yValue}px`);
+    elm.style.setProperty("left", `${xValue > 0 ? 0 : xValue}px`);
+  } catch (e) {
+    console.log(e.message);
+  }
 }

src/services/validators/commentValidations.js

@@ -0,0 +1,43 @@
+export class commentValidador {
+  constructor(comment) {
+    this.currentField = null;
+    this.isValid = // case one of the validations fail this will be false
+      this.keyValidation(comment) &&
+      this.isText(comment.text) &&
+      this.isText(comment.postedBy) &&
+      this.isDate(comment.timestamp) &&
+      this.isText(comment.commenterUid) &&
+      this.isText(comment.commenterProfilePic, true) &&
+      true; // returned value case pass all validations
+  }
+
+  keyValidation(data) {
+    // check if it have all the required fields;
+    // The fields need to be changed if used in another validation;
+
+    this.currentField = data;
+    // Use this in each validation to keep track where the validation is (in case of validation error you can use this key to print out where it occurred)
+    return (
+      "text" in data &&
+      "postedBy" in data &&
+      "timestamp" in data &&
+      "commenterUid" in data &&
+      "commenterProfilePic" in data &&
+      true // returned value case pass all validations
+    );
+  }
+
+  isDate(field) {
+    this.currentField = field;
+    return typeof field === "object"; // javascript new Date() type attribute is object
+  }
+
+  isText(field, acceptNull) {
+    // have an optional second parameter, case the field can be null (in this case the image can be null (check line 10))
+    this.currentField = field;
+    if (acceptNull) {
+      return typeof field === "string" || field === null;
+    }
+    return typeof field === "string";
+  }
+}

src/styles/stylesLeftside.jsx

@@ -61,8 +61,7 @@ const Widget = styled.div`
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   padding-top: 12px;
   padding-bottom: 12px;
-  & > a {
-    text-decoration: none;
+  & > nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -71,6 +70,9 @@ const Widget = styled.div`
       background-color: rgba(0, 0, 0, 0.08);
     }
     div {
+      a {
+        text-decoration: none;
+      }
       display: flex;
       flex-direction: column;
       text-align: left;