feat: persist completed file progress

src/__tests__/hooks/use-completed-diffs.spec.ts

@@ -0,0 +1,140 @@
+import { act, renderHook } from '@testing-library/react'
+import {
+  getCompletedDiffsStorageKey,
+  getDiffIdentity,
+  useCompletedDiffs,
+} from '../../hooks/use-completed-diffs'
+
+class MemoryStorage {
+  private values = new Map<string, string>()
+
+  getItem(key: string) {
+    return this.values.get(key) ?? null
+  }
+
+  setItem(key: string, value: string) {
+    this.values.set(key, value)
+  }
+}
+
+const reactNativeContext = {
+  packageName: 'react-native',
+  fromVersion: '0.76.0',
+  toVersion: '0.77.0',
+}
+
+describe('useCompletedDiffs', () => {
+  it('uses raw diff paths as the stable file identity', () => {
+    expect(
+      getDiffIdentity({
+        oldPath: 'RnDiffApp/ios/RnDiffApp/AppDelegate.mm',
+        newPath: 'MyApp/ios/MyApp/AppDelegate.mm',
+      })
+    ).toBe(
+      '["RnDiffApp/ios/RnDiffApp/AppDelegate.mm","MyApp/ios/MyApp/AppDelegate.mm"]'
+    )
+  })
+
+  it('creates a versioned key scoped to package, versions, and optional language', () => {
+    expect(getCompletedDiffsStorageKey(reactNativeContext)).toBe(
+      'upgrade-helper:completed-diffs:v1:package=react-native&from=0.76.0&to=0.77.0'
+    )
+
+    const cppKey = getCompletedDiffsStorageKey({
+      packageName: 'react-native-windows',
+      language: 'cpp',
+      fromVersion: '0.76.0',
+      toVersion: '0.77.0',
+    })
+    const csharpKey = getCompletedDiffsStorageKey({
+      packageName: 'react-native-windows',
+      language: 'cs',
+      fromVersion: '0.76.0',
+      toVersion: '0.77.0',
+    })
+
+    expect(cppKey).not.toBe(csharpKey)
+  })
+
+  it('hydrates only unique file identities that still exist in the diff', () => {
+    const storage = new MemoryStorage()
+    const storageKey = getCompletedDiffsStorageKey(reactNativeContext)
+    storage.setItem(
+      storageKey,
+      JSON.stringify(['file-a', 'stale-file', 'file-a', 123, null])
+    )
+
+    const { result } = renderHook(() =>
+      useCompletedDiffs({
+        context: reactNativeContext,
+        isDone: true,
+        validDiffKeys: ['file-a', 'file-b'],
+        storage,
+      })
+    )
+
+    expect(result.current.completedDiffs).toEqual(['file-a'])
+  })
+
+  it('persists toggles and restores progress when the upgrade context changes', () => {
+    const storage = new MemoryStorage()
+    const secondContext = {
+      ...reactNativeContext,
+      toVersion: '0.78.0',
+    }
+
+    const { result, rerender } = renderHook(
+      ({ context }) =>
+        useCompletedDiffs({
+          context,
+          isDone: true,
+          validDiffKeys: ['file-a', 'file-b'],
+          storage,
+        }),
+      { initialProps: { context: reactNativeContext } }
+    )
+
+    act(() => result.current.handleCompleteDiff('file-a'))
+    expect(result.current.completedDiffs).toEqual(['file-a'])
+
+    rerender({ context: secondContext })
+    expect(result.current.completedDiffs).toEqual([])
+
+    act(() => result.current.handleCompleteDiff('file-b'))
+    rerender({ context: reactNativeContext })
+    expect(result.current.completedDiffs).toEqual(['file-a'])
+  })
+
+  it('keeps in-memory progress when browser storage is unavailable', () => {
+    const storage = {
+      getItem: () => {
+        throw new Error('storage disabled')
+      },
+      setItem: () => {
+        throw new Error('storage disabled')
+      },
+    }
+
+    const { result, rerender } = renderHook(
+      ({ context }) =>
+        useCompletedDiffs({
+          context,
+          isDone: true,
+          validDiffKeys: ['file-a'],
+          storage,
+        }),
+      { initialProps: { context: reactNativeContext } }
+    )
+
+    act(() => result.current.handleCompleteDiff('file-a'))
+    expect(result.current.completedDiffs).toEqual(['file-a'])
+
+    rerender({
+      context: {
+        ...reactNativeContext,
+        toVersion: '0.78.0',
+      },
+    })
+    expect(result.current.completedDiffs).toEqual([])
+  })
+})

