First working version of new timeline

.gitignore

@@ -37,6 +37,7 @@ yarn-debug.log*
 yarn-error.log*
 .eslintcache
 
-# vscode
+# IDEs
+.vscode
 __debug_bin
 .idea

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "eslint.workingDirectories": ["ui"]
-}

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>
     </>
   )

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>
   )

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}

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({