diff --git a/.gitignore b/.gitignore
index 3f82f1ba..9561a581 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,7 @@ yarn-debug.log*
yarn-error.log*
.eslintcache
-# vscode
+# IDEs
+.vscode
__debug_bin
.idea
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 1f9e72fb..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "eslint.workingDirectories": ["ui"]
-}
diff --git a/ui/src/Pages/PhotosPage/PhotosPage.tsx b/ui/src/Pages/PhotosPage/PhotosPage.tsx
index d773409a..093ceb7f 100644
--- a/ui/src/Pages/PhotosPage/PhotosPage.tsx
+++ b/ui/src/Pages/PhotosPage/PhotosPage.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import Layout from '../../components/layout/Layout'
import { useTranslation } from 'react-i18next'
+import TimelineGallery from '../../components/timelineGallery/TimelineGallery'
const PhotosPage = () => {
const { t } = useTranslation()
@@ -8,7 +9,7 @@ const PhotosPage = () => {
return (
<>
- {/* */}
+
>
)
diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
index 7ac6578c..3bbf6f32 100644
--- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import { Link } from 'react-router-dom'
-import styled from 'styled-components'
import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
import {
toggleFavoriteAction,
@@ -13,20 +12,6 @@ import {
TimelineGalleryState,
} from './timelineGalleryReducer'
-const TotalItemsBubble = styled(Link)`
- position: absolute;
- top: 24px;
- right: 6px;
- background-color: white;
- border-radius: 50%;
- padding: 8px 0;
- box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
- color: black;
- width: 36px;
- height: 36px;
- text-align: center;
-`
-
type TimelineGroupAlbumProps = {
dateIndex: number
albumIndex: number
@@ -40,8 +25,11 @@ const TimelineGroupAlbum = ({
mediaState,
dispatchMedia,
}: TimelineGroupAlbumProps) => {
- const { media, mediaTotal, album } =
- mediaState.timelineGroups[dateIndex].groups[albumIndex]
+ const {
+ media,
+ title: albumTitle,
+ id: albumID,
+ } = mediaState.timelineGroups[dateIndex].albums[albumIndex]
const [markFavorite] = useMarkFavoriteMutation()
@@ -79,24 +67,14 @@ const TimelineGroupAlbum = ({
/>
))
- let itemsBubble = null
- const mediaVisibleCount = media.length
- if (mediaTotal > mediaVisibleCount) {
- itemsBubble = (
-
- {`+${Math.min(mediaTotal - mediaVisibleCount, 99)}`}
-
- )
- }
-
return (
-
- {album.title}
+
+ {albumTitle}
{mediaElms}
- {itemsBubble}
+ {/* {itemsBubble} */}
)
diff --git a/ui/src/components/timelineGallery/TimelineGroupDate.tsx b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
index b218d00e..1a4538f3 100644
--- a/ui/src/components/timelineGallery/TimelineGroupDate.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
@@ -27,9 +27,9 @@ const TimelineGroupDate = ({
const group = mediaState.timelineGroups[groupIndex]
- const albumGroupElms = group.groups.map((group, i) => (
+ const albumGroupElms = group.albums.map((album, i) => (