Merge pull request 'kevin/add-form' (#14) from kevin/add-form into main
Beer add form Reviewed-on: #14
This commit is contained in:
commit
9b850ba88f
@ -1,30 +1,43 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "deguapp",
|
||||
"slug": "deguapp",
|
||||
"scheme": "deguapp",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": ["expo-router"]
|
||||
}
|
||||
"expo": {
|
||||
"name": "deguapp",
|
||||
"slug": "deguapp",
|
||||
"scheme": "deguapp",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
[
|
||||
"expo-image-picker",
|
||||
{
|
||||
"photosPermission": "The app accesses your photos to let you share them with your friends.",
|
||||
"cameraPermission": "The app accesses your camera to let you take photos of your beer and share them with your friends.",
|
||||
"microphonePermission": "The app accesses your microphone to let you record audio and share it with your friends."
|
||||
}
|
||||
],
|
||||
"expo-secure-store"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -1,13 +1,78 @@
|
||||
import { StyleSheet, TextInput, View } from "react-native";
|
||||
import { StyleSheet, TextInput, View, Image } from "react-native";
|
||||
import { useState } from "react";
|
||||
import Button from "@components/Button";
|
||||
import Text from "@components/Text";
|
||||
import { colors } from "@components/style";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import DropDownPicker from "react-native-dropdown-picker";
|
||||
/* import DropdownTheme from "@components/DropdownTheme"; */
|
||||
const DropdownTheme = require("@components/DropdownTheme");
|
||||
|
||||
export default function BeerAdd() {
|
||||
const [b_name, setBName] = useState("");
|
||||
const [b_degree, setBDegree] = useState("");
|
||||
const [b_packaging, setBPackaging] = useState("");
|
||||
const [b_brand, setBBrand] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
const [selectPackaging, setSelectedPackaging] = useState();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [value, setValue] = useState(null);
|
||||
const [items, setItems] = useState([
|
||||
{ label: "Tank beer", value: "tank" },
|
||||
{ label: "Cask beer", value: "cask" },
|
||||
{ label: "Glass bottle", value: "glass" },
|
||||
{ label: "Can", value: "can" },
|
||||
{ label: "PET bottle", value: "pet" },
|
||||
]);
|
||||
|
||||
DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
|
||||
DropDownPicker.setTheme("DropdownTheme");
|
||||
|
||||
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
|
||||
if (permissionResult.granted === false) {
|
||||
alert("You've refused to allow this appp to access your photos!");
|
||||
return;
|
||||
}
|
||||
|
||||
// No permissions request is necessary for launching the image library
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
aspect: [3, 4],
|
||||
// quality: 1,
|
||||
});
|
||||
|
||||
// Explore the result
|
||||
console.log(result);
|
||||
|
||||
if (!result.canceled) {
|
||||
setImage(result.assets[0].uri);
|
||||
}
|
||||
};
|
||||
|
||||
const openCamera = async () => {
|
||||
// Ask the user for the permission to access the camera
|
||||
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
|
||||
|
||||
if (permissionResult.granted === false) {
|
||||
alert("You've refused to allow this app to access your camera!");
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await ImagePicker.launchCameraAsync();
|
||||
|
||||
// Explore the result
|
||||
console.log(result);
|
||||
|
||||
if (!result.canceled) {
|
||||
setImage(result.assets[0].uri);
|
||||
}
|
||||
};
|
||||
|
||||
async function addBeer() {
|
||||
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
|
||||
@ -24,11 +89,22 @@ export default function BeerAdd() {
|
||||
}),
|
||||
});
|
||||
const res = await req.json();
|
||||
|
||||
if (res.code == 201 && res.data._id) {
|
||||
window.location.href = `/beer/${res.data._id}`;
|
||||
} else {
|
||||
alert(
|
||||
"Beer was not added successfully. Please check your data and try again.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.text}>
|
||||
Spill your thoughts about the beer you just sipped!
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Name"
|
||||
@ -57,7 +133,34 @@ export default function BeerAdd() {
|
||||
onChangeText={(text) => setBPackaging(text)}
|
||||
placeholderTextColor="#aaaaaa"
|
||||
/>
|
||||
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
||||
<DropDownPicker
|
||||
open={open}
|
||||
value={value}
|
||||
items={items}
|
||||
setOpen={setOpen}
|
||||
setValue={setValue}
|
||||
setItems={setItems}
|
||||
placeholder={"What are you drinking from?"}
|
||||
theme="DropdownTheme"
|
||||
/>
|
||||
<View style={styles.imageContainer}>
|
||||
<Button
|
||||
title="Open gallery"
|
||||
onPress={pickImage}
|
||||
buttonStyle={styles.imageButton}
|
||||
textStyle={styles.imageTextButton}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onPress={openCamera}
|
||||
title="Open camera"
|
||||
buttonStyle={styles.imageButton}
|
||||
textStyle={styles.imageTextButton}
|
||||
/>
|
||||
|
||||
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||
</View>
|
||||
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -65,22 +168,50 @@ export default function BeerAdd() {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
gap: 15,
|
||||
width: "80%",
|
||||
},
|
||||
input: {},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
width: "100%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
padding: 13,
|
||||
color: "#fff",
|
||||
},
|
||||
imageContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
},
|
||||
imageButton: {
|
||||
backgroundColor: colors.dark,
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
},
|
||||
imageTextButton: {
|
||||
color: colors.white,
|
||||
},
|
||||
image: {
|
||||
width: 150,
|
||||
height: 150,
|
||||
},
|
||||
text: {
|
||||
color: colors.white,
|
||||
fontSize: 24,
|
||||
textAlign: "center",
|
||||
paddingBottom: "3%",
|
||||
paddingTop: "10%",
|
||||
},
|
||||
});
|
||||
|
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 B |
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 807 B |
BIN
frontend/assets/DropdownIcons/close.png
Normal file
BIN
frontend/assets/DropdownIcons/close.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 338 B |
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
@ -7,6 +7,8 @@ export default function Button(props) {
|
||||
title = "Button",
|
||||
color = "black",
|
||||
textColor = "white",
|
||||
buttonStyle,
|
||||
textStyle,
|
||||
} = props;
|
||||
return (
|
||||
<Pressable
|
||||
@ -19,10 +21,13 @@ export default function Button(props) {
|
||||
: "black",
|
||||
},
|
||||
styles.button,
|
||||
buttonStyle,
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
||||
<Text style={[styles.text, { color: textColor }, textStyle]}>
|
||||
{title}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
170
frontend/components/DropdownTheme.js
Normal file
170
frontend/components/DropdownTheme.js
Normal file
@ -0,0 +1,170 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
import { colors } from "@components/style";
|
||||
|
||||
export const ICONS = {
|
||||
ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
|
||||
ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
|
||||
TICK: require("@assets/DropdownIcons/tick.png"),
|
||||
CLOSE: require("../assets/DropdownIcons/close.png"),
|
||||
};
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
width: "100%",
|
||||
},
|
||||
style: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
minHeight: 50,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: "gray",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 3,
|
||||
backgroundColor: colors.dark,
|
||||
},
|
||||
label: {
|
||||
flex: 1,
|
||||
color: colors.placeholder,
|
||||
},
|
||||
labelContainer: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
},
|
||||
arrowIcon: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
tickIcon: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
closeIcon: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
badgeStyle: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: 15,
|
||||
backgroundColor: colors.white,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
},
|
||||
badgeDotStyle: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 10 / 2,
|
||||
marginRight: 8,
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
badgeSeparator: {
|
||||
width: 5,
|
||||
},
|
||||
listBody: {
|
||||
height: "100%",
|
||||
},
|
||||
listBodyContainer: {
|
||||
flexGrow: 1,
|
||||
alignItems: "center",
|
||||
},
|
||||
dropDownContainer: {
|
||||
position: "absolute",
|
||||
backgroundColor: colors.darkSecondary,
|
||||
borderRadius: 10,
|
||||
borderColor: colors.black,
|
||||
borderWidth: 1,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
zIndex: 1000,
|
||||
},
|
||||
modalContentContainer: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
listItemContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 10,
|
||||
height: 40,
|
||||
},
|
||||
listItemLabel: {
|
||||
flex: 1,
|
||||
color: colors.placeholder,
|
||||
},
|
||||
iconContainer: {
|
||||
marginRight: 10,
|
||||
},
|
||||
arrowIconContainer: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
tickIconContainer: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
closeIconContainer: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
listParentLabel: {},
|
||||
listChildLabel: {},
|
||||
listParentContainer: {},
|
||||
listChildContainer: {
|
||||
paddingLeft: 40,
|
||||
},
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
padding: 10,
|
||||
borderBottomColor: colors.darkSecondary,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
searchTextInput: {
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
margin: 0,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
borderRadius: 8,
|
||||
borderColor: colors.darkSecondary,
|
||||
borderWidth: 1,
|
||||
color: colors.white,
|
||||
},
|
||||
itemSeparator: {
|
||||
height: 1,
|
||||
backgroundColor: colors.darkSecondary,
|
||||
},
|
||||
flatListContentContainer: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
customItemContainer: {},
|
||||
customItemLabel: {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
listMessageContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 10,
|
||||
},
|
||||
listMessageText: {
|
||||
color: colors.gold,
|
||||
},
|
||||
selectedItemContainer: {},
|
||||
selectedItemLabel: {},
|
||||
modalTitle: {
|
||||
fontSize: 18,
|
||||
color: colors.gold,
|
||||
},
|
||||
extendableBadgeContainer: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
flex: 1,
|
||||
},
|
||||
extendableBadgeItemContainer: {
|
||||
marginVertical: 3,
|
||||
marginEnd: 7,
|
||||
},
|
||||
});
|
@ -8,4 +8,5 @@ export const colors = {
|
||||
dark: "#010409",
|
||||
darkSecondary: "#0D1117",
|
||||
white: "#FFFFFF",
|
||||
placeholder: "#aaaaaa",
|
||||
};
|
||||
|
1850
frontend/package-lock.json
generated
1850
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,24 +9,26 @@
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/metro-runtime": "~3.1.3",
|
||||
"@expo/metro-runtime": "~3.2.1",
|
||||
"@react-native-async-storage/async-storage": "^1.23.1",
|
||||
"@types/react": "~18.2.45",
|
||||
"axios": "^1.6.8",
|
||||
"expo": "~50.0.17",
|
||||
"expo-constants": "~15.4.6",
|
||||
"expo-linear-gradient": "~12.7.2",
|
||||
"expo-linking": "~6.2.2",
|
||||
"expo-router": "~3.4.10",
|
||||
"expo-secure-store": "^12.8.1",
|
||||
"expo-status-bar": "~1.11.1",
|
||||
"expo": "^51.0.2",
|
||||
"expo-constants": "~16.0.1",
|
||||
"expo-image-picker": "~15.0.4",
|
||||
"expo-linear-gradient": "~13.0.2",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-router": "~3.5.11",
|
||||
"expo-secure-store": "~13.0.1",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"expo-system-ui": "~3.0.4",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.73.6",
|
||||
"react-native-safe-area-context": "4.8.2",
|
||||
"react-native-screens": "~3.29.0",
|
||||
"react-native-web": "~0.19.6",
|
||||
"expo-system-ui": "~2.9.4"
|
||||
"react-native": "0.74.1",
|
||||
"react-native-dropdown-picker": "^5.4.6",
|
||||
"react-native-safe-area-context": "4.10.1",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-web": "~0.19.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
Loading…
Reference in New Issue
Block a user