Skip to content

Commit

Permalink
polish
Browse files Browse the repository at this point in the history
  • Loading branch information
steeeee0223 committed Dec 17, 2024
1 parent 02a6e13 commit fc1f6a5
Show file tree
Hide file tree
Showing 13 changed files with 105 additions and 116 deletions.
8 changes: 6 additions & 2 deletions apps/storybook/src/stories/playground/liveblocks-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const LayoutWithLiveblocks = ({ children }: LayoutProps) => {
const setActiveWorkspace = usePlatformStore(
(state) => state.setActiveWorkspace,
);
const { pageId, isLoading, fetchPages, selectPage, updatePage } =
const { pageId, isLoading, selectPage, updatePage, deletePage } =
usePages(activeWorkspace);

return (
Expand Down Expand Up @@ -72,7 +72,11 @@ export const LayoutWithLiveblocks = ({ children }: LayoutProps) => {
onFetchConnections: () => Promise.resolve(mockConnections),
onFetchMemberships: () => Promise.resolve(mockMemberships),
}}
pageHandlers={{ isLoading, fetchPages, onUpdate: updatePage }}
pageHandlers={{
isLoading,
onUpdate: updatePage,
onDelete: deletePage,
}}
WorkspaceSwitcher={
<WorkspaceSwitcher2
user={user!}
Expand Down
4 changes: 2 additions & 2 deletions apps/storybook/src/stories/playground/use-pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export const usePages = (workspaceId: string | null) => {
const setActivePage = usePlatformStore((state) => state.setActivePage);
const setPages = usePlatformStore((state) => state.setPages);
const updatePage = usePlatformStore((state) => state.updatePage);
const deletePage = usePlatformStore((state) => state.deletePage);

const { isLoading } = useSWR<Page[], Error>(workspaceId, fetcher, {
onSuccess: (data) => setPages(data),
onError: (e) => console.log(`[swr:workspace]: ${e.message}`),
});
const fetchPages = () => Promise.resolve(Object.values(mockPages));
const selectPage = (path: string) => {
const [, , id] = path.split("/");
if (!id) return;
Expand All @@ -30,8 +30,8 @@ export const usePages = (workspaceId: string | null) => {
return {
pageId: activePage ?? "#",
isLoading,
fetchPages,
selectPage,
updatePage,
deletePage,
};
};
10 changes: 7 additions & 3 deletions packages/notion/src/sidebar-2/_components/action-group.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import React from "react";
import {
ArrowUpRight,
Expand Down Expand Up @@ -33,7 +35,6 @@ interface ActionGroupProps {
lastEditedBy: string;
lastEditedAt: number;
onCreate?: () => void;
onDelete?: () => void;
onDuplicate?: () => void;
onUpdate: (data: UpdatePageParams) => void;
}
Expand All @@ -47,7 +48,7 @@ export const ActionGroup: React.FC<ActionGroupProps> = ({
lastEditedBy,
lastEditedAt,
onCreate,
onDelete,
// onDelete,
onDuplicate,
onUpdate,
}) => {
Expand Down Expand Up @@ -107,7 +108,10 @@ export const ActionGroup: React.FC<ActionGroupProps> = ({
</DropdownMenuItem>
</RenamePopover>
{type === MenuType.Normal && (
<DropdownMenuItem variant="warning" onSelect={onDelete}>
<DropdownMenuItem
variant="warning"
onSelect={() => onUpdate({ isArchived: true })}
>
<Trash className="mr-2 size-4" />
Move to Trash
</DropdownMenuItem>
Expand Down
16 changes: 5 additions & 11 deletions packages/notion/src/sidebar-2/_components/doc-list.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
"use client";

import React from "react";

import { useOrigin } from "@swy/ui/hooks";
import { buildTree, TreeGroup, TreeItem, TreeList } from "@swy/ui/shared";
import { TreeGroup, TreeItem, TreeList } from "@swy/ui/shared";

import { generateDefaultIcon } from "../../common";
import { usePlatformStore } from "../../slices";
import { selectTreeGroup } from "../../slices/selectors";
import type { UpdatePageParams } from "../../types";
import { ActionGroup } from "./action-group";
import { MenuType } from "./types";
Expand All @@ -15,7 +18,6 @@ interface DocListProps {
isLoading?: boolean;
redirect?: (url: string) => void;
onCreate?: (group: string, parentId?: string) => void;
onArchive?: (id: string) => void;
onDuplicate?: (id: string) => void;
onUpdate?: (id: string, data: UpdatePageParams) => void;
}
Expand All @@ -26,23 +28,16 @@ export const DocList: React.FC<DocListProps> = ({
isLoading,
redirect,
onCreate,
onArchive,
onDuplicate,
onUpdate,
}) => {
const origin = useOrigin();
const defaultIcon = generateDefaultIcon(group);

const pages = usePlatformStore((state) =>
Object.values(state.pages).filter(
(page) => page.type === group && !page.isArchived,
),
);
const nodes = usePlatformStore((state) => selectTreeGroup(state, group));
const activePage = usePlatformStore((state) => state.activePage);
const setActivePage = usePlatformStore((state) => state.setActivePage);

const nodes = buildTree(pages);

const select = (id: string, url?: string) => {
setActivePage(id);
redirect?.(url ?? "#");
Expand Down Expand Up @@ -77,7 +72,6 @@ export const DocList: React.FC<DocListProps> = ({
lastEditedBy={node.lastEditedBy}
lastEditedAt={node.lastEditedAt}
onCreate={() => onCreate?.(group, node.id)}
onDelete={() => onArchive?.(node.id)}
onDuplicate={() => onDuplicate?.(node.id)}
onUpdate={(data) => onUpdate?.(node.id, data)}
/>
Expand Down
24 changes: 5 additions & 19 deletions packages/notion/src/sidebar-2/_components/favorite-list.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
"use client";

import React from "react";

import { useOrigin } from "@swy/ui/hooks";
import {
buildTree,
TreeGroup,
TreeItem,
TreeList,
TreeNode,
} from "@swy/ui/shared";
import { TreeGroup, TreeItem, TreeList } from "@swy/ui/shared";

import { generateDefaultIcon } from "../../common";
import { usePlatformStore } from "../../slices";
import { selectFavorites, usePlatformStore } from "../../slices";
import type { Page, UpdatePageParams } from "../../types";
import { ActionGroup } from "./action-group";
import { MenuType } from "./types";
Expand All @@ -19,7 +15,6 @@ interface FavoriteListProps {
isLoading?: boolean;
redirect?: (url: string) => void;
onCreate?: (group: string, parentId: string) => void;
onArchive?: (id: string) => void;
onDuplicate?: (id: string) => void;
onUpdate?: (id: string, data: UpdatePageParams) => void;
}
Expand All @@ -28,23 +23,15 @@ export const FavoriteList: React.FC<FavoriteListProps> = ({
isLoading,
redirect,
onCreate,
onArchive,
onDuplicate,
onUpdate,
}) => {
const origin = useOrigin();

const pages = usePlatformStore((state) => Object.values(state.pages));
const favorites = pages.filter((page) => page.isFavorite);
const nodes = usePlatformStore((state) => selectFavorites(state));
const activePage = usePlatformStore((state) => state.activePage);
const setActivePage = usePlatformStore((state) => state.setActivePage);

const nodes = favorites.map<TreeNode<Page>>((fav) => ({
...fav,
parentId: null,
children: buildTree(pages, fav.id),
}));

const select = (node: Page) => {
setActivePage(node.id);
redirect?.(node.url ?? "#");
Expand Down Expand Up @@ -73,7 +60,6 @@ export const FavoriteList: React.FC<FavoriteListProps> = ({
lastEditedBy={node.lastEditedBy}
lastEditedAt={node.lastEditedAt}
onCreate={() => onCreate?.(node.type, node.id)}
onDelete={() => onArchive?.(node.id)}
onDuplicate={() => onDuplicate?.(node.id)}
onUpdate={(data) => onUpdate?.(node.id, data)}
/>
Expand Down
41 changes: 10 additions & 31 deletions packages/notion/src/sidebar-2/_components/trash-box.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
"use client";

import React, { useEffect, useState } from "react";
import React from "react";
import { HelpCircle, Trash, Undo } from "lucide-react";
import { toast } from "sonner";

import { cn } from "@swy/ui/lib";
import {
Expand All @@ -18,14 +17,14 @@ import {
import { Hint, IconBlock, useModal } from "@swy/ui/shared";

import { BaseModal } from "../../common";
import type { Page } from "../../types";
import { selectPages, usePlatformStore } from "../../slices";
import { useFilter } from "../use-filter";
import { HintItem } from "./hint-item";

interface TrashBoxProps {
isOpen: boolean;
isMobile?: boolean;
onOpenChange: (open: boolean) => void;
fetchPages?: () => Promise<Page[]>;
onRestore?: (id: string) => void;
onDelete?: (id: string) => void;
onSelect?: (id: string, type: string) => void;
Expand All @@ -34,32 +33,18 @@ interface TrashBoxProps {
export const TrashBox = ({
isOpen,
onOpenChange,
fetchPages,
onRestore,
onDelete,
onSelect,
}: TrashBoxProps) => {
const { setOpen } = useModal();
const pages = usePlatformStore((state) => selectPages(state, true));
const { filteredItems, updateSearch } = useFilter(pages);
/** Select */
const [pages, setPages] = useState<Page[]>([]);
const handleSelect = (id: string, type: string) => {
onSelect?.(id, type);
onOpenChange(false);
};
/** Filter */
const [input, setInput] = useState("");
const [filteredItems, setFilteredItems] = useState<Page[] | null>(null);
const updateFilteredItems = (input: string) => {
const v = input.trim().toLowerCase();
const result = pages.filter((page) => page.title.toLowerCase().includes(v));
setFilteredItems(
v.length > 0 ? (result.length > 0 ? result : null) : pages,
);
};
const onInputChange = (input: string) => {
setInput(input);
updateFilteredItems(input);
};
/** Docs Actions */
const handleRestore = (
e: React.MouseEvent<HTMLButtonElement>,
Expand All @@ -80,15 +65,9 @@ export const TrashBox = ({
);
};

useEffect(() => {
void fetchPages?.()
.then((data) => {
const pages = data.filter((page) => page.isArchived);
setPages(pages);
setFilteredItems(pages);
})
.catch(() => toast.message("Error while fetching pages"));
}, [fetchPages]);
// useEffect(() => {
// setFilteredItems(pages);
// }, [pages]);

return (
<Popover open={isOpen} onOpenChange={onOpenChange}>
Expand All @@ -109,8 +88,8 @@ export const TrashBox = ({
>
<div className="flex w-full items-center px-3 py-2.5">
<Input
value={input}
onChange={(e) => onInputChange(e.target.value)}
// value={search}
onChange={(e) => updateSearch(e.target.value)}
placeholder="Search pages in Trash"
/>
</div>
Expand Down
42 changes: 8 additions & 34 deletions packages/notion/src/sidebar-2/modals/search-command.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
"use client";

import React, { useEffect, useState } from "react";
import React from "react";
import { ArrowUpDown } from "lucide-react";
import { toast } from "sonner";

import { cn } from "@swy/ui/lib";
import {
Expand All @@ -17,57 +16,32 @@ import {
import { IconBlock, useModal } from "@swy/ui/shared";

import { generateDefaultIcon, Icon, toDateString } from "../../common";
import type { Page } from "../../types";
import { selectPages, usePlatformStore } from "../../slices";
import { useFilter } from "../use-filter";

interface SearchCommandProps {
workspaceName: string;
fetchPages?: () => Promise<Page[]>;
onSelect?: (id: string, group: string) => void;
onOpenTrash?: (open: boolean) => void;
}

export const SearchCommand: React.FC<SearchCommandProps> = ({
workspaceName,
fetchPages,
onSelect,
onOpenTrash,
}) => {
/** Search */
const { isOpen, setClose } = useModal();
const pages = usePlatformStore((state) => selectPages(state, false));
const { filteredItems, updateSearch } = useFilter(pages);
/** Search */
const jumpToTrash = () => {
setClose();
onOpenTrash?.(true);
};
/** Select */
const [pages, setPages] = useState<Page[]>([]);
const handleSelect = (id: string, group: string) => {
onSelect?.(id, group);
setClose();
};
/** Filter */
const [input, setInput] = useState("");
const [filteredItems, setFilteredItems] = useState<Page[] | null>(null);
const updateFilteredItems = (input: string) => {
const v = input.trim().toLowerCase();
const result = pages.filter((page) => page.title.toLowerCase().includes(v));
setFilteredItems(
v.length > 0 ? (result.length > 0 ? result : null) : pages,
);
};
const onInputChange = (input: string) => {
setInput(input);
updateFilteredItems(input);
};

useEffect(() => {
void fetchPages?.()
.then((data) => {
const pages = data.filter((page) => !page.isArchived);
setPages(pages);
setFilteredItems(pages);
})
.catch(() => toast.message("Error while fetching pages"));
}, [fetchPages]);

return (
<CommandDialog
Expand All @@ -79,8 +53,8 @@ export const SearchCommand: React.FC<SearchCommandProps> = ({
<div className="z-10 flex h-12 w-full flex-shrink-0 flex-grow-0 overflow-hidden border-b bg-transparent px-1">
<Input
variant="search"
value={input}
onChange={(e) => onInputChange(e.target.value)}
// value={input}
onChange={(e) => updateSearch(e.target.value)}
placeholder={`Search in ${workspaceName}...`}
className="h-full w-full min-w-0 border-none bg-transparent text-lg/[27px] dark:bg-transparent"
/>
Expand Down
Loading

0 comments on commit fc1f6a5

Please sign in to comment.