25 Commits

Author SHA1 Message Date
Patryk
a04ef906cd fix merge 2025-06-09 21:49:07 +02:00
Patryk
a51345fd93 Merge remote-tracking branch 'origin/ScreenRotation' 2025-06-09 21:21:15 +02:00
Patryk
c2d4f5fb79 category and logout fiexes 2025-06-09 21:17:30 +02:00
7ec883100f headers user is hidden, [userId] is changed to "Ogłsozenia uzytkownika" 2025-06-09 21:12:10 +02:00
Patryk
207f8f7161 Merge branch 'main' of https://progit.zikor.pl/hamx/ArtisanConnectFrontend 2025-06-09 20:59:46 +02:00
Patryk
27175ffa91 some fixes 2025-06-09 20:59:43 +02:00
c25495ba3f AppIco added 2025-06-09 20:51:09 +02:00
be51f1e9cc Mail sender is working 2025-06-09 20:39:00 +02:00
14bd178f84 Mail sender is working 2025-06-09 20:38:13 +02:00
b34ce7fd20 wysyłanie jednego zdjęcie nie działało 2025-06-09 20:35:56 +02:00
7fc1312ddc Avatar + SafeAreaView 2025-06-09 19:27:05 +02:00
77c3a694f8 oba przyciski muszą być
a co jak będę chciał usunąć ogłoszenie które nie jest aktywne?
2025-06-09 12:09:44 +02:00
9c3e883741 kręcące się kółko
przy dodawaniu
2025-06-09 11:50:33 +02:00
2b31863ed3 KeyboardAvoidingView
ekran dodawania
2025-06-09 11:18:02 +02:00
8e6d7ca150 indent fix 2025-06-09 11:07:58 +02:00
44f5239328 zdjęcia wyświetlają się poprawnie teraz na karcie produktu. Nie wychodzą poza swoje granice 2025-06-09 10:09:28 +02:00
5344acbdd1 zdjęcia się wyświetlają na karcie produktu 2025-06-09 10:02:16 +02:00
2218c5eb33 zdjęcia pobierają się na głównej stronie + naprawiono kilka innych bugów.
takich jak wyświetlanie "Moich ogłoszeń nie dla poprawnego id etc."
2025-06-08 22:31:52 +02:00
Patryk
bcce392c9b fixes to app 2025-06-08 20:18:38 +02:00
1d3cbeef3a Added ScreenRotation to notice and updated userNotices 2025-06-08 17:22:02 +02:00
Patryk
dbf07cea0a improve account style 2025-06-08 11:23:09 +02:00
Patryk
e2e5543e0d fix notice status 2025-06-08 10:30:14 +02:00
Patryk
ca59c94783 del duplicate url 2025-06-08 09:52:13 +02:00
Patryk
e849a39603 Merge remote-tracking branch 'origin/integrateWithAuth' 2025-06-08 09:39:56 +02:00
0e46d692f9 fix of api url and new version packages 2025-06-06 16:31:39 +02:00
27 changed files with 1904 additions and 667 deletions

View File

@@ -8,9 +8,11 @@ export async function listCategories() {
const headers = token ? { Authorization: `Bearer ${token}` } : {}; const headers = token ? { Authorization: `Bearer ${token}` } : {};
try { try {
const response = await axios.get(`${API_URL}/vars/categories`, { headers }); const response = await axios.get(`${API_URL}/vars/categories`, {
headers: headers,
});
return response.data; return response.data;
} catch (err) { } catch (err) {
console.error("Nie udało się pobrać listy kategorii.", err.response.status); // console.error("Nie udało się pobrać listy kategorii.", err.response.status);
} }
} }

View File

@@ -1,10 +1,15 @@
import axios from "axios"; import axios from "axios";
import { useAuthStore } from "@/store/authStore";
const API_URL = "https://hopp.zikor.pl/api/v1"; const API_URL = "https://hopp.zikor.pl/api/v1";
export async function getUserById(userId) { export async function getUserById(userId) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try { try {
const response = await axios.get(`${API_URL}/clients/get/${userId}`); const response = await axios.get(`${API_URL}/clients/get/${userId}`, {
headers: headers,
});
return response.data; return response.data;
} catch (err) { } catch (err) {
console.error( console.error(

View File

@@ -0,0 +1,30 @@
import { useAuthStore } from "@/store/authStore";
const API_URL = "https://hopp.zikor.pl/api/v1";
export const sendEmail = async (emailData) => {
const token = useAuthStore.getState().token;
try {
const response = await fetch(`${API_URL}/email/send`, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(token && { Authorization: `Bearer ${token}` }),
},
body: JSON.stringify(emailData),
});
if (!response.ok) {
const errorMessage = `HTTP error! Status: ${response.status}`;
console.error("Error przy wysyłaniu maila", errorMessage);
return { success: false, error: errorMessage };
}
const result = await response.text();
return { success: true, result };
} catch (error) {
console.error("Error przy wysyłaniu maila:", error.message);
return { success: false, error: error.message };
}
};

View File

@@ -2,7 +2,7 @@ import axios from "axios";
import FormData from "form-data"; import FormData from "form-data";
import { useAuthStore } from "@/store/authStore"; import { useAuthStore } from "@/store/authStore";
// const API_URL = "https://testowe.zikor.pl/api/v1"; // const API_URL = "https://hopp.zikor.pl/api/v1";
const API_URL = "https://hopp.zikor.pl/api/v1"; const API_URL = "https://hopp.zikor.pl/api/v1";
@@ -14,9 +14,11 @@ export async function listNotices() {
headers: headers, headers: headers,
}); });
const data = await response.json(); const data = await response.json();
if (!response.ok) { if (!response.ok) {
throw new Error(response.toString()); throw new Error(response.toString());
} }
// console.info("Notices fetched successfully:", data);
return data; return data;
} }
@@ -31,11 +33,11 @@ export async function getNoticeById(noticeId) {
} }
export async function createNotice(notice) { export async function createNotice(notice) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try { try {
const response = await axios.post(`${API_URL}/notices/add`, notice, { const response = await axios.post(`${API_URL}/notices/add`, notice, {
headers: { headers: headers,
"Content-Type": "application/json",
},
}); });
if (response.data.noticeId !== null) { if (response.data.noticeId !== null) {
@@ -68,30 +70,40 @@ export async function getImageByNoticeId(noticeId) {
} }
export async function getAllImagesByNoticeId(noticeId) { export async function getAllImagesByNoticeId(noticeId) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try { try {
const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`); const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`, {
headers: headers,
});
if (listResponse.data && listResponse.data.length > 0) { if (listResponse.data && listResponse.data.length > 0) {
return listResponse.data.map( return listResponse.data.map((imageName) => ({
(imageName) => `${API_URL}/images/get/${imageName}` uri: `${API_URL}/images/get/${imageName}`,
); headers: headers,
}));
} }
return ["https://http.cat/404.jpg"]; return [{ uri: "https://http.cat/404.jpg" }];
} catch (err) { } catch (err) {
if (err.response.status === 404) { if (err.response.status === 404) {
// console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`); // console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`);
return ["https://http.cat/404.jpg"]; return [{ uri: "https://http.cat/404.jpg" }];
} }
console.warn( console.warn(
`Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`, `Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`,
err err
); );
return ["https://http.cat/404.jpg"]; return [{ uri: "https://http.cat/404.jpg" }];
} }
} }
export const uploadImage = async (noticeId, imageUri) => { export const uploadImage = async (noticeId, imageUri) => {
const { token } = useAuthStore.getState();
const headers = {
...(token ? { Authorization: `Bearer ${token}` } : {}),
'Content-Type': 'multipart/form-data'
};
const formData = new FormData(); const formData = new FormData();
const filename = imageUri.split("/").pop(); const filename = imageUri.split("/").pop();
@@ -100,7 +112,7 @@ export const uploadImage = async (noticeId, imageUri) => {
const type = match ? `image/${match[1]}` : "image/jpeg"; const type = match ? `image/${match[1]}` : "image/jpeg";
formData.append("file", { formData.append("file", {
uri: imageUri, uri: imageUri.uri,
name: filename, name: filename,
type: type, type: type,
}); });
@@ -110,9 +122,7 @@ export const uploadImage = async (noticeId, imageUri) => {
`${API_URL}/images/upload/${noticeId}`, `${API_URL}/images/upload/${noticeId}`,
formData, formData,
{ {
headers: { headers: headers,
"Content-Type": "multipart/form-data",
},
} }
); );
console.info("Upload successful:", response.data); console.info("Upload successful:", response.data);
@@ -127,3 +137,23 @@ export const uploadImage = async (noticeId, imageUri) => {
throw error; throw error;
} }
}; };
export const deleteNotice = async (noticeId) => {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try {
const response = await axios.delete(
`${API_URL}/notices/delete/${noticeId}`,
{ headers }
);
return response.data;
} catch (error) {
console.error(
"Error deleting notice:",
error.response?.data,
error.response?.status
);
throw error;
}
};

View File

@@ -0,0 +1,78 @@
import axios from "axios";
import { useAuthStore } from "@/store/authStore";
const API_URL = "https://hopp.zikor.pl/api/v1/orders";
export async function createOrder(noticeId, orderType) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
const clientId = 1;
try {
const response = await axios.post(
`${API_URL}/add`,
{ clientId: clientId, noticeId: noticeId, orderType: orderType },
{
headers: headers,
}
);
return response.data;
} catch (error) {
console.log("Error", error.response?.data, error.response?.status);
return null;
}
}
export async function createPayment(orderId) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
const clientId = 1;
try {
const response = await axios.post(
`${API_URL}/token?orderId=${orderId}`,
{},
{
headers: headers,
}
);
return response.data;
} catch (error) {
console.log("Error", error.response?.data, error.response?.status);
return null;
}
}
export async function getOrder(orderId) {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try {
const response = await axios.get(`${API_URL}/get/${orderId}`, { headers });
return response.data;
} catch (error) {
console.error(
"Error fetching order:",
error.response?.data,
error.response?.status
);
throw error;
}
}
export async function listOrders() {
const { token } = useAuthStore.getState();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try {
const response = await axios.get(`${API_URL}/get/all`, { headers });
return response.data;
} catch (error) {
console.error(
"Error fetching orders:",
error.response?.data,
error.response?.status
);
throw error;
}
}

