fix: datacenter type error

This commit is contained in:
DiamondThree
2023-01-09 23:55:34 +08:00
parent c1261e7977
commit 833df7be3c
5 changed files with 321 additions and 316 deletions

View File

@@ -34,6 +34,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
const [members, setMembers] = useState<[{ name: string; email: string }]>([ const [members, setMembers] = useState<[{ name: string; email: string }]>([
{ name: 'affine', email: 'tttt' }, { name: 'affine', email: 'tttt' },
]); ]);
console.log('setMembers: ', setMembers);
const { user, login, updateWorkspaceMeta } = useTemporaryHelper(); const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
const { confirm } = useConfirm(); const { confirm } = useConfirm();
// const refreshMembers = useCallback(() => { // const refreshMembers = useCallback(() => {
@@ -51,7 +52,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
// }); // });
// }, [workspace.id]); // }, [workspace.id]);
const setMembersList = () => { const setMembersList = () => {
setMembers([]); // setMembers([]);
// const members = getMembers(workspace.id); // const members = getMembers(workspace.id);
// members && setMembers(members); // members && setMembers(members);
}; };

View File

@@ -1,180 +1,181 @@
import { InformationIcon, LogOutIcon } from '@blocksuite/icons'; // import { InformationIcon, LogOutIcon } from '@blocksuite/icons';
import { styled } from '@/styles'; // import { styled } from '@/styles';
import { Divider } from '@/ui/divider'; // import { Divider } from '@/ui/divider';
import { useAppState } from '@/providers/app-state-provider'; // import { useAppState } from '@/providers/app-state-provider';
import { SelectorPopperContainer } from './styles'; // import { SelectorPopperContainer } from './styles';
import { // import {
PrivateWorkspaceItem, // PrivateWorkspaceItem,
WorkspaceItem, // WorkspaceItem,
CreateWorkspaceItem, // CreateWorkspaceItem,
ListItem, // ListItem,
LoginItem, // LoginItem,
} from './WorkspaceItem'; // } from './WorkspaceItem';
import { WorkspaceSetting } from '@/components/workspace-setting'; // import { WorkspaceSetting } from '@/components/workspace-setting';
import { useCallback, useEffect, useState } from 'react'; // import { useCallback, useEffect, useState } from 'react';
import { WorkspaceType } from '@affine/datacenter'; // import { Workspace } from '@affine/datacenter';
import { useModal } from '@/providers/GlobalModalProvider'; // import { useModal } from '@/providers/GlobalModalProvider';
export type WorkspaceDetails = Record< // export type WorkspaceDetails = Record<
string, // string,
{ memberCount: number; owner: { id: string; name: string } } // { memberCount: number; owner: { id: string; name: string } }
>; // >;
type SelectorPopperContentProps = { // type SelectorPopperContentProps = {
isShow: boolean; // isShow: boolean;
}; // };
export const SelectorPopperContent = ({ // export const SelectorPopperContent = ({
isShow, // isShow,
}: SelectorPopperContentProps) => { // }: SelectorPopperContentProps) => {
const { user, workspacesMeta, refreshWorkspacesMeta } = useAppState(); // const { user, workspacesMeta, refreshWorkspacesMeta } = useAppState();
const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>( // const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
null // null
); // );
const [workSpaceDetails, setWorkSpaceDetails] = useState<WorkspaceDetails>( // const [workSpaceDetails, setWorkSpaceDetails] = useState<WorkspaceDetails>(
{} // {}
); // );
const { triggerContactModal } = useModal(); // const { triggerContactModal } = useModal();
const handleClickSettingWorkspace = (workspaceId: string) => { // const handleClickSettingWorkspace = (workspaceId: string) => {
setSettingWorkspaceId(workspaceId); // setSettingWorkspaceId(workspaceId);
}; // };
const handleCloseWorkSpace = () => { // const handleCloseWorkSpace = () => {
setSettingWorkspaceId(null); // setSettingWorkspaceId(null);
}; // };
const settingWorkspace = settingWorkspaceId // const settingWorkspace = settingWorkspaceId
? workspacesMeta.find(workspace => workspace.id === settingWorkspaceId) // ? workspacesMeta.find(workspace => workspace.id === settingWorkspaceId)
: undefined; // : undefined;
const refreshDetails = useCallback(async () => { // const refreshDetails = useCallback(async () => {
const workspaceDetailList = await Promise.all( // const workspaceDetailList = await Promise.all(
workspacesMeta.map(async ({ id, type }) => { // workspacesMeta.map(async ({ id, type }) => {
if (user) { // if (user) {
if (type === WorkspaceType.Private) { // if (type === WorkspaceType.Private) {
return { id, member_count: 1, owner: user }; // return { id, member_count: 1, owner: user };
} else { // } else {
// const dc = await getDataCenter(); // // const dc = await getDataCenter();
// const data = await dc.apis.getWorkspaceDetail({ id }); // // const data = await dc.apis.getWorkspaceDetail({ id });
// return { id, ...data } || { id, member_count: 0, owner: user }; // // return { id, ...data } || { id, member_count: 0, owner: user };
} // }
} // }
}) // })
); // );
const workSpaceDetails: WorkspaceDetails = {}; // const workSpaceDetails: WorkspaceDetails = {};
workspaceDetailList.forEach(details => { // workspaceDetailList.forEach(details => {
if (details) { // if (details) {
const { id, member_count, owner } = details; // const { id, member_count, owner } = details;
if (!owner) return; // if (!owner) return;
workSpaceDetails[id] = { // workSpaceDetails[id] = {
memberCount: member_count || 1, // memberCount: member_count || 1,
owner: { // owner: {
id: owner.id, // id: owner.id,
name: owner.name, // name: owner.name,
}, // },
}; // };
} // }
}); // });
setWorkSpaceDetails(workSpaceDetails); // setWorkSpaceDetails(workSpaceDetails);
}, [user, workspacesMeta]); // }, [user, workspacesMeta]);
useEffect(() => { // useEffect(() => {
if (isShow) { // if (isShow) {
setSettingWorkspaceId(null); // setSettingWorkspaceId(null);
refreshWorkspacesMeta(); // refreshWorkspacesMeta();
refreshDetails(); // refreshDetails();
} // }
// eslint-disable-next-line react-hooks/exhaustive-deps // // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isShow]); // }, [isShow]);
return !user ? ( // return !user ? (
<SelectorPopperContainer placement="bottom-start"> // <SelectorPopperContainer placement="bottom-start">
<LoginItem /> // <LoginItem />
<StyledDivider /> // <StyledDivider />
<ListItem // <ListItem
icon={<InformationIcon />} // icon={<InformationIcon />}
name="About AFFiNE" // name="About AFFiNE"
onClick={() => triggerContactModal()} // onClick={() => triggerContactModal()}
/> // />
</SelectorPopperContainer> // </SelectorPopperContainer>
) : ( // ) : (
<SelectorPopperContainer placement="bottom-start"> // <SelectorPopperContainer placement="bottom-start">
<PrivateWorkspaceItem // <PrivateWorkspaceItem
privateWorkspaceId={ // privateWorkspaceId={
workspacesMeta.find( // workspacesMeta.find(
workspace => workspace.type === WorkspaceType.Private // workspace => workspace.type === WorkspaceType.Private
)?.id // )?.id
} // }
/> // />
<StyledDivider /> // <StyledDivider />
<WorkspaceGroupTitle>Workspace</WorkspaceGroupTitle> // <WorkspaceGroupTitle>Workspace</WorkspaceGroupTitle>
<WorkspaceWrapper> // <WorkspaceWrapper>
{workspacesMeta.map(workspace => { // {workspacesMeta.map(workspace => {
return workspace.type !== WorkspaceType.Private ? ( // return workspace.type !== WorkspaceType.Private ? (
<WorkspaceItem // <WorkspaceItem
type={workspace.type} // type={workspace.type}
key={workspace.id} // key={workspace.id}
id={workspace.id} // id={workspace.id}
icon={`loading...`} // icon={`loading...`}
onClickSetting={handleClickSettingWorkspace} // onClickSetting={handleClickSettingWorkspace}
name={`loading...`} // name={`loading...`}
memberCount={workSpaceDetails[workspace.id]?.memberCount || 1} // memberCount={workSpaceDetails[workspace.id]?.memberCount || 1}
/> // />
) : null; // ) : null;
})} // })}
</WorkspaceWrapper> // </WorkspaceWrapper>
<CreateWorkspaceItem /> // <CreateWorkspaceItem />
{settingWorkspace ? ( // {settingWorkspace ? (
<WorkspaceSetting // <WorkspaceSetting
isShow={false} // isShow={false}
onClose={handleCloseWorkSpace} // onClose={handleCloseWorkSpace}
// workspace={settingWorkspace} // // workspace={settingWorkspace}
// owner={ // // owner={
// (settingWorkspaceId && // // (settingWorkspaceId &&
// workSpaceDetails[settingWorkspaceId]?.owner) || { // // workSpaceDetails[settingWorkspaceId]?.owner) || {
// id: user.id, // // id: user.id,
// name: user.name, // // name: user.name,
// } // // }
// } // // }
/> // />
) : null} // ) : null}
<StyledDivider /> // <StyledDivider />
<ListItem // <ListItem
icon={<InformationIcon />} // icon={<InformationIcon />}
name="About AFFiNE" // name="About AFFiNE"
onClick={() => triggerContactModal()} // onClick={() => triggerContactModal()}
/> // />
<ListItem // <ListItem
icon={<LogOutIcon />} // icon={<LogOutIcon />}
name="Sign out" // name="Sign out"
onClick={() => { // onClick={() => {
console.log('Sign out'); // console.log('Sign out');
// FIXME: remove token from local storage and reload the page // // FIXME: remove token from local storage and reload the page
localStorage.removeItem('affine_token'); // localStorage.removeItem('affine_token');
window.location.reload(); // window.location.reload();
}} // }}
/> // />
</SelectorPopperContainer> // </SelectorPopperContainer>
); // );
}; // };
const StyledDivider = styled(Divider)({ // const StyledDivider = styled(Divider)({
margin: '8px 12px', // margin: '8px 12px',
width: 'calc(100% - 24px)', // width: 'calc(100% - 24px)',
}); // });
const WorkspaceGroupTitle = styled('div')(({ theme }) => { // const WorkspaceGroupTitle = styled('div')(({ theme }) => {
return { // return {
color: theme.colors.iconColor, // color: theme.colors.iconColor,
fontSize: theme.font.sm, // fontSize: theme.font.sm,
lineHeight: '30px', // lineHeight: '30px',
height: '30px', // height: '30px',
padding: '0 12px', // padding: '0 12px',
}; // };
}); // });
const WorkspaceWrapper = styled('div')(() => { // const WorkspaceWrapper = styled('div')(() => {
return { // return {
maxHeight: '200px', // maxHeight: '200px',
overflow: 'auto', // overflow: 'auto',
}; // };
}); // });
export default {};

View File

@@ -1,60 +1,61 @@
import { styled } from '@/styles'; // import { styled } from '@/styles';
import { useAppState } from '@/providers/app-state-provider'; // import { useAppState } from '@/providers/app-state-provider';
import { // import {
WorkspaceItemAvatar, // WorkspaceItemAvatar,
PrivateWorkspaceWrapper, // PrivateWorkspaceWrapper,
WorkspaceItemContent, // WorkspaceItemContent,
} from './styles'; // } from './styles';
import { useRouter } from 'next/router'; // import { useRouter } from 'next/router';
type PrivateWorkspaceItemProps = { // type PrivateWorkspaceItemProps = {
privateWorkspaceId?: string; // privateWorkspaceId?: string;
}; // };
export const PrivateWorkspaceItem = ({ // export const PrivateWorkspaceItem = ({
privateWorkspaceId, // privateWorkspaceId,
}: PrivateWorkspaceItemProps) => { // }: PrivateWorkspaceItemProps) => {
const { user } = useAppState(); // const { user } = useAppState();
const router = useRouter(); // const router = useRouter();
const handleClick = () => { // const handleClick = () => {
if (privateWorkspaceId) { // if (privateWorkspaceId) {
router.push(`/workspace/${privateWorkspaceId}`); // router.push(`/workspace/${privateWorkspaceId}`);
} // }
}; // };
if (user) { // if (user) {
const Username = user.name; // const Username = user.name;
return ( // return (
<PrivateWorkspaceWrapper onClick={handleClick}> // <PrivateWorkspaceWrapper onClick={handleClick}>
<WorkspaceItemAvatar alt={Username} src={user.avatar_url}> // <WorkspaceItemAvatar alt={Username} src={user.avatar_url}>
{Username} // {Username}
</WorkspaceItemAvatar> // </WorkspaceItemAvatar>
<WorkspaceItemContent> // <WorkspaceItemContent>
<Name title={Username}>{Username}</Name> // <Name title={Username}>{Username}</Name>
<Email title={user.email}>{user.email}</Email> // <Email title={user.email}>{user.email}</Email>
</WorkspaceItemContent> // </WorkspaceItemContent>
</PrivateWorkspaceWrapper> // </PrivateWorkspaceWrapper>
); // );
} // }
return null; // return null;
}; // };
const Name = styled('div')(({ theme }) => { // const Name = styled('div')(({ theme }) => {
return { // return {
color: theme.colors.quoteColor, // color: theme.colors.quoteColor,
fontSize: theme.font.base, // fontSize: theme.font.base,
fontWeight: 500, // fontWeight: 500,
overflow: 'hidden', // overflow: 'hidden',
textOverflow: 'ellipsis', // textOverflow: 'ellipsis',
whiteSpace: 'nowrap', // whiteSpace: 'nowrap',
}; // };
}); // });
const Email = styled('div')(({ theme }) => { // const Email = styled('div')(({ theme }) => {
return { // return {
color: theme.colors.iconColor, // color: theme.colors.iconColor,
fontSize: theme.font.sm, // fontSize: theme.font.sm,
overflow: 'hidden', // overflow: 'hidden',
textOverflow: 'ellipsis', // textOverflow: 'ellipsis',
whiteSpace: 'nowrap', // whiteSpace: 'nowrap',
}; // };
}); // });
export default {};

View File

@@ -1,96 +1,98 @@
import { useRouter } from 'next/router'; // import { useRouter } from 'next/router';
import { styled } from '@/styles'; // import { styled } from '@/styles';
import { // import {
WorkspaceItemAvatar, // WorkspaceItemAvatar,
WorkspaceItemWrapper, // WorkspaceItemWrapper,
WorkspaceItemContent, // WorkspaceItemContent,
} from '../styles'; // } from '../styles';
import { FooterSetting } from './FooterSetting'; // import { FooterSetting } from './FooterSetting';
import { FooterUsers } from './FooterUsers'; // import { FooterUsers } from './FooterUsers';
import { WorkspaceType } from '@affine/datacenter'; // import { WorkspaceType } from '@affine/datacenter';
import { useAppState } from '@/providers/app-state-provider'; // import { useAppState } from '@/providers/app-state-provider';
interface WorkspaceItemProps { // interface WorkspaceItemProps {
id: string; // id: string;
name: string; // name: string;
icon: string; // icon: string;
type: WorkspaceType; // type: WorkspaceType;
memberCount: number; // memberCount: number;
onClickSetting?: (workspaceId: string) => void; // onClickSetting?: (workspaceId: string) => void;
} // }
export const WorkspaceItem = ({ // export const WorkspaceItem = ({
id, // id,
name, // name,
icon, // icon,
type, // type,
onClickSetting, // onClickSetting,
memberCount, // memberCount,
}: WorkspaceItemProps) => { // }: WorkspaceItemProps) => {
const router = useRouter(); // const router = useRouter();
const { currentWorkspaceId } = useAppState(); // const { currentWorkspaceId } = useAppState();
const handleClickSetting = async () => { // const handleClickSetting = async () => {
onClickSetting && onClickSetting(id); // onClickSetting && onClickSetting(id);
}; // };
return ( // return (
<StyledWrapper // <StyledWrapper
onClick={() => { // onClick={() => {
router.push(`/workspace/${id}`); // router.push(`/workspace/${id}`);
}} // }}
canSet={ // canSet={
type !== WorkspaceType.Private && currentWorkspaceId === String(id) // type !== WorkspaceType.Private && currentWorkspaceId === String(id)
} // }
> // >
<WorkspaceItemAvatar alt={name} src={icon}> // <WorkspaceItemAvatar alt={name} src={icon}>
{name.charAt(0)} // {name.charAt(0)}
</WorkspaceItemAvatar> // </WorkspaceItemAvatar>
<WorkspaceItemContent> // <WorkspaceItemContent>
<Name title={name}>{name}</Name> // <Name title={name}>{name}</Name>
</WorkspaceItemContent> // </WorkspaceItemContent>
<Footer> // <Footer>
<FooterUsers memberCount={memberCount} /> // <FooterUsers memberCount={memberCount} />
<FooterSetting onClick={handleClickSetting} /> // <FooterSetting onClick={handleClickSetting} />
</Footer> // </Footer>
</StyledWrapper> // </StyledWrapper>
); // );
}; // };
const Name = styled('div')(({ theme }) => { // const Name = styled('div')(({ theme }) => {
return { // return {
color: theme.colors.quoteColor, // color: theme.colors.quoteColor,
fontSize: theme.font.sm, // fontSize: theme.font.sm,
fontWeight: 400, // fontWeight: 400,
overflow: 'hidden', // overflow: 'hidden',
textOverflow: 'ellipsis', // textOverflow: 'ellipsis',
whiteSpace: 'nowrap', // whiteSpace: 'nowrap',
}; // };
}); // });
const StyledWrapper = styled(WorkspaceItemWrapper)<{ canSet: boolean }>( // const StyledWrapper = styled(WorkspaceItemWrapper)<{ canSet: boolean }>(
({ canSet }) => { // ({ canSet }) => {
return { // return {
'& .footer-setting': { // '& .footer-setting': {
display: 'none', // display: 'none',
}, // },
':hover .footer-users': { // ':hover .footer-users': {
display: canSet ? 'none' : '', // display: canSet ? 'none' : '',
}, // },
':hover .footer-setting': { // ':hover .footer-setting': {
display: canSet ? 'block' : 'none', // display: canSet ? 'block' : 'none',
}, // },
}; // };
} // }
); // );
const Footer = styled('div')({ // const Footer = styled('div')({
width: '42px', // width: '42px',
flex: '0 42px', // flex: '0 42px',
fontSize: '20px', // fontSize: '20px',
display: 'flex', // display: 'flex',
alignItems: 'center', // alignItems: 'center',
justifyContent: 'center', // justifyContent: 'center',
marginLeft: '12px', // marginLeft: '12px',
}); // });
export default {};

View File

@@ -26,5 +26,5 @@ const _initializeDataCenter = () => {
export const getDataCenter = _initializeDataCenter(); export const getDataCenter = _initializeDataCenter();
export type { AccessTokenMessage } from './provider/affine/apis'; export type { AccessTokenMessage } from './provider/affine/apis';
export type { WorkspaceInfo } from './types'; export type { WorkspaceInfo as Workspace, User } from './types';
export { getLogger } from './logger'; export { getLogger } from './logger';