More typescript updates.

Also updates the UsefulLinks class to a functional component

Author: markrickert

@types/index.d.ts

@@ -26,7 +26,7 @@
     "react": "18.2.0",
     "react-content-loader": "6.2.0",
     "react-copy-to-clipboard": "5.1.0",
-    "react-diff-view": "2.4.2",
+    "react-diff-view": "^3.2.0",
     "react-dom": "18.2.0",
     "react-dom-confetti": "0.2.0",
     "react-ga": "3.3.1",
@@ -46,6 +46,7 @@
     "@types/react": "18.2.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.18",
+    "@types/semver": "^7.5.6",
     "@types/use-persisted-state": "^0.3.4",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",

package.json

@@ -47,26 +47,32 @@ interface BinaryListProps {
   packageName: string
 }
 
-const BinaryList = ({
+const BinaryList: React.FC<BinaryListProps> = ({
   binaryFiles,
   toVersion,
   appName,
   packageName,
-}: BinaryListProps) =>
-  binaryFiles.map(({ newPath }, index) => {
-    return (
-      <BinaryRow key={index} index={index}>
-        {removeAppPathPrefix(newPath, appName)}
+}) => {
+  return (
+    <>
+      {binaryFiles.map(({ newPath }, index) => {
+        return (
+          <BinaryRow key={index} index={index}>
+            {removeAppPathPrefix(newPath, appName)}
+
+            <DownloadFileButton
+              open={true}
+              version={toVersion}
+              path={newPath}
+              packageName={packageName}
+            />
+          </BinaryRow>
+        )
+      })}
+    </>
+  )
+}
 
-        <DownloadFileButton
-          open={true}
-          version={toVersion}
-          path={newPath}
-          packageName={packageName}
-        />
-      </BinaryRow>
-    )
-  })
 interface BinaryDownloadProps {
   diff: any[]
   fromVersion: string

src/components/common/BinaryDownload.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
 import { Button, Popover } from 'antd'
+import type { ButtonProps } from 'antd'
 import { getBinaryFileURL, replaceAppDetails } from '../../utils'
 import { CopyOutlined } from '@ant-design/icons'
 
@@ -9,8 +10,25 @@ const popoverContentOpts = {
   copied: 'Copied!',
 }
 
+interface CopyFileButtonProps extends ButtonProps {
+  open: boolean
+  version: string
+  path: string
+  packageName: string
+  appName: string
+  appPackage: string
+}
+
 const CopyFileButton = styled(
-  ({ open, version, path, packageName, appName, appPackage, ...props }) => {
+  ({
+    open,
+    version,
+    path,
+    packageName,
+    appName,
+    appPackage,
+    ...props
+  }: CopyFileButtonProps) => {
     const [popoverContent, setPopoverContent] = useState(
       popoverContentOpts.default
     )

src/components/common/CopyFileButton.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
-import { HTMLMotionProps, motion } from 'framer-motion'
+import { HTMLMotionProps, MotionProps, motion } from 'framer-motion'
 import { removeAppPathPrefix, getVersionsContentInDiff } from '../../../utils'
 import Markdown from '../Markdown'
 import type { Theme } from '../../../theme'
-interface ContainerProps extends HTMLMotionProps<'div'> {
+interface ContainerProps
+  extends React.PropsWithChildren<HTMLMotionProps<'div'>> {
   isCommentOpen: boolean
   lineChangeType: 'add' | 'delete'
   theme?: Theme
@@ -28,7 +29,7 @@ const Container = styled(
         }}
         inherit={false}
       >
-        <div children={children} />
+        <div>{children}</div>
       </motion.div>
     )
   }
@@ -62,7 +63,7 @@ const ContentContainer = styled.div<ContentContainerProps>`
   user-select: none;
 `
 
-interface ShowButtonProps extends DivProps {
+interface ShowButtonProps extends HTMLMotionProps<'div'> {
   isCommentOpen: boolean
   theme?: Theme
 }

src/components/common/Diff/DiffComment.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled'
 import { Radio } from 'antd'
 import type { Theme } from '../../../theme'
 
+export type DiffViewStyle = 'split' | 'unified'
 interface DiffViewStyleOptionsProps {
-  handleViewStyleChange: (style: string) => void
-  diffViewStyle: string
+  handleViewStyleChange: (style: DiffViewStyle) => void
+  diffViewStyle: DiffViewStyle
   theme?: Theme
 }
 const DiffViewStyleOptions = styled(

src/components/common/Diff/DiffViewStyleOptions.tsx

@@ -9,7 +9,7 @@ import DiffSection from './Diff/DiffSection'
 import DiffLoading from './Diff/DiffLoading'
 import UsefulContentSection from './UsefulContentSection'
 import BinaryDownload from './BinaryDownload'
-import ViewStyleOptions from './Diff/DiffViewStyleOptions'
+import ViewStyleOptions, { DiffViewStyle } from './Diff/DiffViewStyleOptions'
 import CompletedFilesCounter from './CompletedFilesCounter'
 import { useFetchDiff } from '../../hooks/fetch-diff'
 import type { Theme } from '../../theme'
@@ -123,11 +123,11 @@ const DiffViewer = ({
 
   const resetCompletedDiffs = () => setCompletedDiffs([])
 
-  const [diffViewStyle, setViewStyle] = useState(
-    localStorage.getItem('viewStyle') || 'split'
+  const [diffViewStyle, setViewStyle] = useState<DiffViewStyle>(
+    (localStorage.getItem('viewStyle') || 'split') as DiffViewStyle
   )
 
-  const handleViewStyleChange = (newViewStyle) => {
+  const handleViewStyleChange = (newViewStyle: DiffViewStyle) => {
     setViewStyle(newViewStyle)
     localStorage.setItem('viewStyle', newViewStyle)
   }

src/components/common/DiffViewer.tsx

@@ -21,7 +21,7 @@ const TroubleshootingGuidesButton = () => {
   const [showContent, setShowContent] = useState(false)
   const hasHandledClick = useRef(false)
 
-  const handlePopoverVisibilityChange = (visibility) => {
+  const handlePopoverVisibilityChange = () => {
     if (hasHandledClick.current) {
       return
     }

src/components/common/TroubleshootingGuidesButton.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { Tooltip } from 'antd'
+import type { Theme } from '../../theme'
 
-const UpgradeSupportAlert = styled((props) => (
+interface UpgradeSupportAlertProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  theme?: Theme
+}
+const UpgradeSupportAlert = styled((props: UpgradeSupportAlertProps) => (
   <div {...props}>
     <span>
       Check out{' '}

src/components/common/UpgradeSupportAlert.tsx

@@ -66,7 +66,8 @@ const Title = styled(({ isContentOpen, ...props }: TitleProps) => (
   padding: 18px 0px 0px 14px;
 `
 
-interface ContentContainerProps extends HTMLMotionProps<'div'> {
+interface ContentContainerProps
+  extends React.PropsWithChildren<HTMLMotionProps<'div'>> {
   isContentOpen: boolean
 }
 
@@ -89,7 +90,7 @@ const ContentContainer = styled(
       }}
       inherit={false}
     >
-      <div children={children} />
+      <div>{children}</div>
     </motion.div>
   )
 )`
@@ -243,7 +244,11 @@ class UsefulContentSection extends Component<
 
           <ContentContainer isContentOpen={isContentOpen}>
             {doesAnyVersionHaveUsefulLinks ? (
-              <UsefulLinks packageName={packageName} versions={versions} />
+              <UsefulLinks
+                packageName={packageName}
+                versions={versions}
+                toVersion={toVersion}
+              />
             ) : null}
 
             <AlignDepsAlert />