From 265f788f986b9cd1ec38d4c120d4c14b808f2c66 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Wed, 1 Sep 2021 08:46:33 +0200 Subject: [PATCH] Restructuring --- src/commands/Dashboard.ts | 2 +- src/models/index.ts | 1 + src/pagesView/components/Dashboard.tsx | 15 +++--- src/pagesView/components/Grouping.tsx | 46 ------------------- .../components/{ => Header}/Filter.tsx | 4 +- src/pagesView/components/Header/Folders.tsx | 42 +++++++++++++++++ src/pagesView/components/Header/Grouping.tsx | 14 ++++++ .../components/{ => Header}/Header.tsx | 35 ++++++++------ .../components/{ => Header}/Searchbox.tsx | 2 +- .../components/{ => Header}/Sorting.tsx | 10 ++-- src/pagesView/components/Header/index.ts | 6 +++ .../components/{ => Menu}/MenuButton.tsx | 0 .../components/{ => Menu}/MenuItem.tsx | 0 .../components/{ => Menu}/MenuItems.tsx | 0 src/pagesView/components/Menu/index.ts | 3 ++ src/pagesView/hooks/usePages.tsx | 8 ++-- src/pagesView/models/Page.ts | 2 +- src/pagesView/models/index.ts | 3 ++ 18 files changed, 110 insertions(+), 83 deletions(-) delete mode 100644 src/pagesView/components/Grouping.tsx rename src/pagesView/components/{ => Header}/Filter.tsx (90%) create mode 100644 src/pagesView/components/Header/Folders.tsx create mode 100644 src/pagesView/components/Header/Grouping.tsx rename src/pagesView/components/{ => Header}/Header.tsx (66%) rename src/pagesView/components/{ => Header}/Searchbox.tsx (96%) rename src/pagesView/components/{ => Header}/Sorting.tsx (77%) create mode 100644 src/pagesView/components/Header/index.ts rename src/pagesView/components/{ => Menu}/MenuButton.tsx (100%) rename src/pagesView/components/{ => Menu}/MenuItem.tsx (100%) rename src/pagesView/components/{ => Menu}/MenuItems.tsx (100%) create mode 100644 src/pagesView/components/Menu/index.ts create mode 100644 src/pagesView/models/index.ts diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 922971e7..b5a454ab 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -177,7 +177,7 @@ export class Dashboard { const page: Page = { ...article.data, // FrontMatter properties - fmGroup: folder.title, + fmFolder: folder.title, fmModified: file.mtime, fmFilePath: file.filePath, fmFileName: file.fileName, diff --git a/src/models/index.ts b/src/models/index.ts index 73ab3027..d6c11209 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -1,3 +1,4 @@ export * from './ContentFolder'; export * from './PanelSettings'; export * from './TaxonomyType'; +export * from './VersionInfo'; diff --git a/src/pagesView/components/Dashboard.tsx b/src/pagesView/components/Dashboard.tsx index cd397d04..56270794 100644 --- a/src/pagesView/components/Dashboard.tsx +++ b/src/pagesView/components/Dashboard.tsx @@ -18,14 +18,15 @@ export const Dashboard: React.FunctionComponent = ({showWelcome const { loading, pages, settings } = useMessages(); const [ tab, setTab ] = React.useState(Tab.All); const [ sorting, setSorting ] = React.useState(SortOption.LastModified); - const [ group, setGroup ] = React.useState(null); + const [ folder, setFolder ] = React.useState(null); const [ search, setSearch ] = React.useState(null); const [ tag, setTag ] = React.useState(null); const [ category, setCategory ] = React.useState(null); - const { pageItems } = usePages(pages, tab, sorting, group, search, tag, category); + const [ group, setGroup ] = React.useState(null); + const { pageItems } = usePages(pages, tab, sorting, folder, search, tag, category); useDarkMode(); - const pageGroups = [...new Set(pages.map(page => page.fmGroup))]; + const pageFolders = [...new Set(pages.map(page => page.fmFolder))]; if (!settings) { return ; @@ -44,16 +45,18 @@ export const Dashboard: React.FunctionComponent = ({showWelcome
setTab(tabId)} switchSorting={(sortId: SortOption) => setSorting(sortId)} - switchGroup={(groupId: string | null) => setGroup(groupId)} + switchFolder={(folderName: string | null) => setFolder(folderName)} switchTag={(tagId: string | null) => setTag(tagId)} switchCategory={(categoryId: string | null) => setCategory(categoryId)} + switchGroup={(groupName: string | null) => setGroup(groupName)} onSearch={(value: string | null) => setSearch(value)} settings={settings} /> diff --git a/src/pagesView/components/Grouping.tsx b/src/pagesView/components/Grouping.tsx deleted file mode 100644 index 6a51c5c9..00000000 --- a/src/pagesView/components/Grouping.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Menu, Transition } from '@headlessui/react'; -import { ChevronDownIcon } from '@heroicons/react/solid'; -import * as React from 'react'; -import { Fragment } from 'react'; -import { MenuButton } from './MenuButton'; -import { MenuItem } from './MenuItem'; -import { MenuItems } from './MenuItems'; - -export interface IGroupingProps { - groups: string[]; - crntGroup: string | null; - switchGroup: (group: string | null) => void; -} - -const DEFAULT_TYPE = "All types"; - -export const Grouping: React.FunctionComponent = ({groups, crntGroup, switchGroup}: React.PropsWithChildren) => { - if (groups.length <= 1) { - return null; - } - - return ( -
- - - - - - - {groups.map((option) => ( - - ))} - - -
- ); -}; \ No newline at end of file diff --git a/src/pagesView/components/Filter.tsx b/src/pagesView/components/Header/Filter.tsx similarity index 90% rename from src/pagesView/components/Filter.tsx rename to src/pagesView/components/Header/Filter.tsx index 238fb2f0..edbc5eba 100644 --- a/src/pagesView/components/Filter.tsx +++ b/src/pagesView/components/Header/Filter.tsx @@ -1,8 +1,6 @@ import { Menu } from '@headlessui/react'; import * as React from 'react'; -import { MenuButton } from './MenuButton'; -import { MenuItem } from './MenuItem'; -import { MenuItems } from './MenuItems'; +import { MenuButton, MenuItem, MenuItems } from '../Menu'; export interface IFilterProps { label: string; diff --git a/src/pagesView/components/Header/Folders.tsx b/src/pagesView/components/Header/Folders.tsx new file mode 100644 index 00000000..e9e85d68 --- /dev/null +++ b/src/pagesView/components/Header/Folders.tsx @@ -0,0 +1,42 @@ +import { Menu, Transition } from '@headlessui/react'; +import * as React from 'react'; +import { MenuButton, MenuItem, MenuItems } from '../Menu'; + +export interface IFoldersProps { + folders: string[]; + crntFolder: string | null; + switchFolder: (group: string | null) => void; +} + +const DEFAULT_TYPE = "All types"; + +export const Folders: React.FunctionComponent = ({folders, crntFolder, switchFolder}: React.PropsWithChildren) => { + if (folders.length <= 1) { + return null; + } + + return ( +
+ + + + + + + {folders.map((option) => ( + + ))} + + +
+ ); +}; \ No newline at end of file diff --git a/src/pagesView/components/Header/Grouping.tsx b/src/pagesView/components/Header/Grouping.tsx new file mode 100644 index 00000000..fd596ea1 --- /dev/null +++ b/src/pagesView/components/Header/Grouping.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; + +export interface IGroupingProps { + crntGroup: string | null; + switchGroup: (group: string | null) => void; +} + +export const Grouping: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src/pagesView/components/Header.tsx b/src/pagesView/components/Header/Header.tsx similarity index 66% rename from src/pagesView/components/Header.tsx rename to src/pagesView/components/Header/Header.tsx index 3e48a656..5c67b7a2 100644 --- a/src/pagesView/components/Header.tsx +++ b/src/pagesView/components/Header/Header.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; -import { Tab } from '../constants/Tab'; -import { SortOption } from '../constants/SortOption'; -import { Navigation } from './Navigation'; import { Sorting } from './Sorting'; -import { Grouping } from './Grouping'; -import { MessageHelper } from '../../helpers/MessageHelper'; -import { DashboardMessage } from '../DashboardMessage'; import { Searchbox } from './Searchbox'; -import { Settings } from '../models/Settings'; -import { Startup } from './Startup'; -import { Button } from './Button'; import { Filter } from './Filter'; +import { Folders } from './Folders'; +import { Settings } from '../../models'; +import { Tab } from '../../constants/Tab'; +import { SortOption } from '../../constants/SortOption'; +import { MessageHelper } from '../../../helpers/MessageHelper'; +import { DashboardMessage } from '../../DashboardMessage'; +import { Startup } from '../Startup'; +import { Button } from '../Button'; +import { Navigation } from '../Navigation'; +import { Grouping } from '.'; export interface IHeaderProps { settings: Settings; @@ -25,9 +26,9 @@ export interface IHeaderProps { switchSorting: (sortId: SortOption) => void; // Grouping - groups: string[]; - crntGroup: string | null; - switchGroup: (group: string | null) => void; + folders: string[]; + crntFolder: string | null; + switchFolder: (folderName: string | null) => void; // Searching onSearch: (value: string | null) => void; @@ -39,9 +40,13 @@ export interface IHeaderProps { // Categories crntCategory: string | null; switchCategory: (category: string | null) => void; + + // Grouping + crntGroup: string | null; + switchGroup: (groupId: string | null) => void; } -export const Header: React.FunctionComponent = ({currentTab, currentSorting, switchSorting, switchTab, totalPages, crntGroup, groups, switchGroup, onSearch, settings, switchTag, crntTag, switchCategory, crntCategory}: React.PropsWithChildren) => { +export const Header: React.FunctionComponent = ({currentTab, currentSorting, switchSorting, switchTab, totalPages, crntFolder, folders, switchFolder, onSearch, settings, switchTag, crntTag, switchCategory, crntCategory, crntGroup, switchGroup}: React.PropsWithChildren) => { const createContent = () => { MessageHelper.sendMessage(DashboardMessage.createContent); @@ -62,12 +67,14 @@ export const Header: React.FunctionComponent = ({currentTab, curre
- + + +
diff --git a/src/pagesView/components/Searchbox.tsx b/src/pagesView/components/Header/Searchbox.tsx similarity index 96% rename from src/pagesView/components/Searchbox.tsx rename to src/pagesView/components/Header/Searchbox.tsx index 56ff48a6..dd436c5b 100644 --- a/src/pagesView/components/Searchbox.tsx +++ b/src/pagesView/components/Header/Searchbox.tsx @@ -1,6 +1,6 @@ import { FilterIcon, SearchIcon } from '@heroicons/react/solid'; import * as React from 'react'; -import { useDebounce } from '../../hooks/useDebounce'; +import { useDebounce } from '../../../hooks/useDebounce'; export interface ISearchboxProps { onSearch: (searchText: string) => void; diff --git a/src/pagesView/components/Sorting.tsx b/src/pagesView/components/Header/Sorting.tsx similarity index 77% rename from src/pagesView/components/Sorting.tsx rename to src/pagesView/components/Header/Sorting.tsx index 15b8a305..9322dc44 100644 --- a/src/pagesView/components/Sorting.tsx +++ b/src/pagesView/components/Header/Sorting.tsx @@ -1,11 +1,7 @@ -import { Menu, Transition } from '@headlessui/react'; +import { Menu } from '@headlessui/react'; import * as React from 'react'; -import { SortOption } from '../constants/SortOption'; -import { ChevronDownIcon } from '@heroicons/react/solid'; -import { Fragment } from 'react'; -import { MenuItem } from './MenuItem'; -import { MenuItems } from './MenuItems'; -import { MenuButton } from './MenuButton'; +import { SortOption } from '../../constants/SortOption'; +import { MenuButton, MenuItem, MenuItems } from '../Menu'; export interface ISortingProps { currentSorting: SortOption; diff --git a/src/pagesView/components/Header/index.ts b/src/pagesView/components/Header/index.ts new file mode 100644 index 00000000..5c186917 --- /dev/null +++ b/src/pagesView/components/Header/index.ts @@ -0,0 +1,6 @@ +export * from './Filter'; +export * from './Folders'; +export * from './Grouping'; +export * from './Header'; +export * from './Searchbox'; +export * from './Sorting'; diff --git a/src/pagesView/components/MenuButton.tsx b/src/pagesView/components/Menu/MenuButton.tsx similarity index 100% rename from src/pagesView/components/MenuButton.tsx rename to src/pagesView/components/Menu/MenuButton.tsx diff --git a/src/pagesView/components/MenuItem.tsx b/src/pagesView/components/Menu/MenuItem.tsx similarity index 100% rename from src/pagesView/components/MenuItem.tsx rename to src/pagesView/components/Menu/MenuItem.tsx diff --git a/src/pagesView/components/MenuItems.tsx b/src/pagesView/components/Menu/MenuItems.tsx similarity index 100% rename from src/pagesView/components/MenuItems.tsx rename to src/pagesView/components/Menu/MenuItems.tsx diff --git a/src/pagesView/components/Menu/index.ts b/src/pagesView/components/Menu/index.ts new file mode 100644 index 00000000..3c477b57 --- /dev/null +++ b/src/pagesView/components/Menu/index.ts @@ -0,0 +1,3 @@ +export * from './MenuButton'; +export * from './MenuItem'; +export * from './MenuItems'; diff --git a/src/pagesView/hooks/usePages.tsx b/src/pagesView/hooks/usePages.tsx index 3c1bf49b..7a40726d 100644 --- a/src/pagesView/hooks/usePages.tsx +++ b/src/pagesView/hooks/usePages.tsx @@ -13,7 +13,7 @@ const fuseOptions: Fuse.IFuseOptions = { ] }; -export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, group: string | null, search: string | null, tag: string | null, category: string | null) { +export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, folder: string | null, search: string | null, tag: string | null, category: string | null) { const [ pageItems, setPageItems ] = useState([]); useEffect(() => { @@ -45,8 +45,8 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, g pagesSorted = pagesToShow.sort((a, b) => b.fmModified - a.fmModified); } - if (group) { - pagesSorted = pagesSorted.filter(page => page.fmGroup === group); + if (folder) { + pagesSorted = pagesSorted.filter(page => page.fmFolder === folder); } // Filter by tag @@ -60,7 +60,7 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, g } setPageItems(pagesSorted); - }, [ pages, tab, sorting, group, search, tag, category ]); + }, [ pages, tab, sorting, folder, search, tag, category ]); return { pageItems diff --git a/src/pagesView/models/Page.ts b/src/pagesView/models/Page.ts index 7c062809..e990216d 100644 --- a/src/pagesView/models/Page.ts +++ b/src/pagesView/models/Page.ts @@ -1,7 +1,7 @@ import { Uri } from "vscode"; export interface Page { - fmGroup: string; + fmFolder: string; fmFilePath: string; fmFileName: string; fmModified: number; diff --git a/src/pagesView/models/index.ts b/src/pagesView/models/index.ts new file mode 100644 index 00000000..0e3b59e1 --- /dev/null +++ b/src/pagesView/models/index.ts @@ -0,0 +1,3 @@ +export * from './Page'; +export * from './Settings'; +export * from './Status';