Merge pull request #169 from hack4impact-mcgill/bugfix/151-reopen_mural

Reset selected resource after closing form

frontend/src/App/App.tsx

@@ -38,11 +38,17 @@ function App() {
 
   const mapRef: any = useRef(null);
 
+  /**
+   * Use the Firebase Auth sign-in method email and password to
+   * attempt to authorize the user. If unsuccessful, relay an error
+   * message to the user.
+   * @param creds Email and password passed to the sign-in form
+   */
   const handleSignin = (creds: any) => {
     setSignInError("");
     FirebaseAuth.signInWithEmailAndPassword(creds.email, creds.password)
       .then(() => {
-        handleCancelSignin();
+        setSigningIn(false);
         setSignInError("");
       })
       .catch((error: any) => {
@@ -57,23 +63,25 @@ function App() {
       });
   };
 
+  /**
+   * Sign the user out of Firebase Auth
+   */
   const handleSignout = async () => {
     await FirebaseAuth.signOut();
   };
 
+  /**
+   * On app startup, add a listener to Firebase Auth to set the
+   * user object and auth status in local state when they change.
+   */
   useEffect(() => {
     FirebaseAuth.onAuthStateChanged((user: any) => {
       setUser(user);
       setIsSignedIn(!!user);
       setSigningIn(false);
     });
-
   }, []);
 
-  const openSignin = () => setSigningIn(true);
-
-  const handleCancelSignin = () => setSigningIn(false);
-
   /**
    * If opening the sidebar, set the appropriate form type.
    * If closing the sidebar and signed in, warn the admin
@@ -87,18 +95,29 @@ function App() {
     formName && setActiveForm(formName);
   };
 
+  /**
+   * After confirmation, close the form and reset state
+   */
   const leaveForm = () => {
+    console.log("naw")
     setSidebarOpen(false);
     setFormWarning(false);
+    setSelectedResource(null);
   };
 
+  /**
+   * Fetch and set murals in local state
+   */
   const getMural = async () => {
     const response = await fetch(CREATE_MURAL_API);
     const data = await response.json();
 
     setMurals(data.rows);
   };
 
+  /**
+   * Fetch and set tours in local state
+   */
   const getTour = async () => {
     const response = await fetch(GET_ALL_TOUR);
     const data = await response.json();
@@ -172,6 +191,9 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedResource]);
 
+  /**
+   * On app startup, load murals and tours to be rendered on the map
+   */
   useEffect(() => {
     getMural();
     getTour();
@@ -182,7 +204,7 @@ function App() {
       <Context.Provider value={{ user: user, getMural }}>
         <SigninForm
           signInClick={handleSignin}
-          cancelClick={handleCancelSignin}
+          cancelClick={() => setSigningIn(false)}
           error={signInError}
           open={signingIn}
         />
@@ -206,7 +228,7 @@ function App() {
         />
         <DropdownMenu
           isSignedIn={isSignedIn}
-          signinClick={openSignin}
+          signinClick={() => setSigningIn(true)}
           signoutClick={handleSignout}
           donateClick={() => setDonateOpen(true)}
         />

frontend/src/SearchResultCard/SearchResultCard.tsx

@@ -60,6 +60,11 @@ function SearchResultCard(props: ISearchCardSetProps) {
     }
   }
 
+  /**
+   * When the search result is clicked, pass its type and contents
+   * up to the parent to render the correct form. If the result is
+   * a mural, zoom the map to its location.
+   */
   function handleClick() {
     switch (props.type) {
       case FORM.MURAL:
@@ -76,7 +81,6 @@ function SearchResultCard(props: ISearchCardSetProps) {
         props.setSelectedResource(props.item)
         break;
     }
-    props.handleCancel()
   }
 
   const body = generateBody()