Added: review add form
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { StyleSheet, TextInput, View, Image } from "react-native";
|
||||
import { useState } from "react";
|
||||
import { useCallback, useState } from "react";
|
||||
import Button from "@components/Button";
|
||||
import Text from "@components/Text";
|
||||
import { colors } from "@components/style";
|
||||
@@ -9,103 +9,320 @@ const DropdownTheme = require("@components/DropdownTheme");
|
||||
import { Platform } from "react-native";
|
||||
|
||||
export default function reviewAdd() {
|
||||
const [b_name, setBName] = useState("");
|
||||
const [b_degree, setBDegree] = useState("");
|
||||
const [b_packaging, setBPackaging] = useState(null);
|
||||
const [b_brand, setBBrand] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
// States for each dropdown
|
||||
const [openFoam, setOpenFoam] = useState(false);
|
||||
const [openBitterSweetness, setOpenBitterSweetness] = useState(false);
|
||||
const [openTaste, setOpenTaste] = useState(false);
|
||||
const [openPackaging, setOpenPackaging] = useState(false);
|
||||
const [openSourness, setOpenSourness] = useState(false);
|
||||
const [openAgain, setOpenAgain] = useState(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
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" },
|
||||
// pěna
|
||||
const [itemFoam, setFoamValue] = useState(null);
|
||||
const [foam, setFoam] = useState([
|
||||
{
|
||||
label: "Bad",
|
||||
value: "1",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-x-eyes.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Medium",
|
||||
value: "2",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-meh.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Excelent",
|
||||
value: "3",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
// hořkost / sladkost
|
||||
const [itemBitter_sweetness, setBitter_sweetnessValue] = useState(null);
|
||||
const [bitter_sweetness, setBitter_sweetness] = useState([
|
||||
{
|
||||
label: "Bad",
|
||||
value: "1",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-x-eyes.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Medium",
|
||||
value: "2",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-meh.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Excelent",
|
||||
value: "3",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
//chuť
|
||||
const [itemTaste, setTasteValue] = useState(null);
|
||||
const [taste, setTaste] = useState([
|
||||
{
|
||||
label: "Disgust",
|
||||
value: "1",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-blank.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Not great, not terrible",
|
||||
value: "2",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-nervous.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Good",
|
||||
value: "3",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-meh.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Why not",
|
||||
value: "4",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-wink.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Excelent!",
|
||||
value: "5",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
// packaging
|
||||
const [itemPackaging, setPackagingValue] = useState(null);
|
||||
const [packaging, setPackaging] = useState([
|
||||
{
|
||||
label: "Disgust",
|
||||
value: "1",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-blank.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Not great, not terrible",
|
||||
value: "2",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-nervous.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Good",
|
||||
value: "3",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-meh.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Why not",
|
||||
value: "4",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-wink.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Excelent!",
|
||||
value: "5",
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
//kyselost
|
||||
const [itemSourness, setSournessValue] = useState(null);
|
||||
const [sourness, setSourness] = useState([
|
||||
{
|
||||
label: "True",
|
||||
value: true,
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-blank.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "False",
|
||||
value: false,
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-nervous.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
//dal bych si znovu?
|
||||
const [itemAgain, setAgainValue] = useState(null);
|
||||
const [again, setAgain] = useState([
|
||||
{
|
||||
label: "Yes",
|
||||
value: true,
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "No",
|
||||
value: false,
|
||||
icon: () => (
|
||||
<Image
|
||||
source={require("@assets/smileys/smiley-x-eyes.png")}
|
||||
style={styles.iconStyle}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
//podmínky pro zavření ostatních dropdownů, pokud je jiný otevřený
|
||||
const onOpenFoam = useCallback(() => {
|
||||
setOpenBitterSweetness(false);
|
||||
setOpenTaste(false);
|
||||
setOpenPackaging(false);
|
||||
setOpenSourness(false);
|
||||
setOpenAgain(false);
|
||||
setOpenFoam(true);
|
||||
}, []);
|
||||
|
||||
const onOpenBitterSweetness = useCallback(() => {
|
||||
setOpenFoam(false);
|
||||
setOpenTaste(false);
|
||||
setOpenPackaging(false);
|
||||
setOpenSourness(false);
|
||||
setOpenAgain(false);
|
||||
setOpenBitterSweetness(true);
|
||||
}, []);
|
||||
|
||||
const onOpenTaste = useCallback(() => {
|
||||
setOpenFoam(false);
|
||||
setOpenBitterSweetness(false);
|
||||
setOpenPackaging(false);
|
||||
setOpenSourness(false);
|
||||
setOpenAgain(false);
|
||||
setOpenTaste(true);
|
||||
}, []);
|
||||
|
||||
const onOpenPackaging = useCallback(() => {
|
||||
setOpenFoam(false);
|
||||
setOpenBitterSweetness(false);
|
||||
setOpenTaste(false);
|
||||
setOpenSourness(false);
|
||||
setOpenAgain(false);
|
||||
setOpenPackaging(true);
|
||||
}, []);
|
||||
|
||||
const onOpenSourness = useCallback(() => {
|
||||
setOpenFoam(false);
|
||||
setOpenBitterSweetness(false);
|
||||
setOpenTaste(false);
|
||||
setOpenPackaging(false);
|
||||
setOpenAgain(false);
|
||||
setOpenSourness(true);
|
||||
}, []);
|
||||
|
||||
const onOpenAgain = useCallback(() => {
|
||||
setOpenFoam(false);
|
||||
setOpenBitterSweetness(false);
|
||||
setOpenTaste(false);
|
||||
setOpenPackaging(false);
|
||||
setOpenSourness(false);
|
||||
setOpenAgain(true);
|
||||
}, []);
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
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() {
|
||||
// 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}/review/add`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
brand: b_brand,
|
||||
name: b_name,
|
||||
degree: b_degree,
|
||||
packaging: b_packaging,
|
||||
photos: null,
|
||||
foam: itemFoam,
|
||||
bitter_sweetness: itemBitter_sweetness,
|
||||
taste: itemTaste,
|
||||
packaging: itemPackaging,
|
||||
sourness: itemSourness,
|
||||
would_again: itemAgain,
|
||||
}),
|
||||
});
|
||||
const res = await req.json();
|
||||
|
||||
if (res.code == 201 && res.data._id) {
|
||||
window.location.href = `/beer/${res.data._id}`;
|
||||
window.location.href = `/review/${res.data._id}`;
|
||||
} else {
|
||||
alert(
|
||||
"Beer was not added successfully. Please check your data and try again.",
|
||||
@@ -117,65 +334,112 @@ export default function reviewAdd() {
|
||||
<View style={styles.container}>
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.text}>
|
||||
Spill your thoughts about the beer you just sipped!
|
||||
How does your beer taste? Write a review!
|
||||
</Text>
|
||||
<Text style={styles.dropdownText} zIndex={6000} zIndexInverse={1000}>
|
||||
How does the foam look like?
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Name"
|
||||
value={b_name}
|
||||
onChangeText={(text) => setBName(text)}
|
||||
placeholderTextColor="#aaaaaa"
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Brand"
|
||||
value={b_brand}
|
||||
onChangeText={(text) => setBBrand(text)}
|
||||
placeholderTextColor="#aaaaaa"
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Degree"
|
||||
value={b_degree}
|
||||
onChangeText={(text) => validateDegreeInput(text)}
|
||||
placeholderTextColor="#aaaaaa"
|
||||
keyboardType="numeric"
|
||||
maxLength={3}
|
||||
/>
|
||||
|
||||
<DropDownPicker
|
||||
open={open}
|
||||
value={b_packaging}
|
||||
items={items}
|
||||
setOpen={setOpen}
|
||||
setValue={setBPackaging}
|
||||
setItems={setItems}
|
||||
placeholder={"What are you drinking from?"}
|
||||
open={openFoam}
|
||||
onOpen={onOpenFoam}
|
||||
value={itemFoam}
|
||||
items={foam}
|
||||
setOpen={setOpenFoam}
|
||||
setValue={setFoamValue}
|
||||
setItems={setFoam}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
//searchable={true} //maybe we can use it later...
|
||||
zIndex={6000}
|
||||
zIndexInverse={1000}
|
||||
/>
|
||||
<Text style={styles.dropdownText} zIndex={5000} zIndexInverse={2000}>
|
||||
More bitter, or more sweet?
|
||||
</Text>
|
||||
<DropDownPicker
|
||||
open={openBitterSweetness}
|
||||
onOpen={onOpenBitterSweetness}
|
||||
value={itemBitter_sweetness}
|
||||
items={bitter_sweetness}
|
||||
setOpen={setOpenBitterSweetness}
|
||||
setValue={setBitter_sweetnessValue}
|
||||
setItems={setBitter_sweetness}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
zIndex={5000}
|
||||
zIndexInverse={2000}
|
||||
/>
|
||||
{/* <View style={styles.imageContainer}>
|
||||
<Button
|
||||
title="Open gallery"
|
||||
onPress={pickImage}
|
||||
buttonStyle={styles.imageButton}
|
||||
textStyle={styles.imageTextButton}
|
||||
/>
|
||||
|
||||
{Platform.OS != "web" ? (
|
||||
<Button
|
||||
onPress={openCamera}
|
||||
title={"Open camera"}
|
||||
buttonStyle={styles.imageButton}
|
||||
textStyle={styles.imageTextButton}
|
||||
/>
|
||||
) : (
|
||||
false
|
||||
)}
|
||||
<Text style={styles.dropdownText} zIndex={4000} zIndexInverse={3000}>
|
||||
How does it taste?
|
||||
</Text>
|
||||
<DropDownPicker
|
||||
open={openTaste}
|
||||
onOpen={onOpenTaste}
|
||||
value={itemTaste}
|
||||
items={taste}
|
||||
setOpen={setOpenTaste}
|
||||
setValue={setTasteValue}
|
||||
setItems={setTaste}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
zIndex={4000}
|
||||
zIndexInverse={3000}
|
||||
/>
|
||||
|
||||
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||
</View> */}
|
||||
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
|
||||
<Text style={styles.dropdownText} zIndex={5000} zIndexInverse={4000}>
|
||||
How do you like the packaging?
|
||||
</Text>
|
||||
<DropDownPicker
|
||||
open={openPackaging}
|
||||
onOpen={onOpenPackaging}
|
||||
value={itemPackaging}
|
||||
items={packaging}
|
||||
setOpen={setOpenPackaging}
|
||||
setValue={setPackagingValue}
|
||||
setItems={setPackaging}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
zIndex={5000}
|
||||
zIndexInverse={4000}
|
||||
/>
|
||||
|
||||
<Text style={styles.dropdownText} zIndex={4000} zIndexInverse={5000}>
|
||||
Is it sour?
|
||||
</Text>
|
||||
<DropDownPicker
|
||||
open={openSourness}
|
||||
onOpen={onOpenSourness}
|
||||
value={itemSourness}
|
||||
items={sourness}
|
||||
setOpen={setOpenSourness}
|
||||
setValue={setSournessValue}
|
||||
setItems={setSourness}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
zIndex={4000}
|
||||
zIndexInverse={5000}
|
||||
/>
|
||||
|
||||
<Text style={styles.dropdownText} zIndex={5000} zIndexInverse={6000}>
|
||||
Would you drink it again?
|
||||
</Text>
|
||||
<DropDownPicker
|
||||
open={openAgain}
|
||||
onOpen={onOpenAgain}
|
||||
value={itemAgain}
|
||||
items={again}
|
||||
setOpen={setOpenAgain}
|
||||
setValue={setAgainValue}
|
||||
setItems={setAgain}
|
||||
placeholder="Please select..."
|
||||
theme="DropdownTheme"
|
||||
zIndex={5000}
|
||||
zIndexInverse={6000}
|
||||
/>
|
||||
|
||||
<View style={styles.buttonSend}>
|
||||
<Button title="Add review" color={colors.gold} onPress={addBeer} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -189,10 +453,14 @@ const styles = StyleSheet.create({
|
||||
display: "flex",
|
||||
},
|
||||
form: {
|
||||
alignItems: "center",
|
||||
gap: 15,
|
||||
gap: 5,
|
||||
width: "80%",
|
||||
},
|
||||
buttonSend: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginTop: "2%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "100%",
|
||||
@@ -229,4 +497,20 @@ const styles = StyleSheet.create({
|
||||
paddingBottom: "3%",
|
||||
paddingTop: "10%",
|
||||
},
|
||||
iconStyle: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
dropdownContainer: {
|
||||
width: "100%",
|
||||
},
|
||||
dropdownText: {
|
||||
color: colors.white,
|
||||
fontSize: 16,
|
||||
paddingBottom: 1,
|
||||
paddingTop: "1%",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
flexDirection: "column",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user