Fix sidebar on people page + add tests

ui/src/Pages/PeoplePage/PeoplePage.test.tsx

@@ -13,12 +13,7 @@ import { myFaces_myFaceGroups } from './__generated__/myFaces'
 
 require('../../localization').setupLocalization()
 
-jest.mock('../../hooks/useScrollPagination', () =>
-  jest.fn(() => ({
-    finished: true,
-    containerElem: jest.fn(),
-  }))
-)
+jest.mock('../../hooks/useScrollPagination')
 
 describe('PeoplePage component', () => {
   const graphqlMocks = [

ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx

@@ -0,0 +1,101 @@
+import '@testing-library/jest-dom'
+
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+import SingleFaceGroup, { SINGLE_FACE_GROUP } from './SingleFaceGroup'
+
+require('../../../localization').setupLocalization()
+
+jest.mock('../../../hooks/useScrollPagination')
+
+test('single face group', async () => {
+  const graphqlMocks = [
+    {
+      request: {
+        query: SINGLE_FACE_GROUP,
+        variables: { limit: 200, offset: 0, id: '123' },
+      },
+      result: {
+        data: {
+          faceGroup: {
+            __typename: 'FaceGroup',
+            id: '2',
+            label: 'Face Group Name',
+            imageFaces: [
+              {
+                __typename: 'ImageFace',
+                id: '1',
+                rectangle: {
+                  __typename: 'FaceRectangle',
+                  minX: 0.4912109971046448,
+                  maxX: 0.5927730202674866,
+                  minY: 0.2998049855232239,
+                  maxY: 0.4013670086860657,
+                },
+                media: {
+                  __typename: 'Media',
+                  id: '10',
+                  type: 'Photo',
+                  title: '122A2785-2.jpg',
+                  thumbnail: {
+                    __typename: 'MediaURL',
+                    url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_lFmZcaN5.jpg',
+                    width: 1024,
+                    height: 1024,
+                  },
+                  highRes: {
+                    __typename: 'MediaURL',
+                    url: 'http://localhost:4001/photo/122A2785-2_e4nCeMHU.jpg',
+                  },
+                  favorite: false,
+                },
+              },
+              {
+                __typename: 'ImageFace',
+                id: '2',
+                rectangle: {
+                  __typename: 'FaceRectangle',
+                  minX: 0.265625,
+                  maxX: 0.3876950144767761,
+                  minY: 0.1917019933462143,
+                  maxY: 0.3705289959907532,
+                },
+                media: {
+                  __typename: 'Media',
+                  id: '52',
+                  type: 'Photo',
+                  title: 'image.png',
+                  thumbnail: {
+                    __typename: 'MediaURL',
+                    url: 'http://localhost:4001/photo/thumbnail_image_png_OwTDG5fM.jpg',
+                    width: 1024,
+                    height: 699,
+                  },
+                  highRes: {
+                    __typename: 'MediaURL',
+                    url: 'http://localhost:4001/photo/image_A2YB0x3z.png',
+                  },
+                  favorite: false,
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  ]
+
+  render(
+    <MockedProvider mocks={graphqlMocks}>
+      <SingleFaceGroup faceGroupID="123" />
+    </MockedProvider>
+  )
+
+  await waitFor(() => {
+    expect(screen.queryByText('Loading media')).not.toHaveClass('active')
+  })
+
+  expect(screen.getByText('Face Group Name')).toBeInTheDocument()
+  expect(screen.getAllByRole('img')).toHaveLength(2)
+})

ui/src/components/albumGallery/AlbumGallery.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useReducer } from 'react'
+import React, { useEffect, useReducer } from 'react'
 import AlbumTitle from '../AlbumTitle'
 import PhotoGallery from '../photoGallery/PhotoGallery'
 import AlbumBoxes from './AlbumBoxes'
@@ -9,8 +9,6 @@ import {
   photoGalleryReducer,
   urlPresentModeSetupHook,
 } from '../photoGallery/photoGalleryReducer'
-import { SidebarContext } from '../sidebar/Sidebar'
-import MediaSidebar from '../sidebar/MediaSidebar'
 
 type AlbumGalleryProps = {
   album?: albumQuery_album
@@ -38,8 +36,6 @@ const AlbumGallery = React.forwardRef(
     }: AlbumGalleryProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const { updateSidebar } = useContext(SidebarContext)
-
     const [mediaState, dispatchMedia] = useReducer(photoGalleryReducer, {
       presenting: false,
       activeIndex: -1,
@@ -50,16 +46,6 @@ const AlbumGallery = React.forwardRef(
       dispatchMedia({ type: 'replaceMedia', media: album?.media || [] })
     }, [album?.media])
 
-    useEffect(() => {
-      if (mediaState.activeIndex != -1) {
-        updateSidebar(
-          <MediaSidebar media={mediaState.media[mediaState.activeIndex]} />
-        )
-      } else {
-        updateSidebar(null)
-      }
-    }, [mediaState.activeIndex])
-
     urlPresentModeSetupHook({
       dispatchMedia,
       openPresentMode: event => {

ui/src/components/photoGallery/PhotoGallery.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext, useEffect } from 'react'
 import styled from 'styled-components'
 import { Loader } from 'semantic-ui-react'
 import { MediaThumbnail, PhotoThumbnail } from './MediaThumbnail'
@@ -15,6 +15,8 @@ import {
   toggleFavoriteAction,
   useMarkFavoriteMutation,
 } from './photoGalleryMutations'
+import MediaSidebar from '../sidebar/MediaSidebar'
+import { SidebarContext } from '../sidebar/Sidebar'
 
 const Gallery = styled.div`
   display: flex;
@@ -61,6 +63,17 @@ const PhotoGallery = ({
 
   const { media, activeIndex, presenting } = mediaState
 
+  const { updateSidebar } = useContext(SidebarContext)
+  useEffect(() => {
+    if (mediaState.activeIndex != -1) {
+      updateSidebar(
+        <MediaSidebar media={mediaState.media[mediaState.activeIndex]} />
+      )
+    } else {
+      updateSidebar(null)
+    }
+  }, [activeIndex])
+
   let photoElements = []
   if (media) {
     photoElements = media.map((media, index) => {

ui/src/components/sidebar/Sidebar.tsx

@@ -48,7 +48,7 @@ interface SidebarContextType {
 export const SidebarContext = createContext<SidebarContextType>({
   updateSidebar: content => {
     console.warn(
-      'SidebarContext: updateSidebar was called before initialezed',
+      'SidebarContext: updateSidebar was called before initialized',
       content
     )
   },

ui/src/components/timelineGallery/TimelineGallery.tsx

@@ -109,15 +109,13 @@ const TimelineGallery = () => {
     },
   })
 
-  const {
-    containerElem,
-    finished: finishedLoadingMore,
-  } = useScrollPagination<myTimeline>({
-    loading,
-    fetchMore,
-    data,
-    getItems: data => data.myTimeline,
-  })
+  const { containerElem, finished: finishedLoadingMore } =
+    useScrollPagination<myTimeline>({
+      loading,
+      fetchMore,
+      data,
+      getItems: data => data.myTimeline,
+    })
 
   useEffect(() => {
     dispatchMedia({

ui/src/hooks/__mocks__/useScrollPagination.ts

@@ -0,0 +1,4 @@
+export default jest.fn(() => ({
+  finished: true,
+  containerElem: jest.fn(),
+}))