Function DiffViewer

src/components/common/DiffViewer.tsx:76–272

({
  packageName,
  language,
  fromVersion,
  toVersion,
  shouldShowDiff,
  selectedChanges,
  onToggleChangeSelection,
  appName,
  appPackage,
}: DiffViewerProps)

  appPackage: string
}
const DiffViewer = ({
  packageName,
  language,
  fromVersion,
  toVersion,
  shouldShowDiff,
  selectedChanges,
  onToggleChangeSelection,
  appName,
  appPackage,
}: DiffViewerProps) => {
  const { isLoading, isDone, diff } = useFetchDiff({
    shouldShowDiff,
    packageName,
    language,
    fromVersion,
    toVersion,
  })
  const [completedDiffs, setCompletedDiffs] = useState<string[]>([])
  const [isGoToDoneClicked, setIsGoToDoneClicked] = useState<boolean>(false)
  const donePopoverPossibleOpts = {
    done: {
      content: 'Scroll to Done section',
      cursorType: 's-resize',
    },
    top: {
      content: 'Scroll to Top',
      cursorType: 'n-resize',
    },
  }
  const [donePopoverOpts, setDonePopoverOpts] = useState(
    donePopoverPossibleOpts.done
  )
  const doneTitleRef = useRef(null)

  const scrollToDone = () => scrollToRef(doneTitleRef)
  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })

  const handleCompletedFilesCounterClick = () => {
    setIsGoToDoneClicked(!isGoToDoneClicked)
    if (isGoToDoneClicked) {
      setDonePopoverOpts(donePopoverPossibleOpts.done)
      scrollToTop()
    } else {
      setDonePopoverOpts(donePopoverPossibleOpts.top)
      scrollToDone()
    }
  }

  const handleCompleteDiff = (diffKey: string) => {
    if (completedDiffs.includes(diffKey)) {
      return setCompletedDiffs((prevCompletedDiffs) =>
        prevCompletedDiffs.filter((completedDiff) => completedDiff !== diffKey)
      )
    }

    setCompletedDiffs((prevCompletedDiffs) => [...prevCompletedDiffs, diffKey])
  }