feat: leave ui

packages/app/src/components/workspace-setting/general/delete/delete.tsx

@@ -58,7 +58,7 @@ export const WorkspaceDelete = ({
         <StyledInputContent>
           <Input
             onChange={handlerInputChange}
-            placeholder="Please type “delete” to confirm"
+            placeholder="Please type “Delete” to confirm"
             value={deleteStr}
           ></Input>
         </StyledInputContent>
@@ -67,7 +67,7 @@ export const WorkspaceDelete = ({
             Cancel
           </Button>
           <Button
-            disabled={deleteStr !== 'delete'}
+            disabled={deleteStr.toLowerCase() !== 'delete'}
             onClick={handleDelete}
             type="danger"
             shape="circle"

packages/app/src/components/workspace-setting/general/general.tsx

@@ -14,6 +14,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDetails } from '@/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent';
 import { WorkspaceDelete } from './delete';
 import { Workspace as StoreWorkspaces } from '@blocksuite/store';
+import { debounce } from '@/utils';
 
 export const GeneralPage = ({
   workspace,
@@ -37,12 +38,15 @@ export const GeneralPage = ({
         ? user.name
         : `workspace-${workspace?.id}`)
   );
+  const debouncedRefreshWorkspacesMeta = debounce(() => {
+    refreshWorkspacesMeta();
+  }, 100);
   const isOwner = user && owner.id === user.id;
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
     currentWorkspace?.meta.setName(newName);
     workspaces[workspace.id]?.meta.setName(newName);
-    refreshWorkspacesMeta();
+    debouncedRefreshWorkspacesMeta();
   };
   const currentWorkspaceIndex = workspacesMeta.findIndex(
     meta => meta.id === workspace.id

packages/app/src/components/workspace-setting/general/leave/index.ts

@@ -0,0 +1 @@
+export * from './leave';

packages/app/src/components/workspace-setting/general/leave/leave.tsx

@@ -0,0 +1,65 @@
+import Modal from '@/ui/modal';
+import Input from '@/ui/input';
+import {
+  StyledModalHeader,
+  StyledTextContent,
+  StyledModalWrapper,
+  StyledButtonContent,
+} from './style';
+import { useState } from 'react';
+import { ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
+
+interface WorkspaceDeleteProps {
+  open: boolean;
+  onClose: () => void;
+  workspaceName: string;
+  workspaceId: string;
+  nextWorkSpaceId: string;
+}
+
+export const WorkspaceDelete = ({
+  open,
+  onClose,
+  workspaceId,
+  workspaceName,
+  nextWorkSpaceId,
+}: WorkspaceDeleteProps) => {
+  const [deleteStr, setDeleteStr] = useState<string>('');
+  const router = useRouter();
+  // const { refreshWorkspacesMeta } = useAppState();
+
+  const handleLeave = async () => {
+    // TODO
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <StyledModalWrapper>
+        <ModalCloseButton onClick={onClose} />
+        <StyledModalHeader>Leave Workspace</StyledModalHeader>
+        <StyledTextContent>
+          After you leave, you will not be able to access all the contents of
+          this workspace.
+        </StyledTextContent>
+        <StyledButtonContent>
+          <Button shape="circle" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleLeave}
+            type="danger"
+            shape="circle"
+            style={{ marginLeft: '24px' }}
+          >
+            Leave
+          </Button>
+        </StyledButtonContent>
+      </StyledModalWrapper>
+    </Modal>
+  );
+};
+
+export default WorkspaceDelete;

packages/app/src/components/workspace-setting/general/leave/style.ts

@@ -0,0 +1,47 @@
+import { styled } from '@/styles';
+import { Button } from '@/ui/button';
+
+export const StyledModalWrapper = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    padding: '0px',
+    width: '460px',
+    background: theme.colors.popoverBackground,
+    borderRadius: '12px',
+  };
+});
+
+export const StyledModalHeader = styled('div')(({ theme }) => {
+  return {
+    margin: '44px 0px 12px 0px',
+    width: '460px',
+    fontWeight: '600',
+    fontSize: '20px;',
+    textAlign: 'center',
+    color: theme.colors.popoverColor,
+  };
+});
+
+// export const StyledModalContent = styled('div')(({ theme }) => {});
+
+export const StyledTextContent = styled('div')(({ theme }) => {
+  return {
+    margin: 'auto',
+    width: '425px',
+    fontFamily: 'Avenir Next',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+    textAlign: 'center',
+  };
+});
+
+export const StyledButtonContent = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: '0px 0 32px 0',
+  };
+});

packages/app/src/utils/index.ts

@@ -1,3 +1,5 @@
 export { isDev } from './env';
 
 export * from './useragent';
+
+export * from './tools';

packages/app/src/utils/tools.ts

@@ -0,0 +1,8 @@
+export function debounce(fn: Function, timeout: number) {
+  let timeoutId: any;
+
+  return function (this: any) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, arguments), timeout);
+  };
+}