feat: mock login

2026-07-29 16:19:43 +08:00 · 2023-01-06 14:42:19 +08:00
parent e7564b2e71
commit 97567e2e1f
4 changed files with 415 additions and 393 deletions
@@ -0,0 +1,198 @@
+import {
+  StyledMemberAvatar,
+  StyledMemberButtonContainer,
+  StyledMemberEmail,
+  StyledMemberInfo,
+  StyledMemberListContainer,
+  StyledMemberListItem,
+  StyledMemberName,
+  StyledMemberNameContainer,
+  StyledMemberRoleContainer,
+  StyledMemberTitleContainer,
+  StyledMoreVerticalButton,
+} from './style';
+import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
+import { useEffect, useState } from 'react';
+import { Button, IconButton } from '@/ui/button';
+import { InviteMembers } from '../invite-members/index';
+// import { Member, getDataCenter } from '@affine/datacenter';
+// import { Avatar } from '@mui/material';
+import { Menu, MenuItem } from '@/ui/menu';
+import { Empty } from '@/ui/empty';
+import {
+  deleteMember,
+  getMembers,
+  getUserInfo,
+  Login,
+  User,
+  Workspace,
+} from '@/hooks/mock-data/mock';
+
+// import { useAppState } from '@/providers/app-state-provider';
+export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
+  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
+  const [members, setMembers] = useState<User[]>([]);
+  const [userInfo, setUserInfo] = useState<User>();
+  // const refreshMembers = useCallback(() => {
+  //   getDataCenter()
+  //     .then(dc =>
+  //       dc.apis.getWorkspaceMembers({
+  //         id: workspace.id,
+  //       })
+  //     )
+  //     .then(data => {
+  //       setMembers(data);
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // }, [workspace.id]);
+
+  useEffect(() => {
+    setUser();
+    setMembersList();
+    // refreshMembers();
+  }, []);
+
+  const setUser = () => {
+    const user = getUserInfo();
+    user && setUserInfo(user);
+  };
+  const setMembersList = () => {
+    const members = getMembers(workspace.id);
+    members && setMembers(members);
+  };
+
+  return (
+    <div>
+      {userInfo ? (
+        <>
+          <StyledMemberTitleContainer>
+            <StyledMemberNameContainer>
+              Users({members.length})
+            </StyledMemberNameContainer>
+            <StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
+          </StyledMemberTitleContainer>
+          <StyledMemberListContainer>
+            {members.length === 0 && (
+              <Empty
+                width={648}
+                sx={{ marginTop: '60px' }}
+                height={300}
+              ></Empty>
+            )}
+            {members.length ? (
+              members.map((member, index) => {
+                return (
+                  <StyledMemberListItem key={index}>
+                    <StyledMemberNameContainer>
+                      <StyledMemberAvatar alt="member avatar">
+                        <EmailIcon></EmailIcon>
+                      </StyledMemberAvatar>
+
+                      <StyledMemberInfo>
+                        <StyledMemberName>{member.name}</StyledMemberName>
+
+                        <StyledMemberEmail>{member.email}</StyledMemberEmail>
+                      </StyledMemberInfo>
+                    </StyledMemberNameContainer>
+                    <StyledMemberRoleContainer>
+                      {/* {member.accepted
+                        ? member.type !== 99
+                          ? 'Member'
+                          : 'Workspace Owner'
+                        : 'Pending'} */}
+                      Pending
+                    </StyledMemberRoleContainer>
+                    <StyledMoreVerticalButton>
+                      <Menu
+                        content={
+                          <>
+                            <MenuItem
+                              onClick={() => {
+                                deleteMember(workspace.id, 0);
+                                setMembersList();
+                                // confirm({
+                                //   title: 'Delete Member?',
+                                //   content: `will delete member`,
+                                //   confirmText: 'Delete',
+                                //   confirmType: 'danger',
+                                // }).then(confirm => {
+                                // getDataCenter()
+                                //   .then(dc =>
+                                //     dc.apis.removeMember({
+                                //       permissionId: member.id,
+                                //     })
+                                //   )
+                                //   .then(() => {
+                                //     // console.log('data: ', data);
+                                //     toast('Moved to Trash');
+                                //     // refreshMembers();
+                                //   });
+                                // });
+                              }}
+                              icon={<TrashIcon />}
+                            >
+                              Delete
+                            </MenuItem>
+                          </>
+                        }
+                        placement="bottom-end"
+                        disablePortal={true}
+                      >
+                        <IconButton>
+                          <MoreVerticalIcon />
+                        </IconButton>
+                      </Menu>
+                    </StyledMoreVerticalButton>
+                  </StyledMemberListItem>
+                );
+              })
+            ) : (
+              <></>
+            )}
+          </StyledMemberListContainer>
+          <StyledMemberButtonContainer>
+            <Button
+              onClick={() => {
+                setIsInviteModalShow(true);
+              }}
+              type="primary"
+              shape="circle"
+            >
+              Invite Members
+            </Button>
+            <InviteMembers
+              onClose={() => {
+                setIsInviteModalShow(false);
+              }}
+              onInviteSuccess={() => {
+                setMembersList();
+                setIsInviteModalShow(false);
+                // refreshMembers();
+              }}
+              workspaceId={workspace.id}
+              open={isInviteModalShow}
+            ></InviteMembers>
+          </StyledMemberButtonContainer>
+        </>
+      ) : (
+        <>
+          <div>
+            Collaborating with other members requires AFFiNE Cloud service.
+          </div>
+          <div>
+            <Button
+              onClick={() => {
+                Login();
+                setUser();
+              }}
+            >
+              Enable AFFiNE Cloud
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};