hamx/ArtisanConnectFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add, list, getbyid

Browse Source 
working via zustand now + adding image from camera
This commit is contained in:
Andrii Solianyk
2025-05-20 15:19:29 +02:00
parent 0295386dac
commit 532183b305
10 changed files with 1199 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ArtisanConnect/app/(tabs)/notice/create.jsx
View File

@@ -21,17 +21,20 @@ import {
} from "@/components/ui/select";
import {ChevronDownIcon} from "@/components/ui/icon";
import {useMutation} from "@tanstack/react-query";
import {createNotice} from "@/api/notices";
import {useNoticesStore} from "@/store/noticesStore";
import {listCategories} from "@/api/categories";
import {useRouter} from "expo-router";
export default function CreateNotice() {
const router = useRouter();
const {addNotice} = 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;
@@ -73,26 +76,7 @@ export default function CreateNotice() {
},
});
const noticeMutation = useMutation({
mutationFn: () =>
createNotice({
title: title,
clientId: 1,
description: description,
price: parseFloat(price),
category: category,
status: "ACTIVE",
image: image,
}),
onSuccess: () => {
console.log("Notice created successfully");
},
onError: (error) => {
console.error("Error creating notice. Erroe message: ", error.message);
},
});
const addNotice = () => {
const handleAddNotice = async () => {
setError({
title: !title,
description: !description,
@@ -104,13 +88,47 @@ export default function CreateNotice() {
console.log("Error in form");
return;
}
noticeMutation.mutate();
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);
router.push("/(tabs)/notices");
}
} 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 () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
mediaTypes: 'images',
selectionLimit: 8,
allowsEditing: false,
allowsMultipleSelection: true,
@@ -119,7 +137,6 @@ export default function CreateNotice() {
});
if (!result.canceled) {
// await uploadImage(1, result.assets[0].uri);
setImage(result.assets.map(asset => asset.uri));
}
};
@@ -135,10 +152,13 @@ export default function CreateNotice() {
Wybierz zdjęcia
</ButtonText>
</Button>
<Text size="sm"
bold="true"
>
Pierwsze zdjęcie będzie zdjęciem głównym</Text>
<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) => (
@@ -208,8 +228,8 @@ export default function CreateNotice() {
</VStack>
<Button
className="mt-5 w-full"
onPress={() => addNotice()}
disabled={noticeMutation.isLoading}
onPress={handleAddNotice}
disabled={isLoading}
>
<ButtonText className="text-typography-0">Dodaj</ButtonText>
</Button>
@@ -217,4 +237,4 @@ export default function CreateNotice() {
</FormControl>
</ScrollView>
);
}
}

98
ArtisanConnect/app/(tabs)/notices.jsx
View File

@@ -1,47 +1,65 @@
import { FlatList, Text, ActivityIndicator, RefreshControl } from "react-native";
import { useState } from "react";
import { listNotices } from "@/api/notices";
import { useQuery } from "@tanstack/react-query";
import { NoticeCard } from "@/components/NoticeCard";
import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
import {useState, useEffect} from "react";
import {useNoticesStore} from "@/store/noticesStore";
import {NoticeCard} from "@/components/NoticeCard";
export default function Notices() {
const [refreshing, setRefreshing] = useState(false);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["notices"],
queryFn: listNotices,
});
const {notices, fetchNotices} = useNoticesStore();
const [refreshing, setRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
if (isLoading) {
return <ActivityIndicator />;
}
useEffect(() => {
loadData();
}, []);
if (error) {
console.log(error.message);
return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
}
const loadData = async () => {
setIsLoading(true);
try {
await fetchNotices();
setError(null);
} catch (err) {
setError(err);
} finally {
setIsLoading(false);
}
};
const onRefresh = async () => {
setRefreshing(true);
await refetch();
setRefreshing(false);
};
const onRefresh = async () => {
setRefreshing(true);
try {
await fetchNotices();
} catch (err) {
setError(err);
} finally {
setRefreshing(false);
}
};
return (
<FlatList
key={2}
data={data}
numColumns={2}
columnContainerClassName="m-2"
columnWrapperClassName="gap-2 m-2"
renderItem={({ item }) => <NoticeCard notice={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing || isLoading}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
if (isLoading && !refreshing) {
return <ActivityIndicator/>;
}
if (error) {
return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
}
return (
<FlatList
key={2}
data={notices}
numColumns={2}
columnContainerClassName="m-2"
columnWrapperClassName="gap-2 m-2"
renderItem={({item}) => <NoticeCard notice={item}/>}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
/>
}
/>
}
/>
);
}
);
}

