init notice edit
This commit is contained in:
Patryk
391
ArtisanConnect/app/(tabs)/dashboard/notice/edit/[id].jsx
Normal file
391
ArtisanConnect/app/(tabs)/dashboard/notice/edit/[id].jsx
Normal file
@@ -0,0 +1,391 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Image,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ActivityIndicator,
|
||||
} 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 { Box } from "@/components/ui/box";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import {
|
||||
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 { attributes } from "@/data/attributesData"; // Assuming you have a separate file for attributes data}
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
|
||||
export default function EditNotice() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const router = useRouter();
|
||||
const { editNotice, fetchNotices, notices } = useNoticesStore();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [image, setImage] = useState([]);
|
||||
const [images, setImages] = useState([]);
|
||||
const [isImageLoading, setIsImageLoading] = useState(true);
|
||||
const [selectItems, setSelectItems] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedAttributes, setSelectedAttributes] = useState({});
|
||||
const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
|
||||
|
||||
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;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const notice = notices.find((notice) => notice.noticeId == id);
|
||||
if (notice) {
|
||||
setTitle(notice.title || "");
|
||||
setDescription(notice.description || "");
|
||||
setPrice(notice.price?.toString() || "");
|
||||
setCategory(notice.category || "");
|
||||
|
||||
if (notice.attributes && Array.isArray(notice.attributes)) {
|
||||
const attributesObj = {};
|
||||
notice.attributes.forEach((attr) => {
|
||||
attributesObj[attr.name] = attr.value;
|
||||
});
|
||||
setSelectedAttributes(attributesObj);
|
||||
// console.log("Attributes loaded:", attributesObj);
|
||||
}
|
||||
}
|
||||
|
||||
const fetchImage = async () => {
|
||||
setIsImageLoading(true);
|
||||
try {
|
||||
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
|
||||
console.log("Fetched images:", fetchedImages);
|
||||
|
||||
if (fetchedImages && fetchedImages.length > 0) {
|
||||
const imageUris = fetchedImages.map((img) => img.uri);
|
||||
setImages(fetchedImages);
|
||||
setImage(imageUris);
|
||||
console.log("Image URIs set:", imageUris);
|
||||
} else {
|
||||
setImages([]);
|
||||
setImage([]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error while loading images:", err);
|
||||
setImages([]);
|
||||
setImage([]);
|
||||
} finally {
|
||||
setIsImageLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (notice) {
|
||||
fetchImage();
|
||||
}
|
||||
}, [notices]);
|
||||
|
||||
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 handleEditNotice = async () => {
|
||||
setError({
|
||||
title: !title,
|
||||
description: !description,
|
||||
price: !price,
|
||||
category: !category,
|
||||
});
|
||||
|
||||
if (!title || !description || !price || !category) {
|
||||
console.log("Error in form");
|
||||
return;
|
||||
}
|
||||
const formattedAttributes = Object.entries(selectedAttributes).map(
|
||||
([name, value]) => ({
|
||||
name: name,
|
||||
value: value,
|
||||
})
|
||||
);
|
||||
// console.log("Selected attributes:", formattedAttributes);
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await editNotice({
|
||||
title: title,
|
||||
description: description,
|
||||
price: price,
|
||||
category: category,
|
||||
status: "INACTIVE",
|
||||
image: image,
|
||||
attributes: formattedAttributes,
|
||||
});
|
||||
|
||||
if (result) {
|
||||
console.log("Notice created successfully with ID: ", result.noticeId);
|
||||
await fetchNotices();
|
||||
clearForm();
|
||||
|
||||
router.push("/(tabs)/dashboard/userNotices");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating notice. Error message: ", error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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([]);
|
||||
setSelectedAttributes({});
|
||||
setError({
|
||||
title: false,
|
||||
description: false,
|
||||
price: 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 (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={{ flex: 1 }}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
|
||||
>
|
||||
<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}
|
||||
selectedValue={category || ""}
|
||||
>
|
||||
<SelectTrigger variant="outline" size="md">
|
||||
<SelectInput
|
||||
placeholder="Wybierz kategorię"
|
||||
value={
|
||||
selectItems.find((item) => item.value === category)
|
||||
?.label || ""
|
||||
}
|
||||
/>
|
||||
<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>
|
||||
|
||||
{Object.entries(attributes).map(([label, options]) => (
|
||||
<VStack key={label} space="xs">
|
||||
<Text className="text-typography-500">{label}</Text>
|
||||
<Select
|
||||
selectedValue={selectedAttributes[label] || ""}
|
||||
onValueChange={(value) =>
|
||||
setSelectedAttributes((prev) => ({
|
||||
...prev,
|
||||
[label]: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger variant="outline" size="md">
|
||||
<SelectInput
|
||||
placeholder={`Wybierz ${label.toLowerCase()}`}
|
||||
/>
|
||||
<SelectIcon className="mr-3" as={ChevronDownIcon} />
|
||||
</SelectTrigger>
|
||||
<SelectPortal>
|
||||
<SelectBackdrop />
|
||||
<SelectContent style={{ maxHeight: 400 }}>
|
||||
<SelectScrollView>
|
||||
{options.map((option) => (
|
||||
<SelectItem
|
||||
key={option}
|
||||
label={option}
|
||||
value={option}
|
||||
/>
|
||||
))}
|
||||
</SelectScrollView>
|
||||
</SelectContent>
|
||||
</SelectPortal>
|
||||
</Select>
|
||||
</VStack>
|
||||
))}
|
||||
|
||||
<Button
|
||||
className="mt-5 w-full"
|
||||
onPress={handleEditNotice}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ButtonText className="text-typography-0">Dodaj</ButtonText>
|
||||
</Button>
|
||||
</VStack>
|
||||
</FormControl>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import { createOrder, createPayment, getOrder } from "@/api/order";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
import * as WebBrowser from 'expo-web-browser';
|
||||
import * as WebBrowser from "expo-web-browser";
|
||||
import { useRouter } from "expo-router";
|
||||
|
||||
export default function UserNotices() {
|
||||
@@ -71,17 +71,16 @@ export default function UserNotices() {
|
||||
if (paymentResult) {
|
||||
setIsRedirecting(true);
|
||||
|
||||
|
||||
await WebBrowser.openAuthSessionAsync(paymentResult);
|
||||
|
||||
|
||||
setTimeout(async () => {
|
||||
setIsRedirecting(false);
|
||||
|
||||
try {
|
||||
const lastOrder = await getOrder(result);
|
||||
const lastPayments = lastOrder.payments;
|
||||
const paymentStatus = lastPayments.length > 0
|
||||
const paymentStatus =
|
||||
lastPayments.length > 0
|
||||
? lastPayments[lastPayments.length - 1].status
|
||||
: null;
|
||||
|
||||
@@ -97,7 +96,6 @@ export default function UserNotices() {
|
||||
showNewToast("Nie udało się sprawdzić statusu płatności.");
|
||||
}
|
||||
}, 300);
|
||||
|
||||
} else {
|
||||
console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
|
||||
}
|
||||
@@ -149,6 +147,7 @@ export default function UserNotices() {
|
||||
<Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
|
||||
<NoticeCard notice={item} />
|
||||
<Box className="flex-row justify-between mt-2">
|
||||
<Box className="flex-row items-center">
|
||||
<Button
|
||||
className="ml-2"
|
||||
onPress={() => handleDeleteNotice(item.noticeId)}
|
||||
@@ -159,7 +158,24 @@ export default function UserNotices() {
|
||||
<ButtonText>Usuń</ButtonText>
|
||||
<Ionicons name="trash-outline" size={14} />
|
||||
</Button>
|
||||
|
||||
{item.status === "INACTIVE" && (
|
||||
<Button
|
||||
className="ml-2"
|
||||
onPress={() => {
|
||||
console.log("Edytuj notice");
|
||||
router.replace(
|
||||
`dashboard/notice/edit/${item.noticeId}`
|
||||
);
|
||||
}}
|
||||
size="md"
|
||||
variant="outline"
|
||||
action="primary"
|
||||
>
|
||||
<ButtonText>Edytuj</ButtonText>
|
||||
<Ionicons name="pencil" size={14} />
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
{item.status === "ACTIVE" ? (
|
||||
<Button
|
||||
className="mr-2"
|
||||
|
||||
@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, Platform } from "react-native";
|
||||
import { Box } from "@/components/ui/box";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Heading } from "@/components/ui/heading";
|
||||
import {useRouter} from 'expo-router';
|
||||
import { useRouter } from "expo-router";
|
||||
import { Image } from "@/components/ui/image";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { VStack } from "@/components/ui/vstack";
|
||||
@@ -31,7 +31,7 @@ import { useAuthStore } from "@/store/authStore";
|
||||
import { sendEmail } from "@/api/email";
|
||||
// import { Button } from "@gluestack-ui/themed";
|
||||
import { Button, ButtonText } from "@/components/ui/button";
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
export default function NoticeDetails() {
|
||||
const { id } = useLocalSearchParams();
|
||||
@@ -50,7 +50,7 @@ export default function NoticeDetails() {
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const {width} = Dimensions.get("window");
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
setIsSending(true);
|
||||
@@ -274,7 +274,7 @@ export default function NoticeDetails() {
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1" edges={['right', 'bottom', 'left']}>
|
||||
<SafeAreaView className="flex-1" edges={["right", "bottom", "left"]}>
|
||||
<Card className="p-0 rounded-lg m-3 flex-1">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
@@ -315,10 +315,7 @@ export default function NoticeDetails() {
|
||||
viewabilityConfig={viewabilityConfig}
|
||||
style={isLandscape ? { flex: 1 } : {}}
|
||||
renderItem={({ item, index }) => (
|
||||
<View
|
||||
style={{ width: width }}
|
||||
className="p-1"
|
||||
>
|
||||
<View style={{ width: width }} className="p-1">
|
||||
<Image
|
||||
source={item}
|
||||
// className="h-auto w-auto rounded-md aspect-[1/1]"
|
||||
@@ -389,11 +386,12 @@ export default function NoticeDetails() {
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-sm text-typography-500">
|
||||
Kategoria:{" "}
|
||||
<Text className="font-bold text-gray-950">{notice.category}</Text>
|
||||
<Text className="font-bold text-gray-950">
|
||||
{notice.category}
|
||||
</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
|
||||
<Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
|
||||
<Text className="text-sm text-typography-700">
|
||||
{notice.description}
|
||||
@@ -439,7 +437,11 @@ export default function NoticeDetails() {
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Button variant="outline" className="mt-2" onPress={() => router.replace(`/user/${notice.clientId}`)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-2"
|
||||
onPress={() => router.replace(`/user/${notice.clientId}`)}
|
||||
>
|
||||
<ButtonText>
|
||||
Zobacz więcej ogłoszeń od {user.firstName}
|
||||
</ButtonText>
|
||||
@@ -469,7 +471,8 @@ export default function NoticeDetails() {
|
||||
</Text>
|
||||
<Text className="text-sm font-medium mb-1">Temat:</Text>
|
||||
<Text className="bg-gray-100 p-3 rounded text-gray-500">
|
||||
Zapytanie o ogłoszenie '{notice.title || "Brak nazwy ogłoszenia"}'
|
||||
Zapytanie o ogłoszenie '
|
||||
{notice.title || "Brak nazwy ogłoszenia"}'
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
@@ -507,6 +510,5 @@ export default function NoticeDetails() {
|
||||
)}
|
||||
</Card>
|
||||
</SafeAreaView>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user