Implemented getRecommendedQuestions server-action. Refactored question retrieval to handle home filters criteria.

Author: ladunjexa

app/(root)/(home)/page.tsx

@@ -10,7 +10,10 @@ import Pagination from "@/components/shared/Pagination";
 import HomeFilters from "@/components/home/HomeFilters";
 import QuestionCard from "@/components/cards/QuestionCard";
 
-import { getQuestions } from "@/lib/actions/question.action";
+import {
+  getQuestions,
+  getRecommendedQuestions,
+} from "@/lib/actions/question.action";
 
 import { HomePageFilters } from "@/constants/filters";
 
@@ -24,11 +27,28 @@ export const metadata: Metadata = {
 export default async function Home({ searchParams }: SearchParamsProps) {
   const { userId: clerkId } = auth();
 
-  const result = await getQuestions({
-    searchQuery: searchParams.q,
-    filter: searchParams.filter,
-    page: searchParams.page ? +searchParams.page : 1,
-  });
+  let result;
+
+  if (searchParams?.filter === "recommended") {
+    if (clerkId) {
+      result = await getRecommendedQuestions({
+        userId: clerkId,
+        searchQuery: searchParams.q,
+        page: searchParams.page ? +searchParams.page : 1,
+      });
+    } else {
+      result = {
+        questions: [],
+        isNext: false,
+      };
+    }
+  } else {
+    result = await getQuestions({
+      searchQuery: searchParams.q,
+      filter: searchParams.filter,
+      page: searchParams.page ? +searchParams.page : 1,
+    });
+  }
 
   return (
     <>

components/home/HomeFilters.tsx

@@ -1,23 +1,50 @@
-/* eslint-disable no-unused-vars */
 "use client";
 
 import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 
+import { formUrlQuery } from "@/lib/utils";
+
 import { HomePageFilters } from "@/constants/filters";
 
 const HomeFilters = () => {
-  const [active, setActive] = useState<string>("");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [active, setActive] = useState("");
+
+  const handleTypeClick = (item: string) => {
+    if (active === item) {
+      setActive("");
+
+      const newUrl = formUrlQuery({
+        params: searchParams.toString(),
+        key: "filter",
+        value: null,
+      });
+
+      router.push(newUrl, { scroll: false });
+    } else {
+      setActive(item);
+
+      const newUrl = formUrlQuery({
+        params: searchParams.toString(),
+        key: "filter",
+        value: item.toLowerCase(),
+      });
 
-  // todo: implement home filters functionality
+      router.push(newUrl, { scroll: false });
+    }
+  };
 
   return (
     <div className="mt-10 flex-wrap gap-3 md:flex">
       {HomePageFilters.map((filter) => (
         <Button
           key={filter.value}
-          onClick={() => {}}
+          onClick={() => handleTypeClick(filter.value)}
           className={`body-medium rounded-lg px-6 py-3 capitalize shadow-none ${
             active === filter.value
               ? "bg-primary-100 text-primary-500 dark:bg-dark-400 dark:hover:bg-dark-400"

components/ui/skeleton.tsx

@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils"
+import React from "react";
+import { cn } from "@/lib/utils";
 
 function Skeleton({
   className,
@@ -9,7 +10,7 @@ function Skeleton({
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

lib/actions/question.action.ts

@@ -20,6 +20,7 @@ import type {
   GetQuestionByIdParams,
   GetQuestionsParams,
   QuestionVoteParams,
+  RecommendedParams,
 } from "./shared.types";
 
 export async function createQuestion(params: CreateQuestionParams) {
@@ -335,3 +336,74 @@ export async function getHotQuestions() {
     throw error;
   }
 }
+
+export async function getRecommendedQuestions(params: RecommendedParams) {
+  try {
+    connectToDatabase();
+
+    const { userId, page = 1, pageSize = 20, searchQuery } = params;
+
+    // find user
+    const user = await User.findOne({ clerkId: userId });
+
+    if (!user) {
+      throw new Error("user not found");
+    }
+
+    const skipAmount = (page - 1) * pageSize;
+
+    // Find the user's interactions
+    const userInteractions = await Interaction.find({ user: user._id })
+      .populate("tags")
+      .exec();
+
+    // Extract tags from user's interactions
+    const userTags = userInteractions.reduce((tags, interaction) => {
+      if (interaction.tags) {
+        tags = tags.concat(interaction.tags);
+      }
+      return tags;
+    }, []);
+
+    // Get distinct tag IDs from user's interactions
+    const distinctUserTagIds = [
+      // @ts-ignore
+      ...new Set(userTags.map((tag: any) => tag._id)),
+    ];
+
+    const query: FilterQuery<typeof Question> = {
+      $and: [
+        { tags: { $in: distinctUserTagIds } }, // Questions with user's tags
+        { author: { $ne: user._id } }, // Exclude user's own questions
+      ],
+    };
+
+    if (searchQuery) {
+      query.$or = [
+        { title: { $regex: searchQuery, $options: "i" } },
+        { content: { $regex: searchQuery, $options: "i" } },
+      ];
+    }
+
+    const totalQuestions = await Question.countDocuments(query);
+
+    const recommendedQuestions = await Question.find(query)
+      .populate({
+        path: "tags",
+        model: Tag,
+      })
+      .populate({
+        path: "author",
+        model: User,
+      })
+      .skip(skipAmount)
+      .limit(pageSize);
+
+    const isNext = totalQuestions > skipAmount + recommendedQuestions.length;
+
+    return { questions: recommendedQuestions, isNext };
+  } catch (error) {
+    console.error("Error getting recommended questions:", error);
+    throw error;
+  }
+}