Merge pull request #36 from RomanBachaloSigmaSoftware/master

Maintenance

app/envelope.py

@@ -103,6 +103,6 @@ def download(args, session):
         (dirname, filename) = os.path.split(file_path)
         return send_from_directory(
             directory=dirname,
-            filename=filename,
+            path=filename,
             as_attachment=True
         )

package.json

@@ -3,28 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.1.3",
-    "bootstrap": "^4.6.0",
-    "html-react-parser": "^3.0.4",
-    "i18next": "^22.0.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "axios": "^1.4.0",
+    "bootstrap": "^5.3.0",
+    "history": "^5.3.0",
+    "html-react-parser": "^4.0.0",
+    "i18next": "^23.1.0",
     "i18next-xhr-backend": "^3.2.2",
-    "jquery": "3.6.1",
+    "jquery": "3.7.0",
     "moment": "^2.29.4",
-    "node-sass": "^7.0.3",
-    "popper.js": "^1.16.1",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.0",
-    "react-dom": "^17.0.2",
+    "node-sass": "^9.0.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.15.6",
+    "react-i18next": "^13.0.0",
     "react-inline-script": "^1.2.0",
-    "react-markdown": "^8.0.0",
-    "react-router-dom": "^5.1.2",
+    "react-markdown": "^8.0.7",
+    "react-router-dom": "^6.13.0",
     "react-safe": "^1.3.0",
-    "react-scripts": "^5.0.0"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -54,4 +55,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

requirements.txt

@@ -1,23 +1,23 @@
-certifi==2022.12.7
+certifi==2023.5.7
 cffi==1.15.1
-chardet==5.0.0
-Click==8.0.4
-cryptography==38.0.3
-docusign-esign==3.18.1
-Flask==2.0.3
-Flask-Session==0.4.0
-flask-wtf==0.14.2
+chardet==5.1.0
+Click==8.1.3
+cryptography==41.0.1
+docusign-esign==3.23.0
+Flask==2.3.2
+Flask-Session==0.5.0
+flask-wtf==1.1.1
 flask-cors==3.0.10
 idna==3.4
-itsdangerous==2.1.0
-Jinja2==3.0.3
-MarkupSafe==2.1.0
+itsdangerous==2.1.2
+Jinja2==3.1.2
+MarkupSafe==2.1.3
 nose==1.3.7
 pycparser==2.21
-PyJWT==2.6.0
+PyJWT==2.7.0
 python-dateutil==2.8.2
-python-dotenv==0.21.0
-requests==2.28.1
+python-dotenv==1.0.0
+requests==2.31.0
 six>=1.16.0
-urllib3>=1.26.12
-Werkzeug==2.0.3
+urllib3>=2.0.3
+Werkzeug==2.3.6

src/App.js

@@ -1,6 +1,7 @@
 import React, { Suspense, useState, useEffect } from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import Layout from "./components/Layout";
+import { Logout } from "./components/Logout";
 import { About } from "./features/About";
 import { History } from "./features/History";
 import { Home } from "./features/Home";
@@ -10,7 +11,6 @@ import { RequestExtracurricularActivityPage } from "./features/RequestExtracurri
 import { SigningComplete } from "./components/SigningComplete.js";
 import { logOut, getStatus } from "./api/auth";
 import { Callback } from "./components/Callback";
-import history from "./api/history";
 import "./assets/scss/main.scss";
 import LoggedUserContext from "./contexts/logged-user/logged-user.context";
 
