From 3d15b9d4987bf25cc8cf9bf16b49840fa96dc15d Mon Sep 17 00:00:00 2001
From: JeremyPFrank <156245430+JPFrankCS@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:33:49 -0700
Subject: [PATCH 1/2] Added Previous Project button to Nav Bar

Goal is to improve ease of navigation to the users previous project once
they have annotated multiple data clips and want to navigate to the full
list of data clips in this project. Quality of life improvement to
reduce the number of clicks needed to return to the full list of cilps
for the most recently worked on project. If user clicks button and has
no previous project, an error message appears.
---
 audino/frontend/package.json                  |  2 +-
 audino/frontend/src/app.js                    |  4 +++-
 .../src/components/annotate/labelButtons.js   |  4 +++-
 audino/frontend/src/containers/navbar.js      |  9 +++++++-
 audino/frontend/src/pages/backError.js        | 23 +++++++++++++++++++
 audino/frontend/src/pages/data.js             |  3 ++-
 6 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 audino/frontend/src/pages/backError.js

diff --git a/audino/frontend/package.json b/audino/frontend/package.json
index c1c631d6..b769712e 100644
--- a/audino/frontend/package.json
+++ b/audino/frontend/package.json
@@ -66,7 +66,7 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.34.3",
     "prettier": "^2.7.1",
     "pretty-quick": "^2.0.1"
   },
diff --git a/audino/frontend/src/app.js b/audino/frontend/src/app.js
index 23e184a9..17a3e2ba 100644
--- a/audino/frontend/src/app.js
+++ b/audino/frontend/src/app.js
@@ -17,6 +17,7 @@ import {
   Data,
   CreateUser
 } from './pages';
+import BackError from './pages/backError'
 import NavBar from './containers/navbar';
 
 const history = createBrowserHistory();
