08 Mixed

1// T4 case 08 — Multiple blockers + multiple warnings in one file.
2//
3// Should report:
4//   blockers: r2hf/use-state, r2hf/use-effect-deps, r2hf/third-party-react-ui
5//   warnings: r2hf/use-callback (also r2hf/delay-render via the import chain
6//             would only fire if delayRender is actually called)
7//
8// Tests that the linter aggregates findings correctly and does not stop at
9// the first blocker.
10
11import React, { useState, useEffect, useCallback } from "react";
12import { AbsoluteFill, useCurrentFrame } from "remotion";
13import { Card } from "@chakra-ui/react";
14
15interface Item {
16  id: string;
17  label: string;
18}
19
20export const MixedBlockers: React.FC = () => {
21  const frame = useCurrentFrame();
22  const [items, setItems] = useState<Item[]>([]);
23
24  useEffect(() => {
25    fetch("/api/items")
26      .then((r) => r.json())
27      .then(setItems);
28  }, [frame]);
29
30  const onClick = useCallback(() => {
31    setItems((prev) => [...prev, { id: String(prev.length), label: "new" }]);
32  }, []);
33
34  return (
35    <AbsoluteFill onClick={onClick}>
36      {items.map((item) => (
37        <Card key={item.id}>{item.label}</Card>
38      ))}
39    </AbsoluteFill>
40  );
41};