init wishlist, zustand and tanstack

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} />}
+    />
+  );
+}