chore: add translation function

2024-12-28 12:32:09 +03:00 · 2023-01-31 18:34:18 +08:00 · 2023-01-31 18:34:18 +08:00 · a9bbaed22c
commit a9bbaed22c
parent e501026d28
9 changed files with 123 additions and 103 deletions
--- a/packages/app/src/components/workspace-modal/Footer.tsx
+++ b/packages/app/src/components/workspace-modal/Footer.tsx
@ -4,6 +4,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles';
+import { useTranslation } from '@affine/i18n';

 export const Footer = ({
  onLogin,
@ -13,6 +14,7 @@ export const Footer = ({
  onLogout: () => void;
 }) => {
  const { user } = useAppState();
+  const { t } = useTranslation();

  return (
    <StyledFooter>
@ -48,7 +50,7 @@ export const Footer = ({
          <span>
            <CloudInsyncIcon fontSize={16} />
          </span>
-          Sign in to sync with AFFINE Cloud
+          {t('Sign in')}
        </StyleSignIn>
      )}
    </StyledFooter>
--- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx
+++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx
@ -9,6 +9,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
 import { Wrapper } from '@/ui/layout';
+import { useTranslation } from '@affine/i18n';

 export const WorkspaceCard = ({
  workspaceData,
@ -18,7 +19,7 @@ export const WorkspaceCard = ({
  onClick: (data: WorkspaceUnit) => void;
 }) => {
  const { currentWorkspace, isOwner } = useAppState();
-
+  const { t } = useTranslation();
  return (
    <StyledCard
      onClick={() => {
@ -38,29 +39,30 @@ export const WorkspaceCard = ({
          workspaceData.provider === 'local' ? (
            <p>
              <LocalIcon />
-              Local Workspace
+              {t('Local Workspace')}
            </p>
          ) : (
            <p>
              <CloudIcon />
-              Cloud Workspace
+              {t('Cloud Workspace')}
            </p>
          )
        ) : (
          <p>
            <UsersIcon fontSize={20} color={'#FF646B'} />
-            Joined Workspace
+            {t('Joined Workspace')}
          </p>
        )}
        {workspaceData.provider === 'local' && (
          <p>
            <OfflineIcon />
-            All data can be accessed offline
+            {t('Available Offline')}
          </p>
        )}
        {workspaceData.published && (
          <p>
-            <PublishIcon fontSize={16} /> Published to Web
+            <PublishIcon fontSize={16} />
+            {t('Published to Web')}
          </p>
        )}
      </StyleWorkspaceInfo>
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@ -1,5 +1,5 @@
 import {
-  StyledCopyButtonContainer,
+  StyledButtonContainer,
  StyledPublishContent,
  StyledPublishCopyContainer,
  StyledPublishExplanation,
@ -24,13 +24,13 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
    try {
      await publishWorkspace(workspace.id.toString(), flag);
    } catch (e) {
-      toast('Failed to publish workspace');
+      toast(t('Failed to publish workspace'));
    }
  };

  const copyUrl = () => {
    navigator.clipboard.writeText(shareUrl);
-    toast('Copied url to clipboard');
+    toast(t('Copied link to clipboard'));
  };

  return (
@ -43,8 +43,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
            {workspace.published ? (
              <>
                <StyledPublishExplanation>
-                  The current workspace has been published to the web, everyone
-                  can view the contents of this workspace through the link.
+                  {t('Published Description')}
                </StyledPublishExplanation>

                <StyledPublishCopyContainer>
@ -52,11 +51,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                    {t('Share with link')}
                  </StyledSettingH2>
                  <Input width={500} value={shareUrl} disabled={true}></Input>
-                  <StyledCopyButtonContainer>
+                  <StyledButtonContainer>
                    <Button onClick={copyUrl} type="primary" shape="circle">
                      {t('Copy Link')}
                    </Button>
-                  </StyledCopyButtonContainer>
+                  </StyledButtonContainer>
                </StyledPublishCopyContainer>
              </>
            ) : (
@ -103,7 +102,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
        <StyledPublishContent>
          <>
            <StyledPublishExplanation>
-              Publishing to web requires AFFiNE Cloud service.
+              {t('Publishing')}
            </StyledPublishExplanation>

            <div style={{ marginTop: '72px' }}>
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@ -1,9 +1,9 @@
 import {
-  StyleAsync,
+  StyledButtonContainer,
  StyledPublishContent,
  StyledPublishExplanation,
  StyledWorkspaceName,
-  StyledWorkspaceType,
+  StyledEmail,
 } from './style';
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
@ -26,27 +26,38 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                workspaceUnit={workspace}
                style={{ marginRight: '12px' }}
              />
-              <StyledWorkspaceName>{workspace.name};</StyledWorkspaceName>
-              <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
+              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
+              <span>{t('is a Local Workspace')}</span>
            </StyledPublishExplanation>
-            <StyledWorkspaceType>
-              All data is stored on the current device. You can enable AFFiNE
-              Cloud for this workspace to keep data in sync with the cloud.
-            </StyledWorkspaceType>
-            <StyleAsync>
+            <div>{t('Local Workspace Description')}</div>
+            <StyledButtonContainer>
              <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyleAsync>
+            </StyledButtonContainer>
          </>
        ) : (
          <>
            <StyledPublishExplanation>
-              <Trans i18nKey="Sync Description2">
-                <code>{{ workspaceName: workspace.name ?? 'Affine' }}</code>
-                is Cloud Workspace. All data will be synchronised and saved to
-                the AFFiNE
-              </Trans>
+              <WorkspaceUnitAvatar
+                size={32}
+                name={workspace.name}
+                workspaceUnit={workspace}
+                style={{ marginRight: '12px' }}
+              />
+              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
+              <span>{t('is a Cloud Workspace')}</span>
            </StyledPublishExplanation>
-            <StyleAsync>
+            <div>
+              <Trans i18nKey="Cloud Workspace Description">
+                All data will be synchronised and saved to the AFFiNE account
+                <StyledEmail>
+                  {{
+                    email: '{' + workspace.owner?.email + '}.',
+                  }}
+                </StyledEmail>
+              </Trans>
+            </div>
+
+            <StyledButtonContainer>
              <Menu
                content={
                  <>
@ -56,7 +67,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                      }}
                      icon={<DownloadIcon />}
                    >
-                      {t('Download data to device', { CoreOrAll: 'core' })}
+                      {t('Download data', { CoreOrAll: t('core') })}
                    </MenuItem>
                    <MenuItem
                      onClick={() => {
@ -64,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                      }}
                      icon={<DownloadIcon />}
                    >
-                      {t('Download data to device', { CoreOrAll: 'all' })}
+                      {t('Download data', { CoreOrAll: t('all') })}
                    </MenuItem>
                  </>
                }
@ -72,10 +83,10 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                disablePortal={true}
              >
                <Button type="primary">
-                  {t('Download data to device', { CoreOrAll: 'all' })}
+                  {t('Download data', { CoreOrAll: '' })}
                </Button>
              </Menu>
-            </StyleAsync>
+            </StyledButtonContainer>
          </>
        )}
      </StyledPublishContent>
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@ -50,7 +50,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  return workspace ? (
    <StyleGeneral>
      <div style={{ flex: 1, overflow: 'auto' }}>
-        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingH2>{t('Workspace Avatar')}</StyledSettingH2>
        <StyledSettingAvatarContent>
          <StyledAvatar>
            <Upload
@ -106,18 +106,18 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
            currentWorkspace?.provider === 'local' ? (
              <StyledProviderInfo>
                <LocalIcon />
-                Local Workspace
+                {t('Local Workspace')}
              </StyledProviderInfo>
            ) : (
              <StyledProviderInfo>
                <CloudIcon />
-                All data can be accessed offline
+                {t('Available Offline')}
              </StyledProviderInfo>
            )
          ) : (
            <StyledProviderInfo>
              <UsersIcon fontSize={20} color={'#FF646B'} />
-              Joined Workspace
+              {t('Joined Workspace')}
            </StyledProviderInfo>
          )}
        </StyledSettingInputContainer>
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@ -89,9 +89,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                    <StyledMemberRoleContainer>
                      {member.accepted
                        ? member.type !== 99
-                          ? 'Member'
-                          : 'Workspace Owner'
-                        : 'Pending'}
+                          ? t('Member')
+                          : t('Owner')
+                        : t('Pending')}
                    </StyledMemberRoleContainer>
                    <StyledMoreVerticalButton>
                      <Menu
@ -100,9 +100,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                            <MenuItem
                              onClick={async () => {
                                const confirmRemove = await confirm({
-                                  title: 'Delete Member?',
-                                  content: `will delete member`,
-                                  confirmText: 'Delete',
+                                  title: t('Delete Member?'),
+                                  content: t('will delete member'),
+                                  confirmText: t('Delete'),
                                  confirmType: 'danger',
                                });

@ -110,11 +110,15 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                                  return;
                                }
                                await removeMember(member.id);
-                                toast(`${user.name} has been removed`);
+                                toast(
+                                  t('Member has been removed', {
+                                    name: user.name,
+                                  })
+                                );
                              }}
                              icon={<TrashIcon />}
                            >
-                              Delete
+                              {t('Delete')}
                            </MenuItem>
                          </>
                        }
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@ -90,7 +90,7 @@ export const StyledSettingH2 = styled('h2')<{
  marginBottom?: number;
 }>(({ marginTop, marginBottom, theme }) => {
  return {
-    fontWeight: '500',
+    // fontWeight: '500',
    fontSize: theme.font.base,
    lineHeight: theme.font.lineHeightBase,
    marginTop: marginTop ? `${marginTop}px` : '0px',
@ -101,24 +101,18 @@ export const StyledSettingH2 = styled('h2')<{
 export const StyledPublishExplanation = styled('div')(() => {
  return {
    paddingRight: '48px',
-    fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
+    // fontWeight: '500',
    marginBottom: '22px',
  };
 });
 export const StyledWorkspaceName = styled('span')(() => {
  return {
    fontWeight: '400',
-    fontSize: '18px',
-    lineHeight: '26px',
  };
 });
 export const StyledWorkspaceType = styled('span')(() => {
  return {
-    fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
+    // fontWeight: '500',
  };
 });

@ -136,21 +130,23 @@ export const StyledStopPublishContainer = styled('div')(() => {
  };
 });

-export const StyledCopyButtonContainer = styled('div')(() => {
+export const StyledButtonContainer = styled('div')(() => {
  return {
    marginTop: '64px',
  };
 });
+export const StyledEmail = styled('span')(() => {
+  return {
+    color: '#E8178A',
+  };
+});

-export const StyledPublishContent = styled('div')(() => {
+export const StyledPublishContent = styled('div')(({ theme }) => {
  return {
    display: 'flex',
+    fontWeight: '500',
    flexDirection: 'column',
-  };
-});
-
-export const StyleAsync = styled('div')(() => {
-  return {
-    marginTop: '64px',
+    fontSize: theme.font.base,
+    lineHeight: theme.font.lineHeightBase,
  };
 });
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@ -3,9 +3,11 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
 import router from 'next/router';
+import { useTranslation } from '@affine/i18n';

 export const useWorkspaceHelper = () => {
  const { confirm } = useConfirm();
+  const { t } = useTranslation();
  const { dataCenter, currentWorkspace, user, login } = useAppState();
  const createWorkspace = async (name: string) => {
    const workspaceInfo = await dataCenter.createWorkspace({
@ -38,10 +40,10 @@ export const useWorkspaceHelper = () => {

  const enableWorkspace = async () => {
    confirm({
-      title: 'Enable AFFiNE Cloud?',
-      content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-      confirmText: user ? 'Enable' : 'Sign in and Enable',
-      cancelText: 'Skip',
+      title: `${t('Enable AFFiNE Cloud')}?`,
+      content: t('Enable AFFiNE Cloud Description'),
+      confirmText: user ? t('Enable') : t('Sign in and Enable'),
+      cancelText: t('Skip'),
      confirmType: 'primary',
      buttonDirection: 'column',
    }).then(async confirm => {
@ -53,7 +55,7 @@ export const useWorkspaceHelper = () => {
          currentWorkspace
        );
        workspace && router.push(`/workspace/${workspace.id}/setting`);
-        toast('Enabled success');
+        toast(t('Enabled success'));
      }
    });
  };
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
@ -20,41 +20,37 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { PageListHeader } from '@/components/header';

-type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export';
-
-const tabMap: {
-  name: TabNames;
-  panelRender: (workspace: WorkspaceUnit) => ReactNode;
-}[] = [
-  {
-    name: 'General',
-    panelRender: workspace => <GeneralPage workspace={workspace} />,
-  },
-  {
-    name: 'Sync',
-    panelRender: workspace => <SyncPage workspace={workspace} />,
-  },
-  {
-    name: 'Collaboration',
-    panelRender: workspace => <MembersPage workspace={workspace} />,
-  },
-  {
-    name: 'Publish',
-    panelRender: workspace => <PublishPage workspace={workspace} />,
-  },
-
-  {
-    name: 'Export',
-    panelRender: workspace => <ExportPage workspace={workspace} />,
-  },
-];
-
-const WorkspaceSetting = () => {
+const useTabMap = () => {
  const { t } = useTranslation();
-  const { currentWorkspace, isOwner } = useAppState();
+  const { isOwner } = useAppState();
+  const tabMap: {
+    name: string;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = [
+    {
+      name: t('General'),
+      panelRender: workspace => <GeneralPage workspace={workspace} />,
+    },
+    {
+      name: t('Sync'),
+      panelRender: workspace => <SyncPage workspace={workspace} />,
+    },
+    {
+      name: t('Collaboration'),
+      panelRender: workspace => <MembersPage workspace={workspace} />,
+    },
+    {
+      name: t('Publish'),
+      panelRender: workspace => <PublishPage workspace={workspace} />,
+    },

-  const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
-  const handleTabChange = (tab: TabNames) => {
+    {
+      name: t('Export'),
+      panelRender: workspace => <ExportPage workspace={workspace} />,
+    },
+  ];
+  const [activeTab, setActiveTab] = useState<string>(tabMap[0].name);
+  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };

@ -62,7 +58,7 @@ const WorkspaceSetting = () => {
    tab => tab.name === activeTab
  )?.panelRender;
  let tableArr: {
-    name: TabNames;
+    name: string;
    panelRender: (workspace: WorkspaceUnit) => ReactNode;
  }[] = tabMap;
  if (!isOwner) {
@ -73,6 +69,14 @@ const WorkspaceSetting = () => {
      },
    ];
  }
+  return { activeTabPanelRender, tableArr, handleTabChange, activeTab };
+};
+
+const WorkspaceSetting = () => {
+  const { t } = useTranslation();
+  const { currentWorkspace } = useAppState();
+  const { activeTabPanelRender, tableArr, handleTabChange, activeTab } =
+    useTabMap();
  return (
    <>
      <StyledSettingContainer>