From e7dbe0868d3146d1928974da650fc1f93adea0ee Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Sat, 25 Sep 2021 14:12:12 +0200
Subject: [PATCH] First working version of new timeline

---
 .gitignore                                    |  3 +-
 .vscode/settings.json                         |  3 --
 ui/src/Pages/PhotosPage/PhotosPage.tsx        |  3 +-
 .../timelineGallery/TimelineGroupAlbum.tsx    | 38 ++++---------------
 .../timelineGallery/TimelineGroupDate.tsx     |  4 +-
 .../timelineGalleryReducer.tsx                |  2 +-
 6 files changed, 15 insertions(+), 38 deletions(-)
 delete mode 100644 .vscode/settings.json

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 (
     <>
       <Layout title={t('photos_page.title', 'Photos')}>
-        {/* <TimelineGallery /> */}
+        <TimelineGallery />
       </Layout>
     </>
   )
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 = (
-      <TotalItemsBubble to={`/album/${album.id}`}>
-        {`+${Math.min(mediaTotal - mediaVisibleCount, 99)}`}
-      </TotalItemsBubble>
-    )
-  }
-
   return (
     <div className="mx-2">
-      <Link to={`/album/${album.id}`} className="hover:underline">
-        {album.title}
+      <Link to={`/album/${albumID}`} className="hover:underline">
+        {albumTitle}
       </Link>
       <div className="flex flex-wrap items-center h-[210px] relative -mx-1 pr-4 overflow-hidden">
         {mediaElms}
-        {itemsBubble}
+        {/* {itemsBubble} */}
       </div>
     </div>
   )
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) => (
     <TimelineGroupAlbum
-      key={`${group.date}_${group.album.id}`}
+      key={`${group.date}_${album.id}`}
       dateIndex={groupIndex}
       albumIndex={i}
       mediaState={mediaState}
diff --git a/ui/src/components/timelineGallery/timelineGalleryReducer.tsx b/ui/src/components/timelineGallery/timelineGalleryReducer.tsx
index 4a5b7725..11344dd5 100644
--- a/ui/src/components/timelineGallery/timelineGalleryReducer.tsx
+++ b/ui/src/components/timelineGallery/timelineGalleryReducer.tsx
@@ -214,7 +214,7 @@ function convertMediaToTimelineGroups(
     }
 
     // if date changes
-    if (sameDay(nextAlbum.media[0].date, media.date)) {
+    if (!sameDay(nextAlbum.media[0].date, media.date)) {
       albums.push(nextAlbum)
 
       timelineGroups.push({