87
ArtisanConnect/app/notice/[id].jsx
View File

@@ -1,47 +1,72 @@
import {Stack, useLocalSearchParams} from "expo-router";
import {Box} from "@/components/ui/box";
import {Button, ButtonText} from "@/components/ui/button";
import {Card} from "@/components/ui/card";
import {Heading} from "@/components/ui/heading";
import {Image} from "@/components/ui/image";
import {Text} from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack";
import {Icon, FavouriteIcon} from "@/components/ui/icon";
import {useQuery} from "@tanstack/react-query";
import {getImageByNoticeId, getNoticeById} from "@/api/notices";
import {Ionicons} from "@expo/vector-icons";
import {ActivityIndicator} from "react-native";
import {useEffect, useState} from "react";
import {useNoticesStore} from "@/store/noticesStore";
import {useWishlist} from "@/store/wishlistStore";
import {Pressable} from "react-native";
export default function NoticeDetails() {
const {id} = useLocalSearchParams();
const [image, setImage] = useState(null);
const [isImageLoading, setIsImageLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [notice, setNotice] = useState(null);
const {
data: notice,
isLoading,
error,
} = useQuery({
queryKey: ["notices", id],
queryFn: () => getNoticeById(Number(id)),
});
const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
const isInWishlist = useWishlist((state) =>
notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
);
useEffect(() => {
const fetchNotice = async () => {
setIsLoading(true);
try {
const noticeData = getNoticeById(Number(id));
if (noticeData) {
setNotice(noticeData);
setError(null);
} else {
setError(new Error(`Notice with ID ${id} not found.`));
}
} catch (err) {
setError(err);
} finally {
setIsLoading(false);
}
};
fetchNotice();
}, [id]);
useEffect(() => {
const fetchImage = async () => {
setIsImageLoading(true);
if (notice) {
try {
const imageData = await getImageByNoticeId(notice.noticeId);
setImage(imageData);
const images = await getAllImagesByNoticeId(notice.noticeId);
setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
} catch (err) {
console.error("Błąd przy pobieraniu obrazu:", err);
console.error("Error while loading images:", err);
setImage("https://http.cat/404.jpg");
} finally {
setIsImageLoading(false);
}
}
};
fetchImage();
if (notice) {
fetchImage();
}
}, [notice]);
if (isLoading) {
@@ -49,11 +74,15 @@ export default function NoticeDetails() {
}
if (error) {
return <Text>Błąd, spróbuj ponownie póżniej</Text>;
return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
}
if (!notice) {
return <Text>Nie znaleziono ogłoszenia</Text>;
}
return (
<Card className="p-0 rounded-lg m-3 flex-1">
<Card className="p-0 rounded-lg m-3 flex-1">
<Stack.Screen
options={{
title: notice.title,
@@ -66,7 +95,7 @@ export default function NoticeDetails() {
) : (
<Image
source={{
uri: image || "https://http.cat/404.jpg",
uri: image,
}}
className="h-auto w-full rounded-md aspect-[1/1]"
alt="image"
@@ -82,11 +111,21 @@ export default function NoticeDetails() {
<Heading size="md" className="flex-1">
{notice.price}zł
</Heading>
<Icon
as={FavouriteIcon}
size="sm"
className="text-primary-500 w-6 h-6"
/>
<Pressable
onPress={() => {
if (isInWishlist) {
removeNoticeFromWishlist(notice.noticeId);
} else {
addNoticeToWishlist(notice);
}
}}
>
<Ionicons
name={isInWishlist ? "heart" : "heart-outline"}
size={24}
color={"primary-heading-500"}
/>
</Pressable>
</Box>
</VStack>
</Card>