From 6c9c926cd4c434ffd88848eb76ecccb21df0ed7b Mon Sep 17 00:00:00 2001
From: maltheism <16293415+maltheism@users.noreply.github.com>
Date: Sun, 10 Apr 2022 21:06:31 -0400
Subject: [PATCH] updates

---
 .eslintrc.json                     |   2 +-
 package.json                       |  48 +++++-----
 public/electron.js                 |   4 +-
 src/ViewManager.js                 |  20 ++--
 src/index.js                       |   6 +-
 src/jsx/Configuration.js           | 143 ++++++++++++++---------------
 src/jsx/elements/authentication.js |  52 +++++++----
 7 files changed, 143 insertions(+), 132 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 0d1b34b..1b6faac 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": [
     "react"
   ],
diff --git a/package.json b/package.json
index eb602c9..7581141 100644
--- a/package.json
+++ b/package.json
@@ -3,40 +3,38 @@
   "description": "EEG/iEEG to BIDS format Wizard",
   "version": "1.0.5",
   "dependencies": {
-    "@electron/remote": "^1.1.0",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "electron-log": "^4.3.5",
-    "electron-store": "^8.0.0",
-    "keytar": "^7.7.0",
-    "papaparse": "^5.3.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
+    "@electron/remote": "^2.0.8",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "electron-log": "^4.4.6",
+    "electron-store": "^8.0.1",
+    "keytar": "^7.9.0",
+    "papaparse": "^5.3.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
     "react-color": "^2.19.3",
-    "react-datepicker": "^4.1.1",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.2",
-    "react-switch": "^6.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.0",
     "react-tooltip": "^4.2.21",
-    "socket.io-client": "^4.1.2"
+    "socket.io-client": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/eslint-parser": "^7.14.4",
-    "concurrently": "^6.2.0",
+    "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.17.0",
+    "concurrently": "^7.1.0",
     "cross-env": "^7.0.3",
-    "electron": "^13.0.1",
-    "electron-builder": "^22.11.4",
+    "electron": "^18.0.3",
+    "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.2.0",
-    "eslint": "^7.27.0",
+    "eslint": "^8.13.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx": "^0.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
-    "lint-staged": "^11.0.0",
-    "wait-on": "^6.0.0"
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "lint-staged": "^12.3.7",
+    "wait-on": "^6.0.1"
   },
   "scripts": {
     "rebuild": "rebuild --runtime=electron --target=11.2.1",
diff --git a/public/electron.js b/public/electron.js
index 3d79719..db45d85 100644
--- a/public/electron.js
+++ b/public/electron.js
@@ -52,9 +52,9 @@ let mainWindow;
  */
 const createMainWindow = () => {
   const startUrl = process.env.DEV ?
-    'http://localhost:3000?app' :
+    'http://localhost:3000/app' :
     `${url.pathToFileURL(path.join(
-        __dirname, '/../build/index.html')).href}?app`;
+        __dirname, '/../build/index.html')).href}/app`;
   mainWindow = new BrowserWindow({
     show: false,
     icon,
diff --git a/src/ViewManager.js b/src/ViewManager.js
index 893c1b8..c6547b6 100644
--- a/src/ViewManager.js
+++ b/src/ViewManager.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import {BrowserRouter as Router, Route} from 'react-router-dom';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from 'react-router-dom';
 
 // Components
 import App from './App';
@@ -16,17 +20,21 @@ const ViewManager = (props) => {
    * @return {JSX.Element} - React markup for component.
    */
   return (
-    <Router>
+    <BrowserRouter>
       <div>
-        <Route path='/' component={ViewManager.View}/>
+        <Routes>
+          {/*<Route path='/' element={ViewManager.View}/>*/}
+          <Route path='/app' exact element={<App/>}/>
+          <Route path='/settings' element={<Settings/>}/>
+        </Routes>
       </div>
-    </Router>
+    </BrowserRouter>
   );
 };
 ViewManager.views = () => {
   return {
-    app: <App/>,
-    settings: <Settings/>,
+    app: <App />,
+    settings: <Settings />,
   };
 };
 ViewManager.View = (props) => {
diff --git a/src/index.js b/src/index.js
index dcba493..c0a3b89 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import './css/index.css';
-import App from './App';
 import ViewManager from './ViewManager';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<ViewManager/>, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<ViewManager/>);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/jsx/Configuration.js b/src/jsx/Configuration.js
index cf3b6b1..5ac25e2 100644
--- a/src/jsx/Configuration.js
+++ b/src/jsx/Configuration.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import '../css/Configuration.css';
 import '../../node_modules/@fortawesome/fontawesome-free/css/all.css';
-import 'react-datepicker/dist/react-datepicker.css';
+// import 'react-datepicker/dist/react-datepicker.css';
 import EEGRun from './types/EEGRun';
 import Papa from 'papaparse';
 
@@ -12,7 +12,6 @@ import Papa from 'papaparse';
 import {
   DirectoryInput,
   FileInput,
-  NumberInput,
   RadioInput,
   TextInput,
   SelectInput,
@@ -22,8 +21,10 @@ import {
   AuthenticationMessage,
   AuthenticationCredentials,
 } from './elements/authentication';
-import Switch from 'react-switch';
-import DatePicker from 'react-datepicker';
+
+// todo remove Switch and DatePicker
+// import Switch from 'react-switch';
+// import DatePicker from 'react-datepicker';
 
 // Socket.io
 import {SocketContext} from './socket.io';
@@ -211,7 +212,7 @@ const Configuration = (props) => {
     setModalVisible(!hidden);
   };
 
-  const validateJSON = (jsons) => {
+  const validateJSON = async (jsons) => {
     const promisesArray = [];
     for (let i = 0; i < jsons?.length; i++) {
       const json = jsons[i];
@@ -223,7 +224,7 @@ const Configuration = (props) => {
             JSON.parse(e.target.result);
             resolve(null);
           } catch (e) {
-            console.log(e);
+            console.info(e);
             resolve(json.name);
           }
         };
@@ -245,7 +246,7 @@ const Configuration = (props) => {
               {
                 quoteChar: '',
                 complete: (results, file) => {
-                  console.log(results.errors);
+                  console.info(results.errors);
                   if (results.errors.length > 0) {
                     resolve(tsv.name);
                   } else {
@@ -368,7 +369,7 @@ const Configuration = (props) => {
     const result = [];
 
     // edfData
-    let edfDataStatus = '';
+    let edfDataStatus;
     if (state.edfData.get?.error) {
       edfDataStatus = formatError(state.edfData.get.error);
     } else if (
@@ -386,7 +387,7 @@ const Configuration = (props) => {
 
 
     // Data modality
-    let modalityStatus = '';
+    let modalityStatus;
     if (appContext.getFromTask('modality')) {
       modalityStatus = formatPass(
           `Modality: ${appContext.getFromTask('modality')}`,
@@ -413,7 +414,7 @@ const Configuration = (props) => {
       } else {
         let match = true;
 
-        // Check that the events files are appropriatly named
+        // Check that the events files are appropriately named
         appContext.getFromTask('eventFiles').map((eventFile) => {
           if (!appContext.getFromTask('edfData')['files'].find(
               (edfFile) => {
@@ -468,7 +469,7 @@ const Configuration = (props) => {
       } else {
         let match = true;
 
-        // Check that the events files are appropriatly named
+        // Check that the events files are appropriately named
         appContext.getFromTask('annotationsTSV').map((annotationsTSVFile) => {
           if (!appContext.getFromTask('edfData')['files'].find(
               (edfFile) => {
@@ -526,7 +527,7 @@ const Configuration = (props) => {
         );
       } else {
         let match = true;
-        // Check that the events files are appropriatly named
+        // Check that the events files are appropriately named
         appContext.getFromTask('annotationsJSON')
             .map((annotationsJSONFile) => {
               if (!appContext.getFromTask('edfData')['files'].find(
@@ -575,7 +576,7 @@ const Configuration = (props) => {
 
 
     // bidsDirectory
-    let bidsDirectoryStatus = '';
+    let bidsDirectoryStatus;
     if (appContext.getFromTask('bidsDirectory')) {
       bidsDirectoryStatus = formatPass('BIDS output directory: ' +
         appContext.getFromTask('bidsDirectory'),
@@ -586,7 +587,7 @@ const Configuration = (props) => {
     result.push(<div key='bidsDirectoryStatus'>{bidsDirectoryStatus}</div>);
 
     // LORIS compliant
-    let LORIScompliantStatus = '';
+    let LORIScompliantStatus;
     if (typeof appContext.getFromTask('LORIScompliant') == 'boolean') {
       LORIScompliantStatus = formatPass(
           `Data loaded in LORIS: ${appContext.getFromTask('LORIScompliant')}`,
@@ -671,7 +672,7 @@ const Configuration = (props) => {
     const result = [];
 
     // taskName
-    let taskNameStatus = '';
+    let taskNameStatus;
     const taskName = appContext.getFromTask('taskName');
     if (taskName) {
       /* if (taskName.indexOf('-') > -1 ||
@@ -695,7 +696,7 @@ const Configuration = (props) => {
 
     if (appContext.getFromTask('LORIScompliant')) {
       // siteID
-      let siteIDStatus = '';
+      let siteIDStatus;
       if (appContext.getFromTask('siteID')) {
         siteIDStatus = formatPass(
             `Site: ${appContext.getFromTask('siteID')}`,
@@ -706,7 +707,7 @@ const Configuration = (props) => {
       result.push(<div key='siteIDStatus'>{siteIDStatus}</div>);
 
       // projectID
-      let projectIDStatus = '';
+      let projectIDStatus;
       if (appContext.getFromTask('projectID')) {
         projectIDStatus = formatPass(
             `Project: ${appContext.getFromTask('projectID')}`,
@@ -717,19 +718,19 @@ const Configuration = (props) => {
       result.push(<div key='projectIDStatus'>{projectIDStatus}</div>);
 
       // subprojectID
-      let subprojectIDStatus = '';
+      let subprojectIDStatus;
       if (appContext.getFromTask('subprojectID')) {
         subprojectIDStatus = formatPass(
             `Subproject: ${appContext.getFromTask('subprojectID')}`,
         );
       } else {
-        projectIDStatus = formatError('Subproject is not specified');
+        subprojectIDStatus = formatError('Subproject is not specified');
       }
       result.push(<div key='subprojectIDStatus'>{subprojectIDStatus}</div>);
     }
 
     // session
-    let sessionStatus = '';
+    let sessionStatus;
     if (appContext.getFromTask('session')) {
       if (
         appContext.getFromTask('session').indexOf(' ') >= 0 ||
@@ -747,7 +748,7 @@ const Configuration = (props) => {
     result.push(<div key='sessionStatus'>{sessionStatus}</div>);
 
     // lineFreq
-    let lineFreqStatus = '';
+    let lineFreqStatus;
     if (appContext.getFromTask('lineFreq')) {
       lineFreqStatus = formatPass(
           `Powerline Frequency: ${appContext.getFromTask('lineFreq')}`,
@@ -758,7 +759,7 @@ const Configuration = (props) => {
     result.push(<div key='lineFreqStatus'>{lineFreqStatus}</div>);
 
     // reference
-    let referenceStatus = '';
+    let referenceStatus;
     if (appContext.getFromTask('reference')) {
       referenceStatus = formatPass(
           `Reference: ${appContext.getFromTask('reference')}`,
@@ -774,12 +775,12 @@ const Configuration = (props) => {
   const validateParticipantDetails = () => {
     const result = [];
 
-    if (state.participantEntryMode.get == 'existing_loris') {
+    if (state.participantEntryMode.get === 'existing_loris') {
       // participantPSCID
-      let participantPSCIDStatus = '';
+      let participantPSCIDStatus;
 
       // participantCandID
-      let participantCandIDStatus = '';
+      let participantCandIDStatus;
 
       if (!appContext.getFromTask('participantPSCID')) {
         participantPSCIDStatus = formatError(
@@ -818,7 +819,7 @@ const Configuration = (props) => {
       );
     } else {
       // participantID
-      let participantIDStatus = '';
+      let participantIDStatus;
       if (state.participantID.get) {
         participantIDStatus = formatPass(
             `Participant ID: ${state.participantID.get}`,
@@ -1142,7 +1143,7 @@ const Configuration = (props) => {
           appContext.setTask('participantCandID', {error: data.error});
           state.participantID.set('');
           appContext.setTask('participantID', '');
-        } else if (state.participantPSCID.get == data.PSCID) {
+        } else if (state.participantPSCID.get === data.PSCID) {
           appContext.setTask('participantCandID', state.participantCandID.get);
 
           state.participantID.set(data.PSCID);
@@ -1178,11 +1179,7 @@ const Configuration = (props) => {
     // Update the state of Configuration.
     switch (name) {
       case 'LORIScompliant':
-        if (value === 'yes') {
-          value = true;
-        } else {
-          value = false;
-        }
+        value = value === 'yes';
         state.LORIScompliant.set(value);
         break;
       case 'recordingID':
@@ -1199,7 +1196,7 @@ const Configuration = (props) => {
         appContext.setTask(name, value);
         break;
       case 'siteID_API':
-        if (value == 'Enter manually') {
+        if (value === 'Enter manually') {
           value = '';
           state.siteUseAPI.set(false);
         } else {
@@ -1213,7 +1210,7 @@ const Configuration = (props) => {
         name = 'siteID';
         break;
       case 'projectID_API':
-        if (value == 'Enter manually') {
+        if (value === 'Enter manually') {
           state.projectUseAPI.set(false);
           value = '';
         } else {
@@ -1228,7 +1225,7 @@ const Configuration = (props) => {
         name = 'projectID';
         break;
       case 'subprojectID_API':
-        if (value == 'Enter manually') {
+        if (value === 'Enter manually') {
           state.subprojectUseAPI.set(false);
           value = '';
         } else {
@@ -1243,7 +1240,7 @@ const Configuration = (props) => {
         name = 'subprojectID';
         break;
       case 'session_API':
-        if (value == 'Enter manually') {
+        if (value === 'Enter manually') {
           state.sessionUseAPI.set(false);
           value = '';
         } else {
@@ -1287,7 +1284,7 @@ const Configuration = (props) => {
    * @param {Date} birthDate
    * @param {Date} visitDate
    *
-   * @return {Number}
+   * @return {Number|void}
    */
   const getAge = (birthDate, visitDate) => {
     if (!birthDate || !visitDate) return;
@@ -1508,10 +1505,9 @@ const Configuration = (props) => {
                   <label className="label" htmlFor='#siteID_API'>
                     <b>
                       Site <span className="red">*</span>
-                      <i
-                        className='fas fa-question-circle'
+                      <i className='fas fa-question-circle'
                         data-tip='Study Centre'
-                      ></i>
+                      />
                     </b>
                   </label>
                   <div className='comboField'>
@@ -1539,10 +1535,9 @@ const Configuration = (props) => {
                   <label className="label" htmlFor='#projectID_API'>
                     <b>
                       Project <span className="red">*</span>
-                      <i
-                        className='fas fa-question-circle'
+                      <i className='fas fa-question-circle'
                         data-tip='Study'
-                      ></i>
+                      />
                     </b>
                   </label>
                   <div className='comboField'>
@@ -1570,10 +1565,9 @@ const Configuration = (props) => {
                   <label className="label" htmlFor='#subprojectID_API'>
                     <b>
                       Subproject <span className="red">*</span>
-                      <i
-                        className='fas fa-question-circle'
-                        data-tip='Subproject or population cohort'
-                      ></i>
+                      <i className="fas fa-question-circle"
+                        data-tip="Subproject or population cohort"
+                      />
                     </b>
                   </label>
                   <div className='comboField'>
@@ -1603,10 +1597,9 @@ const Configuration = (props) => {
               <label className="label" htmlFor='#session_API'>
                 <b>
                   Session <span className="red">*</span>
-                  <i
-                    className='fas fa-question-circle'
+                  <i className='fas fa-question-circle'
                     data-tip='Visit or TimePoint Label'
-                  ></i>
+                  />
                 </b>
                 {state.LORIScompliant.get &&
                   <div><small>(LORIS Visit Label)</small></div>
@@ -1713,13 +1706,13 @@ const Configuration = (props) => {
                 <label className="label" htmlFor={props.id}>
                   <b>Date of Birth <span className="red">*</span></b>
                 </label>
-                <DatePicker id='participantDOB'
-                  name='participantDOB'
-                  required={true}
-                  selected={state.participantDOB.get}
-                  dateFormat="yyyy-MM-dd"
-                  onChange={(date) => onUserInput('participantDOB', date)}
-                />
+                {/*<DatePicker id='participantDOB'*/}
+                {/*  name='participantDOB'*/}
+                {/*  required={true}*/}
+                {/*  selected={state.participantDOB.get}*/}
+                {/*  dateFormat="yyyy-MM-dd"*/}
+                {/*  onChange={(date) => onUserInput('participantDOB', date)}*/}
+                {/*/>*/}
               </div>
               <div className='small-pad'>
                 <SelectInput id='participantSex'
@@ -1858,22 +1851,22 @@ const Configuration = (props) => {
             fontSize: '16px',
             verticalAlign: 'middle',
           }}>
-            <Switch
-              className='react-switch'
-              onColor="#86d3ff"
-              onHandleColor="#2693e6"
-              handleDiameter={20}
-              uncheckedIcon={false}
-              checkedIcon={false}
-              boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
-              activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
-              height={15}
-              width={40}
-              name='anonymize'
-              onChange={(checked) => onUserInput('anonymize', checked)}
-              checked={state.anonymize.get}
-              disabled={state.edfData.get?.files?.length > 0 ? false : true}
-            />
+            {/*<Switch*/}
+            {/*  className='react-switch'*/}
+            {/*  onColor="#86d3ff"*/}
+            {/*  onHandleColor="#2693e6"*/}
+            {/*  handleDiameter={20}*/}
+            {/*  uncheckedIcon={false}*/}
+            {/*  checkedIcon={false}*/}
+            {/*  boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"*/}
+            {/*  activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"*/}
+            {/*  height={15}*/}
+            {/*  width={40}*/}
+            {/*  name='anonymize'*/}
+            {/*  onChange={(checked) => onUserInput('anonymize', checked)}*/}
+            {/*  checked={state.anonymize.get}*/}
+            {/*  disabled={state.edfData.get?.files?.length > 0 ? false : true}*/}
+            {/*/>*/}
             <span>Anonymize</span>
           </label>
         </span>
@@ -1885,7 +1878,7 @@ const Configuration = (props) => {
                 label='Subject ID'
                 value={state.edfData?.get['subjectID'] || ''}
                 onUserInput={onUserInput}
-                readonly={state.edfData.get?.files?.length > 0 ? false : true}
+                readonly={state.edfData.get?.files?.length <= 0}
               />
               <div>
                 <small>Recommended EDF anonymization: "X X X X"<br/>
@@ -1899,7 +1892,7 @@ const Configuration = (props) => {
                 label='Recording ID'
                 value={state.edfData.get?.['recordingID'] || ''}
                 onUserInput={onUserInput}
-                readonly={state.edfData.get?.files?.length > 0 ? false : true}
+                readonly={state.edfData.get?.files?.length <= 0}
               />
               <div>
                 <small>(EDF spec: Startdate dd-MMM-yyyy
diff --git a/src/jsx/elements/authentication.js b/src/jsx/elements/authentication.js
index 3851486..1958d12 100644
--- a/src/jsx/elements/authentication.js
+++ b/src/jsx/elements/authentication.js
@@ -141,25 +141,31 @@ export const AuthenticationMessage = (props) => {
   /**
    * Similar to componentDidMount and componentDidUpdate.
    */
-  useEffect(async () => {
-    const myAPI = window['myAPI'];
-    const credentials = await myAPI.getLorisAuthenticationCredentials();
-    if (credentials &&
-      credentials.lorisURL &&
-      credentials.lorisUsername &&
-      credentials.lorisPassword
-    ) {
-      appContext.setTask('lorisURL', credentials.lorisURL);
-      appContext.setTask('lorisUsername', credentials.lorisUsername);
-      appContext.setTask('lorisPassword', credentials.lorisPassword);
-      socketContext.emit('set_loris_credentials', credentials);
+  useEffect( () => {
+    /**
+     * getLorisCredentials - gets the LORIS credentials securely.
+     */
+    async function getLorisCredentials() {
+      const myAPI = window['myAPI'];
+      const credentials = await myAPI.getLorisAuthenticationCredentials();
+      if (credentials &&
+        credentials.lorisURL &&
+        credentials.lorisUsername &&
+        credentials.lorisPassword
+      ) {
+        appContext.setTask('lorisURL', credentials.lorisURL);
+        appContext.setTask('lorisUsername', credentials.lorisUsername);
+        appContext.setTask('lorisPassword', credentials.lorisPassword);
+        socketContext.emit('set_loris_credentials', credentials);
+      }
     }
+    getLorisCredentials();
   }, []);
 
   /**
    * Similar to componentDidMount and componentDidUpdate.
    */
-  useEffect(async () => {
+  useEffect( () => {
     if (socketContext) {
       socketContext.on('loris_login_response', (data) => {
         if (data.error) {
@@ -174,7 +180,7 @@ export const AuthenticationMessage = (props) => {
   }, [socketContext]);
 
   /**
-   * User clicked sign in..
+   * User clicked sign in.
    */
   const handleClick = () => {
     props.setAuthCredentialsVisible(true);
@@ -207,12 +213,18 @@ export const AuthenticationCredentials = (props) => {
   /**
    * Similar to componentDidMount and componentDidUpdate.
    */
-  useEffect(async () => {
-    const myAPI = window['myAPI'];
-    const credentials = await myAPI.getLorisAuthenticationCredentials();
-    setLorisURL(credentials.lorisURL);
-    setLorisUsername(credentials.lorisUsername);
-    setLorisPassword(credentials.lorisPassword);
+  useEffect(() => {
+    /**
+     * getLorisCredentials - gets the LORIS credentials securely.
+     */
+    async function getLorisCredentials() {
+      const myAPI = window['myAPI'];
+      const credentials = await myAPI.getLorisAuthenticationCredentials();
+      setLorisURL(credentials.lorisURL);
+      setLorisUsername(credentials.lorisUsername);
+      setLorisPassword(credentials.lorisPassword);
+    }
+    getLorisCredentials();
   }, []);
 
   /**