check if user has starred our repo

wasp-lang · Oct 27, 2023 · 2d7d36d · 2d7d36d
1 parent 03106d3
commit 2d7d36d
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 177 deletions.
diff --git a/wasp-ai/main.wasp b/wasp-ai/main.wasp
@@ -51,7 +51,7 @@ app waspAi {
         getUserFieldsFn: import { getGoogleUserFields } from "@server/auth.js",
       },
     },
-    onAuthFailedRedirectTo: "/login",
+    onAuthFailedRedirectTo: "/",
     onAuthSucceededRedirectTo: "/"
   }
 }

diff --git a/wasp-ai/src/client/components/Header.jsx b/wasp-ai/src/client/components/Header.jsx
@@ -1,54 +1,58 @@
 import { StatusPill } from "./StatusPill";
 import { Title } from "./Title";
-import { signInUrl as gitHubSignInUrl } from "@wasp/auth/helpers/GitHub";
-import { AiFillGithub } from "react-icons/ai";
-import { BiSolidUser } from "react-icons/bi";
+import { BiSolidUser, BiSolidHome } from "react-icons/bi";
 import { RxQuestionMarkCircled } from "react-icons/rx";
 import useAuth from "@wasp/auth/useAuth";
 import { Link } from "@wasp/router";
 
