safe area view

ArtisanConnect/api/categories.jsx

@@ -1,10 +1,15 @@
 import axios from "axios";
+import {useAuthStore} from "@/store/authStore";
 
 const API_URL = "https://testowe.zikor.pl/api/v1";
 
 export async function listCategories() {
+    
+    const { token } = useAuthStore.getState();
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+    
     try {
-        const response = await axios.get(`${API_URL}/vars/categories`);
+        const response = await axios.get(`${API_URL}/vars/categories`, { headers });
         return response.data;
     } catch (err) {
         console.error("Nie udało się pobrać listy kategorii.", err.response.status);

ArtisanConnect/api/notices.jsx

@@ -2,9 +2,9 @@ import axios from "axios";
 import FormData from 'form-data'
 import {useAuthStore} from "@/store/authStore";
 
-// const API_URL = "https://testowe.zikor.pl/api/v1";
+const API_URL = "https://testowe.zikor.pl/api/v1";
 
-const API_URL = "http://10.0.2.2:8080/api/v1";
+//const API_URL = "http://10.0.2.2:8080/api/v1";
 
 export async function listNotices() {
     const { token } = useAuthStore.getState();

ArtisanConnect/api/wishlist.jsx

@@ -1,14 +1,16 @@
 import axios from "axios";
+import {useAuthStore} from "@/store/authStore";
 // import FormData from 'form-data'
 
 const API_URL = "https://testowe.zikor.pl/api/v1/wishlist";
 
 export async function toggleNoticeStatus(noticeId) {
+        const { token } = useAuthStore.getState();
+        const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+
     try {
-        const response = await axios.post(`${API_URL}/toggle/${noticeId}`, null, {
-            headers: {
-                "Content-Type": "application/json",
-            },
+        const response = await axios.post(`${API_URL}/toggle/${noticeId}`, {}, {
+            headers
         });
         return response.data;
     } catch (error) {
@@ -18,8 +20,11 @@ export async function toggleNoticeStatus(noticeId) {
 }
 
 export async function getWishlist() {
+        const { token } = useAuthStore.getState();
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+
     try {
-        const response = await axios.get(`${API_URL}/`);
+        const response = await axios.get(`${API_URL}/`, {headers});
         console.log("Wishlist response:", response.data);
         return response.data;
     } catch (error) {

ArtisanConnect/app/(tabs)/dashboard/account.jsx

@@ -1,4 +1,16 @@
 import { Text } from "@/components/ui/text";
+import { View } from "react-native";
+import { Button, ButtonText } from "@gluestack-ui/themed";
+import { useAuthStore } from "@/store/authStore";
+
 export default function User() {
-  return <Text>Użytkownik</Text>;
+  const signOut = useAuthStore((state) => state.signOut);
+  
+  return (<View>
+  <Text>Użytkownik</Text>
+  <Button onPress={signOut}>
+      <ButtonText>Wyloguj się</ButtonText>
+    </Button>
+  </View>
+  )
 }

ArtisanConnect/app/(tabs)/index.jsx

@@ -8,10 +8,14 @@ import { FlatList } from 'react-native';
 import { useAuthStore } from "@/store/authStore";
 import { useRouter } from "expo-router";
 import { useEffect, useState } from "react";
+// import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native";
+
 export default function Home() {
 const token = useAuthStore((state) => state.token);
   const router = useRouter();
   const [isReady, setIsReady] = useState(false);
+   const fetchNotices = useNoticesStore((state) => state.fetchNotices);
 
   useEffect(() => {
     setIsReady(true);
@@ -23,23 +27,36 @@ const token = useAuthStore((state) => state.token);
     }
   }, [isReady, token, router]);
 
+
+  useEffect(() => {
+    if (token) {
+    fetchNotices();
+  }
+}, [token, fetchNotices]);
+
+
   const notices = useNoticesStore((state) => state.notices);
-   const latestNotices = [...notices]
+  // console.log("Notices:", notices); 
+  
+  const latestNotices = [...notices]
     .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
     .slice(0, 6);
       const recomendedNotices = [...notices]
     .sort(() => Math.random() - 0.5)
     .slice(0, 6);
 
+
   return (
-    <View>
+  <SafeAreaView className="flex-1 m-2"> 
+  {/* <View>    */}
     <SearchSection/>
-     <ScrollView showsVerticalScrollIndicator={false} className='m-2'>
+     <ScrollView showsVerticalScrollIndicator={false} >
         <CategorySection title="Polecane kategorie" notices={notices} />
         <NoticeSection title="Najnowsze ogłoszenia" notices={latestNotices} ctaLink="/notices?sort=latest"/>
         <UserSection title="Popularni sprzedawcy" notices={notices} />
         <NoticeSection title="Proponowane ogłoszenia" notices={recomendedNotices} ctaLink="/notices"/>
      </ScrollView>
-     </View>
+     {/* </View> */}
+  </SafeAreaView>
   );
 }

ArtisanConnect/app/_layout.jsx

@@ -2,21 +2,13 @@ import { Stack, Redirect } from "expo-router";
 import "@/global.css";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { useNoticesStore } from "@/store/noticesStore"; 
 
 const queryClient = new QueryClient();
 export default function RootLayout() {
-   const fetchNotices = useNoticesStore((state) => state.fetchNotices);
-
-  useEffect(() => {
-    fetchNotices();
-  }, []);
   
 return (
     <QueryClientProvider client={queryClient}>
       <GluestackUIProvider>
-        
         <Stack
           screenOptions={{
             headerTintColor: "#1c1c1e",

ArtisanConnect/components/CategorySection.jsx

@@ -1,30 +1,46 @@
 import { View, FlatList} from 'react-native';
 import { useEffect, useState } from 'react'
+import { useAuthStore } from "@/store/authStore";
 import { Heading } from '@/components/ui/heading';
 import { Text } from '@/components/ui/text';
 import { Link } from 'expo-router';
 import { Pressable } from '@/components/ui/pressable';
-import axios from 'axios';
+// import axios from 'axios';
+import {listCategories} from "@/api/categories";
+
 
 export function CategorySection({notices, title}) {
-// const notices = useNoticesStore((state) => state.notices);
-
+  const token = useAuthStore((state) => state.token);
+  
   const [categoryMap, setCategoryMap] = useState({});
 
   useEffect(() => {
-    axios.get('https://testowe.zikor.pl/api/v1/vars/categories')
-      .then(res => setCategoryMap(res.data))
-      .catch(() => setCategoryMap({}));
-  }, []);
-    
-const categories = Array.from(
-  new Set(notices.map((notice) => notice.category))
-).filter(Boolean);
+    if(token){
+    const fetchCategories = async () => {
+            let data = await listCategories();
+                  if (Array.isArray(data)) {
+                      setCategoryMap(data);
+                  }  
+                }
 
+    fetchCategories();
+  }
+  }, [token]);
+    
+
+  const categories = Array.from(
+    new Set(notices.map((notice) => notice.category))
+  ).filter(Boolean);
 
   const getCount = (category) =>
     notices.filter((notice) => notice.category === category).length;
 
+  console.log("CategoryMap:", categoryMap);
+
+  if(!categoryMap) {
+    return  null;
+  }
+
 return (
     <View className="mb-6">
       <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>

ArtisanConnect/components/SearchSection.jsx

@@ -2,6 +2,7 @@ import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"
 import { SearchIcon } from "@/components/ui/icon"
 import { Box } from "@/components/ui/box"
 import { useRouter } from "expo-router";
+import { View } from "react-native";
 
 export function SearchSection({ searchQuery, setSearchQuery }) {
     const router = useRouter();
@@ -14,18 +15,17 @@ export function SearchSection({ searchQuery, setSearchQuery }) {
     });
   };
   return (
-    <Box className="m-2 bg-white">
-      <Input>
+    <Box className="mb-2 bg-white p-2 rounded-md">
+      <Input className="p-2">
         <InputSlot>
           <InputIcon as={SearchIcon} />
         </InputSlot>
-        <InputField placeholder="Wyszukaj.."
+        <InputField placeholder="Wyszukaj..."
           value={searchQuery}
           onChangeText={setSearchQuery}
           onSubmitEditing={handleSubmit}
           returnKeyType="search" />
       </Input>
     </Box>
-
   )
 }

ArtisanConnect/components/UserSection.jsx

@@ -4,16 +4,21 @@ import { Heading } from '@/components/ui/heading';
 import { FlatList } from 'react-native';
 import axios from 'axios';
 import UserBlock from '@/components/UserBlock';
+import {useAuthStore} from "@/store/authStore";
+
 
 export function UserSection({notices, title}) {
-
+ const token = useAuthStore((state) => state.token);
+  const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
  const [users, setUsers] = useState([]);
 
   useEffect(() => {
-    axios.get('https://testowe.zikor.pl/api/v1/clients/get/all')
+    if (token){ 
+    axios.get('https://testowe.zikor.pl/api/v1/clients/get/all', { headers })
       .then(res => setUsers(res.data))
       .catch(() => setUsers([]));
-  }, []);
+    }
+  }, [token]);
     
  const usersWithNoticeCount = users.map(user => {
     const count = notices.filter(n => n.clientId === user.id).length;

ArtisanConnect/store/authStore.jsx

@@ -3,7 +3,7 @@ import {createJSONStorage, persist} from "zustand/middleware";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import axios from "axios";
 
-const API_URL = "http://10.0.2.2:8080/api/v1";
+const API_URL = "https://testowe.zikor.pl/api/v1";
 
 export const useAuthStore = create(
     persist(
@@ -71,8 +71,10 @@ export const useAuthStore = create(
 
             signOut: async () => {
                 try {
+                    const {token} = useAuthStore.getState();
+                    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
                     // Можно отправить запрос на бэкенд для инвалидации токена
-                    await axios.post(`${API_URL}/auth/logout`);
+                            await axios.post(`${API_URL}/auth/logout`, {}, { headers });
                 } catch (error) {
                     console.error("Logout error:", error);
                 } finally {