129 lines
2.8 KiB
JavaScript
129 lines
2.8 KiB
JavaScript
import {
|
|
StyleSheet,
|
|
View,
|
|
FlatList,
|
|
Dimensions,
|
|
StatusBar,
|
|
Image,
|
|
} from "react-native";
|
|
import Text from "@components/Text";
|
|
import Button from "@components/Button";
|
|
import { colors } from "@components/style";
|
|
import { router } from "expo-router";
|
|
import { useEffect, useState } from "react";
|
|
// import { FlashList } from "@shopify/flash-list";
|
|
|
|
export default function Tab() {
|
|
const API_HOST = process.env.EXPO_PUBLIC_API_URL.replace("/api/v1", "");
|
|
const [data, setData] = useState([]);
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
async function fetchData() {
|
|
try {
|
|
const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/get`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
});
|
|
const data = await res.json();
|
|
setData(data.data);
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Something went wrong");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Button
|
|
title="Add new beer"
|
|
color={colors.gold}
|
|
onPress={() => {
|
|
router.replace("/beer/add");
|
|
}}
|
|
/>
|
|
|
|
{/* <FlashList
|
|
data={data}
|
|
estimatedItemSize={100}
|
|
keyExtractor={(item) => String(item._id)}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.item}>
|
|
<Text>Name: {item.name}</Text>
|
|
<Text>Brand: {item.brand}</Text>
|
|
<Text>Degree: {item.degree}</Text>
|
|
<Text>Packaging: {item.packaging}</Text>
|
|
</View>
|
|
)}
|
|
/> */}
|
|
|
|
<FlatList
|
|
data={data}
|
|
style={styles.beerList}
|
|
keyExtractor={(item) => String(item._id)}
|
|
renderItem={({ 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>Brand: {item.brand}</Text>
|
|
<Text>Degree: {item.degree}</Text>
|
|
<Text>Packaging: {item.packaging}</Text>
|
|
</View>
|
|
<View style={styles.itemAddReview}>
|
|
<Button
|
|
title="Add review"
|
|
color={colors.gold}
|
|
onPress={() => {
|
|
router.push(`/review/${item._id}`);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginTop: "2%",
|
|
},
|
|
beerList: {
|
|
width: "100%",
|
|
paddingHorizontal: "15%",
|
|
marginTop: "2%",
|
|
},
|
|
item: {
|
|
borderColor: "gray",
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
padding: 13,
|
|
marginBottom: "5%",
|
|
},
|
|
itemImg: {
|
|
height: 300,
|
|
resizeMode: "contain",
|
|
},
|
|
itemDesc: {
|
|
alignItems: "center",
|
|
paddingBottom: "2%",
|
|
},
|
|
});
|