kevin/beers-page #26

Closed
kevin wants to merge 3 commits from kevin/beers-page into main
4 changed files with 116 additions and 38 deletions

View File

@ -5,19 +5,17 @@ import Text from "@components/Text";
import { colors } from "@components/style"; import { colors } from "@components/style";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import DropDownPicker from "react-native-dropdown-picker"; import DropDownPicker from "react-native-dropdown-picker";
/* import DropdownTheme from "@components/DropdownTheme"; */
const DropdownTheme = require("@components/DropdownTheme"); const DropdownTheme = require("@components/DropdownTheme");
import { Platform } from "react-native";
export default function BeerAdd() { export default function BeerAdd() {
const [b_name, setBName] = useState(""); const [b_name, setBName] = useState("");
const [b_degree, setBDegree] = useState(""); const [b_degree, setBDegree] = useState("");
const [b_packaging, setBPackaging] = useState(""); const [b_packaging, setBPackaging] = useState(null);
const [b_brand, setBBrand] = useState(""); const [b_brand, setBBrand] = useState("");
const [image, setImage] = useState(null); const [image, setImage] = useState(null);
const [selectPackaging, setSelectedPackaging] = useState();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([ const [items, setItems] = useState([
{ label: "Tank beer", value: "tank" }, { label: "Tank beer", value: "tank" },
{ label: "Cask beer", value: "cask" }, { label: "Cask beer", value: "cask" },
@ -74,6 +72,22 @@ export default function BeerAdd() {
} }
}; };
function validateDegreeInput(text) {
let newText = "";
let numbers = "0123456789.";
for (var i = 0; i < text.length; i++) {
if (numbers.indexOf(text[i]) > -1) {
newText = newText + text[i];
setBDegree(newText);
} else {
// your call back function
alert("Please enter numbers only.");
setBDegree("");
}
}
}
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 req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, { const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, {
@ -123,25 +137,22 @@ export default function BeerAdd() {
style={styles.input} style={styles.input}
placeholder="Degree" placeholder="Degree"
value={b_degree} value={b_degree}
onChangeText={(text) => setBDegree(text)} onChangeText={(text) => validateDegreeInput(text)}
placeholderTextColor="#aaaaaa"
/>
<TextInput
style={styles.input}
placeholder="Packaging"
value={b_packaging}
onChangeText={(text) => setBPackaging(text)}
placeholderTextColor="#aaaaaa" placeholderTextColor="#aaaaaa"
keyboardType="numeric"
maxLength={3}
/> />
<DropDownPicker <DropDownPicker
open={open} open={open}
value={value} value={b_packaging}
items={items} items={items}
setOpen={setOpen} setOpen={setOpen}
setValue={setValue} setValue={setBPackaging}
setItems={setItems} setItems={setItems}
placeholder={"What are you drinking from?"} placeholder={"What are you drinking from?"}
theme="DropdownTheme" theme="DropdownTheme"
//searchable={true} //maybe we can use it later...
/> />
<View style={styles.imageContainer}> <View style={styles.imageContainer}>
<Button <Button
@ -151,12 +162,16 @@ export default function BeerAdd() {
textStyle={styles.imageTextButton} textStyle={styles.imageTextButton}
/> />
<Button {Platform.OS != "web" ? (
onPress={openCamera} <Button
title="Open camera" onPress={openCamera}
buttonStyle={styles.imageButton} title={"Open camera"}
textStyle={styles.imageTextButton} buttonStyle={styles.imageButton}
/> textStyle={styles.imageTextButton}
/>
) : (
false
)}
{image && <Image source={{ uri: image }} style={styles.image} />} {image && <Image source={{ uri: image }} style={styles.image} />}
</View> </View>

View File

@ -1,9 +1,16 @@
import { StyleSheet, View, FlatList } from "react-native"; import {
StyleSheet,
View,
FlatList,
Dimensions,
StatusBar,
} 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";
export default function Tab() { export default function Tab() {
const [data, setData] = useState([]); const [data, setData] = useState([]);
@ -28,26 +35,42 @@ export default function Tab() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Button <Button
title="Add Beer" title="Add new beer"
color={colors.gold} color={colors.gold}
onPress={() => { onPress={() => {
router.replace("/beer/add"); router.replace("/beer/add");
}} }}
/> />
<FlatList <View style={styles.beerList}>
data={data} {/* <FlashList
style={styles.beerList} data={data}
keyExtractor={(item) => String(item._id)} estimatedItemSize={100}
renderItem={({ item }) => ( keyExtractor={(item) => String(item._id)}
<View style={styles.item}> renderItem={({ item }) => (
<Text>Name: {item.name}</Text> <View style={styles.item}>
<Text>Brand: {item.brand}</Text> <Text>Name: {item.name}</Text>
<Text>Degree: {item.degree}</Text> <Text>Brand: {item.brand}</Text>
<Text>Packaging: {item.packaging}</Text> <Text>Degree: {item.degree}</Text>
</View> <Text>Packaging: {item.packaging}</Text>
)} </View>
/> )}
/> */}
<FlatList
data={data}
style={styles.beerList}
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>
)}
/>
</View>
</View> </View>
); );
} }
@ -57,12 +80,12 @@ export const styles = StyleSheet.create({
flex: 1, flex: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginTop: "5%", width: "100%",
}, },
beerList: { beerList: {
width: "100%", width: "100%",
paddingHorizontal: "15%", paddingHorizontal: "15%",
marginTop: "5%", marginTop: "2%",
}, },
item: { item: {
borderColor: "gray", borderColor: "gray",

View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@expo/metro-runtime": "~3.2.1", "@expo/metro-runtime": "~3.2.1",
"@react-native-async-storage/async-storage": "^1.23.1", "@react-native-async-storage/async-storage": "^1.23.1",
"@shopify/flash-list": "1.6.4",
"@types/react": "~18.2.45", "@types/react": "~18.2.45",
"axios": "^1.6.8", "axios": "^1.6.8",
"expo": "^51.0.2", "expo": "^51.0.2",
@ -6303,6 +6304,25 @@
"join-component": "^1.1.0" "join-component": "^1.1.0"
} }
}, },
"node_modules/@shopify/flash-list": {
"version": "1.6.4",
"resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.6.4.tgz",
"integrity": "sha512-M2momcnY7swsvmpHIFDVbdOaFw4aQocJXA/lFP0Gpz+alQjFylqVKvszxl4atYO2SNbjxlb2L6hEP9WEcAknGQ==",
"dependencies": {
"recyclerlistview": "4.2.0",
"tslib": "2.4.0"
},
"peerDependencies": {
"@babel/runtime": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/@shopify/flash-list/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/@sideway/address": { "node_modules/@sideway/address": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@ -13091,6 +13111,20 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/recyclerlistview": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz",
"integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==",
"dependencies": {
"lodash.debounce": "4.0.8",
"prop-types": "15.8.1",
"ts-object-utils": "0.0.5"
},
"peerDependencies": {
"react": ">= 15.2.1",
"react-native": ">= 0.30.0"
}
},
"node_modules/regenerate": { "node_modules/regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -14337,6 +14371,11 @@
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
}, },
"node_modules/ts-object-utils": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
"integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
},
"node_modules/tslib": { "node_modules/tslib": {
"version": "2.6.2", "version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",

View File

@ -28,7 +28,8 @@
"react-native-dropdown-picker": "^5.4.6", "react-native-dropdown-picker": "^5.4.6",
"react-native-safe-area-context": "4.10.1", "react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1", "react-native-screens": "3.31.1",
"react-native-web": "~0.19.6" "react-native-web": "~0.19.6",
"@shopify/flash-list": "1.6.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",