Merge pull request #334 from brown-ccv/ref-urlSearchParams

feat: Export getSearchParam and update login fields based on it
brown-ccv · Dec 6, 2023 · e43ee6a · e43ee6a
2 parents e3cbade + c32caf6
commit e43ee6a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 51 deletions.
diff --git a/src/App/App.jsx b/src/App/App.jsx
@@ -16,7 +16,7 @@ import Login from "./components/Login";
 import { addToFirebase, validateParticipant } from "./deployments/firebase";
 
 import { config, taskSettings, taskVersion, turkUniqueId } from "../config/main";
-import { getProlificId } from "../lib/utils";
+import { getProlificId, getSearchParam } from "../lib/utils";
 
 /**
  * The top-level React component for Honeycomb. App handles initiating the jsPsych component when the participant
@@ -90,18 +90,16 @@ export default function App() {
         }
       } else if (config.USE_FIREBASE) {
         // Fill in login fields based on query parameters (may still be blank)
-        const query = new URLSearchParams(window.location.search);
-        const studyId = query.get("studyID");
-        const participantId = query.get("participantID");
-        if (studyId) setStudyID(studyId);
-        if (participantId) setParticipantID(participantId);
+        const maybeStudyID = getSearchParam("studyID");
+        const maybeParticipantID = getSearchParam("participantID");
+        if (maybeStudyID !== null) setStudyID(maybeStudyID);
+        if (maybeParticipantID !== null) setParticipantID(maybeParticipantID);
 
         setMethod("firebase");
       } else {
         setMethod("default");
       }
     }
-    // eslint-disable-next-line
   }, []);
 
   /** VALIDATION FUNCTIONS */

diff --git a/src/App/components/Login.jsx b/src/App/components/Login.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button, Form } from "react-bootstrap";
 
 export default function Login({
@@ -8,47 +8,57 @@ export default function Login({
   validationFunction,
 }) {
   // State variables for login screen
-  const [participantId, setParticipant] = React.useState(initialParticipantID);
-  const [studyId, setStudy] = React.useState(initialStudyID);
+  const [participantID, setParticipantID] = React.useState(initialParticipantID);
+  const [studyID, setStudyID] = React.useState(initialStudyID);
   const [isError, setIsError] = React.useState(false);
 
+  // Update local participantID if it changes upstream
+  useEffect(() => {
+    setParticipantID(initialParticipantID);
+  }, [initialParticipantID]);
+
+  // Update local studyID if it changes upstream
+  useEffect(() => {
+    setStudyID(initialStudyID);
+  }, [initialStudyID]);
+
   // Function used to validate and log in participant
   function handleSubmit(e) {
     e.preventDefault();
     // Logs user in if a valid participant/study id combination is given
-    validationFunction(studyId, participantId).then((isValid) => {
+    validationFunction(studyID, participantID).then((isValid) => {
       setIsError(!isValid);
-      if (isValid) handleLogin(studyId, participantId);
+      if (isValid) handleLogin(studyID, participantID);
     });
   }
 
   return (
     <div className="centered-h-v">
       <div className="width-50">
         <Form className="centered-h-v" onSubmit={handleSubmit}>
-          <Form.Group className="width-100" size="lg" controlId="participantId">
+          <Form.Group className="width-100" size="lg" controlId="participantID">
             <Form.Label>Participant ID</Form.Label>
             <Form.Control
               autoFocus
-              type="participantId"
-              value={participantId}
-              onChange={(e) => setParticipant(e.target.value)}
+              type="participantID"
+              value={participantID}
+              onChange={(e) => setParticipantID(e.target.value)}
             />
           </Form.Group>
-          <Form.Group className="width-100" size="lg" controlId="studyId">
+          <Form.Group className="width-100" size="lg" controlId="studyID">
             <Form.Label>Study ID</Form.Label>
             <Form.Control
-              type="studyId"
-              value={studyId}
-              onChange={(e) => setStudy(e.target.value)}
+              type="studyID"
+              value={studyID}
+              onChange={(e) => setStudyID(e.target.value)}
             />
           </Form.Group>
           <Button
             style={{ width: "100%" }}
             block
             size="lg"
             type="submit"
-            disabled={studyId.length === 0 || participantId.length === 0}
+            disabled={studyID.length === 0 || participantID.length === 0}
           >
             Log In
           </Button>

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -52,23 +52,6 @@ function formatDollars(amount) {
   return "$" + parseFloat(amount).toFixed(2);
 }
 
-/**
- * Adds a wait period before a trial begins
- * @param {Object} trial The trial to add a wait period to
- * @param {number} waitTime The amount of time to wait by
- * @returns The given trial with a waiting period before it
- */
-// TODO 162: This should be a trial not a utility? It"s adding a separate trial in and of itself
-// TODO 162: JsPsych has a property for the wait time before moving to the next trial
-function generateWaitSet(trial, waitTime) {
-  const waitTrial = Object.assign({}, trial);
-  waitTrial.trial_duration = waitTime;
-  waitTrial.response_ends_trial = false;
-  waitTrial.prompt = "-";
-
-  return [waitTrial, trial];
-}
-
 /**
  * Starts the JsPsych keyboard response listener
  * @param  jsPsych The jsPsych instance running the task.
@@ -90,26 +73,20 @@ function startKeypressListener(jsPsych) {
 
 /**
  * Gets the value of a given variable from the URL search parameters
- * @param {any} variable The key of the variable in the search parameters
- * @returns The value of variable in the search parameters
+ * @param {string} queryParameter The key of the variable in the search parameters
+ * @returns {string} The value of variable in the search parameters
  */
-function getQueryVariable(variable) {
-  const query = window.location.search.substring(1);
-  const vars = query.split("&");
-  for (let i = 0; i < vars.length; i++) {
-    const pair = vars[i].split("=");
-    if (decodeURIComponent(pair[0]) === variable) {
-      return decodeURIComponent(pair[1]);
-    }
-  }
+function getSearchParam(queryParameter) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(queryParameter);
 }
 
 /**
  * Gets the ID of a prolific user from the URL search parameters
  * @returns
  */
 function getProlificId() {
-  const prolificId = getQueryVariable("PROLIFIC_PID");
+  const prolificId = getSearchParam("PROLIFIC_PID");
   return prolificId;
 }
 
@@ -145,8 +122,8 @@ export {
   beep,
   deepCopy,
   formatDollars,
-  generateWaitSet,
   getProlificId,
+  getSearchParam,
   interleave,
   jitter,
   jitter50,