Compare commits

..

12 Commits

11 changed files with 1114 additions and 1159 deletions

View File

@ -1,30 +1,43 @@
{ {
"expo": { "expo": {
"name": "deguapp", "name": "deguapp",
"slug": "deguapp", "slug": "deguapp",
"scheme": "deguapp", "scheme": "deguapp",
"version": "1.0.0", "version": "1.0.0",
"orientation": "portrait", "orientation": "portrait",
"icon": "./assets/icon.png", "icon": "./assets/icon.png",
"userInterfaceStyle": "light", "userInterfaceStyle": "light",
"splash": { "splash": {
"image": "./assets/splash.png", "image": "./assets/splash.png",
"resizeMode": "contain", "resizeMode": "contain",
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}, },
"assetBundlePatterns": ["**/*"], "assetBundlePatterns": [
"ios": { "**/*"
"supportsTablet": true ],
}, "ios": {
"android": { "supportsTablet": true
"adaptiveIcon": { },
"foregroundImage": "./assets/adaptive-icon.png", "android": {
"backgroundColor": "#ffffff" "adaptiveIcon": {
} "foregroundImage": "./assets/adaptive-icon.png",
}, "backgroundColor": "#ffffff"
"web": { }
"favicon": "./assets/favicon.png" },
}, "web": {
"plugins": ["expo-router"] "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 { useState } from "react";
import Button from "@components/Button"; import Button from "@components/Button";
import Text from "@components/Text";
import { colors } from "@components/style"; 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() { 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("");
const [b_brand, setBBrand] = 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() { 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
@ -24,11 +89,22 @@ export default function BeerAdd() {
}), }),
}); });
const res = await req.json(); 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 ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.form}> <View style={styles.form}>
<Text style={styles.text}>
Spill your thoughts about the beer you just sipped!
</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder="Name" placeholder="Name"
@ -57,7 +133,33 @@ export default function BeerAdd() {
onChangeText={(text) => setBPackaging(text)} onChangeText={(text) => setBPackaging(text)}
placeholderTextColor="#aaaaaa" 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}
/>
</View>
{image && <Image source={{ uri: image }} style={styles.image} />}
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
</View> </View>
</View> </View>
); );
@ -65,22 +167,50 @@ export default function BeerAdd() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, width: "100%",
height: "100%",
alignItems: "center",
display: "flex",
}, },
form: { form: {
flex: 1,
alignItems: "center", alignItems: "center",
paddingTop: "10%",
gap: 15, gap: 15,
width: "80%",
}, },
input: {},
input: { input: {
height: "auto", height: "auto",
width: "60%", width: "100%",
borderColor: "gray", borderColor: "gray",
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 10,
padding: 10, padding: 13,
color: "#fff", 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", title = "Button",
color = "black", color = "black",
textColor = "white", textColor = "white",
buttonStyle,
textStyle,
} = props; } = props;
return ( return (
<Pressable <Pressable
@ -19,10 +21,13 @@ export default function Button(props) {
: "black", : "black",
}, },
styles.button, styles.button,
buttonStyle,
]} ]}
onPress={onPress} onPress={onPress}
> >
<Text style={[styles.text, { color: textColor }]}>{title}</Text> <Text style={[styles.text, { color: textColor }, textStyle]}>
{title}
</Text>
</Pressable> </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", dark: "#010409",
darkSecondary: "#0D1117", darkSecondary: "#0D1117",
white: "#FFFFFF", white: "#FFFFFF",
placeholder: "#aaaaaa",
}; };

File diff suppressed because it is too large Load Diff

View File

@ -9,24 +9,26 @@
"web": "expo start --web" "web": "expo start --web"
}, },
"dependencies": { "dependencies": {
"@expo/metro-runtime": "~3.1.3", "@expo/metro-runtime": "~3.2.1",
"@react-native-async-storage/async-storage": "^1.23.1", "@react-native-async-storage/async-storage": "^1.23.1",
"@types/react": "~18.2.45", "@types/react": "~18.2.45",
"axios": "^1.6.8", "axios": "^1.6.8",
"expo": "~50.0.17", "expo": "^51.0.2",
"expo-constants": "~15.4.6", "expo-constants": "~16.0.1",
"expo-linear-gradient": "~12.7.2", "expo-image-picker": "~15.0.4",
"expo-linking": "~6.2.2", "expo-linear-gradient": "~13.0.2",
"expo-router": "~3.4.10", "expo-linking": "~6.3.1",
"expo-secure-store": "^12.8.1", "expo-router": "~3.5.11",
"expo-status-bar": "~1.11.1", "expo-secure-store": "~13.0.1",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.4",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-native": "0.73.6", "react-native": "0.74.1",
"react-native-safe-area-context": "4.8.2", "react-native-dropdown-picker": "^5.4.6",
"react-native-screens": "~3.29.0", "react-native-safe-area-context": "4.10.1",
"react-native-web": "~0.19.6", "react-native-screens": "3.31.1",
"expo-system-ui": "~2.9.4" "react-native-web": "~0.19.6"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",