Added: images and review button on beer/get

Fixes: #12
This commit is contained in:
Filip Rojek 2024-05-15 00:42:18 +02:00
parent 4fc58aedd7
commit b7dc6af2e4
3 changed files with 47 additions and 10 deletions

View File

@ -108,8 +108,12 @@ export default function BeerAdd() {
async function addBeer() { async function addBeer() {
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state // TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
const data = new FormData(); const data = new FormData();
if (Platform.OS == "web") {
// TODO: On phone its imposibble to upload an image
data.append("photos", dataURItoBlob(image.uri)); data.append("photos", dataURItoBlob(image.uri));
}
data.append("brand", b_brand); data.append("brand", b_brand);
data.append("name", b_name); data.append("name", b_name);
data.append("degree", b_degree); data.append("degree", b_degree);
@ -124,7 +128,9 @@ export default function BeerAdd() {
const res = await req.json(); const res = await req.json();
if (res.code == 201 && res.data._id) { if (res.code == 201 && res.data._id) {
window.location.href = `/beer/${res.data._id}`; // TODO: reditect using expo router
// window.location.href = `/beer/${res.data._id}`;
alert("Added");
} else { } else {
alert( alert(
"Beer was not added successfully. Please check your data and try again.", "Beer was not added successfully. Please check your data and try again.",
@ -198,9 +204,8 @@ export default function BeerAdd() {
) : ( ) : (
false false
)} )}
{image && <Image source={{ uri: image }} style={styles.image} />}
</View> </View>
{image && <Image source={{ uri: image.uri }} style={styles.image} />}
<Button title="Add beer" color={colors.gold} onPress={addBeer} /> <Button title="Add beer" color={colors.gold} onPress={addBeer} />
</View> </View>
</View> </View>

View File

@ -4,15 +4,17 @@ import {
FlatList, FlatList,
Dimensions, Dimensions,
StatusBar, StatusBar,
Image,
} from "react-native"; } from "react-native";
import Text from "@components/Text"; import Text from "@components/Text";
import Button from "@components/Button"; import Button from "@components/Button";
import { colors } from "@components/style"; import { colors } from "@components/style";
import { router } from "expo-router"; import { router } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FlashList } from "@shopify/flash-list"; // import { FlashList } from "@shopify/flash-list";
export default function Tab() { export default function Tab() {
const API_HOST = process.env.EXPO_PUBLIC_API_URL.replace("/api/v1", "");
const [data, setData] = useState([]); const [data, setData] = useState([]);
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
@ -62,11 +64,34 @@ export default function Tab() {
keyExtractor={(item) => String(item._id)} keyExtractor={(item) => String(item._id)}
renderItem={({ item }) => ( renderItem={({ item }) => (
<View style={styles.item}> <View style={styles.item}>
<Image
source={
item.imgs[0]
? {
uri: `${API_HOST}/public/uploads/${item.imgs[0]}`,
}
: {
uri: "https://imagesvc.meredithcorp.io/v3/mm/image?url=https:%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F44%2F2020%2F09%2F29%2Flight-beer.jpg",
}
}
style={styles.itemImg}
/>
<View style={styles.itemDesc}>
<Text>Name: {item.name}</Text> <Text>Name: {item.name}</Text>
<Text>Brand: {item.brand}</Text> <Text>Brand: {item.brand}</Text>
<Text>Degree: {item.degree}</Text> <Text>Degree: {item.degree}</Text>
<Text>Packaging: {item.packaging}</Text> <Text>Packaging: {item.packaging}</Text>
</View> </View>
<View style={styles.itemAddReview}>
<Button
title="Add review"
color={colors.gold}
onPress={() => {
router.push(`/review/${item._id}`);
}}
/>
</View>
</View>
)} )}
/> />
</View> </View>
@ -92,4 +117,12 @@ export const styles = StyleSheet.create({
padding: 13, padding: 13,
marginBottom: "5%", marginBottom: "5%",
}, },
itemImg: {
height: 300,
resizeMode: "contain",
},
itemDesc: {
alignItems: "center",
paddingBottom: "2%",
},
}); });

View File

@ -7,7 +7,6 @@ import * as ImagePicker from "expo-image-picker";
import DropDownPicker from "react-native-dropdown-picker"; import DropDownPicker from "react-native-dropdown-picker";
const DropdownTheme = require("@components/DropdownTheme"); const DropdownTheme = require("@components/DropdownTheme");
import { Platform } from "react-native"; import { Platform } from "react-native";
import RangeSlider, { Slider } from "react-native-range-slider-expo";
export default function reviewAdd() { export default function reviewAdd() {
const [b_name, setBName] = useState(""); const [b_name, setBName] = useState("");