feat: close the settings popup if saved successfully

Author: jaybuidl

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "@kleros/ui-components-library";
 import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
 import FormContact from "./FormContact";
 import messages from "../../../../../../../consts/eip712-messages";
+import { ISettings } from "../../types";
 
 const FormContainer = styled.form`
   position: relative;
@@ -25,15 +26,15 @@ const FormContactContainer = styled.div`
   margin-bottom: 24px;
 `;
 
-const FormContactDetails: React.FC = () => {
+const FormContactDetails: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
   const [telegramInput, setTelegramInput] = useState<string>("");
   const [emailInput, setEmailInput] = useState<string>("");
   const [telegramIsValid, setTelegramIsValid] = useState<boolean>(false);
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
   const { data: walletClient } = useWalletClient();
   const { address } = useAccount();
 
-  // TODO: retrieve the current email address from the database and populate the email input with it
+  // TODO: after the user is authenticated, retrieve the current email/telegram from the database and populate the form
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -54,7 +55,10 @@ const FormContactDetails: React.FC = () => {
       address,
       signature,
     };
-    await uploadSettingsToSupabase(data);
+    const response = await uploadSettingsToSupabase(data);
+    if (response.ok) {
+      setIsSettingsOpen(false);
+    }
   };
   return (
     <FormContainer onSubmit={handleSubmit}>

web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { ISettings } from "../types";
 
 import FormContactDetails from "./FormContactDetails";
 import { EnsureChain } from "components/EnsureChain";
@@ -32,13 +33,13 @@ const EnsureChainContainer = styled.div`
   padding-bottom: 16px;
 `;
 
-const NotificationSettings: React.FC = () => {
+const NotificationSettings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
   return (
     <EnsureChainContainer>
       <EnsureChain>
         <Container>
           <HeaderNotifs />
-          <FormContactDetails />
+          <FormContactDetails setIsSettingsOpen={setIsSettingsOpen} />
         </Container>
       </EnsureChain>
     </EnsureChainContainer>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,10 +1,11 @@
-import React, { Dispatch, SetStateAction, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
 import { Tabs } from "@kleros/ui-components-library";
 import General from "./General";
 import NotificationSettings from "./Notifications";
 import { useFocusOutside } from "hooks/useFocusOutside";
 import { Overlay } from "components/Overlay";
+import { ISettings } from "./types";
 
 const Container = styled.div`
   display: flex;
@@ -44,10 +45,6 @@ const TABS = [
   },
 ];
 
-interface ISettings {
-  setIsSettingsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
 const Settings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
   const [currentTab, setCurrentTab] = useState<number>(0);
   const containerRef = useRef(null);
@@ -65,7 +62,7 @@ const Settings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
             setCurrentTab(n);
           }}
         />
-        {currentTab === 0 ? <General /> : <NotificationSettings />}
+        {currentTab === 0 ? <General /> : <NotificationSettings setIsSettingsOpen={setIsSettingsOpen} />}
       </Container>
     </>
   );

web/src/layout/Header/navbar/Menu/Settings/types.ts

@@ -0,0 +1,5 @@
+import { Dispatch, SetStateAction } from "react";
+
+export type ISettings = {
+  setIsSettingsOpen: Dispatch<SetStateAction<boolean>>;
+};