feat: Add current Writing Streak to Daily Notebooks (#2093)

packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx

@@ -18,6 +18,7 @@ type Props = {
   selectedDay?: Date
   selectedDayType?: 'item' | 'template'
   className?: string
+  children?: React.ReactNode
 }
 
 export type InfiniteCalendarInterface = {
@@ -27,7 +28,7 @@ export type InfiniteCalendarInterface = {
 const PageSize = 2
 
 const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
-  ({ activities, onDateSelect, selectedDay, className }: Props, ref) => {
+  ({ activities, onDateSelect, selectedDay, className, children }: Props, ref) => {
     const [expanded, setExpanded] = useState(isMobileScreen() ? false : true)
     const [restoreScrollAfterExpand, setRestoreScrollAfterExpand] = useState(false)
     const scrollerRef = useRef<InfiniteScrollerInterface | null>(null)
@@ -216,6 +217,7 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
             })}
           </InfinteScroller>
         )}
+        {expanded && children}
       </div>
     )
   },

packages/web/src/javascripts/Components/ContentListView/Daily/DailyContentList.tsx

@@ -7,9 +7,9 @@ import { AppPaneId } from '../../Panes/AppPaneMetadata'
 import { createDailyItemsWithToday, createItemsByDateMapping, insertBlanks } from './CreateDailySections'
 import { DailyItemsDay } from './DailyItemsDaySection'
 import { DailyItemCell } from './DailyItemCell'
-import { SNTag } from '@standardnotes/snjs'
+import { SNTag, pluralize } from '@standardnotes/snjs'
 import { CalendarActivity } from '../Calendar/CalendarActivity'
-import { dateToDailyDayIdentifier } from './Utils'
+import { dateToDailyDayIdentifier, getDailyWritingStreak } from './Utils'
 import InfiniteCalendar, { InfiniteCalendarInterface } from '../Calendar/InfiniteCalendar'
 import { InfiniteScrollerInterface, InfinteScroller } from '../InfiniteScroller/InfiniteScroller'
 import { LoggingDomain, log } from '@/Logging'
@@ -50,6 +50,11 @@ const DailyContentList: FunctionComponent<Props> = ({
     return createItemsByDateMapping(items)
   }, [items])
 
+  const currentStreak = useMemo(
+    () => getDailyWritingStreak(todayItem, itemsByDateMapping),
+    [todayItem, itemsByDateMapping],
+  )
+
   useEffect(() => {
     setTodayItem(dailyItems.find((item) => item.isToday) as DailyItemsDay)
   }, [dailyItems])
@@ -182,7 +187,16 @@ const DailyContentList: FunctionComponent<Props> = ({
         selectedDayType={!selectedDay ? undefined : hasItemsOnSelectedDay ? 'item' : 'template'}
         ref={calendarRef}
         className={'flex-column flex'}
-      />
+      >
+        {currentStreak > 0 && (
+          <div className="flex w-full items-center justify-center border-t border-solid border-border bg-secondary-background p-2">
+            <span className="opacity-50">Current Streak</span>
+            <span className="ml-1.5 font-bold">
+              {currentStreak} {pluralize(currentStreak, 'Day', 'Days')}
+            </span>
+          </div>
+        )}
+      </InfiniteCalendar>
 
       <InfinteScroller
         paginateFront={paginateTop}

packages/web/src/javascripts/Components/ContentListView/Daily/Utils.ts

@@ -1,3 +1,37 @@
+import { addDaysToDate } from '@standardnotes/utils'
+import { ListableContentItem } from '../Types/ListableContentItem'
+import { DailyItemsDay } from './DailyItemsDaySection'
+
 export function dateToDailyDayIdentifier(date: Date): string {
   return date.toLocaleDateString()
 }
+
+export function getDailyWritingStreak(
+  todayItem: DailyItemsDay | undefined,
+  itemsByDateMapping: Record<string, ListableContentItem[]>,
+) {
+  if (!todayItem) {
+    return 0
+  }
+
+  const startDay = todayItem.date
+  let checkingDayOffsetFromToday = -1
+  let keepLooping = true
+  let streak = 0
+
+  while (keepLooping) {
+    const checkingDay = addDaysToDate(startDay, checkingDayOffsetFromToday)
+    const items = itemsByDateMapping[dateToDailyDayIdentifier(checkingDay)]
+    if (!items || items?.length === 0) {
+      keepLooping = false
+      break
+    }
+
+    streak++
+    checkingDayOffsetFromToday--
+  }
+
+  const hasEntryForToday = itemsByDateMapping[dateToDailyDayIdentifier(todayItem.date)]?.length > 0
+
+  return streak + (hasEntryForToday ? 1 : 0)
+}