Function Decoder

integrations/tests/src/components/Decoder.tsx:16–208

({
  encoded,
  searchParams
}: {
  encoded: string;
  searchParams: URLSearchParams;
})

import { decode } from "../utils/serializer/decode";

export function Decoder({
  encoded,
  searchParams
}: {
  encoded: string;
  searchParams: URLSearchParams;
}) {
  const [group, setGroup] = useGroupCallbackRef();
  const groupRef = useGroupRef();
  const groupRefProp = searchParams.has("useGroupCallbackRef")
    ? setGroup
    : searchParams.has("useGroupRef")
      ? groupRef
      : undefined;

  const [panel, setPanel] = usePanelCallbackRef();
  const panelRef = usePanelRef();
  const panelRefProp = searchParams.has("usePanelCallbackRef")
    ? setPanel
    : searchParams.has("usePanelRef")
      ? panelRef
      : undefined;

  const [cursorData, setCursorData] = useState<{
    cursorStyle: string;
    movementX: number;
    movementY: number;
  }>({
    cursorStyle: "",
    movementX: 0,
    movementY: 0
  });

  const stableCallbacksRef = useRef<{
    readGroupLayout: () => void;
    readPanelSize: () => void;
  }>({
    readGroupLayout: () => {},
    readPanelSize: () => {}
  });
  useLayoutEffect(() => {
    stableCallbacksRef.current.readGroupLayout = () => {
      const imperativeGroupApiLayout =
        group?.getLayout() ?? groupRef.current?.getLayout();
      if (imperativeGroupApiLayout) {
        setState((prevState) => ({ ...prevState, imperativeGroupApiLayout }));
      }
    };
    stableCallbacksRef.current.readPanelSize = () => {
      const imperativePanelApiSize =
        panel?.getSize() ?? panelRef.current?.getSize();
      if (imperativePanelApiSize) {
        setState((prevState) => ({ ...prevState, imperativePanelApiSize }));
      }
    };
  });

  const [state, setState] = useState<{