create IntegrationsList.tsx

0% Statements 0/30

0% Branches 0/22

0% Functions 0/9

0% Lines 0/30

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { CircularProgress } from "@mui/material";
import { usePlaybookBuilderOptionsQuery } from "../../../store/features/playbook/api/index.ts";
import IntegrationOption from "./IntegrationOption";
 
function IntegrationsList() {
  const { data, isLoading } = usePlaybookBuilderOptionsQuery();
  const supportedTaskTypes = data?.supportedTaskTypes;
  const [query, setQuery] = useState("");
  const [items, setItems] = useState(supportedTaskTypes || []);
 
  const search = () => {
    Iif (!query) {
      setItems([]);
    }
    const filteredItems = supportedTaskTypes?.filter(
      (item) =>
        item?.source?.toLowerCase().includes(query) ||
        item?.display_name?.toLowerCase().includes(query),
    );
    setItems(filteredItems || []);
  };
 
  const integrationGroups = supportedTaskTypes?.reduce((groups, item) => {
    const category = item.category ?? "Others";
    const group = groups[category];
    if (group) {
      group.options.push(item);
    } else {
      groups[category] = {
        category: category,
        options: [item],
      };
    }
    return groups;
  }, {});
 
  useEffect(() => {
    Iif (query) {
      search();
    }
  }, [query]);
 
  return (
    <div className="flex flex-col">
      <div className="sticky top-0 bg-white z-10">
        <h2 className="mt-4 font-bold text-sm">Add Data</h2>
        <input
          type="search"
          className="w-full p-2 border-[1px] border-gray-200 rounded text-sm my-2 outline-violet-500"
          placeholder="Search for integrations..."
          onChange={(event) => setQuery(event.target.value)}
          value={query}
        />
      </div>
      {isLoading && (
        <div className="flex items-center gap-4 text-sm">
          <CircularProgress color="primary" size={20} />
          Looking for integrations...
        </div>
      )}
      <div className="flex flex-col gap-4 flex-1 pb-40">
        {query ? (
          items.length === 0 ? (
            <p className="text-sm">No integrations found.</p>
          ) : (
            items.map((option, index) => {
              return <IntegrationOption key={index} option={option} />;
            })
          )
        ) : (
          Object.keys(integrationGroups ?? {})?.map((group) => (
            <div key={group}>
              <p className="font-bold text-sm mb-1">{group}</p>
              <div className="flex flex-col gap-2">
                {integrationGroups[group].options.length === 0 && (
                  <p className="text-xs">No integrations yet.</p>
                )}
                {integrationGroups[group].options.map((option, index) => (
                  <IntegrationOption key={index} option={option} />
                ))}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
 
export default IntegrationsList;