Translate timeline dates to selected language
This commit is contained in:
parent
e0e678e144
commit
2a5448d7a0
|
@ -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<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
|
|
@ -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
|
|
@ -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
|
Loading…
Reference in New Issue