@@ -28,30 +28,27 @@ const App = () => {
 
   async function handleLogOut() {
     await logOut();
-    history.push("/");
     getStatus(setLogged, setAuthType);
   }
 
   const routes = (
-    <Switch>
-      <Route path="/history" component={History} />
-      <Route path="/about" component={About} />
+    <Routes>
+      <Route path="/history" element={<History/>} />
+      <Route path="/about" element={<About/>} />
       <Route
         path="/requestMajorMinorChange"
-        component={RequestMajorMinorChangePage}
+        element={<RequestMajorMinorChangePage/>}
       />
-      <Route path="/requestTranscript" component={RequestTranscriptPage} />
+      <Route path="/requestTranscript" element={<RequestTranscriptPage/>} />
       <Route
         path="/requestExtracurricularActivity"
-        component={RequestExtracurricularActivityPage}
+        element={<RequestExtracurricularActivityPage/>}
       />
-      <Route path="/" exact component={Home} />
-      <Route path="/signing_complete" component={SigningComplete} />
-      <Route path="/callback" component={Callback}/>
-      <Route path="/logout" render={() => {
-        handleLogOut();
-      }} />
-    </Switch>
+      <Route path="/" exact element={<Home/>} />
+      <Route path="/signing_complete" element={<SigningComplete/>} />
+      <Route path="/callback" element={<Callback/>}/>
+      <Route path="/logout" element={<Logout handleLogOut={handleLogOut}/>} />
+    </Routes>
   );
 
   return (

src/components/Header.js

@@ -27,8 +27,8 @@ export const Header = () => {
           <button
             className="navbar-toggler collapsed"
             type="button"
-            data-toggle="collapse"
-            data-target="#navbarNav"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
             aria-controls="navbarNav"
             aria-expanded="false"
             aria-label="Toggle navigation"

src/components/Logout.js

@@ -0,0 +1,11 @@
+import React, { useEffect } from "react";
+import { Navigate } from "react-router-dom";
+
+export const Logout = ({ handleLogOut }) => {
+    useEffect(() => {
+        handleLogOut();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return <Navigate to="/"/>
+}

src/features/History/ListItem.js

@@ -15,16 +15,17 @@ export const ListItem = ({ item, onClick }) => {
           <button
             className="dropdown-toggle"
             type="button"
-            id="options3"
-            data-toggle="dropdown"
+            id="dropdownMenuButton"
+            data-bs-toggle="dropdown"
+            data-bs-target="#dropdown"
             aria-haspopup="true"
             aria-expanded="false"
           >
             {t("OptionsButton")}
           </button>
           <div
             className="dropdown-menu dropdown-menu-right"
-            aria-labelledby="options3"
+            aria-labelledby="dropdownMenuButton"
           >
             <a href="#/"
               className="dropdown-item"

src/features/History/index.js

@@ -58,10 +58,10 @@ export const History = () => {
     );
   }
   return (
-    <section className="container-fluid content-section h-100">
+    <section className="container-fluid content-section">
       <h2 className="h2">{t("SubmissionsStatus")}</h2>
       <div className="row">
-        <div className="col-lg">
+        <div className="col-lg-6">
           <div className="table-holder">
             <table className="table table-striped">
               <thead>

src/features/Home/index.js

@@ -117,9 +117,11 @@ export const Home = () => {
                 </span>
                 <div className="card-info-button-holder">
                   { logged ?
-                    <button className="btn btn-danger" onClick={(event) => handlePayment(event, "/requestExtracurricularActivity")}>
-                      {t("Card3.Button")}
-                    </button>
+                    <Link to="/requestExtracurricularActivity">
+                      <button className="btn btn-danger">
+                        {t("Card3.Button")}
+                      </button>
+                    </Link>
                   :
                     <button className="btn btn-danger" 
                     onClick={(event) => handleClick(event, "/requestExtracurricularActivity")}>

src/features/RequestExtracurricularActivity/components/ApiDescription.js

@@ -1,9 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import parse from "html-react-parser";
+import { Collapse } from 'react-bootstrap'
 
 export const ApiDescription = () => {
   const { t } = useTranslation("RequestExtracurricularActivity");
+  const [open, setOpen] = React.useState(false);
+
   return (
     <div className="col-lg-6 pt-5 pb-4">
       <div id="accordion">
@@ -16,20 +19,22 @@ export const ApiDescription = () => {
                 data-target="#collapseOne"
                 aria-expanded="false"
                 aria-controls="collapseOne"
+                onClick={() => {setOpen(!open)}}
               >
                 {t("ApiDecription.SeeMore")}
               </button>
             </h5>
           </div>
           <div
             id="collapseOne"
-            className="collapse"
             aria-labelledby="headingOne"
             data-parent="#accordion"
           >
-            <div className="card-body">
-              {parse(t("ApiDecription.CodeFlow"))}
-            </div>
+            <Collapse in={open}>
+              <div className="card-body">
+                {parse(t("ApiDecription.CodeFlow"))}
+              </div>
+            </Collapse>
           </div>
         </div>
       </div>

src/features/RequestMajorMinorChange/components/ApiDescription.js

@@ -1,9 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import parse from "html-react-parser";
+import { Collapse } from 'react-bootstrap'
 
 export const ApiDescription = () => {
   const { t } = useTranslation("RequestMajorMinor");
+  const [open, setOpen] = React.useState(false);
+
   return (
     <div className="col-lg-6 pt-5 pb-4">
       <div id="accordion">
@@ -16,20 +19,22 @@ export const ApiDescription = () => {
                 data-target="#collapseOne"
                 aria-expanded="false"
                 aria-controls="collapseOne"
+                onClick={() => {setOpen(!open)}}
               >
                 {t("ApiDecription.SeeMore")}
               </button>
             </h5>
           </div>
           <div
             id="collapseOne"
-            className="collapse"
             aria-labelledby="headingOne"
             data-parent="#accordion"
           >
-            <div className="card-body">
-              {parse(t("ApiDecription.CodeFlow"))}
-            </div>
+            <Collapse in={open}>
+              <div className="card-body">
+                {parse(t("ApiDecription.CodeFlow"))}
+              </div>
+            </Collapse>
           </div>
         </div>
       </div>

src/features/RequestTranscript/components/ApiDescription.js

@@ -1,9 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import parse from "html-react-parser";
+import { Collapse } from 'react-bootstrap'
 
 export const ApiDescription = () => {
   const { t } = useTranslation("RequestTranscript");
+  const [open, setOpen] = React.useState(false);
+
   return (
     <div className="col-lg-6 pt-5 pb-4">
       <div id="accordion">
@@ -16,20 +19,22 @@ export const ApiDescription = () => {
                 data-target="#collapseOne"
                 aria-expanded="false"
                 aria-controls="collapseOne"
+                onClick={() => {setOpen(!open)}}
               >
                 {t("ApiDecription.SeeMore")}
               </button>
             </h5>
           </div>
           <div
             id="collapseOne"
-            className="collapse"
             aria-labelledby="headingOne"
             data-parent="#accordion"
           >
-            <div className="card-body">
-              {parse(t("ApiDecription.CodeFlow"))}
-            </div>
+            <Collapse in={open}>
+              <div className="card-body">
+                {parse(t("ApiDecription.CodeFlow"))}
+              </div>
+            </Collapse>
           </div>
         </div>
       </div>

src/index.js

@@ -1,15 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Router } from "react-router-dom";
+import { BrowserRouter, Router } from "react-router-dom";
 import App from "./App";
 import history from "./api/history";
 import "./i18n";
+import "@popperjs/core";
 import "bootstrap/dist/js/bootstrap.js";
 
+const container = document.getElementById("root");
+
+const root = ReactDOM.createRoot(container);
+
 const app = (
-  <Router history={history}>
+  <BrowserRouter history={history}>
     <App />
-  </Router>
+  </BrowserRouter>
 );
 
-ReactDOM.render(app, document.getElementById("root"));
+root.render(app);