From 25d67f999a0674af0d0dbc31bf6288bc2885aab2 Mon Sep 17 00:00:00 2001
From: HetviSoni <202051178@iiitvadodara.ac.in>
Date: Thu, 11 May 2023 13:15:13 +0530
Subject: [PATCH] sign up button disappears when successfully signed up

Signed-off-by: HetviSoni <202051178@iiitvadodara.ac.in>
---
 site/src/App.js                         | 11 ++++++++---
 site/src/components/Navigation/index.js |  4 ++--
 site/src/components/SignupForm/index.js |  5 +++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/site/src/App.js b/site/src/App.js
index 2891314..514f043 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -8,18 +8,23 @@ import { useDarkMode } from "./components/useDarkMode";
 import ReactPlayer from 'react-player/youtube'
 import Navigation from "./components/Navigation";
 import Faq from "./components/Faq";
-
+import { useState } from "react";
 
 const App = () => {
 
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === 'light' ? lightTheme : darkTheme;
+  const [showSignUpButton, setShowSignUpButton] = useState(true);
+
+  const handleSignUpFormSubmit = () => {
+    setShowSignUpButton(false);
+  };
 
   return (
     <>
       <ThemeProvider theme={themeMode}>
         <GlobalStyle />
-        <Navigation theme={theme} toggleTheme={toggleTheme} />
+        <Navigation theme={theme} toggleTheme={toggleTheme} showSignUpButton={showSignUpButton} />
         <Main>
           <section className="hero">
             <h3 className="try-now-txt">Try it now!</h3>
@@ -43,7 +48,7 @@ const App = () => {
           </section>
           <section className="form" id="signup-form">
             <h2>Sign up for the early access of cloud native playground!</h2>
-            <SignupForm />
+            <SignupForm onSubmit={handleSignUpFormSubmit}  />
           </section>
           <section className="join-community">
             <div>
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index 2223bd2..e1ca0b4 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -4,7 +4,7 @@ import mesheryLogo from '../../assets/images/meshery-learn-logo.png';
 import mesheryLogoLight from '../../assets/images/meshery-learn-logo-white.png';
 import { Toggle } from "../Toggle";
 
-function Navigation({theme, toggleTheme}) {
+function Navigation({theme, toggleTheme, showSignUpButton}) {
 
 
   const [openNav, setOpenNav] = useState(false);
@@ -29,7 +29,7 @@ function Navigation({theme, toggleTheme}) {
         <img className="logo" src={Logo} alt="Meshery Logo" />
         <div className="btn-container">
           <Toggle theme={theme} toggleTheme={toggleTheme} />
-          <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>
+          {showSignUpButton && <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>}
           {/* <a href="https://playground.meshery.io" className="login-btn" role="button">Login</a> */}
         </div>
         <div className="dropdown_btn" onClick={handleNavOpen}>
diff --git a/site/src/components/SignupForm/index.js b/site/src/components/SignupForm/index.js
index 3d016cc..d1c671d 100644
--- a/site/src/components/SignupForm/index.js
+++ b/site/src/components/SignupForm/index.js
@@ -5,7 +5,7 @@ import MesheryText from "../../assets/images/meshery-light-text.svg";
 import SignupFormWrapper from "./signupform.style.js";
 import DiscussCallout from "../Discuss-Callout";
 
-const SignupForm = () => {
+const SignupForm = (props) => {
   // Form values
   const [memberFormOne, setMemberFormOne] = useState({});
 
@@ -29,6 +29,7 @@ const SignupForm = () => {
 
   useEffect(() => {
     if (formSubmitted) {
+      props.onSubmit();
       axios.post("https://hook.us1.make.com/s4jo47a8ydq6uk7gg16wuukgr4l52p8c", {
         memberFormOne
       });
@@ -38,7 +39,7 @@ const SignupForm = () => {
         behavior: "smooth"
       });
     }
-  }, [formSubmitted, memberFormOne]);
+  }, [formSubmitted, memberFormOne, props]);
 
   const PlayFormComponent = () => {
     return (