View File

@@ -1,6 +1,5 @@
import axios from "axios"; import axios from "axios";
import { useAuthStore } from "@/store/authStore"; import { useAuthStore } from "@/store/authStore";
// import FormData from 'form-data'
const API_URL = "https://hopp.zikor.pl/api/v1/wishlist"; const API_URL = "https://hopp.zikor.pl/api/v1/wishlist";
@@ -29,10 +28,10 @@ export async function getWishlist() {
try { try {
const response = await axios.get(`${API_URL}/`, { headers }); const response = await axios.get(`${API_URL}/`, { headers });
console.log("Wishlist response:", response.data);
return response.data; return response.data;
} catch (error) { } catch (error) {
console.error("Error fetching wishlist:", error); console.error("Error fetching wishlist:", error);
throw error; throw error;
} }
} }
``;

View File

@@ -5,7 +5,7 @@
"scheme": "com.hamx.artisanconnect", "scheme": "com.hamx.artisanconnect",
"version": "1.0.0", "version": "1.0.0",
"orientation": "portrait", "orientation": "portrait",
"icon": "./assets/icon.png", "icon": "./assets/AppIco.png",
"userInterfaceStyle": "light", "userInterfaceStyle": "light",
"newArchEnabled": true, "newArchEnabled": true,
"splash": { "splash": {

View File

@@ -3,11 +3,12 @@ import { Ionicons } from "@expo/vector-icons";
import { useAuthStore } from "@/store/authStore"; import { useAuthStore } from "@/store/authStore";
export default function TabLayout() { export default function TabLayout() {
const token = useAuthStore((state) => state.token); const { token } = useAuthStore.getState();
if (!token) { if (!token) {
return <Redirect href="/login" />; return <Redirect href="/login" />;
} }
return ( return (
<Tabs <Tabs
screenOptions={{ screenOptions={{

View File

@@ -37,6 +37,7 @@ export default function AccountDrawerLayout() {
name="userNotices" name="userNotices"
options={{ title: "Moje ogłoszenia" }} options={{ title: "Moje ogłoszenia" }}
/> />
<Drawer.Screen name="userOrders" options={{ title: "Moje zamówienia" }} />
</Drawer> </Drawer>
); );
} }

View File

@@ -8,12 +8,12 @@ import { ActivityIndicator } from "react-native";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getUserById } from "@/api/client"; import { getUserById } from "@/api/client";
import { HStack } from "@gluestack-ui/themed"; import { HStack } from "@gluestack-ui/themed";
import { useAuthStore } from "@/store/authStore";
export default function Account() { export default function Account() {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const currentUserId = 2; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera const currentUserId = useAuthStore((state) => state.user_id);
useEffect(() => { useEffect(() => {
const fetchUser = async () => { const fetchUser = async () => {
setIsLoading(true); setIsLoading(true);
@@ -38,8 +38,8 @@ export default function Account() {
} }
return ( return (
<VStack className="bg-gray-50 flex-1"> <VStack className=" flex-1 m-2">
<Box className="bg-white pb-6 shadow-sm"> <Box className="bg-white p-5 rounded-lg ">
<Box className="items-center pt-6 mb-4"> <Box className="items-center pt-6 mb-4">
<Image <Image
source={{ source={{
@@ -57,12 +57,12 @@ export default function Account() {
</Text> </Text>
</Box> </Box>
<Box className="bg-white mt-4 p-5 border-t border-b border-gray-200"> <Box className="bg-white mt-4 p-5 rounded-lg">
<Text className="font-bold text-lg mb-3">Moje dane</Text> <Text className="font-bold text-lg mb-3">Moje dane</Text>
<HStack className="mb-3"> <HStack className="mb-3">
<Text className="text-gray-600 w-24">E-mail</Text> <Text className="text-gray-600 w-24">E-mail: </Text>
<Text className="flex-1">{user.email || "brak danych"}</Text> <Text className=" text-gray-600 ">{user.email}</Text>
</HStack> </HStack>
<Pressable <Pressable
@@ -73,7 +73,7 @@ export default function Account() {
</Pressable> </Pressable>
</Box> </Box>
<Box className="bg-white mt-4 p-5"> <Box className="bg-white mt-4 p-5 rounded-lg">
<Text className="font-bold text-lg mb-3">Moje konto</Text> <Text className="font-bold text-lg mb-3">Moje konto</Text>
<Link href="/dashboard/userNotices" asChild> <Link href="/dashboard/userNotices" asChild>

View File

@@ -1,16 +1,55 @@
import { useNoticesStore } from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
import { NoticeCard } from "@/components/NoticeCard"; import { NoticeCard } from "@/components/NoticeCard";
import {Button} from "react-native"; import { Button, ButtonText } from "@/components/ui/button";
import {Box} from "@/components/ui/box";
import {Text} from "@/components/ui/text"; import { Box } from "@/components/ui/box";
import {VStack} from "@/components/ui/vstack"; import { Text } from "@/components/ui/text";
import {ActivityIndicator, FlatList } from "react-native"; import { VStack } from "@/components/ui/vstack";
import {useEffect, useState} from "react"; import { ActivityIndicator, FlatList } from "react-native";
import { useEffect, useState, useRef } from "react";
import { createOrder, createPayment, getOrder } from "@/api/order";
import { Linking } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
import { AppState } from "react-native";
import { useAuthStore } from "@/store/authStore";
export default function UserNotices() { export default function UserNotices() {
const { notices, fetchNotices } = useNoticesStore(); const { notices, fetchNotices, deleteNotice } = useNoticesStore();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera const [isRedirecting, setIsRedirecting] = useState(false);
const toast = useToast();
const appState = useRef(AppState.currentState);
const [toastId, setToastId] = useState(0);
const { user_id } = useAuthStore.getState();
const currentUserId = user_id;
const [orderId, setOrderId] = useState(null);
useEffect(() => {
if (!isRedirecting) return;
const subscription = AppState.addEventListener("change", (state) => {
if (state === "active") {
(async () => {
const lastOrder = await getOrder(orderId);
const lastPayments = lastOrder.payments;
const paymentStatus =
lastPayments.length > 0
? lastPayments[lastPayments.length - 1].status
: null;
setIsRedirecting(false);
if (paymentStatus === "INCORRECT") {
showNewToast("Płatność została anulowana.");
} else if (paymentStatus === "CORRECT") {
showNewToast("Płatność została zrealizowana.");
} else {
showNewToast("Płatność jeszcze nie wpłynęła.");
}
})();
}
appState.current = state;
});
return () => subscription.remove();
}, [isRedirecting, toast, orderId]);
useEffect(() => { useEffect(() => {
const loadNotices = async () => { const loadNotices = async () => {
@@ -24,52 +63,136 @@ export default function UserNotices() {
} }
}; };
loadNotices(); loadNotices();
}, []); }, [fetchNotices]);
const userNotices = notices.filter(notice => notice.clientId === currentUserId); const showNewToast = (title) => {
const newId = Math.random();
setToastId(newId);
toast.show({
id: newId,
placement: "top",
duration: 3000,
render: ({ id }) => {
const uniqueToastId = "toast-" + id;
return (
<Toast nativeID={uniqueToastId} action="muted" variant="solid">
<ToastTitle>{title}</ToastTitle>
</Toast>
);
},
});
};
const handleOrder = async (noticeId, type) => {
{
try {
const result = await createOrder(noticeId, type);
if (result) {
setOrderId(result);
try {
const paymentResult = await createPayment(result);
if (paymentResult) {
setIsRedirecting(true);
await Linking.openURL(paymentResult);
} else {
console.log(`Nie udało się aktywować ogłoszenia 4 ${noticeId}.`);
}
} catch (err) {
// console.log("Błąd podczas aktywacji ogłoszenia 3:", err);
}
} else {
// console.log(`Nie udało się aktywować ogłoszenia 2 ${noticeId}.`);
}
} catch (err) {
console.log("Błąd podczas aktywacji ogłoszenia 1:", err);
}
}
};
const handleDeleteNotice = async (noticeId) => {
try {
await deleteNotice(noticeId);
} catch (err) {
console.error("Błąd podczas usuwania ogłoszenia:", err);
}
};
const userNotices = notices
.filter((notice) => notice.clientId === currentUserId)
.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
if (isLoading) { if (isLoading) {
return <ActivityIndicator />; return (
<Box className="items-center justify-center flex-1">
<ActivityIndicator size="large" color="#787878" />
</Box>
);
} }
return ( return (
<VStack className="p-4"> <VStack className="p-2">
<Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> {isRedirecting && (
{userNotices.length > 0 ? ( <Box className="absolute inset-0 bg-white bg-opacity-30 justify-center items-center z-50">
<FlatList <Ionicons name="card-outline" size="30" className="pt-4" />
data={userNotices} <Text className="text-lg font-bold pt-2">
numColumns={2} Przekierowanie do płatności...
columnWrapperStyle={{ marginBottom: 10, justifyContent: "space-between" }} </Text>
renderItem={({ item }) => ( </Box>
<Box className="flex-1"> )}
<NoticeCard notice={item} /> {/* <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> */}
<Box className="flex-row justify-between mt-2"> {userNotices.length > 0 ? (
<Button <FlatList
title="Promuj" data={userNotices}
onPress={() => { renderItem={({ item }) => (
// TODO: Implementacja promocji ogłoszenia <Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
console.log(`Promuj ogłoszenie ${item.noticeId}`); <NoticeCard notice={item} />
}} <Box className="flex-row justify-between mt-2">
className="bg-primary-500 py-2 px-4 rounded-md" <Button
> className="ml-2"
</Button> onPress={() => handleDeleteNotice(item.noticeId)}
<Button size="md"
title="Podbij" variant="outline"
onPress={() => { action="primary"
// TODO: Implementacja podbicia ogłoszenia >
console.log(`Podbij ogłoszenie ${item.noticeId}`); <ButtonText>Usuń</ButtonText>
}} <Ionicons name="trash-outline" size={14} />
className="bg-primary-500 py-2 px-4 rounded-md" </Button>
>
</Button> {item.status === "ACTIVE" ? (
</Box> <Button
</Box> className="mr-2"
size="md"
variant="solid"
action="primary"
onPress={() => handleOrder(item.noticeId, "BOOST")}
>
<ButtonText>Podbij</ButtonText>
<Ionicons name="arrow-up" size={14} color="#fff" />
</Button>
) : (
<Button
className="mr-2"
size="md"
variant="solid"
action="primary"
onPress={() => handleOrder(item.noticeId, "ACTIVATION")}
>
<ButtonText>Aktywuj</ButtonText>
<Ionicons
name="arrow-redo-outline"
size={14}
color="#fff"
/>
</Button>
)} )}
keyExtractor={(item) => item.noticeId.toString()} </Box>
/> </Box>
) : ( )}
<Text>Nie masz żadnych ogłoszeń.</Text> keyExtractor={(item) => item.noticeId.toString()}
)} />
</VStack> ) : (
<Text>Nie masz żadnych ogłoszeń.</Text>
)}
</VStack>
); );
} }

View File

@@ -0,0 +1,24 @@
import { View, Text } from "react-native";
import { useState, useEffect, use } from "react";
import { listOrders } from "@/api/order";
export default function UserOrders() {
const [orders, setOrders] = useState([]);
useEffect(() => {
const fetchOrders = async () => {
try {
const data = await listOrders();
setOrders(data);
} catch (err) {}
};
fetchOrders();
}, []);
console.log("Orders:", orders);
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Orders</Text>
</View>
);
}

View File

@@ -1,30 +1,29 @@
import { ScrollView, View } from "react-native"; import { ScrollView } from "react-native";
import { useNoticesStore } from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
import { CategorySection } from "@/components/CategorySection"; import { CategorySection } from "@/components/CategorySection";
import { NoticeSection } from "@/components/NoticeSection"; import { NoticeSection } from "@/components/NoticeSection";
import { UserSection } from "@/components/UserSection"; import { UserSection } from "@/components/UserSection";
import { SearchSection } from "@/components/SearchSection"; import { SearchSection } from "@/components/SearchSection";
import { FlatList } from "react-native";
import { useAuthStore } from "@/store/authStore"; import { useAuthStore } from "@/store/authStore";
import { useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView } from "react-native"; import { SafeAreaView } from "react-native";
export default function Home() { export default function Home() {
const token = useAuthStore((state) => state.token); const { token } = useAuthStore.getState();
const router = useRouter(); const router = useRouter();
const [isReady, setIsReady] = useState(false); const [isReady, setIsReady] = useState(false);
const fetchNotices = useNoticesStore((state) => state.fetchNotices); const fetchNotices = useNoticesStore((state) => state.fetchNotices);
useEffect(() => { // useEffect(() => {
setIsReady(true); // setIsReady(true);
}, []); // }, []);
useEffect(() => { // useEffect(() => {
if (isReady && !token) { // if (isReady && !token) {
router.replace("/login"); // router.replace("/login");
} // }
}, [isReady, token, router]); // }, [isReady, token, router]);
useEffect(() => { useEffect(() => {
if (token) { if (token) {
@@ -33,12 +32,12 @@ export default function Home() {
}, [token, fetchNotices]); }, [token, fetchNotices]);
const notices = useNoticesStore((state) => state.notices); const notices = useNoticesStore((state) => state.notices);
// console.log("Notices:", notices);
const latestNotices = [...notices] const activeNotices = notices.filter((notice) => notice.status === "ACTIVE");
const latestNotices = [...activeNotices]
.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate)) .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
.slice(0, 6); .slice(0, 6);
const recomendedNotices = [...notices] const recomendedNotices = [...activeNotices]
.sort(() => Math.random() - 0.5) .sort(() => Math.random() - 0.5)
.slice(0, 6); .slice(0, 6);
@@ -47,13 +46,13 @@ export default function Home() {
{/* <View> */} {/* <View> */}
<SearchSection /> <SearchSection />
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<CategorySection title="Polecane kategorie" notices={notices} /> <CategorySection title="Polecane kategorie" notices={activeNotices} />
<NoticeSection <NoticeSection
title="Najnowsze ogłoszenia" title="Najnowsze ogłoszenia"
notices={latestNotices} notices={latestNotices}
ctaLink="/notices?sort=latest" ctaLink="/notices?sort=latest"
/> />
<UserSection title="Popularni sprzedawcy" notices={notices} /> <UserSection title="Popularni sprzedawcy" notices={activeNotices} />
<NoticeSection <NoticeSection
title="Proponowane ogłoszenia" title="Proponowane ogłoszenia"
notices={recomendedNotices} notices={recomendedNotices}

View File

@@ -1,13 +1,14 @@
import {useState, useEffect} from "react"; import {useState, useEffect} from "react";
import {Image, StyleSheet} from "react-native"; import {Image, StyleSheet, KeyboardAvoidingView, Platform, ActivityIndicator} from "react-native";
import {Button, ButtonText} from "@/components/ui/button"; import {Button, ButtonText} from "@/components/ui/button";
import {FormControl} from "@/components/ui/form-control"; import {FormControl} from "@/components/ui/form-control";
import {Input, InputField} from "@/components/ui/input"; import {Input, InputField} from "@/components/ui/input";
import {Text} from "@/components/ui/text"; import {Text} from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack"; import {VStack} from "@/components/ui/vstack";
import {Textarea, TextareaInput} from "@/components/ui/textarea"; import {Textarea, TextareaInput} from "@/components/ui/textarea";
import {ScrollView} from '@gluestack-ui/themed'; import {ScrollView} from "@gluestack-ui/themed";
import * as ImagePicker from 'expo-image-picker'; import {Box} from "@/components/ui/box";
import * as ImagePicker from "expo-image-picker";
import { import {
Select, Select,
SelectTrigger, SelectTrigger,
@@ -46,7 +47,7 @@ export default function CreateNotice() {
setSelectItems(data); setSelectItems(data);
} }
} catch (error) { } catch (error) {
console.error('Error fetching select items:', error); console.error("Error fetching select items:", error);
} }
}; };
@@ -67,8 +68,8 @@ export default function CreateNotice() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
}, },
image: { image: {
width: 100, width: 100,
@@ -93,19 +94,19 @@ export default function CreateNotice() {
try { try {
const result = await addNotice({ const result = await addNotice({
title: title, title: title,
clientId: 1,
description: description, description: description,
price: price, price: price,
category: category, category: category,
status: "ACTIVE", status: "INACTIVE",
image: image image: image,
}); });
if (result) { if (result) {
console.log("Notice created successfully with ID: ", result.noticeId); console.log("Notice created successfully with ID: ", result.noticeId);
await fetchNotices(); await fetchNotices();
clearForm(); clearForm();
router.push("/(tabs)/notices");
router.push("/(tabs)/dashboard/userNotices");
} }
} catch (error) { } catch (error) {
console.error("Error creating notice. Error message: ", error.message); console.error("Error creating notice. Error message: ", error.message);
@@ -116,7 +117,7 @@ export default function CreateNotice() {
const takePicture = async () => { const takePicture = async () => {
const {status} = await ImagePicker.requestCameraPermissionsAsync(); const {status} = await ImagePicker.requestCameraPermissionsAsync();
if (status !== 'granted') { if (status !== "granted") {
return; return;
} }
const result = await ImagePicker.launchCameraAsync({ const result = await ImagePicker.launchCameraAsync({
@@ -124,13 +125,13 @@ export default function CreateNotice() {
}); });
if (!result.canceled && result.assets) { if (!result.canceled && result.assets) {
setImage(result.assets.map(asset => asset.uri)); setImage(result.assets.map((asset) => asset.uri));
} }
} };
const pickImage = async () => { const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({ let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: 'images', mediaTypes: "images",
selectionLimit: 8, selectionLimit: 8,
allowsEditing: false, allowsEditing: false,
allowsMultipleSelection: true, allowsMultipleSelection: true,
@@ -139,7 +140,7 @@ export default function CreateNotice() {
}); });
if (!result.canceled) { if (!result.canceled) {
setImage(result.assets.map(asset => asset.uri)); setImage(result.assets.map((asset) => asset.uri));
} }
}; };
@@ -154,103 +155,126 @@ export default function CreateNotice() {
description: false, description: false,
price: false, price: false,
category: false, category: false,
}) });
};
if (isLoading) {
return (
<Box className="items-center justify-center flex-1">
<ActivityIndicator size="large" color="#787878"/>
<Text size="md" bold="true" className='mt-5'>
Dodajemy ogłoszenie...
</Text>
</Box>
);
} }
return ( return (
<ScrollView h="$80" w="$80"> <KeyboardAvoidingView
<FormControl className="p-4 border rounded-lg border-outline-300"> behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
<VStack space="xl"> style={{flex: 1}}
<VStack space="md"> keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
<Text className="text-typography-500">Zdjęcia</Text> >
<Button onPress={pickImage}> <ScrollView h="$80" w="$80">
<ButtonText> <FormControl className="p-4 border rounded-lg border-outline-300">
Wybierz zdjęcia <VStack space="xl">
</ButtonText> <VStack space="md">
<Text className="text-typography-500">Zdjęcia</Text>
<Button onPress={pickImage}>
<ButtonText>Wybierz zdjęcia</ButtonText>
</Button>
<Button onPress={takePicture}>
<ButtonText>Zrób zdjęcie</ButtonText>
</Button>
<Text size="sm" bold="true">
Pierwsze zdjęcie będzie zdjęciem głównym
</Text>
{image && image.length > 0 && (
<VStack space="xs" className="flex-row flex-wrap">
{image.map((img, index) => (
<Image
key={index}
source={{uri: img}}
style={styles.image}
className="m-1"
/>
))}
</VStack>
)}
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Tytuł</Text>
<Input className="min-w-[250px]" isInvalid={error.title}>
<InputField
type="text"
value={title}
onChangeText={(value) => setTitle(value)}
/>
</Input>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Opis</Text>
<Textarea
size="md"
className="min-w-[250px] "
isInvalid={error.description}
>
<TextareaInput
placeholder="Opisz produkt"
value={description}
onChangeText={(value) => setDescription(value)}
/>
</Textarea>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Cena</Text>
<Input className="min-w-[250px]" isInvalid={error.price}>
<InputField
type="text"
value={price}
onChangeText={(value) => setPrice(value)}
/>
</Input>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Kategoria</Text>
<Select
onValueChange={(value) => setCategory(value)}
isInvalid={error.category}
>
<SelectTrigger variant="outline" size="md">
<SelectInput placeholder="Wybierz kategorię"/>
<SelectIcon className="mr-3" as={ChevronDownIcon}/>
</SelectTrigger>
<SelectPortal>
<SelectBackdrop/>
<SelectContent style={{maxHeight: 400}}>
<SelectScrollView>
{selectItems.map((item) => (
<SelectItem
key={item.value}
label={item.label}
value={item.value}
/>
))}
</SelectScrollView>
</SelectContent>
</SelectPortal>
</Select>
</VStack>
<Button
className="mt-5 w-full"
onPress={handleAddNotice}
disabled={isLoading}
>
<ButtonText className="text-typography-0">Dodaj</ButtonText>
</Button> </Button>
<Button onPress={takePicture}>
<ButtonText>Zrób zdjęcie</ButtonText>
</Button>
<Text size="sm"
bold="true"
>
Pierwsze zdjęcie będzie zdjęciem głównym</Text>
{image && image.length > 0 && (
<VStack space="xs" className="flex-row flex-wrap">
{image.map((img, index) => (
<Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
))}
</VStack>
)}
</VStack> </VStack>
</FormControl>
<VStack space="xs"> </ScrollView>
<Text className="text-typography-500">Tytuł</Text> </KeyboardAvoidingView>
<Input className="min-w-[250px]" isInvalid={error.title}>
<InputField
type="text"
value={title}
onChangeText={(value) => setTitle(value)}
/>
</Input>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Opis</Text>
<Textarea
size="md"
className="min-w-[250px] "
isInvalid={error.description}
>
<TextareaInput
placeholder="Opisz produkt"
value={description}
onChangeText={(value) => setDescription(value)}
/>
</Textarea>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Cena</Text>
<Input className="min-w-[250px]" isInvalid={error.price}>
<InputField
type="text"
value={price}
onChangeText={(value) => setPrice(value)}
/>
</Input>
</VStack>
<VStack space="xs">
<Text className="text-typography-500">Kategoria</Text>
<Select
onValueChange={(value) => setCategory(value)}
isInvalid={error.category}
>
<SelectTrigger variant="outline" size="md">
<SelectInput placeholder="Wybierz kategorię"/>
<SelectIcon className="mr-3" as={ChevronDownIcon}/>
</SelectTrigger>
<SelectPortal>
<SelectBackdrop/>
<SelectContent style={{maxHeight: 400}}>
<SelectScrollView>
{selectItems.map((item) => (
<SelectItem key={item.value} label={item.label} value={item.value}/>
))}
</SelectScrollView>
</SelectContent>
</SelectPortal>
</Select>
</VStack>
<Button
className="mt-5 w-full"
onPress={handleAddNotice}
disabled={isLoading}
>
<ButtonText className="text-typography-0">Dodaj</ButtonText>
</Button>
</VStack>
</FormControl>
</ScrollView>
); );
} }

View File

@@ -1,4 +1,10 @@
import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native"; import {
FlatList,
Text,
ActivityIndicator,
RefreshControl,
Dimensions,
} from "react-native";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useNoticesStore } from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
@@ -11,345 +17,372 @@ import { listCategories } from "@/api/categories";
import { FormControl, FormControlLabel } from "@/components/ui/form-control"; import { FormControl, FormControlLabel } from "@/components/ui/form-control";
import { Input, InputField } from "@/components/ui/input"; import { Input, InputField } from "@/components/ui/input";
import { HStack } from "@/components/ui/hstack"; import { HStack } from "@/components/ui/hstack";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { KeyboardAvoidingView, Platform } from "react-native"; import { KeyboardAvoidingView, Platform } from "react-native";
import { import {
Actionsheet, Actionsheet,
ActionsheetContent, ActionsheetContent,
ActionsheetItem, ActionsheetItem,
ActionsheetItemText, ActionsheetItemText,
ActionsheetDragIndicator, ActionsheetDragIndicator,
ActionsheetDragIndicatorWrapper, ActionsheetDragIndicatorWrapper,
ActionsheetBackdrop, ActionsheetBackdrop,
} from "@/components/ui/actionsheet"; } from "@/components/ui/actionsheet";
import { import {
Select, Select,
SelectTrigger, SelectTrigger,
SelectInput, SelectInput,
SelectIcon, SelectIcon,
SelectPortal, SelectPortal,
SelectBackdrop, SelectBackdrop,
SelectContent, SelectContent,
SelectDragIndicator, SelectDragIndicator,
SelectDragIndicatorWrapper, SelectDragIndicatorWrapper,
SelectItem, SelectItem,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { ScrollView } from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
export default function Notices() { export default function Notices() {
// Hooks // Hooks
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 [showActionsheet, setShowActionsheet] = useState(false); const [showActionsheet, setShowActionsheet] = useState(false);
const [showSortSheet, setShowSortSheet] = useState(false); const [showSortSheet, setShowSortSheet] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [filteredNotices, setFilteredNotices] = useState([]); const [filteredNotices, setFilteredNotices] = useState([]);
const params = useLocalSearchParams(); const params = useLocalSearchParams();
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
const fetchSelectItems = async () => { const fetchSelectItems = async () => {
try { try {
const data = await listCategories(); const data = await listCategories();
if (Array.isArray(data)) { if (Array.isArray(data)) {
setCategories(data); setCategories(data);
} else { } else {
console.error('listCategories did not return an array:', data); console.error("listCategories did not return an array:", data);
setError(new Error('Invalid categories data')); setError(new Error("Invalid categories data"));
}
} catch (error) {
console.error('Error fetching select items:', error);
setError(error);
}
};
fetchSelectItems();
}, []);
useEffect(() => {
loadData();
}, []);
useEffect(() => {
let result = notices;
if (params.category) {
result = result.filter(notice => notice.category === params.category);
} }
} catch (error) {
console.error("Error fetching select items:", error);
setError(error);
}
};
fetchSelectItems();
}, []);
if (params.sort) { useEffect(() => {
if( params.sort == "latest"){ loadData();
result = [...result].sort( }, []);
(a, b) => new Date(b.publishDate) - new Date(a.publishDate)
);
}else if (params.sort == "oldest") {
result = [...result].sort(
(a, b) => new Date(a.publishDate) - new Date(b.publishDate)
);
}else if (params.sort == "cheapest") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
});
}else if (params.sort == "expensive") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
});
}
} useEffect(() => {
let result = notices.filter((notice) => notice.status === "ACTIVE");
if (params.priceFrom) { if (params.category) {
result = result.filter(notice => { result = result.filter((notice) => notice.category === params.category);
const price = parseFloat(notice.price); }
const priceFrom = parseFloat(params.priceFrom);
return !isNaN(price) && price >= priceFrom;
});
}
if (params.priceTo) { if (params.sort) {
result = result.filter(notice => { if (params.sort == "latest") {
const price = parseFloat(notice.price); result = [...result].sort(
const priceTo = parseFloat(params.priceTo); (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
return !isNaN(price) && price <= priceTo; );
}); } else if (params.sort == "oldest") {
} result = [...result].sort(
(a, b) => new Date(a.publishDate) - new Date(b.publishDate)
);
} else if (params.sort == "cheapest") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
});
} else if (params.sort == "expensive") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
});
}
}
if (params.priceFrom) {
result = result.filter((notice) => {
const price = parseFloat(notice.price);
const priceFrom = parseFloat(params.priceFrom);
return !isNaN(price) && price >= priceFrom;
});
}
if (params.search) { if (params.priceTo) {
const searchTerm = params.search.toLowerCase(); result = result.filter((notice) => {
result = result.filter(notice => { const price = parseFloat(notice.price);
return notice.title.toLowerCase().includes(searchTerm); const priceTo = parseFloat(params.priceTo);
}); return !isNaN(price) && price <= priceTo;
} });
}
setFilteredNotices(result); if (params.search) {
}, [notices, const searchTerm = params.search.toLowerCase();
result = result.filter((notice) => {
return notice.title.toLowerCase().includes(searchTerm);
});
}
setFilteredNotices(result);
}, [
notices,
params.category, params.category,
params.sort, params.sort,
params.priceFrom, params.priceFrom,
params.priceTo, params.priceTo,
params.search]); params.search,
]);
let filterActive =
!!params.category ||
!!params.sort ||
!!params.priceFrom ||
!!params.priceTo ||
!!params.search;
let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search; const loadData = async () => {
setIsLoading(true);
try {
const loadData = async () => { await fetchNotices();
setIsLoading(true); setError(null);
try { } catch (err) {
await fetchNotices(); setError(err);
setError(null); } finally {
} catch (err) { setIsLoading(false);
setError(err);
} finally {
setIsLoading(false);
}
};
const handleCategorySelect = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, category: value }
});
};
const handlePriceFrom = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceFrom: value }
});
} }
};
const handlePriceTo = (value) => { const handleCategorySelect = (value) => {
router.replace({ router.replace({
pathname: "/notices", pathname: "/notices",
params: { ...params, priceTo: value } params: { ...params, category: value },
}); });
};
const handlePriceFrom = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceFrom: value },
});
};
const handlePriceTo = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceTo: value },
});
};
const handleClose = () => setShowActionsheet(false);
const handleSort = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, sort: value },
});
setShowSortSheet(false);
};
const onRefresh = async () => {
setRefreshing(true);
try {
await fetchNotices();
} catch (err) {
setError(err);
} finally {
setRefreshing(false);
} }
};
const handleClose = () => setShowActionsheet(false); if (isLoading && !refreshing) {
return <ActivityIndicator />;
}
const handleSort = (value) => { if (error) {
router.replace({ return <Text>Nie udało się pobrać listy. {error.message}</Text>;
pathname: "/notices", }
params: { ...params, sort: value }
});
setShowSortSheet(false);
}
const onRefresh = async () => { const SCREEN_HEIGHT = Dimensions.get("window").height;
setRefreshing(true);
try {
await fetchNotices();
} catch (err) {
setError(err);
} finally {
setRefreshing(false);
}
};
if (isLoading && !refreshing) { const selectedCategory =
return <ActivityIndicator />; (params.category &&
} categories?.find((cat) => cat.value === params.category)) ||
null;
if (error) { return (
return <Text>Nie udało się pobrać listy. {error.message}</Text>; <>
} <Box
style={{
const SCREEN_HEIGHT = Dimensions.get('window').height; flexDirection: "row",
padding: 8,
const selectedCategory = params.category && categories?.find( paddingTop: 16,
(cat) => cat.value === params.category paddingBottom: 16,
) || null; backgroundColor: "white",
alignItems: "center",
return ( justifyContent: "space-between",
<> }}
<Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
<Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Button variant="outline" onPress={() => setShowActionsheet(true)}>
<ButtonText>Filtruj</ButtonText>
<Ionicons name="filter-outline" size={20} color="black" />
</Button>
<Button variant="outline" onPress={() => setShowSortSheet(true)}>
<Ionicons name="chevron-expand-outline" size={20} color="black" />
</Button>
</Box>
{filterActive && (
<Button variant="link" onPress={() => router.replace("/notices")}>
<ButtonText>Wyczyść</ButtonText>
</Button>
)}
</Box>
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
<ActionsheetBackdrop />
<ActionsheetContent style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
<KeyboardAwareScrollView
contentContainerStyle={{ flexGrow: 1, width: '100%' }}
enableOnAndroid={true}
extraScrollHeight={40}
> >
<ActionsheetDragIndicatorWrapper> <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<ActionsheetDragIndicator /> <Button variant="outline" onPress={() => setShowActionsheet(true)}>
</ActionsheetDragIndicatorWrapper> <ButtonText>Filtruj</ButtonText>
<Box className="mb-4" style={{ width: "100%" }}> <Ionicons name="filter-outline" size={20} color="black" />
<HStack space="md" style={{ width: "100%" }}> </Button>
<FormControl <Button variant="outline" onPress={() => setShowSortSheet(true)}>
style={{ flex: 1 }}> <Ionicons name="chevron-expand-outline" size={20} color="black" />
<Input> </Button>
<InputField </Box>
keyboardType="numeric" {filterActive && (
placeholder="Od:" <Button variant="link" onPress={() => router.replace("/notices")}>
value={params.priceFrom || ''} <ButtonText>Wyczyść</ButtonText>
onChangeText={handlePriceFrom} </Button>
/> )}
</Input> </Box>
</FormControl> <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
<FormControl <ActionsheetBackdrop />
style={{ flex: 1 }}> <ActionsheetContent
<Input> style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: "100%" }}
<InputField >
keyboardType="numeric" <KeyboardAwareScrollView
placeholder="Do:" contentContainerStyle={{ flexGrow: 1, width: "100%" }}
value={params.priceTo || ''} enableOnAndroid={true}
onChangeText={handlePriceTo} extraScrollHeight={40}
/> >
</Input> <ActionsheetDragIndicatorWrapper>
</FormControl> <ActionsheetDragIndicator />
</HStack> </ActionsheetDragIndicatorWrapper>
</Box> <Box className="mb-4" style={{ width: "100%" }}>
<Box className="mb-4" style={{ flex: 1 }}> <HStack space="md" style={{ width: "100%" }}>
<Select <FormControl style={{ flex: 1 }}>
style={{ flex: 1 }} <Input>
selectedValue={params.category || ''} <InputField
onValueChange={handleCategorySelect} keyboardType="numeric"
> placeholder="Od:"
<SelectTrigger variant="outline" size="md"> value={params.priceFrom || ""}
<SelectInput onChangeText={handlePriceFrom}
style={{ flex: 1 }}
placeholder="Wybierz kategorię"
value={selectedCategory ? selectedCategory.label : ""}
/>
<SelectIcon style={{ marginRight: 12 }} as={ChevronDownIcon} />
</SelectTrigger>
<SelectPortal>
<SelectBackdrop />
<SelectContent
style={{ maxHeight: SCREEN_HEIGHT * 0.6}}
>
<SelectDragIndicatorWrapper>
<SelectDragIndicator />
</SelectDragIndicatorWrapper>
<FlatList
style={{ width: '100%' }}
data={categories}
keyExtractor={(item) => item.value?.toString() || item.id?.toString() || Math.random().toString()}
renderItem={({ item }) => (
<SelectItem
label={item.label}
value={item.value}
/>
)}
/>
</SelectContent>
</SelectPortal>
</Select>
</Box>
</KeyboardAwareScrollView>
</ActionsheetContent>
</Actionsheet>
<Actionsheet isOpen={showSortSheet} onClose={() => setShowSortSheet(false)}>
<ActionsheetBackdrop />
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem
className={ !params.sort ? 'bg-gray-200' : ''}
onPress={() => handleSort()}>
<ActionsheetItemText>Trafność</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'latest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('latest')}>
<ActionsheetItemText>Najnowsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'oldest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('oldest')}>
<ActionsheetItemText>Najstarsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'cheapest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('cheapest')}>
<ActionsheetItemText>Najtańsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'expensive' ? 'bg-gray-200' : ''}
onPress={() => handleSort('expensive')}>
<ActionsheetItemText>Najdroższe</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
<FlatList
data={filteredNotices}
numColumns={2}
columnWrapperStyle={{ gap: 8, marginHorizontal: 8 }}
contentContainerStyle={{ paddingBottom: 16 }}
renderItem={({ item }) => <NoticeCard notice={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
/> />
} </Input>
/> </FormControl>
</> <FormControl style={{ flex: 1 }}>
); <Input>
} <InputField
keyboardType="numeric"
placeholder="Do:"
value={params.priceTo || ""}
onChangeText={handlePriceTo}
/>
</Input>
</FormControl>
</HStack>
</Box>
<Box className="mb-4" style={{ flex: 1 }}>
<Select
style={{ flex: 1 }}
selectedValue={params.category || ""}
onValueChange={handleCategorySelect}
>
<SelectTrigger variant="outline" size="md">
<SelectInput
style={{ flex: 1 }}
placeholder="Wybierz kategorię"
value={selectedCategory ? selectedCategory.label : ""}
/>
<SelectIcon
style={{ marginRight: 12 }}
as={ChevronDownIcon}
/>
</SelectTrigger>
<SelectPortal>
<SelectBackdrop />
<SelectContent style={{ maxHeight: SCREEN_HEIGHT * 0.6 }}>
<SelectDragIndicatorWrapper>
<SelectDragIndicator />
</SelectDragIndicatorWrapper>
<FlatList
style={{ width: "100%" }}
data={categories}
keyExtractor={(item) =>
item.value?.toString() ||
item.id?.toString() ||
Math.random().toString()
}
renderItem={({ item }) => (
<SelectItem label={item.label} value={item.value} />
)}
/>
</SelectContent>
</SelectPortal>
</Select>
</Box>
</KeyboardAwareScrollView>
</ActionsheetContent>
</Actionsheet>
<Actionsheet
isOpen={showSortSheet}
onClose={() => setShowSortSheet(false)}
>
<ActionsheetBackdrop />
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem
className={!params.sort ? "bg-gray-200" : ""}
onPress={() => handleSort()}
>
<ActionsheetItemText>Trafność</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "latest" ? "bg-gray-200" : ""}
onPress={() => handleSort("latest")}
>
<ActionsheetItemText>Najnowsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "oldest" ? "bg-gray-200" : ""}
onPress={() => handleSort("oldest")}
>
<ActionsheetItemText>Najstarsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "cheapest" ? "bg-gray-200" : ""}
onPress={() => handleSort("cheapest")}
>
<ActionsheetItemText>Najtańsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "expensive" ? "bg-gray-200" : ""}
onPress={() => handleSort("expensive")}
>
<ActionsheetItemText>Najdroższe</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
<FlatList
data={filteredNotices}
numColumns={2}
// numColumns={2}
// columnContainerClassName="m-2"
columnWrapperClassName="m-2"
columnWrapperStyle={{ gap: 8, marginHorizontal: 8 }}
contentContainerStyle={{ paddingBottom: 16 }}
renderItem={({ item }) => <NoticeCard notice={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
/>
}
/>
</>
);
}

