From a57a059c2a04ec925d7381b3e31e239595578483 Mon Sep 17 00:00:00 2001 From: KeviNmp4 Date: Wed, 15 May 2024 01:04:27 +0200 Subject: [PATCH] Added: review add form --- frontend/app/(app)/(tabs)/review/add.js | 558 ++++++++++++++++----- frontend/assets/smileys/smiley-blank.png | Bin 0 -> 8127 bytes frontend/assets/smileys/smiley-meh.png | Bin 0 -> 8317 bytes frontend/assets/smileys/smiley-nervous.png | Bin 0 -> 9119 bytes frontend/assets/smileys/smiley-sad.png | Bin 0 -> 9161 bytes frontend/assets/smileys/smiley-wink.png | Bin 0 -> 11410 bytes frontend/assets/smileys/smiley-x-eyes.png | Bin 0 -> 9070 bytes frontend/assets/smileys/smiley.png | Bin 0 -> 9180 bytes 8 files changed, 421 insertions(+), 137 deletions(-) create mode 100644 frontend/assets/smileys/smiley-blank.png create mode 100644 frontend/assets/smileys/smiley-meh.png create mode 100644 frontend/assets/smileys/smiley-nervous.png create mode 100644 frontend/assets/smileys/smiley-sad.png create mode 100644 frontend/assets/smileys/smiley-wink.png create mode 100644 frontend/assets/smileys/smiley-x-eyes.png create mode 100644 frontend/assets/smileys/smiley.png diff --git a/frontend/app/(app)/(tabs)/review/add.js b/frontend/app/(app)/(tabs)/review/add.js index e65aadf..8ffde5c 100644 --- a/frontend/app/(app)/(tabs)/review/add.js +++ b/frontend/app/(app)/(tabs)/review/add.js @@ -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: () => ( + + ), + }, + { + label: "Medium", + value: "2", + icon: () => ( + + ), + }, + { + label: "Excelent", + value: "3", + icon: () => ( + + ), + }, ]); + // hořkost / sladkost + const [itemBitter_sweetness, setBitter_sweetnessValue] = useState(null); + const [bitter_sweetness, setBitter_sweetness] = useState([ + { + label: "Bad", + value: "1", + icon: () => ( + + ), + }, + { + label: "Medium", + value: "2", + icon: () => ( + + ), + }, + { + label: "Excelent", + value: "3", + icon: () => ( + + ), + }, + ]); + + //chuť + const [itemTaste, setTasteValue] = useState(null); + const [taste, setTaste] = useState([ + { + label: "Disgust", + value: "1", + icon: () => ( + + ), + }, + { + label: "Not great, not terrible", + value: "2", + icon: () => ( + + ), + }, + { + label: "Good", + value: "3", + icon: () => ( + + ), + }, + { + label: "Why not", + value: "4", + icon: () => ( + + ), + }, + { + label: "Excelent!", + value: "5", + icon: () => ( + + ), + }, + ]); + + // packaging + const [itemPackaging, setPackagingValue] = useState(null); + const [packaging, setPackaging] = useState([ + { + label: "Disgust", + value: "1", + icon: () => ( + + ), + }, + { + label: "Not great, not terrible", + value: "2", + icon: () => ( + + ), + }, + { + label: "Good", + value: "3", + icon: () => ( + + ), + }, + { + label: "Why not", + value: "4", + icon: () => ( + + ), + }, + { + label: "Excelent!", + value: "5", + icon: () => ( + + ), + }, + ]); + + //kyselost + const [itemSourness, setSournessValue] = useState(null); + const [sourness, setSourness] = useState([ + { + label: "True", + value: true, + icon: () => ( + + ), + }, + { + label: "False", + value: false, + icon: () => ( + + ), + }, + ]); + + //dal bych si znovu? + const [itemAgain, setAgainValue] = useState(null); + const [again, setAgain] = useState([ + { + label: "Yes", + value: true, + icon: () => ( + + ), + }, + { + label: "No", + value: false, + icon: () => ( + + ), + }, + ]); + + //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() { - Spill your thoughts about the beer you just sipped! + How does your beer taste? Write a review! + + + How does the foam look like? - setBName(text)} - placeholderTextColor="#aaaaaa" - /> - setBBrand(text)} - placeholderTextColor="#aaaaaa" - /> - validateDegreeInput(text)} - placeholderTextColor="#aaaaaa" - keyboardType="numeric" - maxLength={3} - /> - + + More bitter, or more sweet? + + - {/* -