Fix feedback form button into modal instead of page

Also remove hidden give feedback button on the main home page
nepalcodes · Aug 23, 2024 · f64f737 · f64f737
1 parent 7666c6b
commit f64f737
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 38 deletions.
diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx
@@ -8,7 +8,6 @@ import PasswordEmail from "@/pages/PasswordEmail";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { PrivateRoutes } from "@/components/PrivateRoutes";
-import FeedbackForm from "@/components/FeedbackForm";
 import About from "@/pages/About";
 import Credits from "@/pages/Credits";
 import Quiz from "@/pages/Quiz";
@@ -18,20 +17,13 @@ const App: React.FC = () => {
   const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID;
   ReactGA.initialize(TrackingID);
 
-  const handleFeedbackFormClose = () => {
-    console.log("Feedback form closed");
-  };
   return (
     <div className="mx-5 min-[1200px]:mx-auto max-w-[1200px] ">
       <Router>
         <Routes>
           <Route path="/about" element={<About />} />
           <Route path="/login" element={<Login />} />
           <Route path="/credits" element={<Credits />} />
-          <Route
-            path="/feedback"
-            element={<FeedbackForm onClose={handleFeedbackFormClose} />}
-          />
           <Route path="/signup" element={<SignUp />} />
           <Route path="/reset-password" element={<ResetPassword />} />
           <Route path="/reset-password-email" element={<PasswordEmail />} />

diff --git a/nepalingo-web/src/components/header/Header.tsx b/nepalingo-web/src/components/header/Header.tsx
@@ -1,20 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
 import logo from "@/assets/NewLogo.png";
 import UserProfile from "@/components/header/UserProfile";
 import ChangeLanguage from "@/components/header/ChangeLanguage";
+import FeedbackForm from "@/components/FeedbackForm";
 import { Link } from "react-router-dom";
 
 const Header: React.FC = () => {
+  const [isFeedbackFormOpen, setIsFeedbackFormOpen] = useState(false);
+
+  const handleOpenFeedbackForm = () => {
+    setIsFeedbackFormOpen(true);
+  };
+
+  const handleCloseFeedbackForm = () => {
+    setIsFeedbackFormOpen(false);
+  };
+
   return (
     <nav className=" border-gray-200  py-1 bg-black text-white flex gap-4 justify-between items-center w-full h-16">
       <div>
         <Link to={"/"}>
           <img src={logo} alt="Nepalingo Logo" className="h-12" />
         </Link>
       </div>
-      <a href="/feedback" className="text-white hover:underline">
+      <button onClick={handleOpenFeedbackForm} className="hover:underline">
         Give us Feedback!
-      </a>
+      </button>
+
+      {isFeedbackFormOpen && (
+        <div className="z-20 fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
+          <FeedbackForm onClose={handleCloseFeedbackForm} />
+        </div>
+      )}
       <a href="/about" className="text-white hover:underline">
         About
       </a>

diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { useAuth } from "@/hooks/Auth";
@@ -7,7 +7,6 @@ import GreetingCard from "@/components/GreetingCard";
 import ActivityCard from "@/components/ActivityCard";
 import { useLanguage } from "@/hooks/Langauge";
 import StreakDisplay from "@/components/header/StreakDisplay";
-import FeedbackForm from "@/components/FeedbackForm";
 import RandomQuoteComponent from "@/components/randomQuotes";
 
 const Home: React.FC = () => {
@@ -19,16 +18,6 @@ const Home: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
   const { selectedLanguage } = useLanguage();
-  const [isFeedbackFormOpen, setIsFeedbackFormOpen] = useState(false);
-
-  const handleOpenFeedbackForm = () => {
-    setIsFeedbackFormOpen(true);
-  };
-
-  const handleCloseFeedbackForm = () => {
-    setIsFeedbackFormOpen(false);
-  };
-
   return (
     <>
       <div className="flex flex-col w-full min-h-screen bg-black text-white font-primary">
@@ -84,21 +73,6 @@ const Home: React.FC = () => {
             </div>
           </div>
         </div>
-
-        <div className="flex h-16 max-h-12 items-center justify-between py-4 px-5 bg-white-sidebar border-black">
-          <button
-            onClick={handleOpenFeedbackForm}
-            className="bg-white-500 text-black px-2 py-1 rounded-md hover:bg-red-600"
-          >
-            Give Feedback
-          </button>
-        </div>
-
-        {isFeedbackFormOpen && (
-          <div className="fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
-            <FeedbackForm onClose={handleCloseFeedbackForm} />
-          </div>
-        )}
       </div>
     </>
   );