fixes to app
This commit is contained in:
@@ -37,6 +37,7 @@ export default function AccountDrawerLayout() {
|
||||
name="userNotices"
|
||||
options={{ title: "Moje ogłoszenia" }}
|
||||
/>
|
||||
<Drawer.Screen name="userOrders" options={{ title: "Moje zamówienia" }} />
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,7 +37,6 @@ export default function Account() {
|
||||
return <Text>Nie udało się pobrać danych użytkownika.</Text>;
|
||||
}
|
||||
|
||||
console.log(user);
|
||||
return (
|
||||
<VStack className=" flex-1 m-2">
|
||||
<Box className="bg-white p-5 rounded-lg ">
|
||||
|
||||
@@ -1,16 +1,46 @@
|
||||
import { useNoticesStore } from "@/store/noticesStore";
|
||||
import { NoticeCard } from "@/components/NoticeCard";
|
||||
import { Button } from "react-native";
|
||||
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
|
||||
|
||||
import { Box } from "@/components/ui/box";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { VStack } from "@/components/ui/vstack";
|
||||
import { ActivityIndicator, FlatList } from "react-native";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { createOrder, createPayment } 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";
|
||||
|
||||
export default function UserNotices() {
|
||||
const { notices, fetchNotices } = useNoticesStore();
|
||||
const { notices, fetchNotices, deleteNotice } = useNoticesStore();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
|
||||
const [isRedirecting, setIsRedirecting] = useState(false);
|
||||
const currentUserId = 1;
|
||||
const toast = useToast();
|
||||
const appState = useRef(AppState.currentState);
|
||||
const [toastId, setToastId] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isRedirecting) return;
|
||||
const subscription = AppState.addEventListener("change", (state) => {
|
||||
if (state === "active") {
|
||||
setIsRedirecting(false);
|
||||
const paymentStatus = "CORRECT";
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadNotices = async () => {
|
||||
@@ -26,6 +56,58 @@ export default function UserNotices() {
|
||||
loadNotices();
|
||||
}, []);
|
||||
|
||||
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) {
|
||||
try {
|
||||
const paymentResult = await createPayment(); //trzeba dodać orderId
|
||||
if (paymentResult) {
|
||||
setIsRedirecting(true);
|
||||
Linking.openURL(paymentResult);
|
||||
setWaitingForPayment(true);
|
||||
} else {
|
||||
console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("Błąd podczas aktywacji ogłoszenia:", err);
|
||||
}
|
||||
} else {
|
||||
console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("Błąd podczas aktywacji ogłoszenia:", 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));
|
||||
@@ -36,45 +118,61 @@ export default function UserNotices() {
|
||||
|
||||
return (
|
||||
<VStack className="p-2">
|
||||
{isRedirecting && (
|
||||
<Box className="absolute inset-0 bg-white bg-opacity-30 justify-center items-center z-50">
|
||||
<Ionicons name="card-outline" size="30" className="pt-4" />
|
||||
<Text className="text-lg font-bold pt-2">
|
||||
Przekierowanie do płatności...
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
{/* <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> */}
|
||||
{userNotices.length > 0 ? (
|
||||
<FlatList
|
||||
data={userNotices}
|
||||
// numColumns={1}
|
||||
// columnWrapperStyle={{
|
||||
// marginBottom: 10,
|
||||
// justifyContent: "space-between",
|
||||
// }}
|
||||
renderItem={({ item }) => (
|
||||
<Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
|
||||
<NoticeCard notice={item} />
|
||||
<Box className="flex-row justify-between mt-2">
|
||||
{item.status === "ACTIVE" ? (
|
||||
<Button
|
||||
title="Usuń"
|
||||
onPress={() => {
|
||||
console.log(`Promuj ogłoszenie ${item.noticeId}`);
|
||||
}}
|
||||
className="bg-primary-500 py-2 px-4 rounded-md"
|
||||
></Button>
|
||||
className="ml-2"
|
||||
onPress={() => handleDeleteNotice(item.noticeId)}
|
||||
size="md"
|
||||
variant="outline"
|
||||
action="primary"
|
||||
>
|
||||
<ButtonText>Usuń</ButtonText>
|
||||
<Ionicons name="trash-outline" size={14} />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
title="Aktywj"
|
||||
onPress={() => {
|
||||
console.log(`Promuj ogłoszenie ${item.noticeId}`);
|
||||
}}
|
||||
className="bg-primary-500 py-2 px-4 rounded-md"
|
||||
></Button>
|
||||
className="ml-2"
|
||||
size="md"
|
||||
variant="solid"
|
||||
action="primary"
|
||||
onPress={() => handleOrder(item.noticeId, "ACTIVATE")}
|
||||
>
|
||||
<ButtonText>Aktywuj</ButtonText>
|
||||
<Ionicons
|
||||
name="arrow-redo-outline"
|
||||
size={14}
|
||||
color="#fff"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
{item.status === "ACTIVE" && (
|
||||
<Button
|
||||
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
|
||||
title="Podbij"
|
||||
onPress={() => {
|
||||
// TODO: Implementacja podbicia ogłoszenia
|
||||
console.log(`Podbij ogłoszenie ${item.noticeId}`);
|
||||
}}
|
||||
className="bg-primary-500 py-2 px-4 rounded-md"
|
||||
></Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,6 @@ import { CategorySection } from "@/components/CategorySection";
|
||||
import { NoticeSection } from "@/components/NoticeSection";
|
||||
import { UserSection } from "@/components/UserSection";
|
||||
import { SearchSection } from "@/components/SearchSection";
|
||||
import { FlatList } from "react-native";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
@@ -36,7 +35,7 @@ export default function Home() {
|
||||
// console.log("Notices:", notices);
|
||||
// console.log("Notices length:", notices.length);
|
||||
|
||||
const activeNotices = notices.filter((notice) => notice.status === "ACTIVE");
|
||||
const activeNotices = notices.filter((notice) => notice.status == "ACTIVE");
|
||||
// console.log("Activer Notices:", activeNotices.length);
|
||||
const latestNotices = [...activeNotices]
|
||||
.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
|
||||
|
||||
@@ -1,256 +1,263 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {Image, StyleSheet} from "react-native";
|
||||
import {Button, ButtonText} from "@/components/ui/button";
|
||||
import {FormControl} from "@/components/ui/form-control";
|
||||
import {Input, InputField} from "@/components/ui/input";
|
||||
import {Text} from "@/components/ui/text";
|
||||
import {VStack} from "@/components/ui/vstack";
|
||||
import {Textarea, TextareaInput} from "@/components/ui/textarea";
|
||||
import {ScrollView} from '@gluestack-ui/themed';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { useState, useEffect } from "react";
|
||||
import { Image, StyleSheet } from "react-native";
|
||||
import { Button, ButtonText } from "@/components/ui/button";
|
||||
import { FormControl } from "@/components/ui/form-control";
|
||||
import { Input, InputField } from "@/components/ui/input";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { VStack } from "@/components/ui/vstack";
|
||||
import { Textarea, TextareaInput } from "@/components/ui/textarea";
|
||||
import { ScrollView } from "@gluestack-ui/themed";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import {
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectInput,
|
||||
SelectIcon,
|
||||
SelectPortal,
|
||||
SelectBackdrop,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectScrollView,
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectInput,
|
||||
SelectIcon,
|
||||
SelectPortal,
|
||||
SelectBackdrop,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectScrollView,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
import {ChevronDownIcon} from "@/components/ui/icon";
|
||||
import {useNoticesStore} from "@/store/noticesStore";
|
||||
import {listCategories} from "@/api/categories";
|
||||
import {useRouter} from "expo-router";
|
||||
import { ChevronDownIcon } from "@/components/ui/icon";
|
||||
import { useNoticesStore } from "@/store/noticesStore";
|
||||
import { listCategories } from "@/api/categories";
|
||||
import { useRouter } from "expo-router";
|
||||
|
||||
export default function CreateNotice() {
|
||||
const router = useRouter();
|
||||
const {addNotice, fetchNotices} = useNoticesStore();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [image, setImage] = useState([]);
|
||||
const [selectItems, setSelectItems] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { addNotice, fetchNotices } = useNoticesStore();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [image, setImage] = useState([]);
|
||||
const [selectItems, setSelectItems] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const fetchSelectItems = async () => {
|
||||
try {
|
||||
let data = await listCategories();
|
||||
if (isMounted && Array.isArray(data)) {
|
||||
setSelectItems(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching select items:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSelectItems();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [error, setError] = useState({
|
||||
title: false,
|
||||
description: false,
|
||||
price: false,
|
||||
category: false,
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
image: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
});
|
||||
|
||||
const handleAddNotice = async () => {
|
||||
setError({
|
||||
title: !title,
|
||||
description: !description,
|
||||
price: !price,
|
||||
category: !category,
|
||||
});
|
||||
|
||||
if (!title || !description || !price || !category) {
|
||||
console.log("Error in form");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await addNotice({
|
||||
title: title,
|
||||
clientId: 1,
|
||||
description: description,
|
||||
price: price,
|
||||
category: category,
|
||||
status: "ACTIVE",
|
||||
image: image
|
||||
});
|
||||
|
||||
if (result) {
|
||||
console.log("Notice created successfully with ID: ", result.noticeId);
|
||||
await fetchNotices();
|
||||
clearForm();
|
||||
router.push("/(tabs)/notices");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating notice. Error message: ", error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
const fetchSelectItems = async () => {
|
||||
try {
|
||||
let data = await listCategories();
|
||||
if (isMounted && Array.isArray(data)) {
|
||||
setSelectItems(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching select items:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const takePicture = async () => {
|
||||
const {status} = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (status !== 'granted') {
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
allowsEditing: false,
|
||||
});
|
||||
fetchSelectItems();
|
||||
|
||||
if (!result.canceled && result.assets) {
|
||||
setImage(result.assets.map(asset => asset.uri));
|
||||
}
|
||||
}
|
||||
|
||||
const pickImage = async () => {
|
||||
let result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: 'images',
|
||||
selectionLimit: 8,
|
||||
allowsEditing: false,
|
||||
allowsMultipleSelection: true,
|
||||
aspect: [4, 3],
|
||||
quality: 0.5,
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
setImage(result.assets.map(asset => asset.uri));
|
||||
}
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const clearForm = () => {
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setPrice("");
|
||||
setCategory("");
|
||||
setImage([]);
|
||||
setError({
|
||||
title: false,
|
||||
description: false,
|
||||
price: false,
|
||||
category: false,
|
||||
})
|
||||
const [error, setError] = useState({
|
||||
title: false,
|
||||
description: false,
|
||||
price: false,
|
||||
category: false,
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
image: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
});
|
||||
|
||||
const handleAddNotice = async () => {
|
||||
setError({
|
||||
title: !title,
|
||||
description: !description,
|
||||
price: !price,
|
||||
category: !category,
|
||||
});
|
||||
|
||||
if (!title || !description || !price || !category) {
|
||||
console.log("Error in form");
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView h="$80" w="$80">
|
||||
<FormControl className="p-4 border rounded-lg border-outline-300">
|
||||
<VStack space="xl">
|
||||
<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>
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await addNotice({
|
||||
title: title,
|
||||
clientId: 1,
|
||||
description: description,
|
||||
price: price,
|
||||
category: category,
|
||||
status: "INACTIVE",
|
||||
image: image,
|
||||
});
|
||||
|
||||
<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>
|
||||
if (result) {
|
||||
console.log("Notice created successfully with ID: ", result.noticeId);
|
||||
await fetchNotices();
|
||||
clearForm();
|
||||
|
||||
<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>
|
||||
router.push("/(tabs)/dashboard/userNotices");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating notice. Error message: ", error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
const takePicture = async () => {
|
||||
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (status !== "granted") {
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
allowsEditing: false,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets) {
|
||||
setImage(result.assets.map((asset) => asset.uri));
|
||||
}
|
||||
};
|
||||
|
||||
const pickImage = async () => {
|
||||
let result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: "images",
|
||||
selectionLimit: 8,
|
||||
allowsEditing: false,
|
||||
allowsMultipleSelection: true,
|
||||
aspect: [4, 3],
|
||||
quality: 0.5,
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
setImage(result.assets.map((asset) => asset.uri));
|
||||
}
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setPrice("");
|
||||
setCategory("");
|
||||
setImage([]);
|
||||
setError({
|
||||
title: false,
|
||||
description: false,
|
||||
price: false,
|
||||
category: false,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView h="$80" w="$80">
|
||||
<FormControl className="p-4 border rounded-lg border-outline-300">
|
||||
<VStack space="xl">
|
||||
<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>
|
||||
</VStack>
|
||||
</FormControl>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user