From d3c3bc9599d26f53dc8b23a5ce84e6406385c0d2 Mon Sep 17 00:00:00 2001
From: Andy <andy@speirs.dev>
Date: Tue, 28 May 2024 21:19:07 +0100
Subject: [PATCH] feat: add note count to folders

---
 src/api/types.ts                             |  5 +++++
 src/components/FolderList/FolderListItem.tsx | 15 ++++++++++-----
 src/components/FolderList/index.tsx          |  2 +-
 src/components/FolderList/types.ts           |  6 ++++--
 src/components/NotesMoveModal/index.tsx      |  4 ++--
 src/components/Sidebar/Content.tsx           | 12 +++++++++++-
 src/context/folders.ts                       |  5 ++++-
 7 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 8e9c4ed7..8fccd9da 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -10,6 +10,11 @@ export type NoteDocType = {
   text: string,
 };
 
+export type FolderDocType = {
+  name: string,
+  count: number,
+};
+
 export type NoteDocument = RxDocument<NoteDocType>;
 export type NoteCollection = RxCollection<NoteDocType>;
 export type NoteQuery = QueryConstructor<NoteDocType>;
diff --git a/src/components/FolderList/FolderListItem.tsx b/src/components/FolderList/FolderListItem.tsx
index 2cd5cd0c..b9276bac 100644
--- a/src/components/FolderList/FolderListItem.tsx
+++ b/src/components/FolderList/FolderListItem.tsx
@@ -12,16 +12,21 @@ export function FolderListItem({
 
   return (
     <li
-      key={folder}
+      key={folder.name}
       className="group/folder-context-menu relative flex"
       onContextMenu={(event) => event.preventDefault()}
     >
       <Button
-        onClick={() => setCurrentFolder(folder)}
-        active={folder === currentFolder}
+        onClick={() => setCurrentFolder(folder.name)}
+        active={folder.name === currentFolder}
         Icon={FolderIcon}
+        secondaryAction={(
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full text-white bg-dark dark:text-dark text-xs font-medium leading-none">
+            {folder.count <= 99 ? folder.count : '99+'}
+          </span>
+        )}
       >
-        {folder || 'All Notes'}
+        {folder.name || 'All Notes'}
       </Button>
       <Button
         className="hidden group-hover/folder-context-menu:block"
@@ -29,7 +34,7 @@ export function FolderListItem({
         iconOnly
         href={{
           pathname: '/note/',
-          search: folder ? `folder=${folder}` : undefined,
+          search: folder.name ? `folder=${folder.name}` : undefined,
         }}
       >
         Create Note in folder
diff --git a/src/components/FolderList/index.tsx b/src/components/FolderList/index.tsx
index 457ce1b4..5e4a35b3 100644
--- a/src/components/FolderList/index.tsx
+++ b/src/components/FolderList/index.tsx
@@ -35,7 +35,7 @@ export function FolderList({
           items={folders}
         >
           {(folder) => (
-            <FolderListItem key={folder} folder={folder} />
+            <FolderListItem key={folder.name} folder={folder} />
           )}
         </ViewportList>
       </ul>
diff --git a/src/components/FolderList/types.ts b/src/components/FolderList/types.ts
index c00aea54..37df06be 100644
--- a/src/components/FolderList/types.ts
+++ b/src/components/FolderList/types.ts
@@ -1,12 +1,14 @@
 import type { ReactElement } from 'react';
 
+import type { FolderDocType } from '@/api/types';
+
 export type FolderListProps = {
   children?: ReactElement,
-  folders: string[],
+  folders: FolderDocType[],
   isFetching: boolean,
   padding?: boolean,
 };
 
 export type FolderListItemProps = {
-  folder: string,
+  folder: FolderDocType,
 };
diff --git a/src/components/NotesMoveModal/index.tsx b/src/components/NotesMoveModal/index.tsx
index 1a1e70a7..871d569e 100644
--- a/src/components/NotesMoveModal/index.tsx
+++ b/src/components/NotesMoveModal/index.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { moveNote } from '@/api/notes';
 import { Button } from '@/components/Button';
 import { Modal } from '@/components/Modal';
-import { foldersAtom } from '@/context/folders';
+import { folderNamesAtom } from '@/context/folders';
 import { classNames } from '@/utils/classNames';
 import { getTitle } from '@/utils/getTitle';
 import type { NotesMoveModalProps } from './types';
@@ -15,7 +15,7 @@ export function NotesMoveModal({
   setShowMoveNoteModal,
   showMoveNoteModal: note,
 }: NotesMoveModalProps) {
-  const folders = useAtomValue(foldersAtom);
+  const folders = useAtomValue(folderNamesAtom);
   const [selected, setSelected] = useState<string | null>(null);
   const [newFolderName, setNewFolderName] = useState('');
 
diff --git a/src/components/Sidebar/Content.tsx b/src/components/Sidebar/Content.tsx
index cc05c9f6..d23fc152 100644
--- a/src/components/Sidebar/Content.tsx
+++ b/src/components/Sidebar/Content.tsx
@@ -37,7 +37,17 @@ export function Content() {
 
   useEffect(() => {
     const allFolders = notes.map((note) => note.folder ?? '').filter(Boolean);
-    const newFolders = [...new Set(['', ...allFolders])].sort();
+    const newFolders = [...new Set(['', ...allFolders])]
+      .sort()
+      .map((folder) => {
+        const numberOfNotesInFolder = allFolders.filter((item) => item === folder).length;
+
+        return {
+          name: folder,
+          count: folder === '' ? notes.length : numberOfNotesInFolder,
+        };
+      });
+
     // console.log(newFolders);
     setFolders(newFolders);
   }, [notes, setFolders]);
diff --git a/src/context/folders.ts b/src/context/folders.ts
index 6000176d..349ee983 100644
--- a/src/context/folders.ts
+++ b/src/context/folders.ts
@@ -1,4 +1,7 @@
 import { atom } from 'jotai';
 
-export const foldersAtom = atom<string[]>([]);
+import type { FolderDocType } from '@/api/types';
+
+export const foldersAtom = atom<FolderDocType[]>([]);
+export const folderNamesAtom = atom((get) => get(foldersAtom).map((folder) => folder.name));
 export const currentFolderAtom = atom<string | null>(null);