Added newline functionality to article

src/components/Article.js

@@ -7,32 +7,38 @@ const Article = ({article}) => {
     const [currArticle, setCurrArticle] = useState("");
 
     useEffect(()=>{
-        if (currArticle === ""){
-            console.log("A");
+        if (currArticle === ""){ // If no articles have been opened
             if (show === "") {
+                // Set the current article and initiate the open animation
                 setCurrArticle(article);
                 setShow("open");
+                
+                // Once the animation runs, open the entire article
                 setTimeout(() =>{
                     setShow("show");
                 }, 1024)
-            } else {
-                setShow("");
             }
-        } else if (currArticle !== article) {
-            console.log("B");
+
+        } else if (currArticle !== article) { // If we've changed articles
+            // Change currArticle to the actual current article and initiate close animation
             setCurrArticle(article);
             setShow("close");
+
+            // Step through the close animation, open animation, and fully opening the article
             setTimeout(()=>{
                 setShow("");
+
                 setTimeout(()=>{
+
                     setShow("open");
+
                     setTimeout(() =>{
                         setShow("show");
                     }, 1024);
                 }, 1024);
             }, 24);
         }
-    });
+    }, [currArticle, article, show]);
     
     let linkProcessor = (text) => {
         /**
@@ -67,6 +73,42 @@ const Article = ({article}) => {
         return output;
     };
 
+    let newLineProcessor = (text) => {
+        /**
+         * Given some text, processes and returns jsx with line breaks
+         */
+        let tmp;
+        let output = [""]; // Stores all text in a list
+        let loc = 0; // Stores the current location in output that we're working with
+
+        for (let i = 0; i < text.length; i++) { // Iterate through the entire text string
+            if (!React.isValidElement(text[i])) {
+                tmp = [""];
+                loc = 0;
+                for (let j = 0; j < text[i].length; j++){
+                    
+                    if (text[i].slice(j, j+1) === "\n"){ // slice from i to 4 chars plus and check for http
+                        if (tmp[loc] !== "") { // if the current output location isn't empty, increment loc
+                            loc++;
+                        }
+                        tmp[loc] = <br key={i+j}/>;
+                        tmp[++loc] = "";
+
+                    } else {
+                        // Append current char to output
+                        tmp[loc] += text[i][j];
+
+                    }
+                }
+                tmp[++loc] = "";
+            }
+            output.push(tmp)
+        }
+ 
+         // Return the output
+         return output;
+    };
+
     let articleFormatter = (text) => {
         let output = []; // Used to store separate formatted text
         let type = []; // Parallel to output list to signify format type
@@ -114,6 +156,7 @@ const Article = ({article}) => {
         return [...output.keys()].map((i)=>{ // Format text and return as jsx
             
             let text = linkProcessor(output[i]); // Process links
+            text = newLineProcessor(text);
             
             if (type[i] === 0){ // Return default text type