refactor(store): extract workspace out of AppState (#1037)

This commit is contained in:
Himself65
2023-02-15 21:41:43 -06:00
committed by GitHub
parent a4d0813354
commit cdc2b449a9
30 changed files with 323 additions and 245 deletions
@@ -1,9 +1,8 @@
import { useAppState } from '@/providers/app-state-provider';
import { IconButton, Modal, ModalWrapper, toast } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { CloseIcon } from '@blocksuite/icons';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
import { useGlobalState } from '@/store/app';
@@ -20,7 +19,9 @@ export const EnableWorkspaceModal = ({
const login = useGlobalState(store => store.login);
const user = useGlobalState(store => store.user);
const dataCenter = useGlobalState(store => store.dataCenter);
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const [loading, setLoading] = useState(false);
const router = useRouter();
@@ -1,10 +1,10 @@
import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
import { useAppState } from '@/providers/app-state-provider';
import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { WorkspaceUnit } from '@affine/datacenter';
import { useGlobalState } from '@/store/app';
const NoNetWorkIcon = () => {
return (
@@ -43,7 +43,9 @@ const getStatus = (workspace: WorkspaceUnit | null) => {
return 'cloud';
};
export const SyncUser = () => {
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { triggerEnableWorkspaceModal } = useModal();
const [status, setStatus] = useState<'offline' | 'local' | 'cloud'>(
@@ -1,14 +1,17 @@
import { Button } from '@affine/component';
import { usePageHelper } from '@/hooks/use-page-helper';
import { useAppState } from '@/providers/app-state-provider';
import { useConfirm } from '@/providers/ConfirmProvider';
import { useRouter } from 'next/router';
import useCurrentPageMeta from '@/hooks/use-current-page-meta';
import { useTranslation } from '@affine/i18n';
import { useGlobalState } from '@/store/app';
import { useCallback } from 'react';
export const TrashButtonGroup = () => {
const { permanentlyDeletePage } = usePageHelper();
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { toggleDeletePage } = usePageHelper();
const confirm = useConfirm(store => store.confirm);
const router = useRouter();
+5 -3
View File
@@ -4,9 +4,9 @@ import { Button } from '@affine/component';
import { Content, FlexWrapper } from '@affine/component';
import Loading from '@/components/loading';
import { usePageHelper } from '@/hooks/use-page-helper';
import { useAppState } from '@/providers/app-state-provider';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from '@affine/i18n';
import { useGlobalState } from '@/store/app';
// import { Tooltip } from '@affine/component';
type ImportModalProps = {
open: boolean;
@@ -19,7 +19,9 @@ type Template = {
export const ImportModal = ({ open, onClose }: ImportModalProps) => {
const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
const { openPage, createPage } = usePageHelper();
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { t } = useTranslation();
const _applyTemplate = function (pageId: string, template: Template) {
const page = currentWorkspace?.blocksuiteWorkspace?.getPage(pageId);
+5 -3
View File
@@ -21,16 +21,16 @@ import {
import { OperationCell, TrashOperationCell } from './OperationCell';
import Empty from './Empty';
import { Content } from '@affine/component';
import React from 'react';
import React, { useCallback } from 'react';
import DateCell from '@/components/page-list/DateCell';
import { IconButton } from '@affine/component';
import { Tooltip } from '@affine/component';
import { useRouter } from 'next/router';
import { useAppState } from '@/providers/app-state-provider';
import { toast } from '@affine/component';
import { usePageHelper } from '@/hooks/use-page-helper';
import { useTheme } from '@/providers/ThemeProvider';
import { useTranslation } from '@affine/i18n';
import { useGlobalState } from '@/store/app';
const FavoriteTag = ({
pageMeta: { favorite, id },
}: {
@@ -83,7 +83,9 @@ export const PageList = ({
listType?: 'all' | 'trash' | 'favorite';
}) => {
const router = useRouter();
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { t } = useTranslation();
if (pageList.length === 0) {
return <Empty listType={listType} />;
@@ -1,13 +1,19 @@
import { Command } from 'cmdk';
import { StyledListItem, StyledNotFound } from './style';
import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { useAppState } from '@/providers/app-state-provider';
import {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useState,
} from 'react';
import { useRouter } from 'next/router';
import { useSwitchToConfig } from './config';
import { NoResultSVG } from './NoResultSVG';
import { useTranslation } from '@affine/i18n';
import usePageHelper from '@/hooks/use-page-helper';
import { useGlobalState } from '@/store/app';
export const Results = (props: {
query: string;
loading: boolean;
@@ -18,7 +24,12 @@ export const Results = (props: {
const { query, loading, setLoading, setShowCreatePage, onClose } = props;
const { openPage } = usePageHelper();
const router = useRouter();
const { currentWorkspace, pageList } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const pageList = useGlobalState(
useCallback(store => store.dataCenterPageList, [])
);
const { search } = usePageHelper();
const List = useSwitchToConfig(currentWorkspace?.id);
const [results, setResults] = useState(new Map<string, string | undefined>());
@@ -7,10 +7,10 @@ import {
PublishIcon,
} from '@/components/icons';
import { WorkspaceUnit } from '@affine/datacenter';
import { useAppState } from '@/providers/app-state-provider';
import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
import { useTranslation } from '@affine/i18n';
import { useGlobalState } from '@/store/app';
import { useCallback } from 'react';
const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
const user = useGlobalState(store => store.user);
@@ -46,7 +46,9 @@ export const WorkspaceCard = ({
workspaceData: WorkspaceUnit;
onClick: (data: WorkspaceUnit) => void;
}) => {
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { t } = useTranslation();
return (
<StyledCard
@@ -7,9 +7,8 @@ import {
import { StyledSettingKey, StyledRow } from '../style';
import { FlexWrapper } from '@affine/component';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import { Button } from '@affine/component';
import { useAppState } from '@/providers/app-state-provider';
import { WorkspaceDelete } from './delete';
import { WorkspaceLeave } from './leave';
import {
@@ -31,7 +30,9 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const [workspaceName, setWorkspaceName] = useState<string>(workspace?.name);
const [showEditInput, setShowEditInput] = useState(false);
const isOwner = useGlobalState(store => store.isOwner);
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { updateWorkspace } = useWorkspaceHelper();
const { t } = useTranslation();
@@ -1,17 +1,19 @@
import { WorkspaceName, SelectorWrapper } from './styles';
import { useEffect, useState } from 'react';
import { useCallback, useState } from 'react';
import { WorkspaceModal } from '@/components/workspace-modal';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
import { useAppState } from '@/providers/app-state-provider';
import { useGlobalState } from '@/store/app';
export const WorkspaceSelector = () => {
const [workspaceListShow, setWorkspaceListShow] = useState(false);
const { currentWorkspace, workspaceList } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
useEffect(() => {
if (workspaceList.length === 0) {
setWorkspaceListShow(true);
}
}, [workspaceList]);
if (dataCenter.workspaces.length === 0) {
setWorkspaceListShow(true);
}
return (
<>
<SelectorWrapper
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useCallback, useState } from 'react';
import { useRouter } from 'next/router';
import {
StyledArrowButton,
@@ -24,16 +24,16 @@ import Link from 'next/link';
import { MuiCollapse } from '@affine/component';
import { Tooltip } from '@affine/component';
import { useModal } from '@/store/globalModal';
import { useAppState } from '@/providers/app-state-provider';
import { IconButton } from '@affine/component';
import useLocalStorage from '@/hooks/use-local-storage';
import { usePageHelper } from '@/hooks/use-page-helper';
import { useTranslation } from '@affine/i18n';
import { WorkspaceSelector } from './WorkspaceSelector/WorkspaceSelector';
import { useGlobalState } from '@/store/app';
const FavoriteList = ({ showList }: { showList: boolean }) => {
const { openPage } = usePageHelper();
const { pageList } = useAppState();
const pageList = useGlobalState(store => store.dataCenterPageList);
const router = useRouter();
const { t } = useTranslation();
const favoriteList = pageList.filter(p => p.favorite && !p.trash);
@@ -66,7 +66,9 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
export const WorkSpaceSliderBar = () => {
const { triggerQuickSearchModal } = useModal();
const [showSubFavorite, setShowSubFavorite] = useState(true);
const { currentWorkspace } = useAppState();
const currentWorkspace = useGlobalState(
useCallback(store => store.currentDataCenterWorkspace, [])
);
const { openPage, createPage } = usePageHelper();
const router = useRouter();
const { t } = useTranslation();