feat(app): display total pages (#727)

Author: danadajian

app/backend/src/fetchCurrentPage.ts

@@ -38,6 +38,7 @@ export const fetchCurrentPage = async ({
   return {
     title,
     images,
-    nextPage
+    nextPage,
+    totalPages: paginatedKeys.length
   };
 };

app/backend/test/fetchCurrentPage.test.ts

@@ -45,7 +45,8 @@ describe('fetchCurrentPage', () => {
           url: 'url'
         }
       ],
-      nextPage: 2
+      nextPage: 2,
+      totalPages: 3
     });
   });
 
@@ -63,7 +64,8 @@ describe('fetchCurrentPage', () => {
           url: 'url'
         }
       ],
-      nextPage: 3
+      nextPage: 3,
+      totalPages: 3
     });
   });
 

app/frontend/components/main-page.tsx

@@ -147,6 +147,11 @@ export const MainPage = ({
           </button>
         </div>
 
+        {data?.totalPages && (
+          <p className="mt-4 text-xl font-semibold text-gray-500">
+            Change {page} of {data.totalPages}
+          </p>
+        )}
         <div className="mt-8">
           <UpdateImagesButton
             disabled={isFetching || !hasViewedAllPages}

app/frontend/cypress/component/App.cy.tsx

@@ -95,6 +95,12 @@ describe('App', () => {
       cy.findByRole('button', { name: /side-by-side/i }).should('be.enabled');
     });
 
+    it('should display the current page and total pages', () => {
+      cy.findByText('Change 1 of 2').should('be.visible');
+      cy.findByRole('button', { name: /forward-arrow/ }).click();
+      cy.findByText('Change 2 of 2').should('be.visible');
+    });
+
     it('should disable accept visual changes button until all pages have been viewed', () => {
       cy.findByRole('button', { name: 'Accept visual changes' }).should(
         'be.disabled'

app/frontend/cypress/mocks/pages.ts

@@ -19,7 +19,8 @@ export const firstPage: TRPCResponse<RouterOutput['fetchCurrentPage']> = {
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQMAAAD1s08VAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAhUL+/v6CHFtpAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4GGT76ywYAAACHSURBVHja7cExAQAAAMKg9U9tCU+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHgaxN8AAZz3lEoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDY6MjUrMDA6MDCGL2bVAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA2OjI1KzAwOjAw93LeaQAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: 2
+      nextPage: 2,
+      totalPages: 2
     }
   }
 };
@@ -42,7 +43,8 @@ export const secondPage: TRPCResponse<RouterOutput['fetchCurrentPage']> = {
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAMsAQMAAACV2HCgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAhUL+/v6CHFtpAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4IH0kaQ70AAAA8SURBVHja7cExAQAAAMKg9U/tbwagAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3mEAAAXvk0ysAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDg6MzErMDA6MDCgA3LrAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA4OjMxKzAwOjAw0V7KVwAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: undefined
+      nextPage: undefined,
+      totalPages: 2
     }
   }
 };
@@ -59,7 +61,8 @@ export const onlyNewImagesFirstPage: TRPCResponse<
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQMAAAD1s08VAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAhUL+/v6CHFtpAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4GGT76ywYAAACHSURBVHja7cExAQAAAMKg9U9tCU+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHgaxN8AAZz3lEoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDY6MjUrMDA6MDCGL2bVAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA2OjI1KzAwOjAw93LeaQAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: 2
+      nextPage: 2,
+      totalPages: 2
     }
   }
 };
@@ -76,7 +79,8 @@ export const onlyNewImagesSecondPage: TRPCResponse<
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAMsAQMAAACV2HCgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAhUL+/v6CHFtpAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4IH0kaQ70AAAA8SURBVHja7cExAQAAAMKg9U/tbwagAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3mEAAAXvk0ysAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDg6MzErMDA6MDCgA3LrAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA4OjMxKzAwOjAw0V7KVwAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: undefined
+      nextPage: undefined,
+      totalPages: 2
     }
   }
 };
@@ -95,7 +99,8 @@ export const noNewImagesPage: TRPCResponse<RouterOutput['fetchCurrentPage']> = {
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAMsAQMAAACV2HCgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX97TX///8bZJ7nAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4INguo29EAAAA8SURBVHja7cExAQAAAMKg9U/tbwagAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3mEAAAXvk0ysAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDg6NTQrMDA6MDA0VFTLAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA4OjU0KzAwOjAwRQnsdwAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: undefined
+      nextPage: undefined,
+      totalPages: 2
     }
   }
 };
@@ -114,7 +119,8 @@ export const noDiffImagePage: TRPCResponse<RouterOutput['fetchCurrentPage']> = {
           url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAMsAQMAAACV2HCgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAhUL+/v6CHFtpAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+YHAQ4IH0kaQ70AAAA8SURBVHja7cExAQAAAMKg9U/tbwagAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3mEAAAXvk0ysAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDctMDFUMTQ6MDg6MzErMDA6MDCgA3LrAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA3LTAxVDE0OjA4OjMxKzAwOjAw0V7KVwAAAABJRU5ErkJggg=='
         }
       ],
-      nextPage: undefined
+      nextPage: undefined,
+      totalPages: 1
     }
   }
 };