Compare commits
4 Commits
1c97262ee3
...
312809f34f
Author | SHA1 | Date | |
---|---|---|---|
312809f34f | |||
2168756afd | |||
2ca7999055 | |||
cebb0481bc |
@ -1,43 +1,30 @@
|
|||||||
{
|
{
|
||||||
"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": {
|
},
|
||||||
"supportsTablet": true
|
"android": {
|
||||||
},
|
"adaptiveIcon": {
|
||||||
"android": {
|
"foregroundImage": "./assets/adaptive-icon.png",
|
||||||
"adaptiveIcon": {
|
"backgroundColor": "#ffffff"
|
||||||
"foregroundImage": "./assets/adaptive-icon.png",
|
}
|
||||||
"backgroundColor": "#ffffff"
|
},
|
||||||
}
|
"web": {
|
||||||
},
|
"favicon": "./assets/favicon.png"
|
||||||
"web": {
|
},
|
||||||
"favicon": "./assets/favicon.png"
|
"plugins": ["expo-router"]
|
||||||
},
|
}
|
||||||
"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,78 +1,13 @@
|
|||||||
import { StyleSheet, TextInput, View, Image } from "react-native";
|
import { StyleSheet, TextInput, View } 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
|
||||||
@ -89,22 +24,11 @@ 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"
|
||||||
@ -133,33 +57,7 @@ export default function BeerAdd() {
|
|||||||
onChangeText={(text) => setBPackaging(text)}
|
onChangeText={(text) => setBPackaging(text)}
|
||||||
placeholderTextColor="#aaaaaa"
|
placeholderTextColor="#aaaaaa"
|
||||||
/>
|
/>
|
||||||
<DropDownPicker
|
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
||||||
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>
|
||||||
);
|
);
|
||||||
@ -167,50 +65,22 @@ export default function BeerAdd() {
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
width: "100%",
|
flex: 1,
|
||||||
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: "100%",
|
width: "60%",
|
||||||
borderColor: "gray",
|
borderColor: "gray",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderRadius: 10,
|
borderRadius: 5,
|
||||||
padding: 13,
|
padding: 10,
|
||||||
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.
Before Width: | Height: | Size: 522 B |
Binary file not shown.
Before Width: | Height: | Size: 807 B |
Binary file not shown.
Before Width: | Height: | Size: 338 B |
Binary file not shown.
Before Width: | Height: | Size: 1.2 KiB |
@ -7,8 +7,6 @@ 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
|
||||||
@ -21,13 +19,10 @@ export default function Button(props) {
|
|||||||
: "black",
|
: "black",
|
||||||
},
|
},
|
||||||
styles.button,
|
styles.button,
|
||||||
buttonStyle,
|
|
||||||
]}
|
]}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
>
|
>
|
||||||
<Text style={[styles.text, { color: textColor }, textStyle]}>
|
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
</Pressable>
|
</Pressable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,170 +0,0 @@
|
|||||||
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,5 +8,4 @@ export const colors = {
|
|||||||
dark: "#010409",
|
dark: "#010409",
|
||||||
darkSecondary: "#0D1117",
|
darkSecondary: "#0D1117",
|
||||||
white: "#FFFFFF",
|
white: "#FFFFFF",
|
||||||
placeholder: "#aaaaaa",
|
|
||||||
};
|
};
|
||||||
|
1858
frontend/package-lock.json
generated
1858
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,26 +9,24 @@
|
|||||||
"web": "expo start --web"
|
"web": "expo start --web"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/metro-runtime": "~3.2.1",
|
"@expo/metro-runtime": "~3.1.3",
|
||||||
"@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": "^51.0.2",
|
"expo": "~50.0.17",
|
||||||
"expo-constants": "~16.0.1",
|
"expo-constants": "~15.4.6",
|
||||||
"expo-image-picker": "~15.0.4",
|
"expo-linear-gradient": "~12.7.2",
|
||||||
"expo-linear-gradient": "~13.0.2",
|
"expo-linking": "~6.2.2",
|
||||||
"expo-linking": "~6.3.1",
|
"expo-router": "~3.4.10",
|
||||||
"expo-router": "~3.5.11",
|
"expo-secure-store": "^12.8.1",
|
||||||
"expo-secure-store": "~13.0.1",
|
"expo-status-bar": "~1.11.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.74.1",
|
"react-native": "0.73.6",
|
||||||
"react-native-dropdown-picker": "^5.4.6",
|
"react-native-safe-area-context": "4.8.2",
|
||||||
"react-native-safe-area-context": "4.10.1",
|
"react-native-screens": "~3.29.0",
|
||||||
"react-native-screens": "3.31.1",
|
"react-native-web": "~0.19.6",
|
||||||
"react-native-web": "~0.19.6"
|
"expo-system-ui": "~2.9.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.20.0",
|
"@babel/core": "^7.20.0",
|
||||||
|
Loading…
Reference in New Issue
Block a user