Function EntityList

packages/amplication-client/src/Entity/EntityList.tsx:65–289

({ match, innerRoutes })

const POLL_INTERVAL = 30000;

const EntityList: React.FC<Props> = ({ match, innerRoutes }) => {
  const { resource } = match.params;
  const [error, setError] = useState<Error>();
  const pageTitle = "Entities";
  const [searchPhrase, setSearchPhrase] = useState<string>("");
  const [newEntity, setNewEntity] = useState<boolean>(false);

  const { baseUrl } = useResourceBaseUrl();

  const query = useUrlQuery();
  const view = query.get("view");

  const displayModeValue: DisplayModeType = view === "erd" ? "erd" : "list";

  const [displayMode, setDisplayMode] =
    useState<DisplayModeType>(displayModeValue);

  const setDisplayModeValue = useCallback(
    (mode: DisplayModeType) => {
      setDisplayMode(mode);
      query.set("view", mode);
      window.history.replaceState(
        null,
        "",
        `${window.location.pathname}?${query.toString()}`
      );
    },
    [query]
  );

  const handleNewEntityClick = useCallback(() => {
    setNewEntity(!newEntity);
  }, [newEntity, setNewEntity]);

  const {
    data,
    loading,
    error: errorLoading,
    refetch,
    stopPolling,
    startPolling,
  } = useQuery<TData>(GET_ENTITIES, {
    variables: {
      id: resource,
      orderBy: {
        [NAME_FIELD]: models.SortOrder.Asc,
      },
      whereName:
        searchPhrase !== ""
          ? { contains: searchPhrase, mode: models.QueryMode.Insensitive }
          : undefined,
    },
  });

  const handleSearchChange = useCallback(
    (value) => {
      setSearchPhrase(value);
    },