From 4dc61165b2305e748e54baa1a588d6a145fafe6b Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 5 Jan 2023 16:05:54 +0800 Subject: [PATCH] feat:mock workspace-setting --- .../src/components/workspace-modal/index.tsx | 20 +++- .../workspace-setting/general/general.tsx | 17 +-- .../workspace-setting/workspace-setting.tsx | 24 ++-- .../SelectorPopperContent.tsx | 18 +-- .../WorkspaceSelector/WorkspaceSelector.tsx | 69 +++++------ .../components/workspace-slider-bar/index.tsx | 16 +++ packages/app/src/hooks/mock-data/mock.ts | 108 ++++++++++++------ .../app/src/pages/new-workspace/index.tsx | 6 +- .../providers/app-state-provider/context.ts | 4 - 9 files changed, 160 insertions(+), 122 deletions(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index f6a2efdb96..05b1f6632b 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -2,7 +2,11 @@ import { styled } from '@/styles'; import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { Button } from '@/ui/button'; import { useEffect, useState } from 'react'; -import { getWorkspaceList, Workspace } from '@/hooks/mock-data/mock'; +import { + getWorkspaces, + Workspace, + setActiveWorkspace, +} from '@/hooks/mock-data/mock'; import { CreateWorkspaceModal } from '../create-workspace'; interface LoginModalProps { @@ -19,7 +23,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { }, []); const getList = () => { - const data = getWorkspaceList(); + const data = getWorkspaces(); setWorkspaceList(data); }; return ( @@ -40,11 +44,16 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { {workspaceList.map(item => { return ( - - + { + setActiveWorkspace(item); + onClose(); + }} + key={item.id} + > {item.name}/ {item.type === 'local' && local} - {item.type === 'share' && share}/ + {item.type === 'join' && join}/ {item.isPublish ? 'isPublish' : 'isPrivate'}/ {item.isLocal ? 'isLocal' : ''}/ @@ -70,6 +79,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { onClose={() => { setCreateWorkspaceOpen(false); getList(); + onClose(); }} > diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx index cef2daccb7..82389370b3 100644 --- a/packages/app/src/components/workspace-setting/general/general.tsx +++ b/packages/app/src/components/workspace-setting/general/general.tsx @@ -9,25 +9,22 @@ import { StyledSettingH2 } from '../style'; import { useState } from 'react'; import { Button } from '@/ui/button'; import Input from '@/ui/input'; -import { getDataCenter, Workspace, WorkspaceType } from '@affine/datacenter'; +import { getDataCenter } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; -import { WorkspaceDetails } from '@/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent'; import { WorkspaceDelete } from './delete'; import { Workspace as StoreWorkspace } from '@blocksuite/store'; import { debounce } from '@/utils'; import { WorkspaceLeave } from './leave'; import { Upload } from '@/components/file-upload'; +import { Workspace } from '@/hooks/mock-data/mock'; export const GeneralPage = ({ workspace, - owner, }: { workspace: Workspace; - owner: WorkspaceDetails[string]['owner']; workspaces: Record; }) => { const { - user, currentWorkspace, workspacesMeta, workspaces, @@ -36,14 +33,11 @@ export const GeneralPage = ({ const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); const [uploading, setUploading] = useState(false); - const [workspaceName, setWorkspaceName] = useState( - workspaces[workspace.id]?.meta.name || - (workspace.type === WorkspaceType.Private && user ? user.name : '') - ); + const [workspaceName, setWorkspaceName] = useState(''); const debouncedRefreshWorkspacesMeta = debounce(() => { refreshWorkspacesMeta(); }, 100); - const isOwner = user && owner.id === user.id; + const isOwner = true; const handleChangeWorkSpaceName = (newName: string) => { setWorkspaceName(newName); currentWorkspace?.meta.setName(newName); @@ -119,7 +113,6 @@ export const GeneralPage = ({ width={327} value={workspaceName} placeholder="Workspace Name" - disabled={!isOwner} maxLength={14} minLength={1} onChange={handleChangeWorkSpaceName} @@ -130,7 +123,7 @@ export const GeneralPage = ({ diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index c1b07e2441..238ff1f412 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -36,14 +36,14 @@ import { useCallback, useEffect, useState } from 'react'; import { Button, IconButton } from '@/ui/button'; import Input from '@/ui/input'; import { InviteMembers } from '../invite-members/index'; -import { Workspace, Member, getDataCenter } from '@affine/datacenter'; +import { Member, getDataCenter } from '@affine/datacenter'; import { Avatar } from '@mui/material'; import { Menu, MenuItem } from '@/ui/menu'; import { toast } from '@/ui/toast'; import { Empty } from '@/ui/empty'; import { useAppState } from '@/providers/app-state-provider'; -import { WorkspaceDetails } from '../workspace-slider-bar/WorkspaceSelector/SelectorPopperContent'; import { GeneralPage } from './general'; +import { getActiveWorkspace, Workspace } from '@/hooks/mock-data/mock'; enum ActiveTab { 'general' = 'general', @@ -59,8 +59,6 @@ type SettingTabProps = { type WorkspaceSettingProps = { isShow: boolean; onClose?: () => void; - workspace: Workspace; - owner: WorkspaceDetails[string]['owner']; }; const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => { @@ -106,18 +104,18 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => { export const WorkspaceSetting = ({ isShow, onClose, - workspace, - owner, }: WorkspaceSettingProps) => { - const { user, workspaces } = useAppState(); + const { workspaces } = useAppState(); const [activeTab, setActiveTab] = useState(ActiveTab.general); const handleTabChange = (tab: ActiveTab) => { setActiveTab(tab); }; + + const workspace = getActiveWorkspace(); const handleClickClose = () => { onClose && onClose(); }; - const isOwner = user && owner.id === user.id; + const isOwner = true; useEffect(() => { // reset tab when modal is closed if (!isShow) { @@ -125,7 +123,7 @@ export const WorkspaceSetting = ({ } }, [isShow]); return ( - + {isOwner ? ( @@ -141,11 +139,7 @@ export const WorkspaceSetting = ({ ) : null} {activeTab === ActiveTab.general && ( - + )} {activeTab === ActiveTab.members && workspace && ( @@ -295,7 +289,7 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => { const PublishPage = ({ workspace }: { workspace: Workspace }) => { const shareUrl = window.location.host + '/workspace/' + workspace.id; const [publicStatus, setPublicStatus] = useState( - workspace.public + workspace.isPublish ?? false ); const togglePublic = (flag: boolean) => { getDataCenter() diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx index 8e101307bb..494fdd495d 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx @@ -130,16 +130,16 @@ export const SelectorPopperContent = ({ {settingWorkspace ? ( ) : null} diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index 4e0299888f..22013ba674 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -1,53 +1,46 @@ -import { Popper } from '@/ui/popper'; import { Avatar, WorkspaceName, SelectorWrapper } from './styles'; -import { SelectorPopperContent } from './SelectorPopperContent'; -import { useState } from 'react'; -import { useAppState } from '@/providers/app-state-provider'; -import { WorkspaceType } from '@affine/datacenter'; +import { useEffect, useState } from 'react'; import { AffineIcon } from '../icons/icons'; +import { WorkspaceModal } from '@/components/workspace-modal'; +import { getActiveWorkspace } from '@/hooks/mock-data/mock'; export const WorkspaceSelector = () => { - const [isShow, setIsShow] = useState(false); - const { currentWorkspace, workspacesMeta, currentWorkspaceId, user } = - useAppState(); - const workspaceMeta = workspacesMeta.find( - meta => String(meta.id) === String(currentWorkspaceId) - ); + const [workspaceListShow, setWorkspaceListShow] = useState(false); + const [workspace, setWorkSpace] = useState(getActiveWorkspace()); + useEffect(() => { + getWorkspace(); + }, [workspaceListShow]); + const getWorkspace = () => { + const workspace = getActiveWorkspace(); + setWorkSpace(workspace); + }; + return ( - } - zIndex={1000} - placement="bottom-start" - trigger="click" - onVisibleChange={setIsShow} - > - + <> + { + setWorkspaceListShow(true); + }} + data-testid="current-workspace" + > - {workspaceMeta?.type === WorkspaceType.Private && user ? ( - user?.name[0] - ) : ( - - )} + - {workspaceMeta?.type === WorkspaceType.Private - ? user - ? user.name - : 'AFFiNE' - : currentWorkspace?.meta.name || 'AFFiNE'} + {workspace?.name ?? 'AFFiNE'} - + { + setWorkspaceListShow(false); + getWorkspace(); + }} + > + ); }; diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 559e0b983a..63305638a5 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -21,6 +21,7 @@ import { ImportIcon, TrashIcon, AddIcon, + SettingsIcon, } from '@blocksuite/icons'; import Link from 'next/link'; import { Tooltip } from '@/ui/tooltip'; @@ -31,6 +32,7 @@ import { IconButton } from '@/ui/button'; import useLocalStorage from '@/hooks/use-local-storage'; import usePageMetaList from '@/hooks/use-page-meta-list'; import { usePageHelper } from '@/hooks/use-page-helper'; +import { WorkspaceSetting } from '@/components/workspace-setting'; const FavoriteList = ({ showList }: { showList: boolean }) => { const { openPage } = usePageHelper(); @@ -146,6 +148,20 @@ export const WorkSpaceSliderBar = () => { + { + console.log('ttt'); + }} + > + Setting + + + { + console.log(1231231); + }} + /> { diff --git a/packages/app/src/hooks/mock-data/mock.ts b/packages/app/src/hooks/mock-data/mock.ts index e484dfcc87..91fcfaa85f 100644 --- a/packages/app/src/hooks/mock-data/mock.ts +++ b/packages/app/src/hooks/mock-data/mock.ts @@ -4,7 +4,7 @@ export interface Workspace { isPublish?: boolean; // 是否公开 isLocal?: boolean; // 是否全部数据都在本地 avatar?: string; // 封面 - type: 'local' | 'cloud' | 'share'; // cloud: 云端（本次暂不支持），local: 本地，share: 分享 + type: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的 workspaceOwner?: User; // 本地工作空间的拥有者 } @@ -15,45 +15,15 @@ interface User { avatar: string; } -export function getWorkspaceList(): Workspace[] { - const workspacesMeta = JSON.parse( - localStorage.getItem('affine-workspace') ?? '[]' - ); - return workspacesMeta; -} - -export function getPagesByWorkspaceId(workspaceId: string) { - if (!workspaceId) return []; - const workspacesMeta = []; - for (let i = 0; i < 10; i++) { - workspacesMeta.push({ - id: 'page-' + i, - name: 'page ' + i, - }); - } -} - -export function addWorkSpace(workspaceData: Workspace) { - const workspacesMeta = getWorkspaceList(); - workspacesMeta.push(workspaceData); - localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta)); -} - -export function deleteWorkspaceById(workspaceId: string) { - const workspacesMeta = getWorkspaceList(); - const newWorkspacesMeta = workspacesMeta.filter(() => { - return workspaceId !== workspaceId; - }); - localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta)); -} - -export function updateWorkspaceById( +export function updateWorkspaceMeta( workspaceId: string, workspaceData: Workspace ) { - const workspacesMeta = getWorkspaceList(); + const workspacesMeta = getWorkspaces(); const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => { if (workspace.id === workspaceId) { + workspaceData.name && (workspace.name = workspaceData.name); + workspaceData.avatar && (workspace.avatar = workspaceData.avatar); return workspaceData; } return workspace; @@ -69,7 +39,73 @@ export function createWorkspace(workspaceName: string) { avatar: '', type: 'local', } as Workspace; - const workspacesMeta = getWorkspaceList(); + const workspacesMeta = getWorkspaces(); workspacesMeta.push(workspaceData); localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta)); + setActiveWorkspace(workspaceData); +} + +export function getWorkspaces(): Workspace[] { + const workspacesMeta = JSON.parse( + localStorage.getItem('affine-workspace') ?? '[]' + ); + return workspacesMeta; +} + +export function deleteWorkspace(workspaceId: string) { + const workspacesMeta = getWorkspaces(); + const newWorkspacesMeta = workspacesMeta.filter(() => { + return workspaceId !== workspaceId; + }); + localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta)); +} + +export function getMembers(id: string): User[] { + const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}'); + return memberMap[id] || []; +} + +export function leaveWorkspace(id: string) { + return true; +} + +export function setWorkspacePublish(id: string, isPublish: boolean): boolean { + const workspacesMeta = getWorkspaces(); + const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => { + if (workspace.id === id) { + workspace.isPublish = isPublish; + } + return workspace; + }); + localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta)); + return isPublish; +} + +export function getWorkspaceById(id: string) { + const workspacesMeta = getWorkspaces(); + return workspacesMeta.find((workspace: Workspace) => { + return workspace.id === id; + }); +} + +export function getPagesByWorkspaceId(workspaceId: string) { + if (!workspaceId) return []; + const workspacesMeta = []; + for (let i = 0; i < 10; i++) { + workspacesMeta.push({ + id: 'page-' + i, + name: 'page ' + i, + }); + } +} + +export function getActiveWorkspace(): Workspace { + return JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}'); +} + +export function setActiveWorkspace(workspaceData: Workspace) { + localStorage.setItem( + 'affine-active-workspace', + JSON.stringify(workspaceData) + ); } diff --git a/packages/app/src/pages/new-workspace/index.tsx b/packages/app/src/pages/new-workspace/index.tsx index 2b04453508..1a1d9e1a44 100644 --- a/packages/app/src/pages/new-workspace/index.tsx +++ b/packages/app/src/pages/new-workspace/index.tsx @@ -1,14 +1,14 @@ import { WorkspaceModal } from '@/components/workspace-modal'; -import { getWorkspaceList } from '@/hooks/mock-data/mock'; +import { getWorkspaces } from '@/hooks/mock-data/mock'; import { useEffect, useState } from 'react'; import { styled } from '@/styles'; import Button from '@/ui/button/Button'; const Page = () => { - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(false); useEffect(() => { - const data = getWorkspaceList(); + const data = getWorkspaces(); if (!data.length) { setOpen(true); } diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts index ee6b41d05a..98e535396e 100644 --- a/packages/app/src/providers/app-state-provider/context.ts +++ b/packages/app/src/providers/app-state-provider/context.ts @@ -40,14 +40,10 @@ export interface AppStateContext extends AppStateValue { export const AppState = createContext({ user: null, workspacesMeta: [], - currentWorkspaceId: '', currentWorkspace: null, - currentPage: null, - editor: null, - // eslint-disable-next-line @typescript-eslint/no-empty-function setState: () => {}, createEditor: undefined,