View File

@@ -4,25 +4,34 @@ import { NoticeCard } from "@/components/NoticeCard";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { Box } from "@/components/ui/box"; import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text"; import { Text } from "@/components/ui/text";
import { useEffect } from "react"; import { useCallback } from "react";
import { useFocusEffect } from "@react-navigation/native";
export default function Wishlist() { export default function Wishlist() {
const wishlistNotices = useWishlist((state) => state.wishlistNotices); const wishlistNotices = useWishlist((state) => state.wishlistNotices);
const fetchWishlist = useWishlist((state) => state.fetchWishlist); const fetchWishlist = useWishlist((state) => state.fetchWishlist);
useEffect(() => { useFocusEffect(
fetchWishlist(); useCallback(() => {
}, []); fetchWishlist();
}, [fetchWishlist])
);
const styles = {
container: {
margin: 10,
},
};
// console.log("Wishlist notices:", wishlistNotices);
if (wishlistNotices.length === 0) { if (wishlistNotices.length === 0) {
return ( return (
<Box className="flex-row flex-1 justify-center"> <Box style={styles.container} className="flex-row flex-1 justify-center">
<Ionicons name="sad-outline" size={24} color="black" /> <Ionicons name="sad-outline" size={24} color="black" />
<Text>Brak ulubionych ogłoszeń</Text> <Text>Brak ulubionych ogłoszeń</Text>
</Box> </Box>
); );
} }
return ( return (
<FlatList <FlatList
data={wishlistNotices} data={wishlistNotices}
@@ -30,7 +39,6 @@ export default function Wishlist() {
numColumns={2} numColumns={2}
columnContainerClassName="m-2" columnContainerClassName="m-2"
columnWrapperClassName="gap-2 m-2" columnWrapperClassName="gap-2 m-2"
k
renderItem={({ item }) => <NoticeCard notice={item} />} renderItem={({ item }) => <NoticeCard notice={item} />}
/> />
); );

View File

@@ -17,6 +17,7 @@ return (
}} }}
> >
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="user" options={{ headerShown: false }} />
<Stack.Screen <Stack.Screen
name="(auth)/login" name="(auth)/login"
options={{ headerShown: false }}/> options={{ headerShown: false }}/>

