cally/components/pages/grocery/TopDisplay.tsx

import { View, Text, Button } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { Octicons } from "@expo/vector-icons";
import { useGroceryContext } from "@/contexts/GroceryContext";

const TopDisplay = () => {
  const { groceries, isShopping } = useGroceryContext();
  const [approved, setApproved] = useState<number>(0);
  const [pending, setPending] = useState<number>(0);
  const [notBoughtCound, setNotBoughtCound] = useState<number>(0);
  useEffect(() => {
    const approvedCount = groceries.filter(
      (grocery) => grocery.approved
    ).length;
    const pendingCount = groceries.filter(
      (grocery) => !grocery.approved
    ).length;
    const notBoughtCound = groceries.filter(
        (grocery) => !grocery.bought
      ).length;

    setApproved(approvedCount);
    setPending(pendingCount);
    setNotBoughtCound(notBoughtCound);
  }, [groceries]);

  return (
    <View backgroundColor="#e1e1e1" paddingL-20 paddingT-20 paddingB-10>
      <Text text50BL marginB-10 color="black">
        Welcome to your grocery list!
      </Text>
      {!isShopping ? (
        <View row bottom style={{ justifyContent: "space-between" }}>
          <View>
            <Text text70BL color="black">
              {approved} approved items
            </Text>
            <Text text70BL color="black">
              {pending} pending items
            </Text>
          </View>
          <Button
            backgroundColor="#e1e1e1"
            right
            padding-0
            children={<Octicons name="share" size={30} color="black" />}
          />
        </View>
      ) : (
        <View>
            <Text text70BL color="black">
              You have {notBoughtCound} items left in your cart
            </Text>
        </View>
      )}
    </View>
  );
};

export default TopDisplay;