Fixed: React lint warnings (#660)

* refactor: Simplify filter logic in form validation

- Combine conditions for skippable and valid form elements into a single line.
- Add explicit return for elements that don't meet criteria.
- Enhance code readability and maintainability.

* refactor: Use explicit === check in FeedbackForm

* config: Add lint:fix command

* chore: Remove unused functions

* lint: Fix code formatting

* lint: Remove unused id variable and formatted the rest of the file

* revert: Re-add finalizeSession function

frontend/package.json

@@ -35,7 +35,8 @@
     "storybook": "REACT_APP_API_ROOT=http://localhost:8000 && storybook dev -p 6006",
     "storybook:build": "storybook build",
     "lint:ts": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint": "eslint src/**/*.js"
+    "lint": "eslint src/**/*.js",
+    "lint:fix": "eslint --fix src/**/*.js"
   },
   "jest": {
     "moduleNameMapper": {

frontend/src/API.js

@@ -43,9 +43,9 @@ export const useParticipant = (urlQueryString) =>
 export const useParticipantScores = () =>
     useGet(API_BASE_URL + URLS.participant.score);
 
-export const useParticipantLink = () => 
+export const useParticipantLink = () =>
     useGet(API_BASE_URL + URLS.participant.link);
-    
+
 export const useConsent = (slug) =>
     useGet(API_BASE_URL + URLS.result.get('consent_' + slug));
 
@@ -130,6 +130,7 @@ export const getNextRound = async ({ session }) => {
     }
 };
 
+// Tell the backend that the session is finished
 export const finalizeSession = async ({ session, participant }) => {
     try {
         const response = await axios.post(

frontend/src/components/Explainer/Explainer.js

@@ -4,14 +4,14 @@ import Button from "../Button/Button";
 // Explainer is an experiment view that shows a list of steps
 // If the button has not been clicked, onNext will be called automatically after the timer expires (in milliseconds). If timer == null, onNext will only be called after the button is clicked.
 const Explainer = ({ instruction, button_label, steps = [], onNext, timer }) => {
-    
+
     useEffect( () => {
         if (timer != null) {
             const id = setTimeout(onNext, timer);
             return () => {clearTimeout(id)}; // if button has been clicked, clear timeout
         }
     })
-    
+
     return (
         <div className="aha__explainer">
             <h3 className="title">{instruction}</h3>

frontend/src/components/FeedbackForm/FeedbackForm.js

@@ -39,16 +39,18 @@ const FeedbackForm = ({
         }
         // for every non-skippable question, check that we have a value
         const validFormElements = form.filter(formElement => {
-            if (formElement.is_skippable) return true;
-            else if (formElement.value && validateFormElement(formElement)) return true;
+            if (formElement.is_skippable || (formElement.value && validateFormElement(formElement))) {
+                return true;
+            }
+            return false;
         });
         if (validFormElements.length === form.length) setFormValid(true);
         else setFormValid(false);
     };
 
     function validateFormElement(formElement) {
         // For multiple choices in CHECKBOXES view, formElement.value is a string of comma-separated values
-        if (formElement.view == "CHECKBOXES" && formElement.min_values && (formElement.value.split(",").length < formElement.min_values)) {
+        if (formElement.view === "CHECKBOXES" && formElement.min_values && (formElement.value.split(",").length < formElement.min_values)) {
             return false;
         }
         return true;

frontend/src/components/Final/Final.js

@@ -11,7 +11,7 @@ import UserFeedback from "../UserFeedback/UserFeedback";
 
 // Final is an experiment view that shows the final scores of the experiment
 // It can only be the last view of an experiment
-const Final= ({ experiment, participant, session, score, final_text, action_texts, button,  
+const Final= ({ experiment, participant, session, score, final_text, action_texts, button,
             onNext, history, show_participant_link, participant_id_only,
             show_profile_link, social, feedback_info, points, rank, logo }) => {
     const [showScore, setShowScore] = useState(0);
@@ -104,7 +104,7 @@ const Final= ({ experiment, participant, session, score, final_text, action_text
                 participant={participant}
                 feedbackInfo={feedback_info}
             />)}
-                
+
         </div>
     );
 };

frontend/src/components/Playback/Playback.js

@@ -76,25 +76,25 @@ const Playback = ({
             finishedPlaying();
         }
     }, []);
-    
+
     // Keep track of last player index
     useEffect(() => {
         lastPlayerIndex.current = playerIndex;
     }, [playerIndex]);
 
-    if (playConfig.play_method === 'EXTERNAL') {                    
-        webAudio.closeWebAudio();            
+    if (playConfig.play_method === 'EXTERNAL') {
+        webAudio.closeWebAudio();
     }
 
     // Play section with given index
     const playSection = useCallback(
         (index = 0) => {
-            
+
                 if (index !== lastPlayerIndex.current) {
                     // Load different audio
                     if (prevPlayerIndex.current !== -1) {
                         pauseAudio(playConfig);
-                    }                
+                    }
                     // Store player index
                     setPlayerIndex(index);
 
@@ -115,7 +115,7 @@ const Playback = ({
                         activeAudioEndedListener.current = webAudio.listenOnce("ended", onAudioEnded);
                     } else {
                         activeAudioEndedListener.current = audio.listenOnce("ended", onAudioEnded);
-                    }                    
+                    }
 
                     // Compensate for audio latency and set state to playing
                     setTimeout(startedPlaying && startedPlaying(), latency);
@@ -124,7 +124,7 @@ const Playback = ({
 
                 // Stop playback
                 if (lastPlayerIndex.current === index) {
-                        pauseAudio(playConfig);                     
+                        pauseAudio(playConfig);
                         setPlayerIndex(-1);
                         return;
                     }
@@ -183,10 +183,10 @@ const Playback = ({
                 return (
                     <Preload
                         instruction={preloadMessage}
-                        duration={playConfig.ready_time}                        
+                        duration={playConfig.ready_time}
                         sections={sections}
                         playConfig={playConfig}
-                        onNext={() => {                        
+                        onNext={() => {
                             setView(playerType);
                             onPreloadReady();
                         }}
@@ -227,7 +227,7 @@ const Playback = ({
                 return <div> Unknown player view {view} </div>;
         }
     };
-    
+
     return (
         <div className="aha__playback">
             <div className="playback"> {render(playerType)} </div>{" "}

frontend/src/components/Question/_RangeLimits.js

@@ -1,17 +1,16 @@
 import React from "react";
-import classNames from "classnames";
 
 import { renderLabel } from "../../util/label";
 
 const RangeLimits = ({ minVal, maxVal, labels}) => {
     return (
         <div className="limits">
-            { labels ? 
+            { labels ?
                 <div className="labels">
                     {labels.map(label => (
                         <span>{renderLabel(label)}</span>
                     )
-                    )}                
+                    )}
                 </div> :
                 <div>
                     <span className="min">{renderLabel(minVal)}</span>
@@ -22,4 +21,4 @@ const RangeLimits = ({ minVal, maxVal, labels}) => {
     )
 };
 
-export default RangeLimits;
+export default RangeLimits;

frontend/src/components/Trial/Trial.js

@@ -85,7 +85,7 @@ const Trial = ({
     );
 
     const checkBreakRound = (values, breakConditions) => {
-        switch(Object.keys(breakConditions)[0]) {
+        switch (Object.keys(breakConditions)[0]) {
             case 'EQUALS':
                 return values.some(val => breakConditions['EQUALS'].includes(val));
             case 'NOT':
@@ -112,7 +112,8 @@ const Trial = ({
                 if (playback.player_type === 'BUTTON') {
                     startTime.current = getCurrentTime();
                 }
-                const id = setTimeout( () => {makeResult({type: "time_passed",});} , config.auto_advance_timer);
+
+                setTimeout(() => { makeResult({ type: "time_passed", }); }, config.auto_advance_timer);
             } else {
 
                 makeResult({
@@ -158,9 +159,9 @@ const Trial = ({
                     skipLabel={feedback_form.skip_label}
                     isSkippable={feedback_form.is_skippable}
                     onResult={makeResult}
-                    // emphasizeTitle={feedback_form.is_profile}
-                    // to do: if we want left-aligned text with a pink divider,
-                    // make this style option available again (used in Question.scss)
+                // emphasizeTitle={feedback_form.is_profile}
+                // to do: if we want left-aligned text with a pink divider,
+                // make this style option available again (used in Question.scss)
                 />
             )}
             {preloadReady && !feedback_form && config.show_continue_button && (