WIP : Modernizing Client

client/package.json

@@ -22,30 +22,27 @@
     }
   ],
   "private": true,
-  "proxy": "http://0.0.0.0:$PORT/",
+  "proxy": "http://127.0.0.1:3001/",
   "license": "GNU GPLv3",
   "dependencies": {
     "axios": "^0.16.2",
     "dompurify": "^1.0.8",
-    "logrocket": "^0.6.19",
     "moment": "^2.22.2",
-    "node-pre-gyp": "^0.17.0",
-    "node-sass": "npm:sass",
-    "nuka-carousel": "^4.4.5",
-    "react": "^16.6.0",
-    "react-datetime-picker": "^2.0.0",
-    "react-dom": "^16.6.0",
-    "react-flippy": "^0.1.2",
-    "react-quill": "^1.3.3",
-    "react-router-dom": "^4.3.1",
-    "react-router-hash-link": "^1.2.1",
-    "react-scripts": "2.0.3",
-    "reactstrap": "^7.0.2",
-    "sass": "^1.62.0",
-    "styled-components": "^4.1.3"
+    "nuka-carousel": "4.8.0",
+    "react": "17.0.0",
+    "react-datetime-picker": "3.3.0",
+    "react-dom": "17.0.0",
+    "react-flippy": "^1.1.0",
+    "react-quill": "1.3.5",
+    "react-router-dom": "5.3.4",
+    "react-router-hash-link": "2.4.3",
+    "react-scripts": "4.0.0",
+    "reactstrap": "8.9.0",
+    "sass": "^1.63.3",
+    "styled-components": "5.3.3"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "react-scripts start",
     "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

client/src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
 import axios from "axios";
+import GithubIcon from "./img/github.png";
 
 // Pages
 import Home from "./pages/Home";
@@ -190,7 +191,7 @@ class App extends Component {
           >
             <img
               className="github-btn__logo"
-              src={require("./img/github.png")}
+              src={GithubIcon}
               alt="github logo"
             />
           </a>{" "}

client/src/index.js

@@ -1,9 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import './css/Global.scss';
+import "./css/Global.scss";
 import "./css/balloon.min.css";
-import LogRocket from 'logrocket';
 
 ReactDOM.render(<App />, document.querySelector("#root"));
-LogRocket.init('d6pvgs/zephyr-node');

client/src/pages/Flashcards.js

@@ -717,12 +717,11 @@ class PlayCards extends React.Component {
         <Carousel className="carousel">
           {this.state.flashcards.map((item) => {
             return (
-              <main className="carousel__items">
+              <main className="carousel__items" key={item.id}>
                 <div
                 // style={{border: "5px dotted limeGreen", cursor: "none !important"}}
                 />
                 <Flippy
-                  key={item.id}
                   flipOnHover={false}
                   flipOnClick={true}
                   flipDirection="horizontal"