more

src/Components/Case/CaseTypePage.js

@@ -94,12 +94,16 @@ const CaseTypePage = () => {
       clientPositionValid;
 
     if (!leadAttorneyValid) {
+      setLeadAttorneyError("Field cannot be left blank");
     }
     if (!contactEmailValid) {
+      setContactEmailError("Field cannot be left blank");
     }
     if (!caseTypeValid) {
+      setCaseTypeError("Field cannot be left blank");
     }
     if (!clientPositionValid) {
+      setClientPositionError("You must make a selection");
     }
 
     return allValid;
@@ -123,7 +127,7 @@ const CaseTypePage = () => {
       try {
         await updateDoc(doc(db, "cases", caseId), dataValues);
         setIsBusy(false);
-        navigate(`/casedetail/${caseId}`);
+        navigate(`/casedetails/${caseId}`);
       } catch (err) {
         console.log("Error updating case:", err);
         setIsBusy(false);
@@ -152,7 +156,11 @@ const CaseTypePage = () => {
             onChange={(e) => setLeadAttorney(e.target.value)}
           ></input>
           <div>
-            {leadAttorneyError ? <div>{leadAttorneyError}</div> : <></>}
+            {leadAttorneyError ? (
+              <div className="casetype-error">{leadAttorneyError}</div>
+            ) : (
+              <></>
+            )}
           </div>
         </div>
         <div className="type-col">
@@ -186,7 +194,11 @@ const CaseTypePage = () => {
             value={contactEmail}
             onChange={(e) => setContactEmail(e.target.value)}
           ></input>
-          {contactEmailError ? <div>{contactEmailError}</div> : <></>}
+          {contactEmailError ? (
+            <div className="casetype-error">{contactEmailError}</div>
+          ) : (
+            <></>
+          )}
         </div>
       </div>
       <div className="type-row">
@@ -208,6 +220,11 @@ const CaseTypePage = () => {
               typeaheadRef.current.clear();
             }}
           />
+          {caseTypeError ? (
+            <div className="casetype-error">{caseTypeError}</div>
+          ) : (
+            <></>
+          )}
           <div className="case-tag-container">
             {selectedCaseTags.map((tag, i) => (
               <div className="tag-container">
@@ -216,7 +233,7 @@ const CaseTypePage = () => {
                     className="tag-ex-box"
                     onClick={() => handleTagClick(tag)}
                   >
-                    <div className="tag-ex"> x</div>
+                    <div className="tag-ex">x</div>
                   </div>
                   <div className="casetag-name">{tag}</div>
                 </div>
@@ -233,9 +250,15 @@ const CaseTypePage = () => {
               onClick={(e) => handleSetRadioValue(e, "clientPosition")}
             />
           </div>
+          {clientPositionError ? (
+            <div className="casetype-error">{clientPositionError}</div>
+          ) : (
+            <></>
+          )}
         </div>
       </div>
-      <div className="caseType-button-container">
+
+      <div className="casetype-button-container">
         <Button
           className="pt-2 pb-2 mr-2 primary-button"
           onClick={saveCaseData}

src/styles/casetype-page.scss

@@ -68,7 +68,9 @@
   padding: 0px 8px;
 }
 
-.caseType-button-container {
+.casetype-button-container {
+  margin-top: 20px;
+  margin-right: 16px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -81,3 +83,11 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
 }
+
+.casetype-error {
+  font-size: 0.84rem;
+  margin-top: 2px;
+  margin-left: 2px;
+  padding-left: 6px;
+  color: red;
+}