67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { ScrollView, View } from "react-native";
|
|
|
|
import { useQuestions } from "@/api";
|
|
import { QuestionResponse } from "@/api/types";
|
|
import useTaxonomyContext from "@/components/providers/taxonomy-provider/hook";
|
|
import Question from "@/components/question";
|
|
import Content from "@/components/ui/content";
|
|
import CustomSelect from "@/components/ui/custom-select";
|
|
import PaginationList from "@/components/ui/pagination-list";
|
|
import { ThemedText } from "@/components/ui/themed-text";
|
|
import { router } from "expo-router";
|
|
import { useRef, useState } from "react";
|
|
|
|
export default function QuestionsScreen() {
|
|
const [category, setCategory] = useState<undefined|number>(undefined);
|
|
const [page, setPage] = useState<number>(1);
|
|
const { categories } = useTaxonomyContext();
|
|
const scrollRef = useRef<ScrollView>(null);
|
|
const { data: questionsPagination, isLoading } = useQuestions({
|
|
page: page,
|
|
category_id: category
|
|
});
|
|
|
|
const categoryOptions = categories.map((cat) => {
|
|
return {
|
|
label: cat.name,
|
|
value: String(cat.id),
|
|
};
|
|
});
|
|
const handleChangeCategory = (value: string) => {
|
|
setPage(1);
|
|
if(value === "all")
|
|
setCategory(undefined);
|
|
else
|
|
setCategory(+value);
|
|
}
|
|
|
|
return (
|
|
<Content ref={scrollRef}>
|
|
<ThemedText type="title" className="mb-3">
|
|
Questions
|
|
</ThemedText>
|
|
|
|
<View className="mb-4">
|
|
<CustomSelect
|
|
options={categoryOptions}
|
|
noneOption={{ label: "All categories", value: "all" }}
|
|
selectedValue={category ? `${category}` : undefined}
|
|
onValueChange={handleChangeCategory}
|
|
placeholder="Select category" />
|
|
</View>
|
|
|
|
<PaginationList<QuestionResponse>
|
|
pagination={questionsPagination}
|
|
renderItem={(item) => (
|
|
<Question question={item} onPress={() => router.push(`/questions/${item.id}`)} />
|
|
)}
|
|
skeleton={<Question />}
|
|
currentPage={page}
|
|
setCurrentPage={setPage}
|
|
scrollView={scrollRef}
|
|
isLoadingPage={isLoading}
|
|
/>
|
|
</Content>
|
|
);
|
|
}
|