I am building quite a simple app to just render the different orders from the json list based on user input.

It has been easy to accomplish, but I am unsure of ways to make this code more efficient, I effectively want the same output with less code.

any advice on where maybe I am repeating myself in my code where I do not need to, and different approaches I could take.

import { Col, Row } from "antd";
import { useState } from "react";
import Order from "../components/Order";
import AntButton from "../elements/Button";
import Json from "../orders.json";

const completedOrders = Json.filter(function(i) {
    return i.orderStatus === "complete"
});

const acceptedOrders = Json.filter(function(i) {
    return i.orderStatus === "accepted";
});

const inProgressOrders = Json.filter(function(i) {
    return i.orderStatus === "inProgress";
});


const OrdersPage = () => {

    const [userInput, setUserInput] = useState("default")
    const [display, setDisplay] = useState("")

    const setDiplayAcceptedOrders = () => {
        console.log("clicked accepted")
        setDisplay("acceptedOrders")
    }

    const setDiplayCompletedOrders = () => {
        console.log("clicked completed")
        setDisplay("completedOrders")
    }

    const setDiplayInProgressOrders = () => {
        console.log("clicked inProgress")

        setDisplay("inProgressOrders")
    }
    const AllOrdersOutput = () => {
        return(
            <>
                {Json.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }

    const CompletedOrdersOutput = () => {
        return(
            <>
                {completedOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }
    const AcceptedOrdersOutput = () => {
        return(
            <>
                {acceptedOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }
    const InProgressOrdersOutput = () => {
        return(
            <>
                {inProgressOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }

    const DisplayFunction = () => {
        if(display === "acceptedOrders"){
            return(<AcceptedOrdersOutput/>)
        } else if(display === "completedOrders"){
            return(<CompletedOrdersOutput/>)
        } else if(display === "inProgressOrders"){
            return(<InProgressOrdersOutput/>)
        } else {
            return(<AllOrdersOutput/>)
        }
    }

    return(
        <div className="container">
            <Row   justify="space-between" align="middle">
                <Col span={6}>
                    <h1>Orders</h1>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayAcceptedOrders} name="Accepted"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayInProgressOrders}  name="In Progress"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayCompletedOrders} name="Complete"/>
                </Col>
            </Row>
            <Row>
                <Col span={12}>
                    {DisplayFunction()}
                </Col>
            </Row>
        </div>
    )
}

export default OrdersPage;

CodePudding user response：

No need to store each list separately, you can just store filtering criteria and use it do dynamically filter order list whenever criteria change(when user clicks on any button in order to display specific orders).

For example, you can do like this:

  const [filteringStatus, setFilteringStatus] = useState("");

  const setDiplayAcceptedOrders = () => {
    setFilteringStatus("accepted");
  };

  const setDiplayCompletedOrders = () => {
    setFilteringStatus("complete");
  };

  const setDiplayInProgressOrders = () => {
    setFilteringStatus("inProgress");
  };

  const ordersToDisplay = useMemo(() => {
    if (filteringStatus) {
      return Json.filter((i) => i.orderStatus === filteringStatus);
    }
    return Json; // retrun all orders
  }, [filteringStatus]);

  return (
    <div className="container">
      <div justify="space-between" align="middle">
        <div span={6}>
          <h1>Orders</h1>
        </div>
        <div span={6}>
          <button onClick={setDiplayAcceptedOrders} name="Accepted" />
        </div>
        <div span={6}>
          <button onClick={setDiplayInProgressOrders} name="In Progress" />
        </div>
        <div span={6}>
          <button onClick={setDiplayCompletedOrders} name="Complete" />
        </div>
      </div>
      <div>
        <div span={12}>{ordersToDisplay}</div>
      </div>
    </div>
  );

You can also wrap those filtering functions inside useCallback if you wish to additionally optimize your code.