From 0edd91057ec85f41352996111bf14c3d63efc243 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 3 Jan 2023 17:49:07 +0800 Subject: [PATCH] Update user interface for file import tool --- packages/api/src/generated/graphql.ts | 1 + packages/api/src/generated/schema.graphql | 1 + packages/api/src/schema.ts | 1 + .../readabilityjs/test/generate-testcase.js | 4 + .../mutations/uploadImportFileMutation.ts | 6 +- packages/web/package.json | 1 + packages/web/pages/tools/import/file.tsx | 202 ++++++++++++++---- yarn.lock | 10 +- 8 files changed, 174 insertions(+), 52 deletions(-) diff --git a/packages/api/src/generated/graphql.ts b/packages/api/src/generated/graphql.ts index aa60707c9..c3e060389 100644 --- a/packages/api/src/generated/graphql.ts +++ b/packages/api/src/generated/graphql.ts @@ -2910,6 +2910,7 @@ export type UploadImportFileSuccess = { }; export enum UploadImportFileType { + Matter = 'MATTER', Pocket = 'POCKET', UrlList = 'URL_LIST' } diff --git a/packages/api/src/generated/schema.graphql b/packages/api/src/generated/schema.graphql index 6f81fc062..76702f090 100644 --- a/packages/api/src/generated/schema.graphql +++ b/packages/api/src/generated/schema.graphql @@ -2269,6 +2269,7 @@ type UploadImportFileSuccess { } enum UploadImportFileType { + MATTER POCKET URL_LIST } diff --git a/packages/api/src/schema.ts b/packages/api/src/schema.ts index ba9423d61..05ae969d2 100755 --- a/packages/api/src/schema.ts +++ b/packages/api/src/schema.ts @@ -2309,6 +2309,7 @@ const schema = gql` enum UploadImportFileType { URL_LIST POCKET + MATTER } enum UploadImportFileErrorCode { diff --git a/packages/readabilityjs/test/generate-testcase.js b/packages/readabilityjs/test/generate-testcase.js index 3784fd7cd..90a5525fa 100644 --- a/packages/readabilityjs/test/generate-testcase.js +++ b/packages/readabilityjs/test/generate-testcase.js @@ -243,11 +243,14 @@ function onResponseReceived(error, source, destRoot, options) { } async function runReadability(source, destPath, metadataDestPath, options) { + console.log('running readability') + var uri = "http://fakehost/test/page.html"; var myReader, result, readerable; try { // Use linkedom for isProbablyReaderable because it supports querySelectorAll var dom = parseHTML(source).document; + console.log('dom', parseHTML(source).innerHTML) readerable = isProbablyReaderable(dom); // We pass `caption` as a class to check that passing in extra classes works, // given that it appears in some of the test documents. @@ -257,6 +260,7 @@ async function runReadability(source, destPath, metadataDestPath, options) { console.error(ex); ex.stack.forEach(console.log.bind(console)); } + console.log('result', result) if (!result) { console.error("No content generated by readability, not going to write expected.html!"); return; diff --git a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts index e272906b0..46ac248d9 100644 --- a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts @@ -1,7 +1,11 @@ import { gqlFetcher } from '../networkHelpers' import { v4 as uuidv4 } from 'uuid' -export type UploadImportFileType = 'URL_LIST' | 'POCKET' +export enum UploadImportFileType { + URL_LIST = 'URL_LIST', + POCKET = 'POCKET', + MATTER = 'MATTER', +} type UploadImportFileResponseData = { uploadImportFile?: UploadImportFileData diff --git a/packages/web/package.json b/packages/web/package.json index 796042b5b..4b821c258 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -50,6 +50,7 @@ "react-hot-toast": "^2.1.1", "react-masonry-css": "^1.0.16", "react-pro-sidebar": "^0.7.1", + "react-spinners": "^0.13.7", "react-super-responsive-table": "^5.2.1", "react-topbar-progress-indicator": "^4.1.1", "react-twitter-widgets": "^1.10.0", diff --git a/packages/web/pages/tools/import/file.tsx b/packages/web/pages/tools/import/file.tsx index 508182edf..f45b5d260 100644 --- a/packages/web/pages/tools/import/file.tsx +++ b/packages/web/pages/tools/import/file.tsx @@ -5,26 +5,40 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' import { applyStoredTheme } from '../../../lib/themeUpdater' import { + Box, HStack, - SpanBox, VStack, } from '../../../components/elements/LayoutPrimitives' import 'antd/dist/antd.compact.css' import { StyledText } from '../../../components/elements/StyledText' -import { Button } from '../../../components/elements/Button' import { ProfileLayout } from '../../../components/templates/ProfileLayout' +import { + uploadImportFileRequestMutation, + UploadImportFileType, +} from '../../../lib/networking/mutations/uploadImportFileMutation' +import { Button } from '../../../components/elements/Button' import { FormLabel } from '../../../components/elements/FormElements' -import { uploadImportFileRequestMutation } from '../../../lib/networking/mutations/uploadImportFileMutation' +import { Loader } from '../../../components/templates/SavingRequest' + +import { SyncLoader } from 'react-spinners' +import { theme } from '../../../components/tokens/stitches.config' + +type UploadState = 'none' | 'uploading' | 'completed' export default function ImportUploader(): JSX.Element { applyStoredTheme(false) const [errorMessage, setErrorMessage] = useState() const [file, setFile] = useState() - const [type, setType] = useState() + const [type, setType] = useState() + const [uploadState, setUploadState] = useState('none') - const handleFileChange = (e: ChangeEvent) => { + const onFinish = (values: unknown) => { + console.log(values) + } + + const onTypeChange = (e: ChangeEvent) => { if (e.target.files) { setFile(e.target.files[0]) } @@ -32,16 +46,19 @@ export default function ImportUploader(): JSX.Element { const handleUploadClick = async () => { if (!file) { + setErrorMessage('No file selected.') return } - console.log('file type: ', file.type) + if (!type) { + setErrorMessage('No file type selected.') + return + } + + setUploadState('uploading') try { - const result = await uploadImportFileRequestMutation( - 'URL_LIST', - 'text/csv' - ) + const result = await uploadImportFileRequestMutation(type, 'text/csv') if (result && result.uploadSignedUrl) { const uploadRes = await fetch(result.uploadSignedUrl, { @@ -52,20 +69,26 @@ export default function ImportUploader(): JSX.Element { 'content-length': `${file.size}`, }, }) - console.log('upload result: ', uploadRes) + setUploadState('completed') + } else { + setErrorMessage( + 'Unable to create file upload. Please ensure you are logged in.' + ) + setUploadState('none') } } catch (error) { console.log('caught error', error) if (error == 'UPLOAD_DAILY_LIMIT_EXCEEDED') { setErrorMessage('You have exceeded your maximum daily upload limit.') } + setUploadState('none') } } return ( - - - Type - - - - - File - - -
{file && `${file.name} - ${file.type}`}
- - - - {errorMessage && {errorMessage}} - + Upload a file to import + + + Omnivore supports uploading a CSV file with one URL per a Row or a + _matter_history.csv file for users migrating from the Matter app + + + Importing from Matter: If you are a Matter user, export your + data, unzip the Archive.zip file, select `Matter history` on this + page, and upload the _matter_history file that was extracted from the + Archive.zip file. + + + Importing from other apps: Most apps allow you to export your + saved items as a CSV file. Once you have extracted a file, ensure the + first column of each row is a URL, and choose our `CSV of URLs` option + and upload your file. + + + Note: Please note you are limited to three import uploads per a + day, and the maximum file size is 10MB. + + + {uploadState == 'completed' ? ( + + Your upload has completed. Please note that it can take some time + for your library to be updated. You will be sent an email when the + process completes. + + ) : ( + <> + + + File type: + + + + + + + + + {/* {file && `${file.name}`} */} + + + + + + {uploadState == 'none' && ( + + )} + {uploadState == 'uploading' && ( + + )} + + + )} + + + {errorMessage && ( + {errorMessage} + )} + + ) diff --git a/yarn.lock b/yarn.lock index c4990abaa..592b91ca7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19744,11 +19744,6 @@ mocha@^9.0.1: yargs-parser "20.2.4" yargs-unparser "2.0.0" -modern-random-ua@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/modern-random-ua/-/modern-random-ua-1.0.3.tgz#c6fca366e60ea9a793c9d99021533744d7f58c41" - integrity sha1-xvyjZuYOqaeTydmQIVM3RNf1jEE= - modify-values@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" @@ -22941,6 +22936,11 @@ react-slidedown@^2.4.5: dependencies: tslib "^2.0.0" +react-spinners@^0.13.7: + version "0.13.7" + resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.7.tgz#0f423c415bfa56765ce9fb36ff604e52a92b37a9" + integrity sha512-mRamn56bfxWbGcacif5RT3UbeJaXi2AttjtPwSmomuv2IcxjpbfETCzdTvaQpNDk0E33ENJsStsQeKAZFuJcpA== + react-style-singleton@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"