function ResultTable()

in apps/televisit-demo/frontend/src/containers/transcriptions/AnalysisPane.js [151:244]
88 lines of code
2 McCabe index (conditional complexity)

function ResultTable({
  results,
  category,
  onResultDelete,
  onResultAdd,
  onSelectedConceptChange,
}) {
  const filteredResults = useMemo(
    () => results.filter((r) => r.Category === category),
    [results, category]
  );
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => setInputValue(event.target.value);

  const handleSubmit = (event) => {
    event.preventDefault();
    const input = inputValue.trim();
    if (input !== '') {
      onResultAdd(input, category);
      setInputValue('');
    }
  };

  const addEntityInputId = `add-${displayNames[category]}`;

  const addIcon = (
    <IconButton
      aria-label="Add"
      type="submit"
      icon={<AddIcon />}
      size="xs"
      isRound
      border="1px solid #545b64"
      _hover={{ bg: '#545b64' }}
      sx={{
        '&:hover svg': {
          color: '#fff',
        },
      }}
    />
  );

  return (
    <Box
      mb={4}
      mx="3em"
      _first={{ marginTop: '1em' }}
      _last={{ marginBottom: '1em' }}
    >
      <Box
        as="h1"
        mb={4}
        textAlign="left"
        width="max-content"
        fontWeight="bold"
        fontSize="1.2rem"
        className={highlightClasses[category]}
      >
        {displayNames[category]}
      </Box>

      <VStack spacing={2}>
        <FormControl as="form" onSubmit={handleSubmit}>
          <Flex width="100%" mb={4} alignItems="center">
            <VisuallyHidden as="label" htmlFor={addEntityInputId}>
              Add {displayNames[category]}
            </VisuallyHidden>
            <Input
              id={addEntityInputId}
              mr={2}
              border="1px solid"
              borderColor="grey"
              borderRadius="0"
              bg="white"
              placeholder={`Add ${displayNames[category]}`}
              value={inputValue}
              onChange={handleInputChange}
            />
            {addIcon}
          </Flex>
        </FormControl>

        {filteredResults.map((r) => (
          <ResultRow
            result={r}
            key={r.id}
            onDeleteClick={() => onResultDelete(r)}
            onSelectedConceptChange={onSelectedConceptChange}
          />
        ))}
      </VStack>
    </Box>
  );
}