Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Number of notes in folders #616

Closed
wants to merge 7 commits into from
Closed

feat: Number of notes in folders #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aceedb7
feat: Add count component to navigator item
laudep Sep 5, 2020
2d562f3
feat: Add folder note count prop
laudep Sep 5, 2020
23813c6
feat: Pass amount of notes in folder to folder nav item
laudep Sep 5, 2020
fd5218f
feat: Show totals for all notes, attachments & trash
laudep Sep 5, 2020
00a99bf
feat: Show note count for tags
laudep Sep 5, 2020
162f316
fix: Note count for empty folders/tags
laudep Sep 5, 2020
064834e
Merge branch 'master' into feat/folder_note_counters
laudep Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/atoms/NavigatorItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const Container = styled.div`
.control {
opacity: 1;
}
.counter {
opacity: 0;
}
}

&.visibleControl {
Expand Down Expand Up @@ -107,6 +110,15 @@ const IconContainer = styled.div`
font-size: 18px;
`

const ItemCounter = styled.p`
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: ${({ theme }) => theme.navItemColor};
`

interface NavigatorItemProps {
label: string
iconPath?: string
Expand All @@ -116,6 +128,7 @@ interface NavigatorItemProps {
className?: string
folded?: boolean
active?: boolean
count?: number
subtle?: boolean
onFoldButtonClick?: (event: React.MouseEvent) => void
onClick?: (event: React.MouseEvent) => void
Expand All @@ -135,6 +148,7 @@ const NavigatorItem = ({
className,
folded,
active,
count,
subtle,
onFoldButtonClick,
onClick,
Expand Down Expand Up @@ -179,6 +193,11 @@ const NavigatorItem = ({
</IconContainer>
)}
<Label className={cc([subtle && 'subtle'])}>{label}</Label>
{count !== undefined && (
<ItemCounter className={control ? 'counter' : ''}>
{count}
</ItemCounter>
)}
</ClickableContainer>
{control && <Control className='control'>{control}</Control>}
</Container>
Expand Down
8 changes: 8 additions & 0 deletions src/components/molecules/FolderNavigatorFragment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ const FolderListFragment = ({
)
}, [folderPathnames, storageId, sideNavOpenedItemSet])

const getFolderNoteCount = (folderPathname: string): number =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot use this method everywhere, this will cause each folder nav item component to iterate every note for every change. But populated folders in our hook state are having folderIdSet props. This should be useful to show number of notes in a folder.

Object.values(storage.noteMap).filter(
(note) =>
(!note!.trashed && note!.folderPathname === folderPathname) ||
note!.folderPathname.startsWith(folderPathname + '/')
).length

return (
<>
{openedFolderPathnameList.map((item) => {
Expand All @@ -65,6 +72,7 @@ const FolderListFragment = ({
folderName={item.name}
folderPathname={item.pathname}
folderSetWithSubFolders={folderSetWithSubFolders}
noteCount={getFolderNoteCount(folderPathname)}
createNoteInFolderAndRedirect={createNoteInFolderAndRedirect}
showPromptToCreateFolder={showPromptToCreateFolder}
showPromptToRenameFolder={showPromptToRenameFolder}
Expand Down
2 changes: 2 additions & 0 deletions src/components/molecules/FolderNavigatorItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ interface FolderNavigatorItemProps {
noteCount?: number
folderPathname: string
folderSetWithSubFolders: Set<string>
noteCount?: number
createNoteInFolderAndRedirect: (folderPathname: string) => void
showPromptToCreateFolder: (folderPathname: string) => void
showPromptToRenameFolder: (folderPathname: string) => void
Expand Down Expand Up @@ -230,6 +231,7 @@ const FolderNavigatorItem = ({
active={active}
iconPath={active ? mdiFolderOpen : mdiFolder}
label={folderName}
count={noteCount}
onClick={openFolder}
onDoubleClick={showRenamePrompt}
onContextMenu={openFolderContextMenu}
Expand Down
2 changes: 2 additions & 0 deletions src/components/molecules/StorageNavigatorFragment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,7 @@ const StorageNavigatorFragment = ({
label={t('general.attachments')}
iconPath={mdiPaperclip}
active={attachmentsPageIsActive}
count={attachments.length}
onClick={() => push(attachmentsPagePathname)}
onContextMenu={(event) => {
event.preventDefault()
Expand All @@ -352,6 +353,7 @@ const StorageNavigatorFragment = ({
label={t('general.trash')}
iconPath={mdiTrashCanOutline}
active={trashcanPageIsActive}
count={trashed.length}
onClick={() => push(trashcanPagePathname)}
onContextMenu={(event) => {
event.preventDefault()
Expand Down
6 changes: 6 additions & 0 deletions src/components/molecules/TagListFragment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
const tagListNavItemId = getTagListItemId(storage.id)
const tagListIsFolded = !sideNavOpenedItemSet.has(tagListNavItemId)

const getTagNoteCount = (tagName: string): number =>
Object.values(storage.noteMap).filter(
(note) => !note!.trashed && note!.tags.includes(tagName)
).length

const tagList = useMemo(() => {
return Object.keys(tagMap).map((tagName) => {
const tagPathname = `/app/storages/${storageId}/tags/${tagName}`
Expand All @@ -37,6 +42,7 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
depth={1}
iconPath={mdiPound}
label={tagName}
count={getTagNoteCount(tagName)}
onClick={() => {
push(tagPathname)
}}
Expand Down