From c0b8be8113c63a92da9a1fa4b0f9c49fed55966f Mon Sep 17 00:00:00 2001 From: tsh22 Date: Mon, 25 Apr 2022 20:04:04 +0800 Subject: [PATCH] Implement new return screen flow --- components/SuccessBox.js | 16 +- .../borrow-screens/BorrowSuccessfulScreen.js | 6 +- screens/return-screens/ReturnClaimSuccess.js | 8 +- screens/return-screens/ReturnStack.js | 12 +- screens/return-screens/TempReturnSelection.js | 188 ++++++++++++------ 5 files changed, 154 insertions(+), 76 deletions(-) diff --git a/components/SuccessBox.js b/components/SuccessBox.js index 9c8cd73..aca2891 100644 --- a/components/SuccessBox.js +++ b/components/SuccessBox.js @@ -12,7 +12,11 @@ import { Icon } from "react-native-elements"; import colors from "../assets/colors"; import moment from "moment"; import { globalStyles } from "../assets/globalStyles"; -import { useNavigation, StackActions } from "@react-navigation/native"; +import { + useNavigation, + StackActions, + CommonActions, +} from "@react-navigation/native"; import * as Animatable from "react-native-animatable"; import { MaterialIcons } from "@expo/vector-icons"; @@ -23,6 +27,7 @@ export default function SuccessBox({ location, numCoins, header, + isReturn, }) { const navigation = useNavigation(); @@ -188,7 +193,14 @@ export default function SuccessBox({ { - navigation.dispatch(StackActions.popToTop()); + if (isReturn) { + // Ensures that previous state of initial screen is cleared + navigation.dispatch( + StackActions.replace("Temp Return Selection Screen") + ); + } else { + navigation.dispatch(StackActions.popToTop()); + } navigation.navigate("Home Screen"); }} > diff --git a/screens/borrow-screens/BorrowSuccessfulScreen.js b/screens/borrow-screens/BorrowSuccessfulScreen.js index a14eb6a..126be23 100644 --- a/screens/borrow-screens/BorrowSuccessfulScreen.js +++ b/screens/borrow-screens/BorrowSuccessfulScreen.js @@ -32,7 +32,10 @@ export default function BorrowSuccessfulScreen({ route, navigation }) { diff --git a/screens/return-screens/ReturnClaimSuccess.js b/screens/return-screens/ReturnClaimSuccess.js index 92b19ed..11d8098 100644 --- a/screens/return-screens/ReturnClaimSuccess.js +++ b/screens/return-screens/ReturnClaimSuccess.js @@ -5,7 +5,12 @@ import colors from "../../assets/colors"; import { globalStyles } from "../../assets/globalStyles"; import FooterText from "../../components/FooterText"; import { UserContext } from "../../assets/UserContext"; -import { updateCoins, updateReturnData, addClaimToLogs, clearReturnLocation } from "./ReturnApi"; +import { + updateCoins, + updateReturnData, + addClaimToLogs, + clearReturnLocation, +} from "./ReturnApi"; import { useBackHandler } from "@react-native-community/hooks"; import { backActionHandler } from "../BasicApi"; @@ -44,6 +49,7 @@ export default function ReturnClaimSuccess({ route }) { numContainers={numContainers} numCoins={coinsEarned} header={"Thank you for returning!"} + isReturn={true} /> diff --git a/screens/return-screens/ReturnStack.js b/screens/return-screens/ReturnStack.js index 959e159..a6f934a 100644 --- a/screens/return-screens/ReturnStack.js +++ b/screens/return-screens/ReturnStack.js @@ -14,10 +14,15 @@ export default function ReturnStack() { return ( + {/* + > */} - ); } diff --git a/screens/return-screens/TempReturnSelection.js b/screens/return-screens/TempReturnSelection.js index f74ddda..77569b6 100644 --- a/screens/return-screens/TempReturnSelection.js +++ b/screens/return-screens/TempReturnSelection.js @@ -18,24 +18,31 @@ import { UserContext } from "../../assets/UserContext"; import { useNavigation } from "@react-navigation/native"; import { useBackHandler } from "@react-native-community/hooks"; import { backActionHandler } from "../BasicApi"; -import { clearReturnLocation } from "./ReturnApi"; +import RNPickerSelect from "react-native-picker-select"; +import { useFocusEffect } from "@react-navigation/native"; -function ReturnClaim({ location }) { +function ReturnClaim() { const [numCups, setCupNum] = useState(0); const [numContainers, setContainerNum] = useState(0); const [borrowedCup, setBorrowedCup] = useState(0); const [borrowedContainer, setBorrowedContainer] = useState(0); - - // console.log(location); + const [location, setLocation] = useState(""); const userData = useContext(UserContext); const uid = userData.id; const navigation = useNavigation(); - useEffect(() => { - getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer); - console.log("Setting up current user's borrowed items number"); - }, []); + // useEffect(() => { + // getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer); + // console.log("Setting up current user's borrowed items number"); + // }, []); + + useFocusEffect( + React.useCallback(() => { + getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer); + console.log("Updating return screen state"); + }, []) + ); function renderNextButton() { const [isPressed, setPress] = useState(false); @@ -46,42 +53,38 @@ function ReturnClaim({ location }) { if (numContainers == 0 && numCups == 0) { return ( - + - + I declare that I’m returning the above number of reusables {isPressed ? ( - + Please select at least 1 item to proceed. ) : null} ); + } else if (location == "") { + return ( + + + + I declare that I’m returning the above number of reusables + + + {isPressed ? ( + Please select your location. + ) : null} + + ); } else { return ( @@ -106,9 +109,10 @@ function ReturnClaim({ location }) { + {" "} I declare that I’m returning the above number of reusables @@ -137,53 +141,61 @@ function ReturnClaim({ location }) { setCupNum={setCupNum} setContainerNum={setContainerNum} /> - {renderNextButton()} - { - clearReturnLocation(uid); - navigation.popToTop(); - }} - style={[ - globalStyles.button, - { width: "90%", alignSelf: "center", marginBottom: 30 }, - ]} - > - Cancel - + + + Location: + + { + setLocation(location); + // console.log("Location: ", location); + }} + value={location} + items={locations} + placeholder={{ + label: "Select location", + value: "", + }} + useNativeAndroidPickerStyle={false} + style={{ + ...pickerSelectStyles, + placeholder: styles.dropdownPlaceholder, + }} + /> + + + + {renderNextButton(location)} ); } -export default function TempReturnSelection({ navigation, route }) { - const { location } = route.params; - // console.log(location); - +export default function ReturnErrorScreen({ navigation, route }) { // Prevent back button action on Android useBackHandler(backActionHandler); return ( - - - - - - + + + + ); } +const locations = [ + { value: "ClaimE4", label: "E4" }, + { value: "ClaimSDE4", label: "SDE4" }, + { value: "ClaimTechnoEdge", label: "TechnoEdge" }, +]; + const styles = StyleSheet.create({ container: { - flex: 1, - alignItems: "center", - paddingHorizontal: 40, + backgroundColor: "white", }, box: { borderWidth: 2, @@ -214,4 +226,48 @@ const styles = StyleSheet.create({ fontSize: 18, textAlign: "center", }, + errorText: { + color: colors.red, + marginBottom: 20, + textAlign: "center", + }, + errorButton: { + width: "90%", + backgroundColor: colors.lightGrey, + marginBottom: 10, + height: 60, + }, + errorView: { + justifyContent: "center", + alignItems: "center", + width: "100%", + }, + errorButtonText: { + textAlign: "center", + marginHorizontal: 10, + }, + locationSelection: { + flexDirection: "row", + marginHorizontal: 50, + marginBottom: 10, + paddingVertical: 10, + paddingHorizontal: 10, + borderBottomWidth: 1.5, + borderColor: "#aeb3b8", + }, + dropdownPlaceholder: { + color: colors.darkGrey, + fontSize: 18, + }, +}); + +const pickerSelectStyles = StyleSheet.create({ + inputIOS: { + color: colors.black, + fontSize: 18, + }, + inputAndroid: { + color: colors.black, + fontSize: 18, + }, });