@@ -149,6 +150,7 @@ class App extends React.Component {
               />
               <PublicRoute exact path="/newUser" component={CreateUser} />
               <Route path="/empty" component={null} key="empty" />
+              <PrivateRoute exact path="/projects/NULL/data" component={BackError} />
               <PrivateRoute exact path="/admin" component={Admin} />
               <PrivateRoute exact path="/dashboard" component={Dashboard} />
               <PrivateRoute exact path="/projects/:id/labels" component={Labels} />
@@ -163,7 +165,7 @@ class App extends React.Component {
                 <Error message="Page not found!" />
               </Route>
             </Switch>
-          </Suspense>
+          </Suspense> 
         </div>
       </Router>
     );
diff --git a/audino/frontend/src/components/annotate/labelButtons.js b/audino/frontend/src/components/annotate/labelButtons.js
index ce8dfc24..6fa735ba 100644
--- a/audino/frontend/src/components/annotate/labelButtons.js
+++ b/audino/frontend/src/components/annotate/labelButtons.js
@@ -20,7 +20,7 @@ const LabelButton = props => {
     setIsNoAudioBtnClicked(true);
     const waveSurfer = state.wavesurfer;
     const result = await waveSurfer.addRegion({id:"no audio", start:0, end:waveSurfer.getDuration()});
-    console.log("region added");
+    console.log("region added"); 
     console.log(annotate);
 
     const noAudioLabelKey = Object.keys(annotate.state.labels)[0];
@@ -32,6 +32,8 @@ const LabelButton = props => {
     console.log("no audio clicked");
     handleAllSegmentSave(annotate);
     
+    //window.location.replace('/dashboard');
+    //<Redirect to="/dashboard" /> // TODO - enter a location
     //document.getElementsByClassName("next")[0].getElementsByTagName('button')[0].click();
 
   }
diff --git a/audino/frontend/src/containers/navbar.js b/audino/frontend/src/containers/navbar.js
index 314488cb..47008d60 100644
--- a/audino/frontend/src/containers/navbar.js
+++ b/audino/frontend/src/containers/navbar.js
@@ -33,7 +33,9 @@ class NavBar extends React.Component {
     const { store } = this.props;
     const isUserLoggedIn = store.get('isUserLoggedIn');
     const isAdmin = store.get('isAdmin');
+    const projectId = localStorage.getItem('projectId'); // Retrieve projectId from local storage
 
+    
     return (
       <nav className="navbar navbar-expand-md bg-dark navbar-dark">
         <Link to="/" className="navbar-brand">
@@ -48,7 +50,7 @@ class NavBar extends React.Component {
         >
           <span className="navbar-toggler-icon" />
         </button>
-
+  
         {isUserLoggedIn && (
           <div className="collapse navbar-collapse" id="collapsibleNavbar">
             <ul className="navbar-nav">
@@ -57,6 +59,11 @@ class NavBar extends React.Component {
                   Dashboard
                 </Link>
               </li>
+              <li className="nav-item"> 
+                <Link className="nav-link" to={`/projects/${projectId}/data`}> 
+                  Previous Project
+                </Link>
+              </li>
               {isAdmin && (
                 <li className="nav-item">
                   <Link className="nav-link" to="/admin">
diff --git a/audino/frontend/src/pages/backError.js b/audino/frontend/src/pages/backError.js
new file mode 100644
index 00000000..a44fc9e3
--- /dev/null
+++ b/audino/frontend/src/pages/backError.js
@@ -0,0 +1,23 @@
+// page for when project is NULL and back button is selected
+import React from 'react';
+
+const BackError = () => {
+  return (
+    <div style={styles.container}>
+      <h1>Please Select a Project Before Attempting to Return to Previous Project</h1>
+    </div>
+  );
+};
+
+//Text allignment style
+const styles = {
+    container: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      textAlign: 'center'
+    }
+  };
+
+export default BackError;
\ No newline at end of file
diff --git a/audino/frontend/src/pages/data.js b/audino/frontend/src/pages/data.js
index e53bdeed..87ebee8e 100644
--- a/audino/frontend/src/pages/data.js
+++ b/audino/frontend/src/pages/data.js
@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom';
 
 import Loader from '../components/loader';
 
-const datas = [];
+const datas = []; 
 
 class Data extends React.Component {
   constructor(props) {
@@ -43,6 +43,7 @@ class Data extends React.Component {
   componentDidMount() {
     this.setState({ isDataLoading: true });
     this.getData();
+    localStorage.setItem('projectId', this.state.projectId); // Store projectId in local storage
     document.body.addEventListener('scroll', this.trackScrolling);
     document.body.addEventListener('scroll', () => {});
   }

From ad36c8a9ddb0596232183bea88cd909d2c0f814a Mon Sep 17 00:00:00 2001
From: JeremyPFrank <156245430+JPFrankCS@users.noreply.github.com>
Date: Tue, 25 Jun 2024 15:50:23 -0700
Subject: [PATCH 2/2] bug fix - confident in your annotations button

Confident in your annotations? button previously could not be toggled
back to the non-confident state. It can now be toggled back and forth
and moves the clip in and out of the marked for review file group. Also
changed the text on the button to improve clarity as to what each button
press indicates.
---
 .../src/components/annotate/toggleYesNo.js    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/audino/frontend/src/components/annotate/toggleYesNo.js b/audino/frontend/src/components/annotate/toggleYesNo.js
index 727f3a58..a18507fa 100644
--- a/audino/frontend/src/components/annotate/toggleYesNo.js
+++ b/audino/frontend/src/components/annotate/toggleYesNo.js
@@ -18,18 +18,18 @@ class ToggleYesNo extends React.Component {
 
   componentDidMount() {}
 
-  handleClick(type) {
-    let newState = null;
-    if (type === 'yes') newState = { yes: true };
-    else newState = { yes: false };
-    this.setState(newState);
+  handleClick() {
+    
+    const newState = !this.state.yes;  
+    this.setState({ yes: newState });  
+    
     this.annotate.setState({ isMarkedForReviewLoading: true });
 
     axios({
       method: 'patch',
       url: this.dataUrl,
       data: {
-        is_marked_for_review: !newState.yes
+        is_marked_for_review: newState
       }
     })
       .then(response => {
@@ -53,16 +53,16 @@ class ToggleYesNo extends React.Component {
   render() {
     const { yes } = this.state;
     let msg = ': ';
-    if (yes) msg = ': Yes';
-    else msg = ': No';
+    if (yes) msg = 'Click Here When Confident.';
+    else msg = 'Nevermind! I\'m Unsure.';
     return (
       <div className="row justify-content-center my-4">
         <div className="col-4">
           <Button
-            text={`Feeling Confident In \n your labels?${msg}`}
+            text={`${msg}`}
             size="lg"
             type={yes ? 'primary' : 'danger'}
-            onClick={() => this.handleClick(yes ? 'No' : 'Yes')}
+            onClick={() => this.handleClick()}
           />
         </div>
       </div>