From 2a5448d7a0f32d3313e4b6d767f279668fce222f Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Sun, 18 Apr 2021 17:44:05 +0200 Subject: [PATCH] Translate timeline dates to selected language --- ...TimelineGallery.js => TimelineGallery.tsx} | 48 +++++++++++++------ ...neGroupAlbum.js => TimelineGroupAlbum.tsx} | 35 ++++++++------ ...lineGroupDate.js => TimelineGroupDate.tsx} | 36 ++++++++------ 3 files changed, 77 insertions(+), 42 deletions(-) rename ui/src/components/timelineGallery/{TimelineGallery.js => TimelineGallery.tsx} (88%) rename ui/src/components/timelineGallery/{TimelineGroupAlbum.js => TimelineGroupAlbum.tsx} (83%) rename ui/src/components/timelineGallery/{TimelineGroupDate.js => TimelineGroupDate.tsx} (64%) diff --git a/ui/src/components/timelineGallery/TimelineGallery.js b/ui/src/components/timelineGallery/TimelineGallery.tsx similarity index 88% rename from ui/src/components/timelineGallery/TimelineGallery.js rename to ui/src/components/timelineGallery/TimelineGallery.tsx index fd166b15..d1639500 100644 --- a/ui/src/components/timelineGallery/TimelineGallery.js +++ b/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, - { - variables: { - onlyFavorites, - offset: 0, - limit: 50, - }, - } - ) + 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({ loading, fetchMore, data, @@ -171,8 +186,13 @@ const TimelineGallery = () => { return
{error.message}
} + 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) => ( > + 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 diff --git a/ui/src/components/timelineGallery/TimelineGroupDate.js b/ui/src/components/timelineGallery/TimelineGroupDate.tsx similarity index 64% rename from ui/src/components/timelineGallery/TimelineGroupDate.js rename to ui/src/components/timelineGallery/TimelineGroupDate.tsx index d39cfc9c..a3ce73c2 100644 --- a/ui/src/components/timelineGallery/TimelineGroupDate.js +++ b/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> + 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) => ( )) + 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