-
-export function Header({ currentStatus, isStatusVisible }) {
+export function Header({ currentStatus, isStatusVisible, isUserPage, setIsLoginModalOpen }) {
   const { data: user } = useAuth();
 
   return (
     <div className="mb-4 bg-slate-50 p-8 rounded-xl md:flex justify-between items-center">
       <Title />
-      {!!user?.username && isStatusVisible && (
-        <div className="flex flex-col items-end gap-1">
-          <div className="flex items-center gap-3 mb-2 mr-1">
-            {/* <p className="hidden md:block text-gray-700 ">
-              hey, <span className="font-semibold">{user.username} </span>{" "}
-            </p> */}
+      {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="relative group">
-              <Link to="/user">
+              <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 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all ease-in-out duration-275">
+                <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>
-              </Link>
+              </button>
             </div>
           </div>
           <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>
   );
 }
-
-function GithubLoginButton() {
-  return (
-    <button
-      className="button gray flex !text-gray-800 hover:bg-slate-300 shadow-md"
-      onClick={() => (window.location.href = gitHubSignInUrl)}
-    >
-      <AiFillGithub className="w-6 h-6 mr-2" /> Sign in with GitHub
-    </button>
-  );
-}
diff --git a/wasp-ai/src/client/pages/MainPage.jsx b/wasp-ai/src/client/pages/MainPage.jsx
@@ -12,20 +12,23 @@ import { readReferrerFromLocalStorage } from "../storage";
 import { MyDialog } from "../components/Dialog";
 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";
 
 const MainPage = () => {
   const [appName, setAppName] = useState("");
   const [appDesc, setAppDesc] = useState("");
-  const [isPowerUserModalOpen, setIsPowerUserModalOpen] = useState(false);
+  const [appPrimaryColor, setAppPrimaryColor] = useState(availableColors.find((color) => color.name === "sky"));
+
+  const [askForStarsModal, setIsAskForStarsModalOpen] = useState(false);
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [currentStatus, setCurrentStatus] = useState({
     status: "idle",
     message: "Waiting for instructions",
   });
   const history = useHistory();
   const { data: user } = useAuth();
-
-  const [appPrimaryColor, setAppPrimaryColor] = useState(availableColors.find((color) => color.name === "sky"));
+  const { data: userProjects } = useQuery(getProjectsByUser, {}, { enabled: !!user });
 
   const availableCreativityLevels = useMemo(
     () => [
@@ -53,7 +56,6 @@ const MainPage = () => {
   const [creativityLevel, setCreativityLevel] = useState(
     availableCreativityLevels.find((lvl) => lvl.value === "balanced")
   );
-
   const availableAuthMethods = useMemo(
     () => [
       {
@@ -74,15 +76,40 @@ const MainPage = () => {
     ],
     []
   );
-
   const [appAuthMethod, setAppAuthMethod] = useState(availableAuthMethods[0]);
 
   useEffect(() => {
+    if (userProjects?.length >= 1) {
+      checkIfUserStarredWasp({ username: user.username }).then((hasStarred) => {
+        if (!hasStarred) {
+          setIsAskForStarsModalOpen(true);
+        }
+      });
+    }
+  }, [userProjects, user]);
+
+  async function checkIfUserStarredWasp({ username }) {
+    const token = "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";
     try {
-      const appDetails = JSON.parse(localStorage.getItem("appDetails"));
-      if (user?.projects.length >= 2) {
-        setIsPowerUserModalOpen(true);
+      const response = await fetch(`https://api.github.com/user/starred/wasp-lang/wasp`, {
+        method: "GET",
+        headers: {
+          Authorization: "Basic " + btoa(username + ":" + token),
+        },
+      });
+      if (response.status === 404) {
+        return false;
+      } else if (response.status === 204) {
+        return true;
       }
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  }
+
+  useEffect(() => {
+    try {
+      const appDetails = JSON.parse(localStorage.getItem("appDetails"));
       if (appDetails) {
         setAppName(appDetails.appName);
         setAppDesc(appDetails.appDesc);
@@ -156,10 +183,10 @@ const MainPage = () => {
 
   return (
     <div className="container">
-      <Header currentStatus={currentStatus} isStatusVisible={true} />
+      <Header currentStatus={currentStatus} isStatusVisible={true} setIsLoginModalOpen={setIsLoginModalOpen} />
 
       <LoginModal isOpen={isLoginModalOpen} setIsOpen={setIsLoginModalOpen} />
-      <PowerUserModal isOpen={isPowerUserModalOpen} setIsOpen={setIsPowerUserModalOpen} />
+      <AskForStarsModal isOpen={askForStarsModal} setIsOpen={setIsAskForStarsModalOpen} />
 
       <form onSubmit={startGenerating} className="bg-slate-50 p-8 rounded-xl">
         <div className="mb-6 flex flex-col gap-3">
@@ -235,7 +262,7 @@ The simpler and more specific the app is, the better the generated app will be."
 };
 export default MainPage;
 
-export function PowerUserModal({ isOpen, setIsOpen }) {
+export function AskForStarsModal({ isOpen, setIsOpen }) {
   return (
     <MyDialog
       isOpen={isOpen}
@@ -272,10 +299,10 @@ export function PowerUserModal({ isOpen, setIsOpen }) {
 export function LoginModal({ isOpen, setIsOpen }) {
   return (
     <MyDialog isOpen={isOpen} onClose={() => setIsOpen(false)} title={<span>Sign in to your GitHub account</span>}>
-      <div className="mt-6 space-y-5">
-        <p className="text-base leading-relaxed text-gray-500">
-          We're offering this tool completely <span className="font-semibold">free</span>. All you have to do is login
-          with your GitHub Account.
+      <div className="mt-6 space-y-5 ">
+        <p className="text-base leading-relaxed text-center text-gray-500">
+          This tool is completely <span className="font-semibold">free</span>.<br /> Just sign in with your GitHub
+          Account.
         </p>
         <GitHubSignInButton />
       </div>

diff --git a/wasp-ai/src/client/pages/StatsPage.jsx b/wasp-ai/src/client/pages/StatsPage.jsx
@@ -337,11 +337,11 @@ function getWaitingInQueueDuration(stat, logsByProjectId) {
   return getFormattedDiff(start, end);
 }
 
-function getColorValue(colorName) {
+export function getColorValue(colorName) {
   return availableColors.find((color) => color.name === colorName).color;
 }
 
-function getStatusName(status) {
+export function getStatusName(status) {
   switch (status) {
     case "in-progress":
       return "inProgress";
@@ -356,7 +356,7 @@ function getStatusName(status) {
   }
 }
 
-function getStatusText(status) {
+export function getStatusText(status) {
   switch (status) {
     case "in-progress":
       return "In progress";