update docs and tests for new state.progress

transloadit · Nov 12, 2024 · c55cdf0 · c55cdf0
1 parent a19f68e
commit c55cdf0
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/docs/framework-integrations/react.mdx b/docs/framework-integrations/react.mdx
@@ -74,7 +74,7 @@ times, this is needed if you are building a custom UI for Uppy in React.
 const [uppy] = useState(() => new Uppy());
 
 const files = useUppyState(uppy, (state) => state.files);
-const totalProgress = useUppyState(uppy, (state) => state.totalProgress);
+const totalProgress = useUppyState(uppy, (state) => state.progress);
 // We can also get specific plugin state.
 // Note that the value on `plugins` depends on the `id` of the plugin.
 const metaFields = useUppyState(

diff --git a/docs/uppy-core.mdx b/docs/uppy-core.mdx
@@ -794,7 +794,7 @@ const state = {
 	capabilities: {
 		resumableUploads: false,
 	},
-	totalProgress: 0,
+	progress: null,
 	meta: { ...this.opts.meta },
 	info: {
 		isHidden: true,

diff --git a/examples/react-example/App.tsx b/examples/react-example/App.tsx
@@ -77,7 +77,7 @@ export default function App() {
     uppy,
     (state) => Object.keys(state.files).length,
   )
-  const totalProgress = useUppyState(uppy, (state) => state.totalProgress)
+  const totalProgress = useUppyState(uppy, (state) => state.progress)
   // Also possible to get the state of all plugins.
   const plugins = useUppyState(uppy, (state) => state.plugins)
 

diff --git a/examples/react-native-expo/App.js b/examples/react-native-expo/App.js
@@ -39,7 +39,7 @@ export default function App () {
       setState({
         progress: progress.bytesUploaded,
         total: progress.bytesTotal,
-        totalProgress: uppy.state.totalProgress,
+        totalProgress: uppy.state.progress,
         uploadStarted: true,
       })
     })

diff --git a/packages/@uppy/core/src/Uppy.test.ts b/packages/@uppy/core/src/Uppy.test.ts
@@ -361,7 +361,7 @@ describe('src/Core', () => {
     const coreStateUpdateEventMock = vi.fn()
     core.on('cancel-all', coreCancelEventMock)
     core.on('state-update', coreStateUpdateEventMock)
-    core.setState({ foo: 'bar', totalProgress: 30 })
+    core.setState({ foo: 'bar', totalProgress: 30, progress: 30 })
 
     core.cancelAll()
 
@@ -1382,6 +1382,7 @@ describe('src/Core', () => {
       expect(core.getFiles().length).toEqual(1)
       core.setState({
         totalProgress: 50,
+        progress: 30,
       })
 
       const file = core.getFile(fileId)
@@ -1390,6 +1391,7 @@ describe('src/Core', () => {
       expect(core.getFiles().length).toEqual(0)
       expect(fileRemovedEventMock.mock.calls[0][0]).toEqual(file)
       expect(core.getState().totalProgress).toEqual(0)
+      expect(core.getState().progress).toEqual(0)
     })
   })
 
@@ -1796,6 +1798,7 @@ describe('src/Core', () => {
       })
 
       expect(core.getState().totalProgress).toBe(36)
+      expect(core.getState().progress).toBe(36)
 
       // @ts-ignore
       finishUpload()
@@ -1855,6 +1858,7 @@ describe('src/Core', () => {
 
       // foo.jpg at 35%, bar.jpg has unknown size and will not be counted
       expect(core.getState().totalProgress).toBe(36)
+      expect(core.getState().progress).toBe(36)
 
       core.destroy()
     })
@@ -1904,6 +1908,7 @@ describe('src/Core', () => {
       core[Symbol.for('uppy test: updateTotalProgress')]()
 
       expect(core.getState().totalProgress).toEqual(66)
+      expect(core.getState().progress).toBe(66)
     })
 
     it('should emit the progress', () => {
@@ -1948,6 +1953,7 @@ describe('src/Core', () => {
       core[Symbol.for('uppy test: updateTotalProgress')]()
 
       expect(core.getState().totalProgress).toEqual(66)
+      expect(core.getState().progress).toEqual(66)
       expect(core.getState().allowNewUpload).toEqual(true)
       expect(core.getState().error).toEqual(null)
       expect(core.getState().recoveredState).toEqual(null)
@@ -1972,6 +1978,7 @@ describe('src/Core', () => {
       core.clear()
       expect(core.getState()).toMatchObject({
         totalProgress: 0,
+        progress: null,
         allowNewUpload: true,
         error: null,
         recoveredState: null,

diff --git a/packages/@uppy/react/src/useUppyState.test.tsx b/packages/@uppy/react/src/useUppyState.test.tsx
@@ -13,13 +13,23 @@ describe('useUppyState', () => {
     const { result, rerender } = renderHook(() =>
       useUppyState(uppy, (state) => state.totalProgress),
     )
+    const { result: result2, rerender: rerender2 } = renderHook(() =>
+      useUppyState(uppy, (state) => state.progress),
+    )
     expectTypeOf(result.current).toEqualTypeOf<number>()
+    expectTypeOf(result2.current).toEqualTypeOf<number | null>()
     expect(result.current).toBe(0)
+    expect(result2.current).toBe(null)
+    act(() => uppy.setState({ progress: 50 }))
     act(() => uppy.setState({ totalProgress: 50 }))
     rerender()
+    rerender2()
     expect(result.current).toBe(50)
+    expect(result2.current).toBe(50)
     rerender()
+    rerender2()
     expect(result.current).toBe(50)
+    expect(result2.current).toBe(50)
   })
 
   it('does not re-render unnecessarily', () => {