fix button bubbling event and submitting form when save button not re…

…ndered
dpgraham4401 · May 11, 2024 · b30bad6 · b30bad6
1 parent 6d47287
commit b30bad6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 32 deletions.
diff --git a/client/src/components/RcraProfile/RcraProfile.tsx b/client/src/components/RcraProfile/RcraProfile.tsx
@@ -33,6 +33,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
   });
 
   useEffect(() => {
+    // ToDo: invalidating tags should be done in the slice
     dispatch(userApi.util?.invalidateTags(['rcrainfoProfile']));
   }, [inProgress]);
 
@@ -48,6 +49,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
 
   /** submitting the RcrainfoProfile form (RCRAInfo API ID, Key, username, etc.)*/
   const onSubmit = (data: RcraProfileForm) => {
+    console.log('submitting form');
     setProfileLoading(!profileLoading);
     setEditable(!editable);
     updateRcrainfoProfile({ username: profile.user, data: data });
@@ -107,37 +109,21 @@ export function RcraProfile({ profile }: ProfileViewProps) {
             </Col>
           </Row>
           <Row>
-            <div className="mx-1 d-flex flex-row-reverse">
-              {!editable ? (
-                <>
-                  <Button
-                    className="mx-2"
-                    variant="outline-info"
-                    type="button"
-                    onClick={() => {
-                      setEditable(!editable);
-                    }}
-                  >
-                    Edit
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button className="mx-2" variant="success" type="submit">
-                    Save
-                  </Button>
-                  <Button
-                    className="mx-2"
-                    variant="danger"
-                    onClick={() => {
-                      setEditable(!editable);
-                      reset();
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </>
-              )}
+            <div className="mx-1 d-flex flex-row justify-content-end">
+              <Button
+                className="mx-2"
+                variant={editable ? 'danger' : 'primary'}
+                type="button"
+                onClick={() => {
+                  setEditable(!editable);
+                  reset();
+                }}
+              >
+                {editable ? 'Cancel' : 'Edit'}
+              </Button>
+              <Button className="mx-2" disabled={!editable} variant="success" type="submit">
+                Save
+              </Button>
             </div>
           </Row>
         </Container>

diff --git a/client/src/store/htApi.slice.ts b/client/src/store/htApi.slice.ts
@@ -115,7 +115,7 @@ export const haztrakApi = createApi({
       providesTags: ['code'],
     }),
     getOrgSites: build.query<Array<HaztrakSite>, string>({
-      query: (id) => ({ url: `org/${id}/site`, method: 'get' }),
+      query: (id) => ({ url: `org/${id}/sites`, method: 'get' }),
       providesTags: ['site'],
     }),
     getUserHaztrakSites: build.query<Array<HaztrakSite>, void>({