From d65f6cb494151ec7ea41cb7a3477bc997315f796 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Wed, 11 Aug 2021 13:30:59 +0530 Subject: [PATCH] fix build --- src/components/ChangeEmail.tsx | 82 ++++--- src/components/ExportFinished.tsx | 90 +++++--- src/components/ExportInProgress.tsx | 77 +++++-- src/components/ExportModal.tsx | 141 ++++++++---- src/components/PhotoFrame.tsx | 210 +++++++++++------- src/components/Sidebar.tsx | 119 +++++----- src/components/TwoFactorModal.tsx | 109 ++++++--- src/components/pages/gallery/PlanSelector.tsx | 176 ++++++++------- src/pages/_app.tsx | 83 ++++--- src/pages/change-email/index.tsx | 76 +++---- src/pages/change-password/index.tsx | 9 +- src/pages/index.tsx | 131 ++++++----- src/pages/login/index.tsx | 25 ++- src/pages/signup/index.tsx | 9 +- src/pages/two-factor/setup/index.tsx | 126 ++++++++--- src/services/exportService.ts | 145 +++++++----- src/services/upload/encryptionService.ts | 11 +- src/services/upload/networkClient.ts | 5 +- src/utils/crypto/libsodium.ts | 39 ++-- 19 files changed, 1034 insertions(+), 629 deletions(-) diff --git a/src/components/ChangeEmail.tsx b/src/components/ChangeEmail.tsx index c2546a415..26e187a4a 100644 --- a/src/components/ChangeEmail.tsx +++ b/src/components/ChangeEmail.tsx @@ -1,4 +1,3 @@ - import { Formik, FormikHelpers } from 'formik'; import React, { useContext, useEffect, useRef, useState } from 'react'; import { Button, Col, Form, FormControl } from 'react-bootstrap'; @@ -13,10 +12,10 @@ import { getData, LS_KEYS, setData } from 'utils/storage/localStorage'; interface formValues { email: string; - ott?:string; + ott?: string; } -const EmailRow =styled.div` +const EmailRow = styled.div` display: flex; flex-wrap: wrap; border: 1px solid grey; @@ -26,15 +25,15 @@ const EmailRow =styled.div` color: #fff; `; -interface Props{ -showMessage:(value:boolean)=>void; -setEmail:(email:string)=>void; +interface Props { + showMessage: (value: boolean) => void; + setEmail: (email: string) => void; } -function ChangeEmailForm(props:Props) { - const [loading, setLoading]=useState(false); - const [ottInputVisible, setShowOttInputVisibility]=useState(false); +function ChangeEmailForm(props: Props) { + const [loading, setLoading] = useState(false); + const [ottInputVisible, setShowOttInputVisibility] = useState(false); const emailInputElement = useRef(null); - const ottInputRef=useRef(null); + const ottInputRef = useRef(null); const appContext = useContext(AppContext); useEffect(() => { @@ -43,14 +42,16 @@ function ChangeEmailForm(props:Props) { }, 250); }, []); - useEffect(()=>{ + useEffect(() => { if (!ottInputVisible) { props.showMessage(false); } }, [ottInputVisible]); - const requestOTT= async( { email }: formValues, - { setFieldError }: FormikHelpers)=>{ + const requestOTT = async ( + { email }: formValues, + { setFieldError }: FormikHelpers, + ) => { try { setLoading(true); await getOTTForEmailChange(email); @@ -66,14 +67,18 @@ function ChangeEmailForm(props:Props) { setLoading(false); }; - - const requestEmailChange= async( { email, ott }: formValues, - { setFieldError }: FormikHelpers)=>{ + const requestEmailChange = async ( + { email, ott }: formValues, + { setFieldError }: FormikHelpers, + ) => { try { setLoading(true); await changeEmail(email, ott); setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email }); - appContext.setDisappearingFlashMessage({ message: constants.EMAIL_UDPATE_SUCCESSFUL, severity: 'success' }); + appContext.setDisappearingFlashMessage({ + message: constants.EMAIL_UDPATE_SUCCESSFUL, + severity: 'success', + }); router.push('/gallery'); } catch (e) { setFieldError('ott', `${constants.INCORRECT_CODE}`); @@ -91,17 +96,10 @@ function ChangeEmailForm(props:Props) { })} validateOnChange={false} validateOnBlur={false} - onSubmit={!ottInputVisible?requestOTT:requestEmailChange} - > - {({ - values, - errors, - touched, - handleChange, - handleSubmit, - }) => ( + onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}> + {({ values, errors, touched, handleChange, handleSubmit }) => (
- {!ottInputVisible ? + {!ottInputVisible ? ( {errors.email} - : + + ) : ( <> - - {values.email} - - - @@ -146,14 +147,23 @@ function ChangeEmailForm(props:Props) { {errors.ott} - } + + )}
- diff --git a/src/components/ExportFinished.tsx b/src/components/ExportFinished.tsx index f2f0faf97..dedae4d34 100644 --- a/src/components/ExportFinished.tsx +++ b/src/components/ExportFinished.tsx @@ -6,14 +6,13 @@ import constants from 'utils/strings/constants'; import { Label, Row, Value } from './Container'; import { ComfySpan } from './ExportInProgress'; - interface Props { - show: boolean - onHide: () => void - exportFolder: string - exportSize: string - lastExportTime: number - exportStats: ExportStats + show: boolean; + onHide: () => void; + exportFolder: string; + exportSize: string; + lastExportTime: number; + exportStats: ExportStats; updateExportFolder: (newFolder: string) => void; exportFiles: () => void; retryFailed: () => void; @@ -23,30 +22,69 @@ export default function ExportFinished(props: Props) { const totalFiles = props.exportStats.failed + props.exportStats.success; return ( <> -
+
- {formatDateTime(props.lastExportTime)} - - - - {props.exportStats.success} / {totalFiles} - - {props.exportStats.failed>0 && - - - - {props.exportStats.failed} / {totalFiles} + + {formatDateTime(props.lastExportTime)} - } + + + + + + {props.exportStats.success} / {totalFiles} + + + + {props.exportStats.failed > 0 && ( + + + + + {props.exportStats.failed} / {totalFiles} + + + + )}
-
- +
+
- {props.exportStats.failed !== 0 ? - : - - } + {props.exportStats.failed !== 0 ? ( + + ) : ( + + )}
); diff --git a/src/components/ExportInProgress.tsx b/src/components/ExportInProgress.tsx index 1083d907b..2cebfbd42 100644 --- a/src/components/ExportInProgress.tsx +++ b/src/components/ExportInProgress.tsx @@ -5,42 +5,83 @@ import styled from 'styled-components'; import constants from 'utils/strings/constants'; export const ComfySpan = styled.span` - word-spacing:1rem; - color:#ddd; + word-spacing: 1rem; + color: #ddd; `; interface Props { - show: boolean - onHide: () => void - exportFolder: string - exportSize: string - exportStage: ExportStage - exportProgress: ExportProgress + show: boolean; + onHide: () => void; + exportFolder: string; + exportSize: string; + exportStage: ExportStage; + exportProgress: ExportProgress; resumeExport: () => void; - cancelExport: () => void + cancelExport: () => void; pauseExport: () => void; } + export default function ExportInProgress(props: Props) { return ( <> -
+
- {props.exportProgress.current} / {props.exportProgress.total} files exported {props.exportStage === ExportStage.PAUSED && `(paused)`} + + {' '} + {props.exportProgress.current} /{' '} + {props.exportProgress.total}{' '} + {' '} + + {' '} + files exported{' '} + {props.exportStage === ExportStage.PAUSED && `(paused)`} +
-
- {props.exportStage === ExportStage.PAUSED ? - : - - } +
+ {props.exportStage === ExportStage.PAUSED ? ( + + ) : ( + + )}
- +
diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx index c258d91dd..54928960b 100644 --- a/src/components/ExportModal.tsx +++ b/src/components/ExportModal.tsx @@ -1,7 +1,12 @@ import isElectron from 'is-electron'; import React, { useEffect, useState } from 'react'; import { Button } from 'react-bootstrap'; -import exportService, { ExportProgress, ExportStage, ExportStats, ExportType } from 'services/exportService'; +import exportService, { + ExportProgress, + ExportStage, + ExportStats, + ExportType, +} from 'services/exportService'; import { getLocalFiles } from 'services/fileService'; import styled from 'styled-components'; import { sleep } from 'utils/common'; @@ -18,38 +23,44 @@ import MessageDialog from './MessageDialog'; const FolderIconWrapper = styled.div` width: 15%; - margin-left: 10px; - cursor: pointer; + margin-left: 10px; + cursor: pointer; padding: 3px; border: 1px solid #444; - border-radius:15%; - &:hover{ - background-color:#444; + border-radius: 15%; + &:hover { + background-color: #444; } `; -const ExportFolderPathContainer =styled.span` - white-space: nowrap; +const ExportFolderPathContainer = styled.span` + white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; width: 200px; - + /* Beginning of string */ direction: rtl; text-align: left; `; interface Props { - show: boolean - onHide: () => void - usage: string + show: boolean; + onHide: () => void; + usage: string; } export default function ExportModal(props: Props) { const [exportStage, setExportStage] = useState(ExportStage.INIT); const [exportFolder, setExportFolder] = useState(''); const [exportSize, setExportSize] = useState(''); - const [exportProgress, setExportProgress] = useState({ current: 0, total: 0 }); - const [exportStats, setExportStats] = useState({ failed: 0, success: 0 }); + const [exportProgress, setExportProgress] = useState({ + current: 0, + total: 0, + }); + const [exportStats, setExportStats] = useState({ + failed: 0, + success: 0, + }); const [lastExportTime, setLastExportTime] = useState(0); // ==================== @@ -64,7 +75,9 @@ export default function ExportModal(props: Props) { exportService.ElectronAPIs.registerStopExportListener(stopExport); exportService.ElectronAPIs.registerPauseExportListener(pauseExport); exportService.ElectronAPIs.registerResumeExportListener(resumeExport); - exportService.ElectronAPIs.registerRetryFailedExportListener(retryFailedExport); + exportService.ElectronAPIs.registerRetryFailedExportListener( + retryFailedExport, + ); }, []); useEffect(() => { @@ -76,7 +89,10 @@ export default function ExportModal(props: Props) { setExportStage(exportInfo?.stage ?? ExportStage.INIT); setLastExportTime(exportInfo?.lastAttemptTimestamp); setExportProgress(exportInfo?.progress ?? { current: 0, total: 0 }); - setExportStats({ success: exportInfo?.exportedFiles?.length ?? 0, failed: exportInfo?.failedFiles?.length ?? 0 }); + setExportStats({ + success: exportInfo?.exportedFiles?.length ?? 0, + failed: exportInfo?.failedFiles?.length ?? 0, + }); if (exportInfo?.stage === ExportStage.INPROGRESS) { resumeExport(); } @@ -96,10 +112,21 @@ export default function ExportModal(props: Props) { const failedFilesCnt = exportRecord.failedFiles.length; const syncedFilesCnt = localFiles.length; if (syncedFilesCnt > exportedFileCnt + failedFilesCnt) { - updateExportProgress({ current: exportedFileCnt + failedFilesCnt, total: syncedFilesCnt }); - const exportFileUIDs = new Set([...exportRecord.exportedFiles, ...exportRecord.failedFiles]); - const unExportedFiles = localFiles.filter((file) => !exportFileUIDs.has(getFileUID(file))); - exportService.addFilesQueuedRecord(exportFolder, unExportedFiles); + updateExportProgress({ + current: exportedFileCnt + failedFilesCnt, + total: syncedFilesCnt, + }); + const exportFileUIDs = new Set([ + ...exportRecord.exportedFiles, + ...exportRecord.failedFiles, + ]); + const unExportedFiles = localFiles.filter( + (file) => !exportFileUIDs.has(getFileUID(file)), + ); + exportService.addFilesQueuedRecord( + exportFolder, + unExportedFiles, + ); updateExportStage(ExportStage.PAUSED); } } @@ -107,7 +134,6 @@ export default function ExportModal(props: Props) { main(); }, [props.show]); - useEffect(() => { setExportSize(props.usage); }, [props.usage]); @@ -162,7 +188,10 @@ export default function ExportModal(props: Props) { const startExport = async () => { await preExportRun(); updateExportProgress({ current: 0, total: 0 }); - const { paused } = await exportService.exportFiles(updateExportProgress, ExportType.NEW); + const { paused } = await exportService.exportFiles( + updateExportProgress, + ExportType.NEW, + ); await postExportRun(paused); }; @@ -184,13 +213,15 @@ export default function ExportModal(props: Props) { const pausedStageProgress = exportRecord.progress; setExportProgress(pausedStageProgress); - const updateExportStatsWithOffset = ((progress: ExportProgress) => updateExportProgress( - { + const updateExportStatsWithOffset = (progress: ExportProgress) => + updateExportProgress({ current: pausedStageProgress.current + progress.current, total: pausedStageProgress.current + progress.total, - }, - )); - const { paused } = await exportService.exportFiles(updateExportStatsWithOffset, ExportType.PENDING); + }); + const { paused } = await exportService.exportFiles( + updateExportStatsWithOffset, + ExportType.PENDING, + ); await postExportRun(paused); }; @@ -199,7 +230,10 @@ export default function ExportModal(props: Props) { await preExportRun(); updateExportProgress({ current: 0, total: exportStats.failed }); - const { paused } = await exportService.exportFiles(updateExportProgress, ExportType.RETRY_FAILED); + const { paused } = await exportService.exportFiles( + updateExportProgress, + ExportType.RETRY_FAILED, + ); await postExportRun(paused); }; @@ -224,7 +258,8 @@ export default function ExportModal(props: Props) { switch (exportStage) { case ExportStage.INIT: return ( - ); - default: return (<>); + default: + return <>; } }; @@ -269,34 +306,50 @@ export default function ExportModal(props: Props) { onHide={props.onHide} attributes={{ title: constants.EXPORT_DATA, - }} - > -
+ }}> +
- {!exportFolder ? - () : - (<> + {!exportFolder ? ( + + ) : ( + <> {/* */} {exportFolder} {/* */} - {(exportStage === ExportStage.FINISHED || exportStage === ExportStage.INIT) && ( - + {(exportStage === ExportStage.FINISHED || + exportStage === ExportStage.INIT) && ( + )} - ) - } + + )} - {exportSize ? `${exportSize}` : } + + + {exportSize ? `${exportSize}` : } +
- + ); } diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index dc26d43bc..33bee68e2 100644 --- a/src/components/PhotoFrame.tsx +++ b/src/components/PhotoFrame.tsx @@ -21,8 +21,12 @@ import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search'; import { SetDialogMessage } from './MessageDialog'; import { CustomError } from 'utils/common/errorUtil'; import { - GAP_BTW_TILES, DATE_CONTAINER_HEIGHT, IMAGE_CONTAINER_MAX_HEIGHT, - IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS, SPACE_BTW_DATES, + GAP_BTW_TILES, + DATE_CONTAINER_HEIGHT, + IMAGE_CONTAINER_MAX_HEIGHT, + IMAGE_CONTAINER_MAX_WIDTH, + MIN_COLUMNS, + SPACE_BTW_DATES, } from 'types'; const NO_OF_PAGES = 2; @@ -68,21 +72,24 @@ const getTemplateColumns = (columns: number, groups?: number[]): string => { if (sum < columns) { groups[groups.length - 1] += columns - sum; } - return groups.map((x) => `repeat(${x}, 1fr)`).join(` ${SPACE_BTW_DATES}px `); + return groups + .map((x) => `repeat(${x}, 1fr)`) + .join(` ${SPACE_BTW_DATES}px `); } else { return `repeat(${columns}, 1fr)`; } }; -const ListContainer = styled.div<{ columns: number, groups?: number[] }>` +const ListContainer = styled.div<{ columns: number; groups?: number[] }>` display: grid; - grid-template-columns: ${({ columns, groups }) => getTemplateColumns(columns, groups)}; + grid-template-columns: ${({ columns, groups }) => + getTemplateColumns(columns, groups)}; grid-column-gap: ${GAP_BTW_TILES}px; padding: 0 24px; width: 100%; color: #fff; - @media(max-width: ${IMAGE_CONTAINER_MAX_WIDTH * 4}px) { + @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * 4}px) { padding: 0 4px; } `; @@ -139,7 +146,7 @@ interface Props { search: Search; setSearchStats: setSearchStats; deleted?: number[]; - setDialogMessage: SetDialogMessage + setDialogMessage: SetDialogMessage; } const PhotoFrame = ({ @@ -303,14 +310,13 @@ const PhotoFrame = ({ video.preload = 'metadata'; video.src = url; video.currentTime = 3; - const t = setTimeout( - () => { - reject( - Error(`${CustomError.VIDEO_PLAYBACK_FAILED} err: wait time exceeded`), - ); - }, - WAIT_FOR_VIDEO_PLAYBACK, - ); + const t = setTimeout(() => { + reject( + Error( + `${CustomError.VIDEO_PLAYBACK_FAILED} err: wait time exceeded`, + ), + ); + }, WAIT_FOR_VIDEO_PLAYBACK); }); item.html = `