Merge branch 'master' of https://github.com/RaspberryProgramming/portfolio

package.json

@@ -3,25 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@tensorflow/tfjs": "^3.12.0",
-    "@tensorflow/tfjs-converter": "^3.12.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.21.4",
-    "history": "^5.0.1",
+    "@tensorflow/tfjs": "^3.18.0",
+    "@tensorflow/tfjs-converter": "^3.18.0",
+    "axios": "^0.27.2",
+    "history": "^5.3.0",
     "memoize": "^0.1.1",
     "react": "^18.1.0",
-    "react-bootstrap-icons": "^1.5.0",
+    "react-bootstrap-icons": "^1.8.0",
     "react-dom": "^18.1.0",
-    "react-redux": "^7.2.5",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-redux": "^8.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
-    "redux": "^4.1.1",
-    "redux-thunk": "^2.3.0",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.1",
     "tfjs": "^0.6.0",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import "./css/App.css";
 import Navigation from './Navigation';
 import Github from './Github';
@@ -15,14 +15,15 @@ const App = (props) => {
       <div className="App">
         <Navigation />
         <div className="app-content">
-          <Switch>
-            <Route path="/" exact component={Intro} />
-            <Route path="/github" render={(props) => <Github {...props} />} />
-            <Route path="/about" component={About} />
-            <Route path="/articles" component={Articles} />
-            <Route path="/bai" component={Bai} />
-            <Route path="/articleEditor" component={ArticleEditor} />
-          </Switch>
+          <Routes>
+            <Route path="/" exact element={<Intro />} />
+            <Route path="/github" element={<Github />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/articles" element={<Articles />} />
+            <Route path="/articles/:id" element={<Articles />} />
+            <Route path="/bai" element={<Bai />} />
+            <Route path="/articleEditor" element={<ArticleEditor />} />
+          </Routes>
         </div>
       </div>
     </BrowserRouter>

src/components/Article.js

@@ -3,6 +3,7 @@ import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
+    
     const [show, setShow] = useState("");
     const [currArticle, setCurrArticle] = useState("");
 
@@ -48,7 +49,7 @@ const Article = ({article}) => {
         let loc = 0; // Stores the current location in output that we're working with
         let tmp;
         let i = 0;
-        console.log(text);
+
         while (i < text.length) { // Iterate through the entire text string
             if (text.slice(i, i+4) === "http"){ // slice from i to 4 chars plus and check for http
                 let x = i; // store i in x so the location is not modified
@@ -125,7 +126,7 @@ const Article = ({article}) => {
 
         for (let i = 0; i < text.length; i++) { // Iterate through input
             if (delimiters.indexOf(text[i]) >= 0) { // Detect Code Delimiter
-                console.log(text[i])
+
                 if (tick) { // Close the code section
                     output[++ind] = ""
                     tick = false;

src/components/Articles.js

@@ -4,8 +4,11 @@ import './css/Articles.css';
 import Article from './Article';
 import Listing from './subcomponents/Listing';
 import { getArticles } from '../actions';
-import { Route } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
+const withParams = (Component) => {
+  return ()=><Component params={useParams()} />;
+}
 
 class Articles extends React.Component {
   /**
@@ -39,9 +42,9 @@ class Articles extends React.Component {
     );
   }
 
-  article(match) {
+  article(articleId) {
     if (this.props.articles.length > 0) {
-      return <Article article={this.props.articles[match.params.id]}/>;
+      return <Article article={this.props.articles[articleId]}/>;
     } else {
       return <div></div>;
     }
@@ -51,7 +54,7 @@ class Articles extends React.Component {
     
     return (
       <div className="Articles">
-          <Route path="/articles/:id" render={({match})=>{return this.article(match)}} />
+          {this.props.params.id ? this.article(this.props.params.id):''}
           <h1>Articles</h1>
           {this.renderArticles()}
       </div>
@@ -63,5 +66,5 @@ const mapStateToProps = (state) => {
   return { articles: state.articles.articles};
 }
 
-export default connect(mapStateToProps, { getArticles })(Articles);
+export default withParams(connect(mapStateToProps, { getArticles })(Articles));
 

src/components/css/Modal.css

@@ -54,7 +54,30 @@
     height: fit-content;
 }
 
-.modal input.large {
+.modal textarea {
+    display:flex;
+    text-align: flex-start;
+    justify-content: flex-start;
+}
+
+.modal textarea.large {
     height: 10rem;
     width: 20rem;
 }
+
+@media only screen and (max-width: 600px) {
+
+    .modal .box {
+        border: 2px solid #544545;
+        border-radius: 10px;
+        background-color: white;
+        padding: 25px;
+        max-width: 80vw;
+    }
+
+    .modal textarea.large {
+        height: 15rem;
+        width: auto;
+    }
+
+}

src/components/subcomponents/ContactModal.js

@@ -26,7 +26,7 @@ const ContactModal = props => {
         // Render the contact modal form
         return (
         <form onSubmit={(e)=>onSubmit(e)}>
-            <input className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
+            <textarea className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
             <button>Open In Email Editor</button>
         </form>
         );

src/components/subcomponents/GithubRepos.js

@@ -89,7 +89,7 @@ class GithubRepos extends React.Component {
         let pages = this.roundUp(repos.length/this.perPage);
 
         let sortedRepos = this.objArrayBubbleSort([...repos], this.props.sortedValue);
-        console.log(sortedRepos);
+
         const render = sortedRepos.slice(0, this.props.page*this.perPage).map((repo) =>{
           let updated = (new Date (repo.updated_at)).toLocaleString();
           let created = (new Date (repo.created_at)).toLocaleString();