add first post prompt

Author: JM-Flores

apps/codebility/app/home/feeds/_components/FirstPostPrompt.tsx

@@ -0,0 +1,38 @@
+import { Box } from "@/components/shared/dashboard";
+import { Button } from "@codevs/ui";
+import { Sparkles, PlusCircle } from "lucide-react";
+
+interface FirstPostPromptProps {
+  onCreatePost: () => void;
+}
+
+export default function FirstPostPrompt({
+  onCreatePost,
+}: FirstPostPromptProps) {
+  return (
+    <Box className="group relative flex h-[340px] cursor-pointer flex-col justify-center rounded-xl p-6 transition hover:shadow-md">
+      <div className="flex flex-col items-center text-center">
+            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+            <Sparkles className="h-7 w-7 text-primary" />
+            </div>
+
+            <h2 className="mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100">
+            Create your first post
+            </h2>
+
+            <p className="mb-6 max-w-xs text-sm text-gray-500 dark:text-gray-400">
+            Share something with the community and earn social points for your
+            first post 🚀
+            </p>
+
+            <button
+            onClick={onCreatePost}
+            className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary/90"
+            >
+            <PlusCircle className="h-4 w-4" />
+            Create Post
+            </button>
+      </div>
+    </Box>
+  );
+}

apps/codebility/app/home/feeds/_components/SocialPointsCard.tsx

@@ -33,7 +33,7 @@ export default function SocialPointsCard() {
   }, [user, posts]);
 
   return (
-    <div className="dark:bg-white/3 relative mt-4 w-full rounded-xl border border-white/10 bg-gray-800 p-4 text-white shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:bg-white/10 hover:shadow-lg dark:border-white/5 xl:fixed xl:right-6 xl:top-20 xl:z-50 xl:mt-0 xl:w-64">
+    <div className="dark:bg-white/3 relative mt-4 mb-4 w-full rounded-xl border border-white/10 bg-gray-800 p-4 text-white shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:bg-white/10 hover:shadow-lg dark:border-white/5 xl:fixed xl:right-6 xl:top-20 xl:z-50 xl:mt-0 xl:w-64">
       <div className="relative">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-2">

apps/codebility/app/home/feeds/_services/action.ts

@@ -600,4 +600,26 @@ export const hasReachedDailyPostLimit = async (author_id: string, limit = 2) =>
     console.error("Error in hasReachedDailyPostLimit:", error);
     throw error;
   }
-};
+};
+
+export const hasNotPostedYet = async (user_id: string) => {
+  try {
+    const supabase = await createClientServerComponent();
+
+    const { count, error } = await supabase
+      .from("posts")
+      .select("id", { count: "exact", head: true })
+      .eq("author_id", user_id);
+
+    if (error) {
+      console.error("Error checking if user has posted:", error);
+      throw error;
+    }
+
+    // Return true if user has zero posts
+    return (count ?? 0) === 0;
+  } catch (error) {
+    console.error("Error in hasNotPostedYet:", error);
+    throw error;
+  }
+};

apps/codebility/app/home/feeds/page.tsx

@@ -9,8 +9,10 @@ import Feed from "./_components/Feed";
 import SocialPointsCard from "./_components/SocialPointsCard";
 import SortMenu from "./_components/SortMenu";
 import { SEARCH_DEBOUNCE_MS } from "./_constants";
-import { getUserRole, hasReachedDailyPostLimit } from "./_services/action";
+import { getUserRole, hasNotPostedYet, hasReachedDailyPostLimit } from "./_services/action";
 import toast from "react-hot-toast";
+import FirstPostPrompt from "./_components/FirstPostPrompt";
+import { PlusCircle } from "lucide-react";
 
 type SortField = "title" | "date" | "upvotes";
 type SortOrder = "asc" | "desc";
@@ -22,6 +24,7 @@ export default function FeedsPage() {
   const [debouncedQuery, setDebouncedQuery] = useState("");
   const [sortField, setSortField] = useState<SortField>("date");
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [userHasNotPostedYet, setUserHasNotPostedYet] = useState(false);
   const { user } = useUserStore();
 
   useEffect(() => {
@@ -33,6 +36,21 @@ export default function FeedsPage() {
     if (user) fetchRole();
   }, [user]);
 
+  useEffect(() => {
+    if (!user) return;
+
+    const checkIfUserHasPosted = async () => {
+      try {
+        const result = await hasNotPostedYet(user.id);
+        setUserHasNotPostedYet(result);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+  checkIfUserHasPosted();
+  }, [user]);
+
   useEffect(() => {
     const handler = setTimeout(
       () => setDebouncedQuery(searchQuery),
@@ -72,9 +90,21 @@ export default function FeedsPage() {
 
         <SocialPointsCard />
 
-        <Button className="mb-4 mt-4 w-auto" onClick={openModal}>
-          Create Post
-        </Button>
+        {userHasNotPostedYet && (
+          <div className="mb-4">
+          <FirstPostPrompt onCreatePost={openModal}/> 
+        </div>
+        )}
+
+        {!userHasNotPostedYet && (
+          <Button
+            onClick={openModal}
+            className="gap-2 w-auto mb-4"
+          >
+            <PlusCircle className="h-5 w-5" />
+            Create Post
+          </Button>
+        )}
 
         {/* Search bar + sort button row */}
         <div className="relative mb-6 flex items-center gap-4">