Click here to Skip to main content
14,929,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm developing a food ordering app using react native and ASP .NET MVC Entity Framework. I've Search screen with date(field) and vendor list(dropdown) and when I click on search button it will navigate to Orders Screen with date and vendor Id as parameters and with these 2 parameter I fetch data from API and show data with in Orders screen. But problem is first time it's showing correct list and 2nd time with different date and vendor id not updating list in Orders screen while API fetching correct data and showing previous data.:

What I have tried:

Search Screen Code

JavaScript
<pre><View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />
      <CustomLoading isLoading={isLoading} />
      {/* Header */}
      <View style={styles.header}>
        <Animatable.View animation="bounceIn" duration={2000}>
          <Image style={styles.logo} source={images.FinalLogoOnLight} />
        </Animatable.View>
        <Animatable.Text
          animation="bounceInLeft"
          duration={2000}
          style={[styles.screenTitle, { color: colors.black }]}
        >
          Search/Filter Receipts
        </Animatable.Text>
      </View>

      {/* Form */}
      <View>
        {/* Date */}
        <TouchableOpacity
          style={[styles.datePickerWrapper, { backgroundColor: colors.white }]}
          onPress={showDatePicker}
        >
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            mode="date"
            value={model.date}
            onConfirm={handleConfirm}
            onCancel={hideDatePicker}
          />
          <Text style={{ color: colors.black, fontFamily: "PoppinsRegular" }}>
            {moment(model.date).format("YYYY-MM-DD")}
          </Text>
          <AntDesign name="calendar" color={colors.gray} size={sizes.h2} />
        </TouchableOpacity>

        {/* DropDown */}
        {/* <FormDropDown dropDownRef={dropDownRef} options={vendors} /> */}
        <View
          style={[
            styles.dropDownWrapper,
            {
              flexDirection: "row",
              marginTop: sizes.m10,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: colors.white,
              borderColor: colors.grayLight,
            },
          ]}
        >
          {model.vendors != null ? (
            <FormPicker
              placeholderText="Select Vendor"
              selectedValue={model.vendorUserId}
              onValueChange={(val) => setModel({ ...model, vendorUserId: val })}
              data={model.vendors}
            />
          ) : null}
        </View>

        {/* Search Button */}
        <FormButton
          mystyle={{ marginTop: sizes.m20 }}
          buttonTitle="Search"
          onPress={() => handleSubmit()}
        />
      </View>
const handleSubmit = async () => {
    try {
      if (model.vendorUserId == "" && model.date == "") {
        Toast.show("Date or Vendor filed not be empty.");
        return;
      }
      navigation.navigate("RootOrder", {
        screen: "SearchedOrders",
        params: { searchedOrders: model },
      });
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };



Searched Order Screen:
JavaScript
const [isLoading, setIsLoading] = useState(true);
  const [start, setStart] = useState(0);
const [model, setModel] = useState({
    data: [],
    token: userState.token,
    date: searchedOrders.date,
    vendorUserId: searchedOrders.vendorUserId,
    recordTotal: null,
  });

  // Functions
  const fetchOrderHistoryByDate = async () => {
    try {
      setIsLoading(true);
      var res = await orderHistoryByDate(model);
      if (!res.Success) {
        console.log("Error: ", res.Data);
        setIsLoading(false);
        alert(res.Data);
        return;
      }
      var resModel = res.Data;
    //   console.log(resModel)
      setModel({ ...model, data: resModel });
      // console.log(resModel);
      setIsLoading(false);
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };
  // Functions END
  const init = async () => {
    await fetchOrderHistoryByDate();
    setIsLoading(false);
  };

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      setStart(Math.random() * 10000);
      init();
    });
    return unsubscribe;
  }, [start]);

function renderCardItems({ item, index }) {
    return (<View style={styles.OrderItemWrapper}>
      <LinearGradient
        style={[styles.OrderItemWrapperLinearGrad]}
        colors={[colors.white, colors.linearGray]}
      >
        <TouchableOpacity
          // style={[styles.OrderItemWrapper, { backgroundColor: colors.white }]}
          onPress={() =>
            navigation.navigate("OrderDetails", { itemOrderDetails: item })
          }
          // key={index}
        >
          <View style={styles.cartItemWrapper}>
            <View style={styles.cartItemDetails}>
              <Text style={[styles.cartItemText, { color: colors.primary }]}>
                {item.ShopName}
                {/* ({index}) */}
              </Text>
              {/* <Text style={{ color: "#000" }}>{item.InvoiceNo}</Text> */}
              <Text
                style={[styles.cartItemQuantityText, { color: colors.gray }]}
              >
                {item.Date}
              </Text>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={[styles.cartItemPriceText, { color: colors.black }]}
                >
                  AED {item.Total}
                </Text>
                <View
                  style={[
                    styles.statusWrapper,
                    { backgroundColor: colors.primary },
                  ]}
                >
                  <Text style={[styles.statusText, { color: colors.white }]}>
                    {item.Status}
                  </Text>
                </View>
              </View>
            </View>
            <Image
              source={{
                uri: `${domain}${item.ShopPicture}`,
              }}
              style={styles.cardItemImage}
            />
          </View>
        </TouchableOpacity>
      </LinearGradient>
    </View>);
  }

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />

      <CustomLoading isLoading={isLoading} />
      <FlatList
        data={model.data}
        renderItem={renderCardItems}
        keyExtractor={(item, index) => item.InvoiceNo + "_" + index}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        style={{ marginTop: sizes.m10 }}
        style={{
          paddingVertical: sizes.m10,
          backgroundColor: colors.background,
        }}
      />
    </View>
Posted
Updated 25-Apr-21 21:16pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900