add props and link to home section
This commit is contained in:
@@ -16,9 +16,9 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<ScrollView showsVerticalScrollIndicator={false} className='m-2'>
|
<ScrollView showsVerticalScrollIndicator={false} className='m-2'>
|
||||||
<CategorySection title="Polecane kategorie" notices={notices} />
|
<CategorySection title="Polecane kategorie" notices={notices} />
|
||||||
<NoticeSection title="Najnowsze ogłoszenia" notices={latestNotices}/>
|
<NoticeSection title="Najnowsze ogłoszenia" notices={latestNotices} ctaLink="/notices?sort=latest"/>
|
||||||
<UserSection title="Popularni sprzedawcy" notices={notices} />
|
<UserSection title="Popularni sprzedawcy" notices={notices} />
|
||||||
<NoticeSection title="Proponowane ogłoszenia" notices={recomendedNotices}/>
|
<NoticeSection title="Proponowane ogłoszenia" notices={recomendedNotices} ctaLink="/notices"/>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,13 +2,18 @@ import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
|
|||||||
import {useState, useEffect} from "react";
|
import {useState, useEffect} from "react";
|
||||||
import {useNoticesStore} from "@/store/noticesStore";
|
import {useNoticesStore} from "@/store/noticesStore";
|
||||||
import {NoticeCard} from "@/components/NoticeCard";
|
import {NoticeCard} from "@/components/NoticeCard";
|
||||||
|
import { useLocalSearchParams } from "expo-router";
|
||||||
|
import { HStack } from "@gluestack-ui/themed";
|
||||||
|
import { Button, ButtonText } from "@components/ui/Button";
|
||||||
|
import { Actionsheet } from "@components/ui/Actionsheet";
|
||||||
export default function Notices() {
|
export default function Notices() {
|
||||||
const {notices, fetchNotices} = useNoticesStore();
|
const {notices, fetchNotices} = useNoticesStore();
|
||||||
const [refreshing, setRefreshing] = useState(false);
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
const params = useLocalSearchParams();
|
||||||
|
console.log("GET params:", params);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadData();
|
loadData();
|
||||||
}, []);
|
}, []);
|
||||||
@@ -25,6 +30,22 @@ export default function Notices() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let filteredNotices = notices;
|
||||||
|
|
||||||
|
if (params.sort) {
|
||||||
|
if( params.sort === "latest") {
|
||||||
|
filteredNotices = [...filteredNotices].sort(
|
||||||
|
(a, b) => new Date(b.publishDate) - new Date(a.publishDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(params.category) {
|
||||||
|
filteredNotices = filteredNotices.filter(
|
||||||
|
(notice) => notice.category === params.category
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const onRefresh = async () => {
|
const onRefresh = async () => {
|
||||||
setRefreshing(true);
|
setRefreshing(true);
|
||||||
try {
|
try {
|
||||||
@@ -44,10 +65,12 @@ export default function Notices() {
|
|||||||
return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
|
return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<FlatList
|
<FlatList
|
||||||
key={2}
|
key={2}
|
||||||
data={notices}
|
data={filteredNotices}
|
||||||
numColumns={2}
|
numColumns={2}
|
||||||
columnContainerClassName="m-2"
|
columnContainerClassName="m-2"
|
||||||
columnWrapperClassName="gap-2 m-2"
|
columnWrapperClassName="gap-2 m-2"
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { View} from 'react-native';
|
import { View, FlatList} from 'react-native';
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { Heading } from '@/components/ui/heading';
|
import { Heading } from '@/components/ui/heading';
|
||||||
import { Text } from '@/components/ui/text';
|
import { Text } from '@/components/ui/text';
|
||||||
// import { useNoticesStore } from '@/store/noticesStore';
|
import { Link } from 'expo-router';
|
||||||
import { Pressable } from '@/components/ui/pressable';
|
import { Pressable } from '@/components/ui/pressable';
|
||||||
import { FlatList } from 'react-native';
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
export function CategorySection({notices, title}) {
|
export function CategorySection({notices, title}) {
|
||||||
@@ -38,11 +37,13 @@ return (
|
|||||||
renderItem={({ item }) => {
|
renderItem={({ item }) => {
|
||||||
const categoryObj = categoryMap.find((cat) => cat.value === item);
|
const categoryObj = categoryMap.find((cat) => cat.value === item);
|
||||||
return (
|
return (
|
||||||
|
<Link href={`/notices?category=${item}`} asChild>
|
||||||
<Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
|
<Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
|
||||||
<Text>
|
<Text>
|
||||||
{categoryObj ? categoryObj.label : item} ({getCount(item)})
|
{categoryObj ? categoryObj.label : item} ({getCount(item)})
|
||||||
</Text>
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
</Link>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { View} from 'react-native';
|
import { View} from 'react-native';
|
||||||
import { Heading } from '@/components/ui/heading';
|
import { Heading } from '@/components/ui/heading';
|
||||||
|
import { Link } from 'expo-router';
|
||||||
import { FlatList } from 'react-native';
|
import { FlatList } from 'react-native';
|
||||||
import {NoticeCard} from "@/components/NoticeCard";
|
import {NoticeCard} from "@/components/NoticeCard";
|
||||||
import { Box } from '@/components/ui/box';
|
import { Box } from '@/components/ui/box';
|
||||||
@@ -7,7 +8,7 @@ import { HStack } from "@/components/ui/hstack"
|
|||||||
import { VStack } from '@/components/ui/vstack';
|
import { VStack } from '@/components/ui/vstack';
|
||||||
import { Button, ButtonText } from "@/components/ui/button"
|
import { Button, ButtonText } from "@/components/ui/button"
|
||||||
|
|
||||||
export function NoticeSection({ notices, title }) {
|
export function NoticeSection({ notices, title, ctaLink=''}) {
|
||||||
const rows = [];
|
const rows = [];
|
||||||
for (let i = 0; i < notices.length; i += 2) {
|
for (let i = 0; i < notices.length; i += 2) {
|
||||||
rows.push(
|
rows.push(
|
||||||
@@ -23,9 +24,12 @@ export function NoticeSection({ notices, title }) {
|
|||||||
<VStack space="md">
|
<VStack space="md">
|
||||||
{rows}
|
{rows}
|
||||||
</VStack>
|
</VStack>
|
||||||
|
{ctaLink && (
|
||||||
|
<Link href={ctaLink} asChild>
|
||||||
<Button className="mt-6" size="md" variant="solid" action="primary">
|
<Button className="mt-6" size="md" variant="solid" action="primary">
|
||||||
<ButtonText>Zobacz więcej</ButtonText>
|
<ButtonText>Zobacz więcej</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
|
</Link>)}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user