View File

@@ -61,7 +61,7 @@ export default function NoticeDetails() {
); );
const isInWishlist = useWishlist((state) => const isInWishlist = useWishlist((state) =>
id ? state.wishlistNotices.some((item) => item.noticeId == id) : false id ? state.wishlistNotices.some((item) => item.noticeId === id) : false
); );
const onViewableItemsChanged = useRef(({ viewableItems }) => { const onViewableItemsChanged = useRef(({ viewableItems }) => {
if (viewableItems.length > 0) { if (viewableItems.length > 0) {
@@ -103,11 +103,11 @@ export default function NoticeDetails() {
setImages( setImages(
fetchedImages && fetchedImages.length > 0 fetchedImages && fetchedImages.length > 0
? fetchedImages ? fetchedImages
: ["https://http.cat/404.jpg"] : { uri: "https://http.cat/404.jpg" }
); );
} catch (err) { } catch (err) {
console.error("Error while loading images:", err); console.error("Error while loading images:", err);
setImage("https://http.cat/404.jpg"); setImage({ uri: "https://http.cat/404.jpg" });
} finally { } finally {
setIsImageLoading(false); setIsImageLoading(false);
} }
@@ -166,19 +166,20 @@ export default function NoticeDetails() {
ref={flatListRef} ref={flatListRef}
data={images} data={images}
horizontal horizontal
snapToAlignment="center" snapToInterval={width}
snapToAlignment="start"
decelerationRate="fast" decelerationRate="fast"
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
pagingEnabled pagingEnabled
onViewableItemsChanged={onViewableItemsChanged} onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={viewabilityConfig} viewabilityConfig={viewabilityConfig}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<View style={{ width: width }}> <View style={{ width: width }} className="p-1">
<Image <Image
source={{ uri: item }} source={item}
className="h-auto w-full rounded-md aspect-square" className="h-auto w-auto rounded-md aspect-[1/1]"
alt={`Zdjęcie ${index + 1}`} alt={`Zdjęcie ${index + 1}`}
resizeMode="contain" resizeMode="cover"
/> />
</View> </View>
)} )}

View File

@@ -0,0 +1,11 @@
import { Stack } from 'expo-router';
export default function UserLayout() {
return (
<Stack
screenOptions={{
headerTitle: 'Ogłoszenia użytkownika',
}}
/>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

View File

@@ -1,6 +1,5 @@
import { View, FlatList } from "react-native"; import { View, FlatList } from "react-native";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useAuthStore } from "@/store/authStore";
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 { Link } from "expo-router"; import { Link } from "expo-router";
@@ -17,9 +16,8 @@ export function CategorySection({ notices, title }) {
setCategoryMap(data); setCategoryMap(data);
} }
}; };
fetchCategories(); fetchCategories();
}); }, []);
const categories = Array.from( const categories = Array.from(
new Set(notices.map((notice) => notice.category)) new Set(notices.map((notice) => notice.category))

View File

@@ -14,9 +14,13 @@ import {useEffect, useState} from "react";
export function NoticeCard({notice}) { export function NoticeCard({notice}) {
const noticeId = notice?.noticeId; const noticeId = notice?.noticeId;
const toggleNoticeInWishlist = useWishlist((state) => state.toggleNoticeInWishlist); const toggleNoticeInWishlist = useWishlist(
(state) => state.toggleNoticeInWishlist
);
const isInWishlist = useWishlist((state) => const isInWishlist = useWishlist((state) =>
noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false noticeId
? state.wishlistNotices.some((item) => item.noticeId === noticeId)
: false
); );
const [image, setImage] = useState(null); const [image, setImage] = useState(null);
@@ -30,7 +34,7 @@ export function NoticeCard({notice}) {
const fetchImage = async () => { const fetchImage = async () => {
if (!noticeId) { if (!noticeId) {
if (isMounted) { if (isMounted) {
setImage("https://http.cat/404.jpg"); setImage({uri: "https://http.cat/404.jpg"});
setIsLoading(false); setIsLoading(false);
} }
return; return;
@@ -40,12 +44,14 @@ export function NoticeCard({notice}) {
try { try {
const images = await getAllImagesByNoticeId(noticeId); const images = await getAllImagesByNoticeId(noticeId);
if (isMounted) { if (isMounted) {
setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg"); setImage(
images && images.length > 0 ? images[0] : {uri: "https://http.cat/404.jpg"}
);
} }
} catch (error) { } catch (error) {
console.error(`Error while loading image: ${error}`); console.error(`Error while loading image: ${error}`);
if (isMounted) { if (isMounted) {
setImage("https://http.cat/404.jpg"); setImage({uri: "https://http.cat/404.jpg"});
} }
} finally { } finally {
if (isMounted) { if (isMounted) {
@@ -62,7 +68,7 @@ export function NoticeCard({notice}) {
}, [noticeId]); }, [noticeId]);
if (!notice) { if (!notice) {
return <View style={{flex: 1}} />; return <View style={{flex: 1}}/>;
} }
return ( return (
@@ -71,13 +77,11 @@ export function NoticeCard({notice}) {
<Card className="p-0 rounded-lg max-w-[460px] flex-1"> <Card className="p-0 rounded-lg max-w-[460px] flex-1">
{isLoading ? ( {isLoading ? (
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center"> <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
<ActivityIndicator size="large" color="#3b82f6" /> <ActivityIndicator size="large" color="#3b82f6"/>
</Box> </Box>
) : ( ) : (
<Image <Image
source={{ source={image}
uri: image,
}}
className="h-auto w-full rounded-md aspect-[1/1]" className="h-auto w-full rounded-md aspect-[1/1]"
alt="image" alt="image"
resizeMode="cover" resizeMode="cover"
@@ -93,7 +97,7 @@ export function NoticeCard({notice}) {
</Heading> </Heading>
<Pressable <Pressable
onPress={() => { onPress={() => {
toggleNoticeInWishlist(noticeId); toggleNoticeInWishlist(noticeId);
}} }}
> >
<Ionicons <Ionicons
@@ -108,4 +112,4 @@ export function NoticeCard({notice}) {
</Pressable> </Pressable>
</Link> </Link>
); );
} }

View File

@@ -0,0 +1,240 @@
'use client';
import React from 'react';
import { createToastHook } from '@gluestack-ui/toast';
import { AccessibilityInfo, Text, View, ViewStyle } from 'react-native';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { cssInterop } from 'nativewind';
import {
Motion,
AnimatePresence,
MotionComponentProps,
} from '@legendapp/motion';
import {
withStyleContext,
useStyleContext,
} from '@gluestack-ui/nativewind-utils/withStyleContext';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
type IMotionViewProps = React.ComponentProps<typeof View> &
MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
const useToast = createToastHook(MotionView, AnimatePresence);
const SCOPE = 'TOAST';
cssInterop(MotionView, { className: 'style' });
const toastStyle = tva({
base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
variants: {
action: {
error: 'bg-error-800',
warning: 'bg-warning-700',
success: 'bg-success-700',
info: 'bg-info-700',
muted: 'bg-background-800',
},
variant: {
solid: '',
outline: 'border bg-background-0',
},
},
});
const toastTitleStyle = tva({
base: 'text-typography-0 font-medium font-body tracking-md text-left',
variants: {
isTruncated: {
true: '',
},
bold: {
true: 'font-bold',
},
underline: {
true: 'underline',
},
strikeThrough: {
true: 'line-through',
},
size: {
'2xs': 'text-2xs',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-base',
'lg': 'text-lg',
'xl': 'text-xl',
'2xl': 'text-2xl',
'3xl': 'text-3xl',
'4xl': 'text-4xl',
'5xl': 'text-5xl',
'6xl': 'text-6xl',
},
},
parentVariants: {
variant: {
solid: '',
outline: '',
},
action: {
error: '',
warning: '',
success: '',
info: '',
muted: '',
},
},
parentCompoundVariants: [
{
variant: 'outline',
action: 'error',
class: 'text-error-800',
},
{
variant: 'outline',
action: 'warning',
class: 'text-warning-800',
},
{
variant: 'outline',
action: 'success',
class: 'text-success-800',
},
{
variant: 'outline',
action: 'info',
class: 'text-info-800',
},
{
variant: 'outline',
action: 'muted',
class: 'text-background-800',
},
],
});
const toastDescriptionStyle = tva({
base: 'font-normal font-body tracking-md text-left',
variants: {
isTruncated: {
true: '',
},
bold: {
true: 'font-bold',
},
underline: {
true: 'underline',
},
strikeThrough: {
true: 'line-through',
},
size: {
'2xs': 'text-2xs',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-base',
'lg': 'text-lg',
'xl': 'text-xl',
'2xl': 'text-2xl',
'3xl': 'text-3xl',
'4xl': 'text-4xl',
'5xl': 'text-5xl',
'6xl': 'text-6xl',
},
},
parentVariants: {
variant: {
solid: 'text-typography-50',
outline: 'text-typography-900',
},
},
});
const Root = withStyleContext(View, SCOPE);
type IToastProps = React.ComponentProps<typeof Root> & {
className?: string;
} & VariantProps<typeof toastStyle>;
const Toast = React.forwardRef<React.ComponentRef<typeof Root>, IToastProps>(
function Toast(
{ className, variant = 'solid', action = 'muted', ...props },
ref
) {
return (
<Root
ref={ref}
className={toastStyle({ variant, action, class: className })}
context={{ variant, action }}
{...props}
/>
);
}
);
type IToastTitleProps = React.ComponentProps<typeof Text> & {
className?: string;
} & VariantProps<typeof toastTitleStyle>;
const ToastTitle = React.forwardRef<
React.ComponentRef<typeof Text>,
IToastTitleProps
>(function ToastTitle({ className, size = 'md', children, ...props }, ref) {
const { variant: parentVariant, action: parentAction } =
useStyleContext(SCOPE);
React.useEffect(() => {
// Issue from react-native side
// Hack for now, will fix this later
AccessibilityInfo.announceForAccessibility(children as string);
}, [children]);
return (
<Text
{...props}
ref={ref}
aria-live="assertive"
aria-atomic="true"
role="alert"
className={toastTitleStyle({
size,
class: className,
parentVariants: {
variant: parentVariant,
action: parentAction,
},
})}
>
{children}
</Text>
);
});
type IToastDescriptionProps = React.ComponentProps<typeof Text> & {
className?: string;
} & VariantProps<typeof toastDescriptionStyle>;
const ToastDescription = React.forwardRef<
React.ComponentRef<typeof Text>,
IToastDescriptionProps
>(function ToastDescription({ className, size = 'md', ...props }, ref) {
const { variant: parentVariant } = useStyleContext(SCOPE);
return (
<Text
ref={ref}
{...props}
className={toastDescriptionStyle({
size,
class: className,
parentVariants: {
variant: parentVariant,
},
})}
/>
);
});
Toast.displayName = 'Toast';
ToastTitle.displayName = 'ToastTitle';
ToastDescription.displayName = 'ToastDescription';
export { useToast, Toast, ToastTitle, ToastDescription };

File diff suppressed because it is too large Load Diff

View File

@@ -36,10 +36,11 @@
"@tanstack/react-query": "^5.74.4", "@tanstack/react-query": "^5.74.4",
"axios": "^1.9.0", "axios": "^1.9.0",
"babel-plugin-module-resolver": "^5.0.2", "babel-plugin-module-resolver": "^5.0.2",
"expo": "^53.0.0", "expo": "^53.0.10",
"expo-auth-session": "~6.1.5", "expo-auth-session": "~6.2.0",
"expo-camera": "~16.1.6", "expo-camera": "~16.1.7",
"expo-constants": "~17.1.6", "expo-constants": "~17.1.5",
"expo-crypto": "~14.1.4",
"expo-image-picker": "~16.1.4", "expo-image-picker": "~16.1.4",
"expo-linking": "~7.1.4", "expo-linking": "~7.1.4",
"expo-router": "~5.0.5", "expo-router": "~5.0.5",
@@ -51,7 +52,7 @@
"nativewind": "^4.1.23", "nativewind": "^4.1.23",
"react": "19.0.0", "react": "19.0.0",
"react-dom": "19.0.0", "react-dom": "19.0.0",
"react-native": "0.79.2", "react-native": "0.79.3",
"react-native-css-interop": "^0.1.22", "react-native-css-interop": "^0.1.22",
"react-native-gesture-handler": "~2.24.0", "react-native-gesture-handler": "~2.24.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-keyboard-aware-scroll-view": "^0.9.5",
@@ -62,7 +63,7 @@
"react-native-web": "~0.20.0", "react-native-web": "~0.20.0",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"zustand": "^5.0.3", "zustand": "^5.0.3",
"expo-crypto": "~14.1.4" "expo-screen-orientation": "~8.1.7"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",

View File

@@ -2,14 +2,16 @@ import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware"; import { createJSONStorage, persist } from "zustand/middleware";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios"; import axios from "axios";
import { router } from "expo-router";
const API_URL = "https://hopp.zikor.pl/api/v1"; const API_URL = "https://hopp.zikor.pl/api/v1";
let interceptorInitialized = false;
export const useAuthStore = create( export const useAuthStore = create(
persist( persist(
(set, get) => { (set, get) => {
// Dodaj interceptor tylko raz if (!interceptorInitialized.current) {
if (!axios.interceptors.response.handlers.length) {
axios.interceptors.response.use( axios.interceptors.response.use(
(response) => response, (response) => response,
(error) => { (error) => {
@@ -17,14 +19,15 @@ export const useAuthStore = create(
(error.response && error.response.status === 401) || (error.response && error.response.status === 401) ||
error.response.status === 403 error.response.status === 403
) { ) {
set({ user: null, token: null, isLoading: false }); set({ user_id: null, token: null, isLoading: false });
delete axios.defaults.headers.common["Authorization"]; delete axios.defaults.headers.common["Authorization"];
router.replace("/login");
} }
return Promise.reject(error); return Promise.reject(error);
} }
); );
interceptorInitialized = true;
} }
return { return {
user_id: null, user_id: null,
token: null, token: null,
@@ -103,34 +106,24 @@ export const useAuthStore = create(
}, },
signOut: async () => { signOut: async () => {
const { token } = get();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
try { try {
await axios.post(`${API_URL}/auth/logout`); await axios.post(
`${API_URL}/auth/logout`,
{},
{
headers: headers,
}
);
} catch (error) { } catch (error) {
console.error("Logout error:", error); console.error("Logout error:", error);
} finally { } finally {
delete axios.defaults.headers.common["Authorization"]; delete axios.defaults.headers.common["Authorization"];
set({ user_id: null, token: null }); set({ user_id: null, token: null });
router.replace("/login");
} }
}, },
// checkAuth: async () => {
// const { token } = useAuthStore.getState();
// if (!token) return null;
// set({ isLoading: true });
// try {
// axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
// const response = await axios.get(`${API_URL}/auth/me`);
// set({ user_id: response.data, isLoading: false });
// return response.data;
// } catch (error) {
// delete axios.defaults.headers.common["Authorization"];
// set({ user_id: null, token: null, isLoading: false });
// return null;
// }
// },
}; };
}, },
{ {

View File

@@ -1,41 +1,54 @@
import {create} from "zustand"; import { create } from "zustand";
import * as api from "@/api/notices"; import * as api from "@/api/notices";
export const useNoticesStore = create((set, get) => ({ export const useNoticesStore = create((set, get) => ({
notices: [], notices: [],
fetchNotices: async () => { fetchNotices: async () => {
set({error: null}); set({ error: null });
try { try {
const data = await api.listNotices(); const data = await api.listNotices();
set({notices: data}); set({ notices: data });
} catch (error) { } catch (error) {
set(error); set(error);
}
},
addNotice: async (notice) => {
try {
const newNotice = await api.createNotice(notice);
set((state) => ({
notices: [...state.notices, newNotice],
}));
return newNotice;
} catch (error) {
set({ error });
return null;
}
},
getNoticeById: (noticeId) => {
return get().notices.find((notice) => String(notice.noticeId) === String(noticeId));
},
getAllImagesByNoticeId: async (noticeId) => {
try {
return await api.getAllImagesByNoticeId(noticeId);
} catch (error) {
console.error("Error while getting images:", error);
return ["https://http.cat/404.jpg"];
}
} }
})); },
addNotice: async (notice) => {
try {
const newNotice = await api.createNotice(notice);
set((state) => ({
notices: [...state.notices, newNotice],
}));
return newNotice;
} catch (error) {
set({ error });
return null;
}
},
getNoticeById: (noticeId) => {
return get().notices.find(
(notice) => String(notice.noticeId) === String(noticeId)
);
},
getAllImagesByNoticeId: async (noticeId) => {
try {
return await api.getAllImagesByNoticeId(noticeId);
} catch (error) {
console.error("Error while getting images:", error);
return ["https://http.cat/404.jpg"];
}
},
deleteNotice: async (noticeId) => {
try {
await api.deleteNotice(noticeId);
set((state) => ({
notices: state.notices.filter((notice) => notice.noticeId !== noticeId),
}));
} catch (error) {
console.error("Error deleting notice:", error);
}
},
}));