Translate timeline dates to selected language

ui/src/components/timelineGallery/TimelineGallery.tsx

@@ -11,6 +11,11 @@ import useScrollPagination from '../../hooks/useScrollPagination'
 import PaginateLoader from '../PaginateLoader'
 import LazyLoad from '../../helpers/LazyLoad'
 import { useTranslation } from 'react-i18next'
+import {
+  myTimeline,
+  myTimelineVariables,
+  myTimeline_myTimeline,
+} from './__generated__/myTimeline'
 
 const MY_TIMELINE_QUERY = gql`
   query myTimeline($onlyFavorites: Boolean, $limit: Int, $offset: Int) {
@@ -54,6 +59,11 @@ const GalleryWrapper = styled.div`
   overflow-x: hidden;
 `
 
+export type TimelineActiveIndex = {
+  albumGroup: number
+  media: number
+}
+
 const TimelineGallery = () => {
   const { t } = useTranslation()
   const [activeIndex, setActiveIndex] = useState({
@@ -66,7 +76,9 @@ const TimelineGallery = () => {
   const { getParam, setParam } = useURLParameters()
 
   const onlyFavorites = getParam('favorites') == '1' ? true : false
-  const setOnlyFavorites = favorites => setParam('favorites', favorites ? 1 : 0)
+  const setOnlyFavorites = (favorites: boolean) =>
+    setParam('favorites', favorites ? '1' : '0')
+
   const favoritesNeedsRefresh = useRef(false)
 
   const nextMedia = useCallback(() => {
@@ -132,18 +144,21 @@ const TimelineGallery = () => {
     })
   }, [activeIndex])
 
-  const { data, error, loading, refetch, fetchMore } = useQuery(
-    MY_TIMELINE_QUERY,
-    {
+  const { data, error, loading, refetch, fetchMore } = useQuery<
+    myTimeline,
+    myTimelineVariables
+  >(MY_TIMELINE_QUERY, {
     variables: {
       onlyFavorites,
       offset: 0,
       limit: 50,
     },
-    }
-  )
+  })
 
-  const { containerElem, finished: finishedLoadingMore } = useScrollPagination({
+  const {
+    containerElem,
+    finished: finishedLoadingMore,
+  } = useScrollPagination<myTimeline>({
     loading,
     fetchMore,
     data,
@@ -171,8 +186,13 @@ const TimelineGallery = () => {
     return <div>{error.message}</div>
   }
 
+  type TimelineGroup = {
+    date: string
+    groups: myTimeline_myTimeline[]
+  }
+
   let timelineGroups = null
-  let dateGroupedAlbums = []
+  let dateGroupedAlbums: TimelineGroup[] = []
   if (data?.myTimeline) {
     dateGroupedAlbums = data.myTimeline.reduce((acc, val) => {
       if (acc.length == 0 || acc[acc.length - 1].date != val.date) {
@@ -185,7 +205,7 @@ const TimelineGallery = () => {
       }
 
       return acc
-    }, [])
+    }, [] as TimelineGroup[])
 
     timelineGroups = dateGroupedAlbums.map(({ date, groups }, i) => (
       <TimelineGroupDate

ui/src/components/timelineGallery/TimelineGroupAlbum.tsx

@@ -1,10 +1,13 @@
 import React, { useContext } from 'react'
-import PropTypes from 'prop-types'
-import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
-import styled from 'styled-components'
-import { SidebarContext } from '../sidebar/Sidebar'
-import MediaSidebar from '../sidebar/MediaSidebar'
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
+import MediaSidebar from '../sidebar/MediaSidebar'
+import { SidebarContext } from '../sidebar/Sidebar'
+import {
+  myTimeline_myTimeline_album,
+  myTimeline_myTimeline_media,
+} from './__generated__/myTimeline'
 
 const MediaWrapper = styled.div`
   display: flex;
@@ -51,13 +54,25 @@ const TotalItemsBubble = styled(Link)`
   text-align: center;
 `
 
+type TimelineGroupAlbumProps = {
+  group: {
+    album: myTimeline_myTimeline_album
+    media: myTimeline_myTimeline_media[]
+    mediaTotal: number
+  }
+  onSelectMedia(index: number): void
+  setPresenting: React.Dispatch<React.SetStateAction<boolean>>
+  activeIndex: number
+  onFavorite(): void
+}
+
 const TimelineGroupAlbum = ({
   group: { album, media, mediaTotal },
   onSelectMedia,
   setPresenting,
   activeIndex,
   onFavorite,
-}) => {
+}: TimelineGroupAlbumProps) => {
   const { updateSidebar } = useContext(SidebarContext)
 
   const mediaElms = media.map((media, i) => (
@@ -98,12 +113,4 @@ const TimelineGroupAlbum = ({
   )
 }
 
-TimelineGroupAlbum.propTypes = {
-  group: PropTypes.object.isRequired,
-  onSelectMedia: PropTypes.func.isRequired,
-  setPresenting: PropTypes.func.isRequired,
-  activeIndex: PropTypes.number.isRequired,
-  onFavorite: PropTypes.func,
-}
-
 export default TimelineGroupAlbum

ui/src/components/timelineGallery/TimelineGroupDate.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import TimelineGroupAlbum from './TimelineGroupAlbum'
 import styled from 'styled-components'
+import { myTimeline_myTimeline } from './__generated__/myTimeline'
+import { TimelineActiveIndex } from './TimelineGallery'
+import { useTranslation } from 'react-i18next'
 
-const dateFormatter = new Intl.DateTimeFormat(navigator.language, {
+const dateFormatterOptions: Intl.DateTimeFormatOptions = {
   year: 'numeric',
   month: 'long',
   day: 'numeric',
-})
-
+}
 const GroupDateWrapper = styled.div`
   margin: 12px 12px;
 `
@@ -24,6 +25,15 @@ const GroupAlbumWrapper = styled.div`
   margin: 0 -8px;
 `
 
+type TimelineGroupDateProps = {
+  date: string
+  groups: myTimeline_myTimeline[]
+  onSelectDateGroup(args: { media: number; albumGroup: number }): void
+  activeIndex: TimelineActiveIndex
+  setPresenting: React.Dispatch<React.SetStateAction<boolean>>
+  onFavorite(): void
+}
+
 const TimelineGroupDate = ({
   date,
   groups,
@@ -31,7 +41,9 @@ const TimelineGroupDate = ({
   activeIndex,
   setPresenting,
   onFavorite,
-}) => {
+}: TimelineGroupDateProps) => {
+  const { i18n } = useTranslation()
+
   const albumGroupElms = groups.map((group, i) => (
     <TimelineGroupAlbum
       key={`${group.date}_${group.album.id}`}
@@ -48,6 +60,11 @@ const TimelineGroupDate = ({
     />
   ))
 
+  const dateFormatter = new Intl.DateTimeFormat(
+    i18n.language,
+    dateFormatterOptions
+  )
+
   const formattedDate = dateFormatter.format(new Date(date))
 
   return (
@@ -58,13 +75,4 @@ const TimelineGroupDate = ({
   )
 }
 
-TimelineGroupDate.propTypes = {
-  date: PropTypes.string.isRequired,
-  groups: PropTypes.array.isRequired,
-  onSelectDateGroup: PropTypes.func.isRequired,
-  activeIndex: PropTypes.object.isRequired,
-  setPresenting: PropTypes.func.isRequired,
-  onFavorite: PropTypes.func,
-}
-
 export default TimelineGroupDate