make more sub-components and shared logic

wasp-lang · Oct 30, 2023 · e6c81c0 · e6c81c0
1 parent 83e6237
commit e6c81c0
Show file tree

Hide file tree

Showing 6 changed files with 326 additions and 362 deletions.
diff --git a/wasp-ai/src/client/components/Header.jsx b/wasp-ai/src/client/components/Header.jsx
@@ -1,58 +1,72 @@
-import { StatusPill } from "./StatusPill";
 import { Title } from "./Title";
-import { BiSolidUser, BiSolidHome } from "react-icons/bi";
+import { BiSolidUser } from "react-icons/bi";
 import { RxQuestionMarkCircled } from "react-icons/rx";
 import useAuth from "@wasp/auth/useAuth";
+import { useHistory } from "react-router-dom";
+import { BiSolidHome } from "react-icons/bi";
 import { Link } from "@wasp/router";
 
-export function Header({ currentStatus, isStatusVisible, isUserPage, setIsLoginModalOpen }) {
-  const { data: user } = useAuth();
-
+export function Header({ children, StatusPill, currentStatus }) {
   return (
     <div className="mb-4 bg-slate-50 p-8 rounded-xl md:flex justify-between items-center">
       <Title />
-      {isStatusVisible && (
-        <div className="flex flex-col items-end gap-2">
-          <div className="flex items-center gap-3 my-1 mr-1">
-            <a href="#faq" className="flex items-center justify-center space-x-1 text-slate-500 hover:text-slate-600">
-              <span className="text-sm font-normal">Help</span>
-              <RxQuestionMarkCircled className="text-base text-slate-600" />
-            </a>
-
-            <div className="flex items-center relative group">
-              <button
-                onClick={() => {
-                  if (!user) {
-                    setIsLoginModalOpen(true);
-                  } else {
-                   window.location.href = "/user";
-                  }
-                }}
-              >
-                <BiSolidUser className="w-5 h-5 text-slate-600" />
-                <div className="absolute text-center whitespace-nowrap bg-slate-600 text-white text-xs rounded py-1 px-4 bottom-100 left-1/2 transform -translate-x-1/2 translate-y-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all ease-in-out duration-275">
-                  My Apps
-                </div>
-              </button>
-            </div>
-          </div>
+      <div className="flex flex-col items-end gap-2">
+        <div className="flex items-center gap-3 m-1">{children}</div>
+        {!!StatusPill && (
           <StatusPill status={currentStatus.status} className="hidden md:flex">
             {currentStatus.message}
           </StatusPill>
-        </div>
-      )}
-      {isUserPage && (
-        <div className="flex items-center justify-center gap-3 mr-2">
-          <button className="relative group">
-            <Link to="/">
-              <BiSolidHome className="w-5 h-5 text-slate-600 mr-1" />
-              <div className="absolute text-center whitespace-nowrap bg-slate-600 text-white text-xs rounded py-1 px-4 bottom-100 left-1/2 transform -translate-x-1/2 translate-y-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all ease-in-out duration-275">
-                Home
-              </div>
-            </Link>
-          </button>
-        </div>
-      )}
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FaqButton() {
+  return (
+    <a href="#faq" className="flex items-center justify-center space-x-1 text-slate-500 hover:text-slate-600">
+      <span className="text-sm font-normal">Help</span>
+      <RxQuestionMarkCircled className="text-base text-slate-600" />
+    </a>
+  );
+}
+
+export function ProfileButton({ setIsLoginModalOpen }) {
+  const { data: user } = useAuth();
+  const history = useHistory();
+
+  return (
+    <button
+      className="relative group"
+      onClick={() => {
+        if (!user) {
+          setIsLoginModalOpen(true);
+        } else {
+          history.push("/user");
+        }
+      }}
+    >
+      <BiSolidUser className="w-5 h-5 text-slate-600" />
+      <ToolTip>My Apps</ToolTip>
+    </button>
+  );
+}
+
+export function HomeButton() {
+  return (
+    <button className="relative group">
+      <Link to="/">
+        <BiSolidHome className="w-5 h-5 text-slate-600" />
+        <ToolTip>Home</ToolTip>
+      </Link>
+    </button>
+  );
+}
+
+function ToolTip({ children }) {
+  return (
+    <div className="absolute text-center whitespace-nowrap bg-slate-600 text-white text-xs rounded py-1 px-4 bottom-100 left-1/2 transform -translate-x-1/2 translate-y-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all ease-in-out duration-275">
+      {children}
     </div>
   );
 }
diff --git a/wasp-ai/src/client/pages/MainPage.jsx b/wasp-ai/src/client/pages/MainPage.jsx
@@ -3,7 +3,7 @@ import startGeneratingNewApp from "@wasp/actions/startGeneratingNewApp";
 import { useHistory } from "react-router-dom";
 import { MyDropdown } from "../components/Dropdown";
 import { ExampleCard } from "../components/ExampleCard";
-import { Header } from "../components/Header";
+import { FaqButton, Header, ProfileButton } from "../components/Header";
 import { availableColors } from "../components/Color";
 import { Faq } from "../components/Faq";
 import { exampleIdeas } from "../examples";
@@ -14,13 +14,14 @@ import useAuth from "@wasp/auth/useAuth";
 import { SignInButton as GitHubSignInButton } from "@wasp/auth/helpers/GitHub";
 import { useQuery } from "@wasp/queries";
 import getProjectsByUser from "@wasp/queries/getProjectsByUser";
+import { StatusPill } from "../components/StatusPill";
 
 const MainPage = () => {
   const [appName, setAppName] = useState("");
   const [appDesc, setAppDesc] = useState("");
   const [appPrimaryColor, setAppPrimaryColor] = useState(availableColors.find((color) => color.name === "sky"));
 
-  const [askForStarsModal, setIsAskForStarsModalOpen] = useState(false);
+  const [isAskForStarsModalOpen, setIsAskForStarsModalOpen] = useState(false);
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [currentStatus, setCurrentStatus] = useState({
     status: "idle",
@@ -113,14 +114,14 @@ const MainPage = () => {
           appCreativityLevel: creativityLevel.value,
         })
       );
-      if (!user) {
-        setIsLoginModalOpen(true);
-        return;
-      }
     } catch (error) {
       console.error(error);
     }
-
+
+    if (!user) {
+      setIsLoginModalOpen(true);
+      return;
+    }
     setCurrentStatus({
       status: "idle",
       message: "Starting...",
@@ -160,10 +161,13 @@ const MainPage = () => {
 
   return (
     <div className="container">
-      <Header currentStatus={currentStatus} isStatusVisible={true} setIsLoginModalOpen={setIsLoginModalOpen} />
+      <Header StatusPill={StatusPill} currentStatus={currentStatus}>
+        <FaqButton />
+        <ProfileButton setIsLoginModalOpen={setIsLoginModalOpen} />
+      </Header>
 
       <LoginModal isOpen={isLoginModalOpen} setIsOpen={setIsLoginModalOpen} />
-      <AskForStarsModal isOpen={askForStarsModal} setIsOpen={setIsAskForStarsModalOpen} />
+      <AskForStarsModal isOpen={isAskForStarsModalOpen} setIsOpen={setIsAskForStarsModalOpen} />
 
       <form onSubmit={startGenerating} className="bg-slate-50 p-8 rounded-xl">
         <div className="mb-6 flex flex-col gap-3">