Show available entries

electron/editor.ts

@@ -3,7 +3,8 @@ import { store } from './main'
 import { Settings } from '../shared/settings'
 import { getSettings } from './settings'
 import path from 'node:path'
-import { access, mkdir, readFile, writeFile } from 'fs/promises'
+import { access, mkdir, readFile, writeFile, readdir } from 'fs/promises'
+import moment from 'moment'
 
 export const writeDiary = (
   _: IpcMainEvent,
@@ -64,12 +65,7 @@ export const doesDiaryDayExist = async (
     settings.diaryLocation,
     `${year}/${trueMonth}/${day}/${trueMonth}-${day}-${year}.md`
   )
-  try {
-    await access(diaryDayPath)
-    return true
-  } catch (error) {
-    return false
-  }
+  return await doesFileExist(diaryDayPath)
 }
 
 export const openDirectory = async () => {
@@ -88,3 +84,54 @@ export const openDirectory = async () => {
   }
   return false
 }
+
+const doesFileExist = async (path: string) => {
+  try {
+    await access(path)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export const availableEntries = async (_: IpcMainInvokeEvent, year: number) => {
+  const diaryPath = getSettings().diaryLocation
+  const availableEntries = new Set<string>()
+
+  if (!(await doesFileExist(path.join(diaryPath, `${year}`)))) {
+    return availableEntries
+  }
+
+  const months = (await readdir(path.join(diaryPath, `${year}`))).filter(
+    (month) => {
+      return parseInt(month) < 13 && parseInt(month) > 0
+    }
+  )
+
+  await Promise.all(
+    months.map(async (month) => {
+      const days = (
+        await readdir(path.join(diaryPath, `${year}/${month}`))
+      ).filter((d) => {
+        const daysInMonth = moment([year, parseInt(month) - 1]).daysInMonth()
+        const day = parseInt(d)
+        return day > 0 && day <= daysInMonth
+      })
+
+      await Promise.all(
+        days.map(async (day) => {
+          const diaryDayPath = path.join(
+            diaryPath,
+            `${year}/${month}/${day}/${month}-${day}-${year}.md`
+          )
+
+          if (await doesFileExist(diaryDayPath)) {
+            availableEntries.add(`${month}-${day}-${year}`)
+          }
+        })
+      )
+    })
+  )
+
+  return availableEntries
+}

electron/main.ts

@@ -1,6 +1,7 @@
 import { app, BrowserWindow, ipcMain, shell } from 'electron'
 import path from 'node:path'
 import {
+  availableEntries,
   doesDiaryDayExist,
   openDirectory,
   readDiary,
@@ -79,6 +80,7 @@ app.whenReady().then(() => {
   ipcMain.handle('open-directory', openDirectory)
   ipcMain.handle('get-settings', getSettings)
   ipcMain.handle('does-diary-exist', doesDiaryDayExist)
+  ipcMain.handle('available-entries', availableEntries)
 
   createWindow()
 })

src/components/Calendar.tsx

@@ -5,9 +5,10 @@ import { months } from '../util/date'
 
 type DayProps = {
   date: CalendarDate
+  entryAvailable?: boolean
 }
 
-const Day: React.FC<DayProps> = ({ date }) => {
+const Day: React.FC<DayProps> = ({ date, entryAvailable }) => {
   const dayPassed = moment([date.year, date.month, date.day]).isBefore(
     moment().startOf('day')
   )
@@ -16,14 +17,15 @@ const Day: React.FC<DayProps> = ({ date }) => {
     moment().startOf('day')
   )
 
-  const bg =
-    date.siblingMonth && dayPassed
-      ? 'bg-daypassed'
-      : dayPassed
-      ? 'bg-daypassed'
-      : isToday
-      ? 'bg-today'
-      : ''
+  const bg = entryAvailable
+    ? 'bg-available'
+    : date.siblingMonth && dayPassed
+    ? 'bg-daypassed'
+    : dayPassed
+    ? 'bg-daypassed'
+    : isToday
+    ? 'bg-today'
+    : ''
 
   return (
     <div
@@ -41,9 +43,14 @@ const Day: React.FC<DayProps> = ({ date }) => {
 type CalendarProps = {
   month: number
   year: number
+  availableEntries: Set<string>
 }
 
-const Calendar: React.FC<CalendarProps> = ({ month, year }) => {
+const Calendar: React.FC<CalendarProps> = ({
+  month,
+  year,
+  availableEntries,
+}) => {
   const calendar = new CalendarBase({
     siblingMonths: true,
   })
@@ -68,7 +75,20 @@ const Calendar: React.FC<CalendarProps> = ({ month, year }) => {
       <div className={`border border-black grid grid-cols-7`}>
         {days.map(
           (date) =>
-            date && <Day key={`${date.day}-${date.month}`} date={date} />
+            date && (
+              <Day
+                key={`${date.day}-${date.month}`}
+                date={date}
+                entryAvailable={
+                  availableEntries.has(
+                    `${date.month + 1}-${date.day}-${date.year}`
+                  ) &&
+                  moment([date.year, date.month, date.day]).isBefore(
+                    moment().startOf('day')
+                  )
+                }
+              />
+            )
         )}
       </div>
     </div>

src/pages/HomePage.tsx

@@ -13,6 +13,9 @@ const HomePage = () => {
       : moment().year().toString()
   const [year, setYear] = useState(parseInt(savedYear))
 
+  const [availableEntries, setAvailableEntries] = useState<Set<string>>(
+    new Set()
+  )
   const { loadSettings } = useContext(SettingsContext)
   const calendarListRef = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll({
@@ -41,6 +44,12 @@ const HomePage = () => {
     }
   }, [])
 
+  useEffect(() => {
+    window.ipcRenderer.invoke('available-entries', year).then((res) => {
+      setAvailableEntries(res)
+    })
+  }, [year])
+
   return (
     <div className="h-screen">
       <div className="fixed left-0 top-0 z-10">
@@ -80,7 +89,13 @@ const HomePage = () => {
             e.preventDefault()
             window.ipcRenderer.invoke('open-directory').then((res) => {
               if (res) {
-                loadSettings()
+                loadSettings().then(() =>
+                  window.ipcRenderer
+                    .invoke('available-entries', year)
+                    .then((res) => {
+                      setAvailableEntries(res)
+                    })
+                )
               }
             })
           }}
@@ -101,7 +116,11 @@ const HomePage = () => {
             key={i}
             className="snap-center relative flex justify-center items-center h-full"
           >
-            <Calendar month={i} year={year} />
+            <Calendar
+              month={i}
+              year={year}
+              availableEntries={availableEntries}
+            />
           </div>
         ))}
       </div>

tailwind.config.js

@@ -52,6 +52,7 @@ module.exports = {
         },
         daypassed: '#D8D1D1',
         today: '#A9E0F1',
+        available: '#8AF4BB',
       },
       borderRadius: {
         lg: 'var(--radius)',