kevin/beers-page #26
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{Platform.OS != "web" ? (
|
||||||
<Button
|
<Button
|
||||||
onPress={openCamera}
|
onPress={openCamera}
|
||||||
title="Open camera"
|
title={"Open camera"}
|
||||||
buttonStyle={styles.imageButton}
|
buttonStyle={styles.imageButton}
|
||||||
textStyle={styles.imageTextButton}
|
textStyle={styles.imageTextButton}
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
{image && <Image source={{ uri: image }} style={styles.image} />}
|
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||||
</View>
|
</View>
|
||||||
|
@ -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,13 +35,28 @@ 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");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<View style={styles.beerList}>
|
||||||
|
{/* <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
|
<FlatList
|
||||||
data={data}
|
data={data}
|
||||||
style={styles.beerList}
|
style={styles.beerList}
|
||||||
@ -49,6 +71,7 @@ export default function Tab() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</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",
|
||||||
|
39
frontend/package-lock.json
generated
39
frontend/package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user