mirrors/TidGi-Desktop
1
Fork 0
mirror of https://github.com/tiddly-gittly/TidGi-Desktop.git synced 2025-12-06 02:30:47 -08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: better ui for importing html

Browse source
This commit is contained in:
lin onetwo 2022-11-19 21:25:57 +08:00
parent d16813cfa7
commit 494e688b00
7 changed files with 87 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

6
localization/locales/en/translation.json
View file

@ -141,7 +141,11 @@
"WikiNotStarted": "Wiki is not started or not loaded",
"Advanced": "Advanced Settings",
"GitDefaultBranch": "Git Default Branch",
"GitDefaultBranchDescription": "The default branch of your Git, Github changed it from master to main after that event"
"GitDefaultBranchDescription": "The default branch of your Git, Github changed it from master to main after that event",
"LocalWikiHtml": "path to html file",
"OpenLocalWikiFromHTML": "import wiki.html",
"ExtractedWikiFolderName": "Converted WIKI folder name",
"BadWikiHtml": "Failed to create a wiki from this HTML file "
},
"EditWorkspace": {
"Path": "Wiki Path",

5
localization/locales/zh_CN/translation.json
View file

@ -111,8 +111,9 @@
"ImportWiki": "导入WIKI",
"CloneWiki": "导入线上Wiki",
"OpenLocalWikiFromHTML":"导入WIKI.HTML",
"LocalWikiHtml":"tiddlywiki.html文件路径",
"StoreWikiFolderLocation":"转换后的WIKI父文件夹路径",
"LocalWikiHtml":"HTML文件的路径",
"BadWikiHtml":"该HTML文件无法用于创建WIKI",
"ExtractedWikiFolderName":"转换后的WIKI文件夹名称",
"NotLoggedIn": "未登录",
"LogoutToGetStorageServiceToken": "登录在线存储服务以获取最新凭证",
"LogoutGithubAccount": "登出Github账号",

61
src/pages/AddWorkspace/ImportHtmlWikiForm.tsx
View file

@ -1,6 +1,3 @@
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Typography } from '@material-ui/core';
import { Folder as FolderIcon } from '@material-ui/icons';
@ -18,37 +15,20 @@ export function ImportHtmlWikiForm({
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateSyncedWorkspace: boolean }): JSX.Element {
const { t } = useTranslation();
const { wikiHtmlPathSetter, extractWikiHtmlParentFolderSetter } = form;
const { wikiHtmlPathSetter, wikiFolderLocation, wikiFolderName, wikiHtmlPath, parentFolderLocation, wikiFolderNameSetter } = form;
useValidateHtmlWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
const onWikiLocationChange = useCallback(
async (newLocation: string) => {
if (newLocation !== undefined) {
wikiHtmlPathSetter(newLocation);
}
},
[wikiHtmlPathSetter],
);
const onSaveLocationChange = useCallback(
async (newLocation: string) => {
if (newLocation !== undefined) {
extractWikiHtmlParentFolderSetter(newLocation);
}
},
[extractWikiHtmlParentFolderSetter],
);
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.extractWikiHtmlParentFolder}
error={errorInWhichComponent.wikiHtmlPath}
onChange={(event) => {
// https://zh-hans.reactjs.org/docs/events.html#clipboard-events
onWikiLocationChange(event.target.value);
wikiHtmlPathSetter(event.target.value);
}}
label={t('AddWorkspace.LocalWikiHtml')}
value={form.wikiHtmlPath}
value={wikiHtmlPath}
/>
<LocationPickerButton
// 第一个输入框的选择文件夹按钮。
@ -58,6 +38,13 @@ export function ImportHtmlWikiForm({
const filePaths = await window.service.native.pickFile([{ name: 'html文件', extensions: ['html', 'htm'] }]);
if (filePaths?.length > 0) {
wikiHtmlPathSetter(filePaths[0]);
const fileName = await window.service.native.path('basename', filePaths[0]);
// DEBUG: console
console.log(`fileName`, filePaths, fileName);
if (fileName !== undefined) {
// use html file name as default wiki name
wikiFolderNameSetter(fileName);
}
}
}}
endIcon={<FolderIcon />}>
@ -68,21 +55,18 @@ export function ImportHtmlWikiForm({
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.extractWikiHtmlParentFolder}
onChange={(event) => {
onSaveLocationChange(event.target.value);
}}
label={t('AddWorkspace.StoreWikiFolderLocation')}
value={form.extractWikiHtmlParentFolder}
error={errorInWhichComponent.parentFolderLocation}
onChange={(event) => form.parentFolderLocationSetter(event.target.value)}
label={t('AddWorkspace.WorkspaceParentFolder')}
value={parentFolderLocation}
/>
<LocationPickerButton
// 第二个输入框的选择文件夹按钮。
onClick={async () => {
// first clear the text, so button will refresh
extractWikiHtmlParentFolderSetter('');
const filePaths = await window.service.native.pickDirectory(form.wikiFolderLocation);
form.parentFolderLocationSetter('');
const filePaths = await window.service.native.pickDirectory(parentFolderLocation);
if (filePaths?.length > 0) {
extractWikiHtmlParentFolderSetter(filePaths[0]);
form.parentFolderLocationSetter(filePaths[0]);
}
}}
endIcon={<FolderIcon />}>
@ -91,6 +75,15 @@ export function ImportHtmlWikiForm({
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiFolderName}
onChange={(event) => wikiFolderNameSetter(event.target.value)}
label={t('AddWorkspace.ExtractedWikiFolderName')}
helperText={`${t('AddWorkspace.CreateWiki')}${wikiFolderLocation ?? ''}`}
value={wikiFolderName}
/>
</LocationPickerContainer>
</CreateContainer>
);
}

