Merge pull request 'kevin/add-form' (#14) from kevin/add-form into main

Beer add form
Reviewed-on: #14
This commit is contained in:
Filip Rojek 2024-05-12 21:44:08 +02:00
commit 9b850ba88f
11 changed files with 1115 additions and 1159 deletions

View File

@ -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"
]
}
}

View File

@ -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%",
},
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 807 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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>
);
}

View 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,
},
});

View File

@ -8,4 +8,5 @@ export const colors = {
dark: "#010409",
darkSecondary: "#0D1117",
white: "#FFFFFF",
placeholder: "#aaaaaa",
};

File diff suppressed because it is too large Load Diff

View File

@ -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",