Compare commits
25 Commits
integrateW
...
fixowanie
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a04ef906cd | ||
|
|
a51345fd93 | ||
|
|
c2d4f5fb79 | ||
| 7ec883100f | |||
|
|
207f8f7161 | ||
|
|
27175ffa91 | ||
| c25495ba3f | |||
| be51f1e9cc | |||
| 14bd178f84 | |||
| b34ce7fd20 | |||
| 7fc1312ddc | |||
| 77c3a694f8 | |||
| 9c3e883741 | |||
| 2b31863ed3 | |||
| 8e6d7ca150 | |||
| 44f5239328 | |||
| 5344acbdd1 | |||
| 2218c5eb33 | |||
|
|
bcce392c9b | ||
| 1d3cbeef3a | |||
|
|
dbf07cea0a | ||
|
|
e2e5543e0d | ||
|
|
ca59c94783 | ||
|
|
e849a39603 | ||
| 0e46d692f9 |
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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(
|
||||||
|
|||||||
30
ArtisanConnect/api/email.jsx
Normal file
30
ArtisanConnect/api/email.jsx
Normal 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 };
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
78
ArtisanConnect/api/order.jsx
Normal file
78
ArtisanConnect/api/order.jsx
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
``;
|
||||||
|
|||||||
@@ -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": {
|
||||||
|
|||||||
@@ -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={{
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
24
ArtisanConnect/app/(tabs)/dashboard/userOrders.jsx
Normal file
24
ArtisanConnect/app/(tabs)/dashboard/userOrders.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -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} />}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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 }}/>
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
11
ArtisanConnect/app/user/_layout.jsx
Normal file
11
ArtisanConnect/app/user/_layout.jsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { Stack } from 'expo-router';
|
||||||
|
|
||||||
|
export default function UserLayout() {
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
screenOptions={{
|
||||||
|
headerTitle: 'Ogłoszenia użytkownika',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
ArtisanConnect/assets/AppIco.png
Normal file
BIN
ArtisanConnect/assets/AppIco.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
@@ -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))
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
240
ArtisanConnect/components/ui/toast/index.tsx
Normal file
240
ArtisanConnect/components/ui/toast/index.tsx
Normal 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 };
|
||||||
730
ArtisanConnect/package-lock.json
generated
730
ArtisanConnect/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||||
|
|||||||
@@ -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;
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user