Dev

app/article/[id].tsx

@@ -3,10 +3,10 @@ import axios from "axios";
 import { useLocalSearchParams } from "expo-router";
 import { YStack } from "tamagui";
 
-import ArticleCard from "../../components/ArticleCard";
 import CustomMarkdown from "../../components/CustomMarkdown";
 import GoBack from "../../components/GoBack";
 import { MyScroll } from "../../components/MyScroll";
+import Post from "../../components/Post";
 
 const Question = () => {
  const { id } = useLocalSearchParams();
@@ -41,7 +41,8 @@ const Question = () => {
  <MyScroll>
  <GoBack />
 
- <ArticleCard
+ <Post
+ type="article"
  {...article}
  isExternal
  />

app/question/[id].tsx

@@ -2,21 +2,26 @@ import React, { useEffect, useState } from "react";
 import { FlashList } from "@shopify/flash-list";
 import axios from "axios";
 import { useLocalSearchParams } from "expo-router";
-import { H5, Tabs, YStack } from "tamagui";
+import { H5, Tabs, XStack, YStack } from "tamagui";
 
+import { answersSortingOptions, sortingOrders } from "../../assets/data";
 import AnswersTab from "../../components/AnswersTab";
 import CustomMarkdown from "../../components/CustomMarkdown";
 import GoBack from "../../components/GoBack";
 import { MyScroll } from "../../components/MyScroll";
-import QuestionCard from "../../components/QuestionCard";
+import Post from "../../components/Post";
 import RelatedQuestion from "../../components/RelatedQuestion";
+import SortingOptions from "../../components/SortingOptions";
 
 const Question = () => {
  const { id } = useLocalSearchParams();
  const [question, setQuestion] = useState({});
  const [answers, setAnswers] = useState([]);
  const [relatedQuestions, setRelatedQuestions] = useState([]);
 
+ const [answerSort, setAnswerSort] = useState(answersSortingOptions[0]);
+ const [sortingOrder, setSortingOrder] = useState(sortingOrders[0]);
+
  const getQuestion = async () => {
  try {
  const response = await axios.get(
@@ -44,10 +49,11 @@ const Question = () => {
  `https://api.stackexchange.com/2.3/questions/${id}/answers?`,
  {
  params: {
- order: "desc",
- sort: "activity",
+ order: sortingOrder,
+ sort: answerSort,
  site: "stackoverflow",
- filter: "!6WPIomp-ebb*M",
+ filter: "!3vIo5M6G45qJ8_tw-",
+ pageSize: 100,
  key: process.env.EXPO_PUBLIC_API_KEY
  }
  }
@@ -85,6 +91,11 @@ const Question = () => {
  getAnswers();
  getRelatedQuestions();
  }, []);
+
+ useEffect(() => {
+ getAnswers();
+ }, [answerSort, sortingOrder]);
+
  return (
  <>
  <GoBack />
@@ -121,7 +132,8 @@ const Question = () => {
  flex={1}
  >
  <MyScroll>
- <QuestionCard
+ <Post
+ type="question"
  {...question}
  isExternal
  />
@@ -136,6 +148,34 @@ const Question = () => {
  value="tab2"
  flex={1}
  >
+ {answers?.length > 1 && (
+ <XStack
+ gap={20}
+ alignItems="center"
+ justifyContent="space-between"
+ marginVertical={15}
+ marginHorizontal={10}
+ animation="quick"
+ enterStyle={{
+ scale: 0.5,
+ opacity: 0
+ }}
+ >
+ <SortingOptions
+ sort={answerSort}
+ setSort={setAnswerSort}
+ data={answersSortingOptions}
+ title="Sort"
+ />
+ <SortingOptions
+ sort={sortingOrder}
+ setSort={setSortingOrder}
+ data={sortingOrders}
+ title="Order"
+ />
+ </XStack>
+ )}
+
  <AnswersTab answers={answers} />
  </Tabs.Content>
 

app/tabs/Articles.tsx

@@ -5,8 +5,8 @@ import { darkColors } from "@tamagui/themes";
 import axios from "axios";
 import { H2 } from "tamagui";
 
-import ArticleCard from "../../components/ArticleCard";
 import { MyStack } from "../../components/MyStack";
+import Post from "../../components/Post";
 
 const Home = () => {
  const [articles, setArticles] = useState([]);
@@ -53,7 +53,12 @@ const Home = () => {
 
  <FlashList
  data={articles}
- renderItem={({ item }) => <ArticleCard {...item} />}
+ renderItem={({ item }) => (
+ <Post
+ type="article"
+ {...item}
+ />
+ )}
  estimatedItemSize={50}
  refreshControl={
  <RefreshControl

app/tabs/Home.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 import { H2 } from "tamagui";
 
 import { MyStack } from "../../components/MyStack";
-import QuestionCard from "../../components/QuestionCard";
+import Post from "../../components/Post";
 
 const Home = () => {
  const [questions, setQuestions] = useState([]);
@@ -53,7 +53,8 @@ const Home = () => {
  <FlashList
  data={questions}
  renderItem={({ item }) => (
- <QuestionCard
+ <Post
+ type="question"
  {...item}
  isBody
  />

app/tabs/Search.tsx

@@ -5,12 +5,9 @@ import { darkColors } from "@tamagui/themes";
 import axios from "axios";
 import { XStack } from "tamagui";
 
-import {
- questionsSortingOptions,
- questionsSortingOrders
-} from "../../assets/data";
+import { questionsSortingOptions, sortingOrders } from "../../assets/data";
 import { MyStack } from "../../components/MyStack";
-import QuestionCard from "../../components/QuestionCard";
+import Post from "../../components/Post";
 import SearchBar from "../../components/SearchBar";
 import SortingOptions from "../../components/SortingOptions";
 
@@ -19,7 +16,7 @@ const Search = () => {
  const [questions, setQuestions] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [sort, setSort] = useState(questionsSortingOptions[0]);
- const [sortingOrder, setSortingOrder] = useState(questionsSortingOrders[0]);
+ const [sortingOrder, setSortingOrder] = useState(sortingOrders[0]);
 
  const getQuestions = async () => {
  setIsSearching(true);
@@ -33,12 +30,14 @@ const Search = () => {
  sort: sort,
  site: "stackoverflow",
  filter: "!nNPvSNP4(R",
+ pageSize: 100,
  key: process.env.EXPO_PUBLIC_API_KEY
  }
  }
  );
 
  setQuestions(response.data.items);
+ console.log(response.data.items.length);
  } catch (error) {
  console.error("Error fetching data:", error);
  } finally {
@@ -88,7 +87,7 @@ const Search = () => {
  <SortingOptions
  sort={sortingOrder}
  setSort={setSortingOrder}
- data={questionsSortingOrders}
+ data={sortingOrders}
  title="Order"
  />
  </XStack>
@@ -97,7 +96,8 @@ const Search = () => {
  <FlashList
  data={questions}
  renderItem={({ item }) => (
- <QuestionCard
+ <Post
+ type="question"
  {...item}
  isBody
  />

assets/data.js

@@ -1,4 +1,6 @@
 const questionsSortingOptions = ["activity", "creation", "votes", "relevance"];
-const questionsSortingOrders = ["desc", "asc"];
+const answersSortingOptions = ["activity", "creation", "votes"];
 
-export { questionsSortingOptions, questionsSortingOrders };
+const sortingOrders = ["desc", "asc"];
+
+export { answersSortingOptions, questionsSortingOptions, sortingOrders };

components/AnswersTab.tsx

@@ -1,14 +1,21 @@
 import { FlashList } from "@shopify/flash-list";
-import { ChevronDown, Verified } from "@tamagui/lucide-icons";
+import { ChevronDown, TrendingUp, Verified } from "@tamagui/lucide-icons";
 import { Accordion, Paragraph, Square, Text, XStack, YStack } from "tamagui";
 
 import CustomMarkdown from "./CustomMarkdown";
 import ExternalButton from "./ExternalButton";
 import PostCreationInfo from "./PostCreationInfo";
 
 const Answer = (props) => {
- const { index, body_markdown, is_accepted, owner, creation_date, link } =
- props;
+ const {
+ index,
+ body_markdown,
+ is_accepted,
+ owner,
+ creation_date,
+ link,
+ up_vote_count
+ } = props;
  return (
  <Accordion.Item value={`answer${index}`}>
  <Accordion.Trigger
@@ -34,12 +41,31 @@ const Answer = (props) => {
  )}
  </XStack>
 
- <Square
- animation="quick"
- rotate={open ? "180deg" : "0deg"}
- >
- <ChevronDown size="$1" />
- </Square>
+ <XStack alignItems="center">
+ <XStack
+ alignItems="center"
+ backgroundColor="$backgroundPress"
+ paddingHorizontal={10}
+ paddingVertical={5}
+ borderRadius={5}
+ marginRight={10}
+ >
+ <TrendingUp size="$1" />
+ <Text
+ marginLeft={10}
+ fontSize={13}
+ >
+ {up_vote_count}
+ </Text>
+ </XStack>
+
+ <Square
+ animation="quick"
+ rotate={open ? "180deg" : "0deg"}
+ >
+ <ChevronDown size="$1" />
+ </Square>
+ </XStack>
  </>
  )}
  </Accordion.Trigger>