Function CodeDiffContainer

ts/CodeDiffContainer.tsx:93–154

(props: CodeDiffContainerProps)

// A side-by-side diff of source code.
export function CodeDiffContainer(props: CodeDiffContainerProps) {
  const {filePair, diffOptions, normalizeJSON} = props;
  const [contents, setContents] = React.useState<
    {before: string | null; after: string | null; diffOps: DiffRange[]} | undefined
  >();

  React.useEffect(() => {
    // It would be more correct to set contents=undefined here to get a loading state,
    // but this produces an unnecessary flash for rapid transitions.
    const getDiff = async () => {
      const response = await fetch(`/diff/${filePair.idx}`, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          options: gitDiffOptionsToFlags(diffOptions),
          normalize_json: normalizeJSON,
        }),
      });
      return response.json() as Promise<DiffRange[]>;
    };

    const {a, b} = filePair;
    // Do XHRs for the contents of both sides in parallel and fill in the diff.
    // TODO: split these into three useEffects to avoid over-fetching when diff options change.
    (async () => {
      const [before, after, diffOps] = await Promise.all([
        getOrNull('a', a, normalizeJSON),
        getOrNull('b', b, normalizeJSON),
        getDiff(),
      ]);
      setContents({before, after, diffOps});
    })().catch((e: unknown) => {
      alert('Unable to get diff!');
      console.error(e);
    });
  }, [filePair, diffOptions, normalizeJSON]);

  const isEqualAfterNormalization = React.useMemo(() => {
    return !filePair.no_changes && normalizeJSON && contents && contents.before == contents.after;
  }, [contents, filePair.no_changes, normalizeJSON]);

  return (
    <div>
      <div key={filePair.idx}>
        {contents ? (
          <FileDiff
            filePair={filePair}
            contentsBefore={contents.before}
            contentsAfter={contents.after}
            diffOps={contents.diffOps}
            isEqualAfterNormalization={!!isEqualAfterNormalization}
          />
        ) : (
          'Loading…'
        )}