Fixed Missing Code from merge

src/components/App.js

@@ -4,6 +4,7 @@ import "./css/App.css";
 import Navigation from './Navigation';
 import Github from './Github';
 import Articles from './Articles';
+import ArticleEditor from './ArticleEditor';
 import About from './About';
 import Intro from './Intro';
 
@@ -18,6 +19,7 @@ const App = (props) => {
             <Route path="/github" render={(props) => <Github {...props} />} />
             <Route path="/about" component={About} />
             <Route path="/articles" component={Articles} />
+            <Route path="/articleEditor" component={ArticleEditor} />
           </Switch>
         </div>
       </div>

src/components/Article.js

@@ -1,13 +1,49 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
+    const [show, setShow] = useState("");
+    const [currArticle, setCurrArticle] = useState("");
+
+    useEffect(()=>{
+        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 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) => {
         /**
          * Given some text, processes and returns jsx with any link represented as an anchor
          */
-
         let output = [""]; // Stores all text in a list
         let loc = 0; // Stores the current location in output that we're working with
         let tmp;
@@ -127,6 +163,7 @@ const Article = ({article}) => {
             
             let text = linkProcessor(output[i]); // Process links
             text = newLineProcessor(text);
+            
             if (type[i] === 0){ // Return default text type
 
                 return <div key={i}>{text}</div>;
@@ -152,7 +189,7 @@ const Article = ({article}) => {
     };
 
     return (
-        <div className="article">
+        <div className={"article " + show}>
             <Theater
             title={article.title}
             description={article.desc}

src/components/ArticleEditor.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import Article from './Article';
+import "./css/ArticleEditor.css";
+
+const ArticleEditor = (props) => {
+    const [content, setContent] = useState("Hello World");
+
+    let article = {
+        "id":"0",
+        "title": "Article Editor",
+        "desc":"This is a place to edit articles",
+        "contents": content
+    };
+
+    let copyToClipboard = () => {
+        navigator.clipboard.writeText(content).then(function() {
+        console.log('Async: Copying to clipboard was successful!');
+        }, function(err) {
+            console.error('Async: Could not copy text: ', err);
+        });
+    };
+
+    return (
+    <div className="ArticleEditor">
+        <div id="toolbar" className="toolbar">
+            <div className="btn" onClick={copyToClipboard()}>Copy to Clipboard</div>
+        </div>
+        <Article article={article}/>
+        <textarea onInput={e=>{setContent(e.target.value)}}></textarea>
+    </div>
+    );
+};
+
+export default ArticleEditor;

src/components/css/ArticleEditor.css

@@ -0,0 +1,42 @@
+.ArticleEditor textarea {
+    width:100%;
+    height: 35vh;
+    border-style: solid;
+    border-color: lightgray;
+    border-radius: 2px;
+    border-width: 2px;
+    padding: 0.4em 0.4em 0.4em 0;
+    text-align: left;
+}
+
+.ArticleEditor .toolbar {
+    width: 100%;
+    height: 56px;
+    display: flex;
+}
+
+.ArticleEditor .toolbar .btn {
+    color: white;
+    background-color: darkgreen;
+    text-align: center;
+    align-items:center;
+    justify-content: center;
+    display: flex;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+.ArticleEditor .toolbar .btn:hover{
+    background-color: #005400
+}
+
+.ArticleEditor .article .open {
+    max-height:100vh;
+}
+
+.ArticleEditor .article .Close {
+    max-height:100vh;
+}
+
+.ArticleEditor .article {
+    max-height:100vh;
+}

src/components/css/Articles.css

@@ -3,6 +3,24 @@
     align-items: center;
     display: flex;
     flex-direction: column;
+    max-height:0;
+    overflow: hidden;
+    transition: max-height 1s ease;
+
+}
+
+.article.open {
+    max-height:100vh;
+    transition: max-height 1s ease;
+}
+
+.article.close {
+    max-height:100vh;
+}
+
+.article.show {
+    max-height:none;
+
 }
 
 .article .content {

src/components/css/Theater.css

@@ -15,7 +15,7 @@
 
 .theater-bg {
     
-    height: 100%;
+    height: inherit;
     width:100%;
     background-size: cover;
     background-image: url('../../img/background.webp');

src/components/subcomponents/Listing.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import '../css/Listing.css';
 
 const Listing = (props) => {
@@ -11,12 +12,12 @@ const Listing = (props) => {
      */
     return (
         <div className="listing">
-            <a href={props.link}>
+            <Link to={props.link}>
                 <div className="title">{props.title}</div>
                 <div className="content">
                     {props.children}
                 </div>
-            </a>
+            </Link>
         </div>
     );    
 };