Merge pull request #659 from bounswe/feature/651-home-page

[Mobile]  Home Page

mobile/app/(tabs)/index.tsx

@@ -4,6 +4,7 @@ import { Button, ButtonText, VStack } from "@/components/ui";
 import useAuthStore from "@/services/auth";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
+import { Feed } from "@/components/Feed";
 
 export default function HomeScreen() {
   const auth = useAuthStore();
@@ -45,6 +46,7 @@ export default function HomeScreen() {
             <ButtonText>Logout</ButtonText>
           </Button>
         )}
+        <Feed />
       </VStack>
     </ScrollView>
   );

mobile/components/Feed.tsx

@@ -0,0 +1,17 @@
+import { TagList } from "@/components/TagList";
+import { Divider, Text, VStack } from "@/components/ui";
+import { QuestionList } from "./QuestionsList";
+import { Divide } from "lucide-react-native";
+
+export const Feed = () => {
+
+  return (
+    <VStack className="gap-8">
+      <Text className="text-2xl font-bold">Tags</Text>
+      <TagList searchQueryParams="" pagesize={3} />
+      <Divider />
+      <Text className="text-2xl font-bold">Latest Questions</Text>
+      <QuestionList pageSize={3} />
+    </VStack>
+  );
+};

mobile/components/QuestionsList.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { View, Text, Button, ActivityIndicator } from "react-native";
+import { QuestionCard } from "@/components/QuestionCard";
+import {
+  SearchQuestionsQueryParams,
+  useSearchQuestions,
+  SearchQuestionsResponse,
+} from "@/services/api/programmingForumComponents";
+
+interface QuestionListProps {
+  searchQueryParams?: string;
+  pageSize?: number;
+  difficultyFilter?: "EASY" | "MEDIUM" | "HARD";
+  tagFilter?: string;
+}
+
+export const QuestionList: React.FC<QuestionListProps> = ({
+  searchQueryParams = "",
+  pageSize = 10,
+  difficultyFilter,
+  tagFilter = "",
+}) => {
+  const [page, setPage] = useState(1);
+
+  const q: SearchQuestionsQueryParams = {
+    q: searchQueryParams,
+    page,
+    pageSize,
+    ...(difficultyFilter && { difficulty: difficultyFilter }),
+    ...(tagFilter && { tags: tagFilter }),
+  };
+
+  // Fetch questions
+  const {
+    data: questionSearchData,
+    isLoading: isLoadingQuestions,
+    error: questionsError,
+  } = useSearchQuestions({
+    queryParams: q,
+  });
+
+  const isQuestionsResponseObject = (
+    data: SearchQuestionsResponse["data"]
+  ): data is Exclude<SearchQuestionsResponse["data"], any[]> => {
+    return typeof data === "object" && !Array.isArray(data);
+  };
+
+  const questions =
+    questionSearchData && isQuestionsResponseObject(questionSearchData.data)
+      ? questionSearchData.data.items
+      : [];
+  const totalPages =
+    questionSearchData && isQuestionsResponseObject(questionSearchData.data)
+      ? questionSearchData.data.totalPages
+      : 0;
+
+  const handleNextPage = () => {
+    if (page < (totalPages ?? 0)) setPage((prev) => prev + 1);
+  };
+
+  const handlePreviousPage = () => {
+    if (page > 1) setPage((prev) => prev - 1);
+  };
+
+  return (
+    <View>
+      {isLoadingQuestions && <ActivityIndicator size="large" />}
+      {questionsError && <Text>Error: {questionsError.status}</Text>}
+      {questions && (
+        <View className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {questions.map((question) => (
+            <QuestionCard
+              key={question.id}
+              id={String(question.id)}
+              title={question.title}
+              content={question.content}
+              votes={question.likeCount}
+              answerCount={question.commentCount}
+              author={question.author}
+              difficulty={question.difficulty}
+              highlighted={question.difficulty === "EASY"}
+            />
+          ))}
+        </View>
+      )}
+      <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 16 }}>
+        <Button title="Previous" onPress={handlePreviousPage} disabled={page === 1} />
+        <Text>
+          Page {page} of {totalPages}
+        </Text>
+        <Button
+          title="Next"
+          onPress={handleNextPage}
+          disabled={page === totalPages || isLoadingQuestions}
+        />
+      </View>
+    </View>
+  );
+};

mobile/components/TagList.tsx

@@ -0,0 +1,66 @@
+import { SearchTagsQueryParams, useSearchTags, SearchTagsResponse } from "@/services/api/programmingForumComponents";
+import { View, Text, Button, ActivityIndicator } from "react-native";
+import { useState } from "react";
+import { TagCard } from "@/components/TagCard";
+import React from "react";
+
+interface TagListProps {
+  searchQueryParams?: string;
+  pagesize?: number;
+}
+
+export const TagList: React.FC<TagListProps> = ({ searchQueryParams="", pagesize=20}) => {
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(pagesize); 
+
+  const q: SearchTagsQueryParams = {
+    q: searchQueryParams,
+    page,
+    pageSize,
+  };
+
+  // Fetch tags
+  const { data: tagSearchData, isLoading: isLoadingTags, error: tagsError } = useSearchTags({
+    queryParams: q,
+  });
+
+  const isTagsResponseObject = (
+    data: SearchTagsResponse["data"]
+  ): data is Exclude<SearchTagsResponse["data"], any[]> => {
+    return typeof data === "object" && !Array.isArray(data);
+  };
+
+  const tags = tagSearchData && isTagsResponseObject(tagSearchData.data) ? tagSearchData.data.items : [];
+  const totalPages = tagSearchData && isTagsResponseObject(tagSearchData.data) ? tagSearchData.data.totalPages : 0;
+
+  const isLoading = isLoadingTags;
+
+  const handleNextPage = () => {
+    if (page < (totalPages ?? 0)) setPage((prev) => prev + 1);
+  };
+
+  const handlePreviousPage = () => {
+    if (page > 1) setPage((prev) => prev - 1);
+  };
+
+  return (
+    <View>
+      {isLoading && <ActivityIndicator size="large" />}
+      {tagsError && <Text>Error: {tagsError.status}</Text>}
+      {tags && (
+        <View className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {tags
+            .map((tag) => (
+              <TagCard key={tag.tagId} tag={tag} />
+            )
+          )}
+        </View>
+      )}
+      <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 16 }}>
+        <Button title="Previous" onPress={handlePreviousPage} disabled={page === 1} />
+        <Text>Page {page} of {totalPages}</Text>
+        <Button title="Next" onPress={handleNextPage} disabled={page === totalPages || isLoading} />
+      </View>
+    </View>
+  );
+};