2
src/pages/AddWorkspace/NewWikiForm.tsx
View file

@ -53,7 +53,7 @@ export function NewWikiForm({
error={errorInWhichComponent.wikiFolderName}
onChange={(event) => form.wikiFolderNameSetter(event.target.value)}
label={t('AddWorkspace.WorkspaceFolderNameToCreate')}
helperText={`${t('AddWorkspace.CreateWiki')}${form.wikiFolderLocation}`}
helperText={`${t('AddWorkspace.CreateWiki')}${form.wikiFolderLocation ?? ''}`}
value={form.wikiFolderName}
/>
</LocationPickerContainer>

34
src/pages/AddWorkspace/useForm.ts
View file

@ -87,10 +87,12 @@ export function useWikiWorkspaceForm(options?: { fromExisted: boolean }) {
// derived values
const wikiFolderLocation = usePromiseValue(() => window.service.native.path('join', parentFolderLocation ?? t('Error') ?? 'Error', wikiFolderName), 'Error', [
parentFolderLocation,
wikiFolderName,
]);
/** full path of created wiki folder */
const wikiFolderLocation = usePromiseValue(
async () => await window.service.native.path('join', parentFolderLocation ?? t('Error') ?? 'Error', wikiFolderName),
'Error',
[parentFolderLocation, wikiFolderName],
);
/**
* For importing existed nodejs wiki into TidGi, we parse git url from the folder to import
@ -106,23 +108,13 @@ export function useWikiWorkspaceForm(options?: { fromExisted: boolean }) {
})();
}, [gitRepoUrlSetter, wikiFolderLocation, options?.fromExisted]);
/*
* 对于wikiHTML,我们使用两个状态保存文件与wiki解压父文件夹路径,并设置默认的wiki文件夹保存位置.
* wikiHtmlPath、wikiHtmlPathSetter、extractWikiHtmlParentFolder、extractWikiHtmlParentFolderSetter,
/*
* For wikiHTML
*/
const [wikiHtmlPath, wikiHtmlPathSetter] = useState<string>('');
useEffect(() => {
void (async function getDefaultWikiHtmlPathEffect() {})();
}, []);
const [extractWikiHtmlParentFolder, extractWikiHtmlParentFolderSetter] = useState<string>('');
useEffect(() => {
void (async function getDefaultExtractWikiHtmlFolderPathEffect() {
const desktopPathAsDefaultExtractWikiHtmlParentFolderPath = await window.service.context.get('DEFAULT_WIKI_FOLDER');
extractWikiHtmlParentFolderSetter(desktopPathAsDefaultExtractWikiHtmlParentFolderPath);
})();
}, []);
const [wikiHtmlPath, wikiHtmlPathSetter] = useState<string>('');
useEffect(() => {
void (async function getDefaultWikiHtmlPathEffect() {})();
}, []);
return {
storageProvider,
storageProviderSetter,
@ -147,8 +139,6 @@ export function useWikiWorkspaceForm(options?: { fromExisted: boolean }) {
mainWikiToLinkIndex,
wikiHtmlPath,
wikiHtmlPathSetter,
extractWikiHtmlParentFolder,
extractWikiHtmlParentFolderSetter,
};
}

83
src/pages/AddWorkspace/useImportHtmlWiki.ts
View file

@ -2,7 +2,7 @@
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IErrorInWhichComponent, IWikiWorkspaceForm } from './useForm';
import { updateErrorInWhichComponentSetterByErrorMessage } from './useIndicator';
import { useValidateNewWiki, useNewWiki } from './useNewWiki';
export function useValidateHtmlWiki(
isCreateMainWorkspace: boolean,
@ -13,47 +13,16 @@ export function useValidateHtmlWiki(
const { t } = useTranslation();
const [wikiCreationMessage, wikiCreationMessageSetter] = useState<string | undefined>();
const [hasError, hasErrorSetter] = useState<boolean>(false);
useValidateNewWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
useEffect(() => {
if (!form.parentFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.WorkspaceFolder')}`);
errorInWhichComponentSetter({ parentFolderLocation: true });
hasErrorSetter(true);
} else if (!form.wikiHtmlPath) {
if (!form.wikiHtmlPath) {
// 判断wikiHtmlPath是否存在
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.LocalWikiHtml')}`);
errorInWhichComponentSetter({ wikiHtmlPath: true });
hasErrorSetter(true);
} else if (!form.wikiFolderName) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.WorkspaceFolderNameToCreate')}`);
errorInWhichComponentSetter({ wikiFolderName: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && !form.gitRepoUrl) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.GitRepoUrl')}`);
errorInWhichComponentSetter({ gitRepoUrl: true });
hasErrorSetter(true);
} else if (!isCreateMainWorkspace && !form.mainWikiToLink?.wikiFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.MainWorkspace')}`);
errorInWhichComponentSetter({ mainWikiToLink: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && (form.gitUserInfo === undefined || !(form.gitUserInfo.accessToken?.length > 0))) {
wikiCreationMessageSetter(t('AddWorkspace.NotLoggedIn'));
errorInWhichComponentSetter({ gitUserInfo: true });
hasErrorSetter(true);
} else {
wikiCreationMessageSetter('');
errorInWhichComponentSetter({});
hasErrorSetter(false);
}
}, [
t,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form.parentFolderLocation,
form.wikiFolderName,
form.gitRepoUrl,
form.gitUserInfo,
form.mainWikiToLink?.wikiFolderLocation,
form.tagName,
// 监听wikiHtmlPath，如果不存在就在提示用户。
form.wikiHtmlPath,
errorInWhichComponentSetter,
@ -72,33 +41,43 @@ export function useImportHtmlWiki(
): () => Promise<void> {
const { t } = useTranslation();
const createNewWikiSubmit = useNewWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
wikiCreationMessageSetter,
hasErrorSetter,
errorInWhichComponentSetter,
);
const onSubmit = useCallback(async () => {
const { wikiFolderLocation, wikiHtmlPath } = form;
if (wikiFolderLocation === undefined) {
hasErrorSetter(true);
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}：${t('AddWorkspace.WorkspaceFolder')}`);
errorInWhichComponentSetter({ parentFolderLocation: true });
return;
}
wikiCreationMessageSetter(t('AddWorkspace.Processing'));
hasErrorSetter(false);
try {
// 如果是HTML文件，即使转换错误，删掉在执行一次也不会出错。
// 我希望判断用户输入的是否是HTML文件，如果不是就不予执行。然后在判断如果失败了就删除这个数据并且提示错误信息。如果输入的是html类型的文件是不会出错的，即使是非wiki类型的文件。如果输出的目录非空，那么会导致异常闪退。
// 我希望，可以创建一个与HTML文件名一样的文件夹，这样的话就可以在父文件夹中解压出一个HTML文件名一样的文件夹而不只是wiki数据。
// 我希望信息可以显示在log面板。当出现解压错误后就提示用户。
const extractState = await window.service.wiki.extractWikiHTML(form.wikiHtmlPath, form.extractWikiHtmlParentFolder);
// 待解决： var extractState用于接收执行是否解压是否成功。但是接收不到window.service.wiki.extractWikiHTML函数的返回值，并且在该函数上下打log都未显示。
const extractState = await window.service.wiki.extractWikiHTML(wikiHtmlPath, wikiFolderLocation);
if (!extractState) {
hasErrorSetter(true);
wikiCreationMessageSetter(t('AddWorkspace.BadWikiHtml'));
errorInWhichComponentSetter({ wikiHtmlPath: true });
return;
}
// 我希望在解压成功后设置好工作区的信息，执行打开解压后的wiki文件夹的操作。
} catch (error) {
wikiCreationMessageSetter((error as Error).message);
updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
wikiCreationMessageSetter(`${t('AddWorkspace.BadWikiHtml')}${(error as Error).message}`);
errorInWhichComponentSetter({ wikiHtmlPath: true });
hasErrorSetter(true);
return;
}
}, [
wikiCreationMessageSetter,
t,
hasErrorSetter,
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form.wikiHtmlPath,
form.extractWikiHtmlParentFolder,
errorInWhichComponentSetter,
]);
await createNewWikiSubmit();
}, [form, wikiCreationMessageSetter, t, createNewWikiSubmit, hasErrorSetter, errorInWhichComponentSetter]);
return onSubmit;
}

12
src/services/native/index.ts
View file

@ -181,17 +181,21 @@ ${message.message}
public async path(method: 'basename' | 'dirname' | 'join', pathString: string | undefined, ...paths: string[]): Promise<string | undefined> {
switch (method) {
case 'basename':
case 'basename': {
if (typeof pathString === 'string') return path.basename(pathString);
break;
case 'dirname':
}
case 'dirname': {
if (typeof pathString === 'string') return path.dirname(pathString);
break;
case 'join':
}
case 'join': {
if (typeof pathString === 'string') return path.join(pathString, ...paths);
break;
default:
}
default: {
break;
}
}
}
}