init wishlist, zustand and tanstack

ArtisanConnect/app/_layout.jsx

@@ -1,11 +1,20 @@
-import {Tabs} from 'expo-router';
+import { Tabs, Stack } from "expo-router";
 import "@/global.css";
-import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-export default function RootLayout(){
-    return (
-        <GluestackUIProvider>
-            <Tabs/>
-        </GluestackUIProvider>
-    );
-}
+const queryClient = new QueryClient();
+export default function RootLayout() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <GluestackUIProvider>
+        <Stack>
+          <Stack.Screen name="index" options={{ title: "Home" }} />
+          <Stack.Screen name="notices" options={{ title: "Ogłoszenia" }} />
+          <Stack.Screen name="wishlist" options={{ title: "Ulubione" }} />
+        </Stack>
+        {/* <Tabs/> */}
+      </GluestackUIProvider>
+    </QueryClientProvider>
+  );
+}

ArtisanConnect/app/index.jsx

@@ -1,12 +1,22 @@
-import { View, Text } from 'react-native';
-import { Button, ButtonText } from '@/components/ui/button';
-export default function Home(){
+import { View, Text } from "react-native";
+import { Link } from "expo-router";
+import { Button, ButtonText } from "@/components/ui/button";
+
+export default function Home() {
   return (
     <View>
-        <Text>Home</Text>
+      <Text>Home</Text>
+      <Link href="/notices" asChild>
         <Button>
-          <ButtonText>Click Me</ButtonText>
+          <ButtonText>Ogłoszenia</ButtonText>
         </Button>
+      </Link>
+
+      <Link href="/wishlist" asChild>
+        <Button variant="outline" className="mt-2">
+          <ButtonText>Ulubione</ButtonText>
+        </Button>
+      </Link>
     </View>
   );
-}
+}

ArtisanConnect/app/notice/[id].jsx

@@ -0,0 +1,63 @@
+import { Stack, useLocalSearchParams } from "expo-router";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { Image } from "@/components/ui/image";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Icon, FavouriteIcon } from "@/components/ui/icon";
+import { useQuery } from "@tanstack/react-query";
+import { getNoticeById } from "@/api/notices";
+import { ActivityIndicator } from "react-native";
+
+export default function NoticeDetails() {
+  const { id } = useLocalSearchParams();
+
+  const {
+    data: notice,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["notices", id],
+    queryFn: () => getNoticeById(Number(id)),
+  });
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (error) {
+    return <Text>Błąd, spróbuj ponownie póżniej</Text>;
+  }
+
+  return (
+    <Card className="p-0 rounded-lg  m-3 flex-1">
+      <Stack.Screen options={{ title: notice.title }} />
+      <Image
+        source={{
+          uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
+        }}
+        className=" h-auto w-full rounded-md aspect-[1/1]"
+        alt="image"
+        resizeMode="cover"
+      />
+
+      <VStack className="p-2">
+        <Text className="text-sm font-normal mb-2 text-typography-700">
+          {notice.title}
+        </Text>
+        <Box className="flex-row items-center">
+          <Heading size="md" className="flex-1">
+            {notice.price}zł
+          </Heading>
+          <Icon
+            as={FavouriteIcon}
+            size="sm"
+            className="text-primary-500 w-6 h-6"
+          />
+        </Box>
+      </VStack>
+    </Card>
+  );
+}

ArtisanConnect/app/notices.jsx

@@ -1,8 +1,30 @@
-import { View, Text } from 'react-native';
-import NoticeCard from '@/components/NoticeCard';
+import { FlatList, Text, ActivityIndicator } from "react-native";
+import { listNotices } from "@/api/notices";
+import { useQuery } from "@tanstack/react-query";
+import { NoticeCard } from "@/components/NoticeCard";
 
-export default function Catalog() {
-    return (
-        <NoticeCard/>
-    );
-}
+export default function Notices() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["notices"],
+    queryFn: listNotices,
+  });
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (error) {
+    return <Text>Błąd, spróbuj ponownie póżniej</Text>;
+  }
+
+  return (
+    <FlatList
+      key={2}
+      data={data}
+      numColumns={2}
+      columnContainerClassName="m-2"
+      columnWrapperClassName="gap-2 m-2"
+      renderItem={({ item }) => <NoticeCard notice={item} />}
+    />
+  );
+}

ArtisanConnect/app/wishlist.jsx

@@ -0,0 +1,29 @@
+import { useWishlist } from "@/store/wishlistStore";
+import { FlatList } from "react-native";
+import { NoticeCard } from "@/components/NoticeCard";
+import { Ionicons } from "@expo/vector-icons";
+import { Box } from "@/components/ui/box";
+import { Text } from "@/components/ui/text";
+
+export default function Wishlist() {
+  const wishlistNotices = useWishlist((state) => state.wishlistNotices);
+  if (wishlistNotices.length === 0) {
+    return (
+      <Box className="flex-row flex-1 justify-center">
+        <Ionicons name="sad-outline" size={24} color="black" />
+        <Text>Brak ulubionych ogłoszeń</Text>
+      </Box>
+    );
+  }
+  return (
+    <FlatList
+      data={wishlistNotices}
+      key={2}
+      numColumns={2}
+      columnContainerClassName="m-2"
+      columnWrapperClassName="gap-2 m-2"
+      k
+      renderItem={({ item }) => <NoticeCard notice={item} />}
+    />
+  );
+}