src/components/common/DiffViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useReducer } from 'react'
+import React, { useState, useMemo, useRef, useReducer } from 'react'
 import styled from '@emotion/styled'
 import { Alert } from 'antd'
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion'
@@ -16,6 +16,11 @@ import BinaryDownload from './BinaryDownload'
 import ViewStyleOptions from './Diff/DiffViewStyleOptions'
 import CompletedFilesCounter from './CompletedFilesCounter'
 import { useFetchDiff } from '../../hooks/fetch-diff'
+import {
+  getDiffIdentity,
+  useCompletedDiffs,
+} from '../../hooks/use-completed-diffs'
+import { PACKAGE_NAMES } from '../../constants'
 import type { Theme } from '../../theme'
 import type { File } from 'gitdiff-parser'
 
@@ -37,14 +42,6 @@ const Link = styled.a<{ theme?: Theme }>`
   color: ${({ theme }) => theme.link};
 `
 
-const getDiffKey = ({
-  oldRevision,
-  newRevision,
-}: {
-  oldRevision: string
-  newRevision: string
-}) => `${oldRevision}${newRevision}`
-
 const scrollToRef = (ref?: React.RefObject<HTMLElement>) =>
   ref?.current?.scrollIntoView({ behavior: 'smooth' })
 
@@ -91,7 +88,17 @@ const DiffViewer = ({
     fromVersion,
     toVersion,
   })
-  const [completedDiffs, setCompletedDiffs] = useState<string[]>([])
+  const validDiffKeys = useMemo(() => diff.map(getDiffIdentity), [diff])
+  const { completedDiffs, handleCompleteDiff } = useCompletedDiffs({
+    context: {
+      packageName,
+      language: packageName === PACKAGE_NAMES.RNW ? language : undefined,
+      fromVersion,
+      toVersion,
+    },
+    isDone,
+    validDiffKeys,
+  })
   const [isGoToDoneClicked, setIsGoToDoneClicked] = useState<boolean>(false)
   const donePopoverPossibleOpts = {
     done: {
@@ -122,16 +129,6 @@ const DiffViewer = ({
     }
   }
 
-  const handleCompleteDiff = (diffKey: string) => {
-    if (completedDiffs.includes(diffKey)) {
-      return setCompletedDiffs((prevCompletedDiffs) =>
-        prevCompletedDiffs.filter((completedDiff) => completedDiff !== diffKey)
-      )
-    }
-
-    setCompletedDiffs((prevCompletedDiffs) => [...prevCompletedDiffs, diffKey])
-  }
-
   const renderUpgradeDoneMessage = ({
     diff,
     completedDiffs,
@@ -149,8 +146,6 @@ const DiffViewer = ({
       />
     )
 
-  const resetCompletedDiffs = () => setCompletedDiffs([])
-
   const [diffViewStyle, setViewStyle] = useState<ViewType>(
     (localStorage.getItem('viewStyle') || 'split') as ViewType
   )
@@ -172,12 +167,6 @@ const DiffViewer = ({
     )
   }
 
-  useEffect(() => {
-    if (!isDone) {
-      resetCompletedDiffs()
-    }
-  }, [isDone])
-
   if (!shouldShowDiff) {
     return null
   }
@@ -194,7 +183,7 @@ const DiffViewer = ({
 
   const diffSectionProps = {
     diff: diff,
-    getDiffKey: getDiffKey,
+    getDiffKey: getDiffIdentity,
     completedDiffs: completedDiffs,
     fromVersion: fromVersion,
     toVersion: toVersion,