Eslint rule update

.eslintrc.json

@@ -35,7 +35,8 @@
         "max-len": "off",
         "new-cap": "off",
         "no-invalid-this": "off",
-        "eqeqeq": "error"
+        "eqeqeq": "error",
+        "object-curly-spacing": ["error", "always"]
     },
     "settings": {
         "react": {

src/components/CollectionShare.tsx

@@ -1,18 +1,18 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import constants from 'utils/strings/constants';
-import {Formik, FormikHelpers} from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
-import {Button, Col, Table} from 'react-bootstrap';
-import {DeadCenter} from 'pages/gallery';
-import {User} from 'services/userService';
+import { Button, Col, Table } from 'react-bootstrap';
+import { DeadCenter } from 'pages/gallery';
+import { User } from 'services/userService';
 import {
     Collection,
     shareCollection,
     unshareCollection,
 } from 'services/collectionService';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import SubmitButton from './SubmitButton';
 import MessageDialog from './MessageDialog';
 
@@ -33,8 +33,8 @@ interface ShareeProps {
 function CollectionShare(props: Props) {
     const [loading, setLoading] = useState(false);
     const collectionShare = async (
-        {email}: formValues,
-        {resetForm, setFieldError}: FormikHelpers<formValues>,
+        { email }: formValues,
+        { resetForm, setFieldError }: FormikHelpers<formValues>,
     ) => {
         try {
             setLoading(true);
@@ -75,7 +75,7 @@ function CollectionShare(props: Props) {
         await props.syncWithRemote();
     };
 
-    const ShareeRow = ({sharee, collectionUnshare}: ShareeProps) => (
+    const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
         <tr>
             <td>{sharee.email}</td>
             <td>
@@ -100,12 +100,12 @@ function CollectionShare(props: Props) {
         <MessageDialog
             show={props.show}
             onHide={props.onHide}
-            attributes={{title: constants.SHARE_COLLECTION}}
+            attributes={{ title: constants.SHARE_COLLECTION }}
         >
-            <DeadCenter style={{width: '85%', margin: 'auto'}}>
+            <DeadCenter style={{ width: '85%', margin: 'auto' }}>
                 <p>{constants.SHARE_WITH_PEOPLE}</p>
                 <Formik<formValues>
-                    initialValues={{email: ''}}
+                    initialValues={{ email: '' }}
                     validationSchema={Yup.object().shape({
                         email: Yup.string()
                             .email(constants.EMAIL_ERROR)
@@ -184,7 +184,7 @@ function CollectionShare(props: Props) {
                         </Table>
                     </>
                 ) : (
-                    <div style={{marginTop: '12px'}}>
+                    <div style={{ marginTop: '12px' }}>
                         {constants.ZERO_SHAREES()}
                     </div>
                 )}

src/components/EnteSpinner.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Spinner} from 'react-bootstrap';
+import { Spinner } from 'react-bootstrap';
 
 export default function EnteSpinner(props) {
     return (

src/components/FavButton.tsx

@@ -12,12 +12,12 @@ const HeartUI = styled.button<{
     cursor: pointer;
     background-size: cover;
     border: none;
-    ${({isClick, size}) => isClick &&
+    ${({ isClick, size }) => isClick &&
         `background-position: -${
             28 * size
         }px;transition: background 1s steps(28);`}
 `;
 
-export default function FavButton({isClick, onClick, size}) {
+export default function FavButton({ isClick, onClick, size }) {
     return <HeartUI isClick={isClick} onClick={onClick} size={size} />;
 }

src/components/FullScreenDropZone.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 

src/components/MessageDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Modal} from 'react-bootstrap';
+import { Button, Modal } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 
 export interface MessageAttributes {
@@ -41,7 +41,7 @@ export default function MessageDialog({
             backdrop={attributes.staticBackdrop ? 'static' : 'true'}
         >
             <Modal.Header
-                style={{borderBottom: 'none'}}
+                style={{ borderBottom: 'none' }}
                 closeButton={!attributes.nonClosable}
             >
                 {attributes.title && (
@@ -51,12 +51,12 @@ export default function MessageDialog({
                 )}
             </Modal.Header>
             {(children || attributes?.content) && (
-                <Modal.Body style={{borderTop: '1px solid #444'}}>
+                <Modal.Body style={{ borderTop: '1px solid #444' }}>
                     {children || <h5>{attributes.content}</h5>}
                 </Modal.Body>
             )}
             {(attributes.close || attributes.proceed) && (
-                <Modal.Footer style={{borderTop: 'none'}}>
+                <Modal.Footer style={{ borderTop: 'none' }}>
                     <div
                         style={{
                             display: 'flex',

src/components/NavigationButton.tsx

@@ -45,7 +45,7 @@ const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
     }
 `;
 
-const NavigationButton = ({scrollDirection, ...rest}) => (
+const NavigationButton = ({ scrollDirection, ...rest }) => (
     <Wrapper
         direction={scrollDirection}
         {...rest}

src/components/PhotoFrame.tsx

@@ -8,16 +8,16 @@ import {
     setSearchStats,
 } from 'pages/gallery';
 import PreviewCard from 'pages/gallery/components/PreviewCard';
-import React, {useContext, useEffect, useState} from 'react';
-import {Button} from 'react-bootstrap';
-import {File} from 'services/fileService';
+import React, { useContext, useEffect, useState } from 'react';
+import { Button } from 'react-bootstrap';
+import { File } from 'services/fileService';
 import styled from 'styled-components';
 import DownloadManager from 'services/downloadManager';
 import constants from 'utils/strings/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import {VariableSizeList as List} from 'react-window';
+import { VariableSizeList as List } from 'react-window';
 import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
-import {isInsideBox, isSameDay as isSameDayAnyYear} from 'utils/search';
+import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search';
 import CloudUpload from './CloudUpload';
 
 const DATE_CONTAINER_HEIGHT = 45;
@@ -344,7 +344,7 @@ const PhotoFrame = ({
             ) : filteredData.length ? (
                 <Container>
                     <AutoSizer>
-                        {({height, width}) => {
+                        {({ height, width }) => {
                             let columns;
                             if (width >= 1000) {
                                 columns = 5;
@@ -476,7 +476,7 @@ const PhotoFrame = ({
                                     itemKey={generateKey}
                                     overscanCount={extraRowsToRender}
                                 >
-                                    {({index, style}) => (
+                                    {({ index, style }) => (
                                         <ListItem style={style}>
                                             <ListContainer
                                                 columns={

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Photoswipe from 'photoswipe';
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
 import classnames from 'classnames';
@@ -7,7 +7,7 @@ import {
     addToFavorites,
     removeFromFavorites,
 } from 'services/collectionService';
-import {File} from 'services/fileService';
+import { File } from 'services/fileService';
 import constants from 'utils/strings/constants';
 import DownloadManger from 'services/downloadManager';
 import events from './events';
@@ -28,7 +28,7 @@ function PhotoSwipe(props: Iprops) {
     let pswpElement;
     const [photoSwipe, setPhotoSwipe] = useState<Photoswipe<any>>();
 
-    const {isOpen} = props;
+    const { isOpen } = props;
     const [isFav, setIsFav] = useState(false);
     const needUpdate = useRef(false);
 
@@ -59,7 +59,7 @@ function PhotoSwipe(props: Iprops) {
     }
 
     const openPhotoSwipe = () => {
-        const {items, currentIndex} = props;
+        const { items, currentIndex } = props;
         const options = {
             history: false,
             maxSpreadZoom: 5,
@@ -105,7 +105,7 @@ function PhotoSwipe(props: Iprops) {
     };
 
     const handleClose = () => {
-        const {onClose} = props;
+        const { onClose } = props;
         if (typeof onClose === 'function') {
             onClose(needUpdate.current);
         }
@@ -115,14 +115,14 @@ function PhotoSwipe(props: Iprops) {
         }
     };
     const isInFav = (file) => {
-        const {favItemIds} = props;
+        const { favItemIds } = props;
         if (favItemIds && file) {
             return favItemIds.has(file.id);
         } return false;
     };
 
     const onFavClick = async (file) => {
-        const {favItemIds} = props;
+        const { favItemIds } = props;
         if (!isInFav(file)) {
             favItemIds.add(file.id);
             addToFavorites(file);
@@ -135,7 +135,7 @@ function PhotoSwipe(props: Iprops) {
         needUpdate.current = true;
     };
     const downloadFile = async (file) => {
-        const {loadingBar} = props;
+        const { loadingBar } = props;
         const a = document.createElement('a');
         a.style.display = 'none';
         loadingBar.current.continuousStart();
@@ -146,8 +146,8 @@ function PhotoSwipe(props: Iprops) {
         a.click();
         a.remove();
     };
-    const {id} = props;
-    let {className} = props;
+    const { id } = props;
+    let { className } = props;
     className = classnames(['pswp', className]).trim();
     return (
         <div

src/components/RecoveryKeyModal.tsx

@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from 'react';
-import {downloadAsFile} from 'utils/file';
-import {getRecoveryKey} from 'utils/crypto';
+import React, { useEffect, useState } from 'react';
+import { downloadAsFile } from 'utils/file';
+import { getRecoveryKey } from 'utils/crypto';
 import constants from 'utils/strings/constants';
 import MessageDialog from './MessageDialog';
 import EnteSpinner from './EnteSpinner';
@@ -10,7 +10,7 @@ interface Props {
     onHide: () => void;
     somethingWentWrong: any;
 }
-function RecoveryKeyModal({somethingWentWrong, ...props}: Props) {
+function RecoveryKeyModal({ somethingWentWrong, ...props }: Props) {
     const [recoveryKey, setRecoveryKey] = useState(null);
     useEffect(() => {
         if (!props.show) {

src/components/SearchBar.tsx

@@ -1,10 +1,10 @@
-import {Search, SearchStats, SetCollections} from 'pages/gallery';
-import React, {useEffect, useState, useRef} from 'react';
+import { Search, SearchStats, SetCollections } from 'pages/gallery';
+import React, { useEffect, useState, useRef } from 'react';
 import styled from 'styled-components';
 import AsyncSelect from 'react-select/async';
-import {components} from 'react-select';
+import { components } from 'react-select';
 import debounce from 'debounce-promise';
-import {File} from 'services/fileService';
+import { File } from 'services/fileService';
 import {
     Bbox,
     getHolidaySuggestion,
@@ -12,7 +12,7 @@ import {
     parseHumanDate,
     searchLocation,
 } from 'services/searchService';
-import {getFormattedDate} from 'utils/search';
+import { getFormattedDate } from 'utils/search';
 import constants from 'utils/strings/constants';
 import LocationIcon from './LocationIcon';
 import DateIcon from './DateIcon';
@@ -177,14 +177,14 @@ export default function SearchBar(props: Props) {
     const getIconByType = (type: SuggestionType) => (type === SuggestionType.DATE ? <DateIcon /> : <LocationIcon />);
 
     const LabelWithIcon = (props: { type: SuggestionType; label: string }) => (
-        <div style={{display: 'flex', alignItems: 'center'}}>
-            <span style={{paddingRight: '10px', paddingBottom: '4px'}}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span style={{ paddingRight: '10px', paddingBottom: '4px' }}>
                 {getIconByType(props.type)}
             </span>
             <span>{props.label}</span>
         </div>
     );
-    const {Option, Control} = components;
+    const { Option, Control } = components;
 
     const OptionWithIcon = (props) => (
         <Option {...props}>
@@ -213,7 +213,7 @@ export default function SearchBar(props: Props) {
     );
 
     const customStyles = {
-        control: (style, {isFocused}) => ({
+        control: (style, { isFocused }) => ({
             ...style,
             'backgroundColor': '#282828',
             'color': '#d1d1d1',
@@ -222,7 +222,7 @@ export default function SearchBar(props: Props) {
             ':hover': {
                 'borderColor': '#2dc262',
                 'cursor': 'text',
-                '&>.icon': {color: '#2dc262'},
+                '&>.icon': { color: '#2dc262' },
             },
         }),
         input: (style) => ({
@@ -234,7 +234,7 @@ export default function SearchBar(props: Props) {
             marginTop: '10px',
             backgroundColor: '#282828',
         }),
-        option: (style, {isFocused}) => ({
+        option: (style, { isFocused }) => ({
             ...style,
             backgroundColor: isFocused && '#343434',
         }),
@@ -293,10 +293,10 @@ export default function SearchBar(props: Props) {
                             noOptionsMessage={() => null}
                         />
                     </div>
-                    <div style={{width: '24px'}}>
+                    <div style={{ width: '24px' }}>
                         {props.isOpen && (
                             <div
-                                style={{cursor: 'pointer'}}
+                                style={{ cursor: 'pointer' }}
                                 onClick={resetSearch}
                             >
                                 <CrossIcon />

src/components/SetPasswordForm.tsx

@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import Container from 'components/Container';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import constants from 'utils/strings/constants';
-import {Formik, FormikHelpers} from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import Button from 'react-bootstrap/Button';
 import SubmitButton from './SubmitButton';
@@ -21,11 +21,11 @@ function SetPasswordForm(props: Props) {
     const [loading, setLoading] = useState(false);
     const onSubmit = async (
         values: formValues,
-        {setFieldError}: FormikHelpers<formValues>,
+        { setFieldError }: FormikHelpers<formValues>,
     ) => {
         setLoading(true);
         try {
-            const {passphrase, confirm} = values;
+            const { passphrase, confirm } = values;
             if (passphrase === confirm) {
                 await props.callback(passphrase, setFieldError);
             } else {
@@ -42,17 +42,17 @@ function SetPasswordForm(props: Props) {
     };
     return (
         <Container>
-            <Card style={{maxWidth: '540px', padding: '20px'}}>
+            <Card style={{ maxWidth: '540px', padding: '20px' }}>
                 <Card.Body>
                     <div
                         className="text-center"
-                        style={{marginBottom: '40px'}}
+                        style={{ marginBottom: '40px' }}
                     >
                         <p>{constants.ENTER_ENC_PASSPHRASE}</p>
                         {constants.PASSPHRASE_DISCLAIMER()}
                     </div>
                     <Formik<formValues>
-                        initialValues={{passphrase: '', confirm: ''}}
+                        initialValues={{ passphrase: '', confirm: '' }}
                         validationSchema={Yup.object().shape({
                             passphrase: Yup.string().required(
                                 constants.REQUIRED,
@@ -115,7 +115,7 @@ function SetPasswordForm(props: Props) {
                     {props.back && (
                         <div
                             className="text-center"
-                            style={{marginTop: '20px'}}
+                            style={{ marginTop: '20px' }}
                         >
                             <Button variant="link" onClick={props.back}>
                                 {constants.GO_BACK}

src/components/Sidebar.tsx

@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 
-import {slide as Menu} from 'react-burger-menu';
-import billingService, {Subscription} from 'services/billingService';
+import { slide as Menu } from 'react-burger-menu';
+import billingService, { Subscription } from 'services/billingService';
 import constants from 'utils/strings/constants';
-import {getData, LS_KEYS, setData} from 'utils/storage/localStorage';
-import {getToken} from 'utils/common/key';
-import {getEndpoint} from 'utils/common/apiUtil';
-import {Button} from 'react-bootstrap';
+import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import { getToken } from 'utils/common/key';
+import { getEndpoint } from 'utils/common/apiUtil';
+import { Button } from 'react-bootstrap';
 import {
     isSubscriptionActive,
     convertBytesToGBs,
@@ -17,15 +17,15 @@ import {
 } from 'utils/billingUtil';
 
 import exportService from 'services/exportService';
-import {File} from 'services/fileService';
+import { File } from 'services/fileService';
 import isElectron from 'is-electron';
-import {Collection} from 'services/collectionService';
-import {useRouter} from 'next/router';
+import { Collection } from 'services/collectionService';
+import { useRouter } from 'next/router';
 import LinkButton from 'pages/gallery/components/LinkButton';
-import {downloadApp} from 'utils/common';
-import {logoutUser} from 'services/userService';
-import {LogoImage} from 'pages/_app';
-import {SetDialogMessage} from './MessageDialog';
+import { downloadApp } from 'utils/common';
+import { logoutUser } from 'services/userService';
+import { LogoImage } from 'pages/_app';
+import { SetDialogMessage } from './MessageDialog';
 import EnteSpinner from './EnteSpinner';
 import RecoveryKeyModal from './RecoveryKeyModal';
 
@@ -101,9 +101,9 @@ export default function Sidebar(props: Props) {
             onStateChange={(state) => setIsOpen(state.isOpen)}
             itemListElement="div"
         >
-            <div style={{display: 'flex', textAlign: 'center'}}>
+            <div style={{ display: 'flex', textAlign: 'center' }}>
                 <LogoImage
-                    style={{height: '24px', padding: '3px'}}
+                    style={{ height: '24px', padding: '3px' }}
                     alt="logo"
                     src="/icon.svg"
                 />
@@ -117,14 +117,14 @@ export default function Sidebar(props: Props) {
             >
                 {user?.email}
             </div>
-            <div style={{flex: 1, overflow: 'auto', paddingTop: '0'}}>
-                <div style={{outline: 'none'}}>
-                    <div style={{display: 'flex'}}>
-                        <h5 style={{margin: '4px 0 12px 2px'}}>
+            <div style={{ flex: 1, overflow: 'auto', paddingTop: '0' }}>
+                <div style={{ outline: 'none' }}>
+                    <div style={{ display: 'flex' }}>
+                        <h5 style={{ margin: '4px 0 12px 2px' }}>
                             {constants.SUBSCRIPTION_PLAN}
                         </h5>
                     </div>
-                    <div style={{color: '#959595'}}>
+                    <div style={{ color: '#959595' }}>
                         {isSubscriptionActive(subscription) ? (
                             isOnFreePlan(subscription) ? (
                                 constants.FREE_SUBSCRIPTION_INFO(
@@ -154,19 +154,19 @@ export default function Sidebar(props: Props) {
                         </Button>
                     </div>
                 </div>
-                <div style={{outline: 'none', marginTop: '30px'}} />
+                <div style={{ outline: 'none', marginTop: '30px' }} />
                 <div>
-                    <h5 style={{marginBottom: '12px'}}>
+                    <h5 style={{ marginBottom: '12px' }}>
                         {constants.USAGE_DETAILS}
                     </h5>
-                    <div style={{color: '#959595'}}>
+                    <div style={{ color: '#959595' }}>
                         {usage ? (
                             constants.USAGE_INFO(
                                 usage,
                                 Number(convertBytesToGBs(subscription?.storage)),
                             )
                         ) : (
-                            <div style={{textAlign: 'center'}}>
+                            <div style={{ textAlign: 'center' }}>
                                 <EnteSpinner
                                     style={{
                                         borderWidth: '2px',
@@ -187,13 +187,13 @@ export default function Sidebar(props: Props) {
                     }}
                 />
                 <LinkButton
-                    style={{marginTop: '30px'}}
+                    style={{ marginTop: '30px' }}
                     onClick={openFeedbackURL}
                 >
                     {constants.REQUEST_FEATURE}
                 </LinkButton>
                 <LinkButton
-                    style={{marginTop: '30px'}}
+                    style={{ marginTop: '30px' }}
                     onClick={openSupportMail}
                 >
                     {constants.SUPPORT}
@@ -204,26 +204,26 @@ export default function Sidebar(props: Props) {
                         onHide={() => setRecoveryModalView(false)}
                         somethingWentWrong={() => props.setDialogMessage({
                             title: constants.RECOVER_KEY_GENERATION_FAILED,
-                            close: {variant: 'danger'},
+                            close: { variant: 'danger' },
                         })}
                     />
                     <LinkButton
-                        style={{marginTop: '30px'}}
+                        style={{ marginTop: '30px' }}
                         onClick={() => setRecoveryModalView(true)}
                     >
                         {constants.DOWNLOAD_RECOVERY_KEY}
                     </LinkButton>
                 </>
                 <LinkButton
-                    style={{marginTop: '30px'}}
+                    style={{ marginTop: '30px' }}
                     onClick={() => {
-                        setData(LS_KEYS.SHOW_BACK_BUTTON, {value: true});
+                        setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
                         router.push('changePassword');
                     }}
                 >
                     {constants.CHANGE_PASSWORD}
                 </LinkButton>
-                <LinkButton style={{marginTop: '30px'}} onClick={exportFiles}>
+                <LinkButton style={{ marginTop: '30px' }} onClick={exportFiles}>
                     {constants.EXPORT}
                 </LinkButton>
                 <div
@@ -236,7 +236,7 @@ export default function Sidebar(props: Props) {
                 />
                 <LinkButton
                     variant="danger"
-                    style={{marginTop: '30px'}}
+                    style={{ marginTop: '30px' }}
                     onClick={() => props.setDialogMessage({
                         title: `${constants.CONFIRM} ${constants.LOGOUT}`,
                         content: constants.LOGOUT_MESSAGE,
@@ -246,7 +246,7 @@ export default function Sidebar(props: Props) {
                             action: logoutUser,
                             variant: 'danger',
                         },
-                        close: {text: constants.CANCEL},
+                        close: { text: constants.CANCEL },
                     })}
                 >
                   logout

src/components/SingleInputForm.tsx

@@ -1,7 +1,7 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import constants from 'utils/strings/constants';
-import {Form} from 'react-bootstrap';
-import {Formik, FormikHelpers} from 'formik';
+import { Form } from 'react-bootstrap';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import SubmitButton from './SubmitButton';
 
@@ -19,7 +19,7 @@ export default function SingleInputForm(props: Props) {
     const [loading, SetLoading] = useState(false);
     const submitForm = async (
         values: formValues,
-        {setFieldError}: FormikHelpers<formValues>,
+        { setFieldError }: FormikHelpers<formValues>,
     ) => {
         SetLoading(true);
         await props.callback(values.passphrase, setFieldError);
@@ -27,7 +27,7 @@ export default function SingleInputForm(props: Props) {
     };
     return (
         <Formik<formValues>
-            initialValues={{passphrase: ''}}
+            initialValues={{ passphrase: '' }}
             onSubmit={submitForm}
             validationSchema={Yup.object().shape({
                 passphrase: Yup.string().required(constants.REQUIRED),

src/components/SubmitButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Spinner} from 'react-bootstrap';
+import { Button, Spinner } from 'react-bootstrap';
 
 interface Props {
     loading: boolean;
@@ -16,13 +16,13 @@ const SubmitButton = ({
         type="submit"
         block={!inline}
         disabled={loading || disabled}
-        style={{padding: '6px 1em'}}
+        style={{ padding: '6px 1em' }}
     >
         {loading ? (
             <Spinner
                 as="span"
                 animation="border"
-                style={{width: '22px', height: '22px', borderWidth: '0.20em'}}
+                style={{ width: '22px', height: '22px', borderWidth: '0.20em' }}
             />
         ) : (
             buttonText

src/pages/_app.tsx

@@ -1,15 +1,15 @@
-import React, {useEffect, useState} from 'react';
-import styled, {createGlobalStyle} from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
 import Navbar from 'components/Navbar';
 import constants from 'utils/strings/constants';
-import {useRouter} from 'next/router';
+import { useRouter } from 'next/router';
 import Container from 'components/Container';
 import Head from 'next/head';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'photoswipe/dist/photoswipe.css';
 import EnteSpinner from 'components/EnteSpinner';
-import {sentryInit} from '../utils/sentry';
-import {Workbox} from 'workbox-window';
+import { sentryInit } from '../utils/sentry';
+import { Workbox } from 'workbox-window';
 
 const GlobalStyles = createGlobalStyle`
 /* ubuntu-regular - latin */
@@ -307,7 +307,7 @@ export interface BannerMessage {
 }
 
 sentryInit();
-export default function App({Component, err}) {
+export default function App({ Component, err }) {
     const router = useRouter();
     const [loading, setLoading] = useState(false);
     const [offline, setOffline] = useState(
@@ -321,7 +321,7 @@ export default function App({Component, err}) {
             console.warn('Progressive Web App support is disabled');
             return;
         }
-        const wb = new Workbox('sw.js', {scope: '/'});
+        const wb = new Workbox('sw.js', { scope: '/' });
         wb.register();
 
         // if ('serviceWorker' in navigator) {
@@ -383,7 +383,7 @@ export default function App({Component, err}) {
             <Navbar>
                 <FlexContainer>
                     <LogoImage
-                        style={{height: '24px', padding: '3px'}}
+                        style={{ height: '24px', padding: '3px' }}
                         alt="logo"
                         src="/icon.svg"
                     />

src/pages/_document.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Document, {
     Html, Head, Main, NextScript,
 } from 'next/document';
-import {ServerStyleSheet} from 'styled-components';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
     static async getInitialProps(ctx) {

src/pages/_error.js

@@ -2,7 +2,7 @@ import React from 'react';
 import NextErrorComponent from 'next/error';
 import * as Sentry from '@sentry/node';
 
-const MyError = ({statusCode, hasGetInitialPropsRun, err}) => {
+const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
     if (!hasGetInitialPropsRun && err) {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
@@ -14,7 +14,7 @@ const MyError = ({statusCode, hasGetInitialPropsRun, err}) => {
     return <NextErrorComponent statusCode={statusCode} />;
 };
 
-MyError.getInitialProps = async ({res, err, asPath}) => {
+MyError.getInitialProps = async ({ res, err, asPath }) => {
     const errorInitialProps = await NextErrorComponent.getInitialProps({
         res,
         err,

src/pages/api/[...all].ts

@@ -1,4 +1,4 @@
-import {createProxyMiddleware} from 'http-proxy-middleware';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
 export const config = {
     api: {
@@ -11,5 +11,5 @@ const API_ENDPOINT = process.env.NEXT_PUBLIC_ENTE_ENDPOINT || 'https://api.stagi
 export default createProxyMiddleware({
     target: API_ENDPOINT,
     changeOrigin: true,
-    pathRewrite: {'^/api': '/'},
+    pathRewrite: { '^/api': '/' },
 });

src/pages/changePassword/index.tsx

@@ -1,14 +1,14 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import constants from 'utils/strings/constants';
-import {getData, LS_KEYS, setData} from 'utils/storage/localStorage';
-import {useRouter} from 'next/router';
-import {B64EncryptionResult} from 'services/uploadService';
+import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import { useRouter } from 'next/router';
+import { B64EncryptionResult } from 'services/uploadService';
 import CryptoWorker, {
     setSessionKeys,
     generateAndSaveIntermediateKeyAttributes,
 } from 'utils/crypto';
-import {getActualKey} from 'utils/common/key';
-import {setKeys, UpdatedKey} from 'services/userService';
+import { getActualKey } from 'utils/common/key';
+import { setKeys, UpdatedKey } from 'services/userService';
 import SetPasswordForm from 'components/SetPasswordForm';
 
 export interface KEK {
@@ -64,7 +64,7 @@ export default function Generate() {
         redirectToGallery();
     };
     const redirectToGallery = () => {
-        setData(LS_KEYS.SHOW_BACK_BUTTON, {value: false});
+        setData(LS_KEYS.SHOW_BACK_BUTTON, { value: false });
         router.push('/gallery');
     };
     return (

src/pages/credentials/index.tsx

@@ -1,19 +1,19 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 
 import constants from 'utils/strings/constants';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
-import {useRouter} from 'next/router';
-import {KeyAttributes} from 'types';
-import {SESSION_KEYS, getKey} from 'utils/storage/sessionStorage';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { useRouter } from 'next/router';
+import { KeyAttributes } from 'types';
+import { SESSION_KEYS, getKey } from 'utils/storage/sessionStorage';
 import CryptoWorker, {
     generateAndSaveIntermediateKeyAttributes,
     setSessionKeys,
 } from 'utils/crypto';
-import {logoutUser} from 'services/userService';
-import {isFirstLogin} from 'utils/storage';
+import { logoutUser } from 'services/userService';
+import { isFirstLogin } from 'utils/storage';
 import SingleInputForm from 'components/SingleInputForm';
 import Container from 'components/Container';
-import {Button, Card} from 'react-bootstrap';
+import { Button, Card } from 'react-bootstrap';
 
 export default function Credentials() {
     const router = useRouter();
@@ -76,11 +76,11 @@ export default function Credentials() {
         <>
             <Container>
                 <Card
-                    style={{minWidth: '320px', padding: '40px 30px'}}
+                    style={{ minWidth: '320px', padding: '40px 30px' }}
                     className="text-center"
                 >
                     <Card.Body>
-                        <Card.Title style={{marginBottom: '24px'}}>
+                        <Card.Title style={{ marginBottom: '24px' }}>
                             {constants.ENTER_PASSPHRASE}
                         </Card.Title>
                         <SingleInputForm

src/pages/gallery/components/AddCollectionButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Card} from 'react-bootstrap';
+import { Card } from 'react-bootstrap';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
-import {CollectionIcon} from './CollectionSelector';
+import { CollectionIcon } from './CollectionSelector';
 
 const ImageContainer = styled.div`
     min-height: 192px;
@@ -15,12 +15,12 @@ const ImageContainer = styled.div`
     cursor: pointer;
 `;
 
-export default function AddCollectionButton({showNextModal}) {
+export default function AddCollectionButton({ showNextModal }) {
     return (
-        <CollectionIcon style={{margin: '10px'}} onClick={showNextModal}>
+        <CollectionIcon style={{ margin: '10px' }} onClick={showNextModal}>
             <Card>
                 <ImageContainer>+</ImageContainer>
-                <Card.Text style={{textAlign: 'center'}}>
+                <Card.Text style={{ textAlign: 'center' }}>
                     {constants.CREATE_COLLECTION}
                 </Card.Text>
             </Card>

src/pages/gallery/components/AlertBanner.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Alert from 'react-bootstrap/Alert';
 
-export default function AlertBanner({bannerMessage}) {
+export default function AlertBanner({ bannerMessage }) {
     return (
         <Alert
             variant="danger"

src/pages/gallery/components/ChoiceModal.tsx

@@ -1,8 +1,8 @@
 import MessageDialog from 'components/MessageDialog';
 import React from 'react';
-import {Button} from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
-import {UPLOAD_STRATEGY} from './Upload';
+import { UPLOAD_STRATEGY } from './Upload';
 
 interface Props {
     uploadFiles;
@@ -19,7 +19,7 @@ function ChoiceModal({
         <MessageDialog
             size="lg"
             {...props}
-            attributes={{title: constants.MULTI_FOLDER_UPLOAD}}
+            attributes={{ title: constants.MULTI_FOLDER_UPLOAD }}
         >
             <p>{constants.UPLOAD_STRATEGY_CHOICE}</p>
             <div

src/pages/gallery/components/CollectionNamer.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect, useRef} from 'react';
-import {Form} from 'react-bootstrap';
+import React, { useEffect, useRef } from 'react';
+import { Form } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
-import {Formik} from 'formik';
+import { Formik } from 'formik';
 import * as Yup from 'yup';
 import SubmitButton from 'components/SubmitButton';
 import MessageDialog from 'components/MessageDialog';
@@ -26,7 +26,7 @@ interface formValues {
     albumName: string;
 }
 
-export default function CollectionNamer({attributes, ...props}: Props) {
+export default function CollectionNamer({ attributes, ...props }: Props) {
     const collectionNameInputRef = useRef(null);
     useEffect(() => {
         if (attributes) {
@@ -40,7 +40,7 @@ export default function CollectionNamer({attributes, ...props}: Props) {
             <MessageDialog show={false} onHide={() => null} attributes={{}} />
         );
     }
-    const onSubmit = ({albumName}: formValues) => {
+    const onSubmit = ({ albumName }: formValues) => {
         attributes.callback(albumName);
         props.onHide();
     };
@@ -54,7 +54,7 @@ export default function CollectionNamer({attributes, ...props}: Props) {
             }}
         >
             <Formik<formValues>
-                initialValues={{albumName: attributes.autoFilledName}}
+                initialValues={{ albumName: attributes.autoFilledName }}
                 validationSchema={Yup.object().shape({
                     albumName: Yup.string().required(constants.REQUIRED),
                 })}

src/pages/gallery/components/CollectionOptions.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import {SetDialogMessage} from 'components/MessageDialog';
-import {ListGroup, Popover} from 'react-bootstrap';
+import { SetDialogMessage } from 'components/MessageDialog';
+import { ListGroup, Popover } from 'react-bootstrap';
 import {
     Collection,
     deleteCollection,
     renameCollection,
 } from 'services/collectionService';
-import {getSelectedCollection} from 'utils/collection';
+import { getSelectedCollection } from 'utils/collection';
 import constants from 'utils/strings/constants';
-import {SetCollectionNamerAttributes} from './CollectionNamer';
+import { SetCollectionNamerAttributes } from './CollectionNamer';
 import LinkButton from './LinkButton';
 
 interface Props {
@@ -77,7 +77,7 @@ const CollectionOptions = (props: Props) => {
 
     const MenuLink = (props) => (
         <LinkButton
-            style={{fontSize: '14px', fontWeight: 700, padding: '8px 1em'}}
+            style={{ fontSize: '14px', fontWeight: 700, padding: '8px 1em' }}
             {...props}
         >
             {props.children}
@@ -95,9 +95,9 @@ const CollectionOptions = (props: Props) => {
         </ListGroup.Item>
     );
     return (
-        <Popover id="collection-options" style={{borderRadius: '10px'}}>
-            <Popover.Content style={{padding: 0, border: 'none'}}>
-                <ListGroup style={{borderRadius: '8px'}}>
+        <Popover id="collection-options" style={{ borderRadius: '10px' }}>
+            <Popover.Content style={{ padding: 0, border: 'none' }}>
+                <ListGroup style={{ borderRadius: '8px' }}>
                     <MenuItem>
                         <MenuLink onClick={showRenameCollectionModal}>
                             {constants.RENAME}

src/pages/gallery/components/CollectionSelector.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect} from 'react';
-import {Card, Modal} from 'react-bootstrap';
+import React, { useEffect } from 'react';
+import { Card, Modal } from 'react-bootstrap';
 import styled from 'styled-components';
-import {CollectionAndItsLatestFile} from 'services/collectionService';
+import { CollectionAndItsLatestFile } from 'services/collectionService';
 import AddCollectionButton from './AddCollectionButton';
 import PreviewCard from './PreviewCard';
 

src/pages/gallery/components/Collections.tsx

@@ -1,20 +1,20 @@
 import CollectionShare from 'components/CollectionShare';
-import {SetDialogMessage} from 'components/MessageDialog';
+import { SetDialogMessage } from 'components/MessageDialog';
 import NavigationButton, {
     SCROLL_DIRECTION,
 } from 'components/NavigationButton';
 import React, {
     useEffect, useRef, useState,
 } from 'react';
-import {OverlayTrigger} from 'react-bootstrap';
-import {Collection, CollectionType} from 'services/collectionService';
-import {User} from 'services/userService';
+import { OverlayTrigger } from 'react-bootstrap';
+import { Collection, CollectionType } from 'services/collectionService';
+import { User } from 'services/userService';
 import styled from 'styled-components';
-import {getSelectedCollection} from 'utils/collection';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
-import {SetCollectionNamerAttributes} from './CollectionNamer';
+import { getSelectedCollection } from 'utils/collection';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { SetCollectionNamerAttributes } from './CollectionNamer';
 import CollectionOptions from './CollectionOptions';
-import OptionIcon, {OptionIconWrapper} from './OptionIcon';
+import OptionIcon, { OptionIconWrapper } from './OptionIcon';
 
 interface CollectionProps {
     collections: Collection[];
@@ -75,7 +75,7 @@ const Chip = styled.button<{ active: boolean }>`
 `;
 
 export default function Collections(props: CollectionProps) {
-    const {selected, collections, selectCollection} = props;
+    const { selected, collections, selectCollection } = props;
     const [selectedCollectionID, setSelectedCollectionID] = useState<number>(null);
     const collectionRef = useRef<HTMLDivElement>(null);
     const [collectionShareModalView, setCollectionShareModalView] = useState(false);
@@ -87,8 +87,8 @@ export default function Collections(props: CollectionProps) {
 
     const updateScrollObj = () => {
         if (collectionRef.current) {
-            const {scrollLeft, scrollWidth, clientWidth} = collectionRef.current;
-            setScrollObj({scrollLeft, scrollWidth, clientWidth});
+            const { scrollLeft, scrollWidth, clientWidth } = collectionRef.current;
+            setScrollObj({ scrollLeft, scrollWidth, clientWidth });
         }
     };
 

src/pages/gallery/components/OptionIcon.tsx

@@ -10,13 +10,13 @@ export const OptionIconWrapper = styled.div`
 interface Props {
     onClick: () => void;
 }
-const OptionIcon = ({onClick}: Props) => (
+const OptionIcon = ({ onClick }: Props) => (
     <OptionIconWrapper
         onClick={(e) => {
             onClick();
             e.stopPropagation();
         }}
-        style={{marginBottom: '2px'}}
+        style={{ marginBottom: '2px' }}
     >
         <svg
             xmlns="http://www.w3.org/2000/svg"

src/pages/gallery/components/PlanSelector.tsx

@@ -1,8 +1,8 @@
-import React, {useEffect, useState} from 'react';
-import {Form, Modal, Button} from 'react-bootstrap';
+import React, { useEffect, useState } from 'react';
+import { Form, Modal, Button } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 import styled from 'styled-components';
-import billingService, {Plan, Subscription} from 'services/billingService';
+import billingService, { Plan, Subscription } from 'services/billingService';
 import {
     convertBytesToGBs,
     getPlans,
@@ -17,11 +17,11 @@ import {
     hasPaidSubscription,
     isOnFreePlan,
 } from 'utils/billingUtil';
-import {reverseString} from 'utils/common';
-import {SetDialogMessage} from 'components/MessageDialog';
+import { reverseString } from 'utils/common';
+import { SetDialogMessage } from 'components/MessageDialog';
 import ArrowEast from 'components/ArrowEast';
 import LinkButton from './LinkButton';
-import {DeadCenter, SetLoading} from '..';
+import { DeadCenter, SetLoading } from '..';
 
 export const PlanIcon = styled.div<{ selected: boolean }>`
     border-radius: 20px;
@@ -103,7 +103,7 @@ function PlanSelector(props: Props) {
             props.setDialogMessage({
                 title: constants.ERROR,
                 content: constants.CANCEL_SUBSCRIPTION_ON_MOBILE,
-                close: {variant: 'danger'},
+                close: { variant: 'danger' },
             });
         } else if (hasStripeSubscription(subscription)) {
             props.setDialogMessage({
@@ -123,7 +123,7 @@ function PlanSelector(props: Props) {
                     ),
                     variant: 'success',
                 },
-                close: {text: constants.CANCEL},
+                close: { text: constants.CANCEL },
             });
         } else {
             try {
@@ -133,7 +133,7 @@ function PlanSelector(props: Props) {
                 props.setDialogMessage({
                     title: constants.ERROR,
                     content: constants.SUBSCRIPTION_PURCHASE_FAILED,
-                    close: {variant: 'danger'},
+                    close: { variant: 'danger' },
                 });
             } finally {
                 props.setLoading(false);
@@ -173,19 +173,19 @@ function PlanSelector(props: Props) {
                 </div>
                 <div
                     className="bold-text"
-                    style={{color: '#aaa', lineHeight: '36px', fontSize: '20px'}}
+                    style={{ color: '#aaa', lineHeight: '36px', fontSize: '20px' }}
                 >
                     {`${plan.price} / ${plan.period}`}
                 </div>
                 <Button
                     variant="outline-success"
                     block
-                    style={{marginTop: '30px'}}
+                    style={{ marginTop: '30px' }}
                     disabled={isUserSubscribedPlan(plan, subscription)}
                     onClick={async () => (await onPlanSelect(plan))}
                 >
                     {constants.CHOOSE_PLAN_BTN}
-                    <ArrowEast style={{marginLeft: '10px'}} />
+                    <ArrowEast style={{ marginLeft: '10px' }} />
                 </Button>
             </PlanIcon>
         ));
@@ -212,12 +212,12 @@ function PlanSelector(props: Props) {
                     </span>
                 </Modal.Title>
             </Modal.Header>
-            <Modal.Body style={{marginTop: '20px'}}>
+            <Modal.Body style={{ marginTop: '20px' }}>
                 <DeadCenter>
-                    <div style={{display: 'flex'}}>
+                    <div style={{ display: 'flex' }}>
                         <span
                             className="bold-text"
-                            style={{fontSize: '20px'}}
+                            style={{ fontSize: '20px' }}
                         >
                             {constants.MONTHLY}
                         </span>
@@ -225,13 +225,13 @@ function PlanSelector(props: Props) {
                         <Form.Switch
                             checked={planPeriod === PLAN_PERIOD.YEAR}
                             id="plan-period-toggler"
-                            style={{margin: '-4px 0 20px 15px'}}
+                            style={{ margin: '-4px 0 20px 15px' }}
                             className="custom-switch-md"
                             onChange={togglePeriod}
                         />
                         <span
                             className="bold-text"
-                            style={{fontSize: '20px'}}
+                            style={{ fontSize: '20px' }}
                         >
                             {constants.YEARLY}
                         </span>
@@ -248,7 +248,7 @@ function PlanSelector(props: Props) {
                 >
                     {plans && PlanIcons}
                 </div>
-                <DeadCenter style={{marginBottom: '30px'}}>
+                <DeadCenter style={{ marginBottom: '30px' }}>
                     {hasStripeSubscription(subscription) ? (
                         <>
                             {isSubscriptionCancelled(subscription) ? (
@@ -313,7 +313,7 @@ function PlanSelector(props: Props) {
                                     props.setDialogMessage,
                                     props.setLoading,
                                 )}
-                                style={{marginTop: '20px'}}
+                                style={{ marginTop: '20px' }}
                             >
                                 {constants.MANAGEMENT_PORTAL}
                             </LinkButton>
@@ -322,7 +322,7 @@ function PlanSelector(props: Props) {
                         <LinkButton
                             variant="primary"
                             onClick={props.closeModal}
-                            style={{color: 'rgb(121, 121, 121)', marginTop: '20px'}}
+                            style={{ color: 'rgb(121, 121, 121)', marginTop: '20px' }}
                         >
                             {isOnFreePlan(subscription) ?
                                 constants.SKIP :

src/pages/gallery/components/PreviewCard.tsx

@@ -1,10 +1,10 @@
-import React, {useContext, useLayoutEffect, useRef, useState} from 'react';
-import {File} from 'services/fileService';
+import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
+import { File } from 'services/fileService';
 import styled from 'styled-components';
 import PlayCircleOutline from 'components/PlayCircleOutline';
 import DownloadManager from 'services/downloadManager';
 import useLongPress from 'utils/common/useLongPress';
-import {GalleryContext} from '..';
+import { GalleryContext } from '..';
 
 interface IProps {
     file: File;
@@ -104,7 +104,7 @@ const Cont = styled.div<{ disabled: boolean; selected: boolean }>`
 
 export default function PreviewCard(props: IProps) {
     const [imgSrc, setImgSrc] = useState<string>();
-    const {thumbs} = useContext(GalleryContext);
+    const { thumbs } = useContext(GalleryContext);
     const {
         file,
         onClick,

src/pages/gallery/components/SelectedFileOptions.tsx

@@ -1,9 +1,9 @@
 import AddToCollectionBtn from 'components/AddToCollectionBtn';
 import DeleteBtn from 'components/DeleteBtn';
-import {SetDialogMessage} from 'components/MessageDialog';
+import { SetDialogMessage } from 'components/MessageDialog';
 import React from 'react';
 import constants from 'utils/strings/constants';
-import {SetCollectionSelectorAttributes} from './CollectionSelector';
+import { SetCollectionSelectorAttributes } from './CollectionSelector';
 
 interface Props {
     addToCollectionHelper: (collectionName, collection) => void;
@@ -37,7 +37,7 @@ const SelectedFileOptions = ({
                     text: constants.DELETE,
                     variant: 'danger',
                 },
-                close: {text: constants.CANCEL},
+                close: { text: constants.CANCEL },
             })}
         />
     </>

src/pages/gallery/components/Upload.tsx

@@ -1,15 +1,15 @@
-import React, {useEffect, useState} from 'react';
-import UploadService, {FileWithCollection, UPLOAD_STAGES} from 'services/uploadService';
-import {createAlbum} from 'services/collectionService';
-import {File} from 'services/fileService';
+import React, { useEffect, useState } from 'react';
+import UploadService, { FileWithCollection, UPLOAD_STAGES } from 'services/uploadService';
+import { createAlbum } from 'services/collectionService';
+import { File } from 'services/fileService';
 import constants from 'utils/strings/constants';
-import {SetDialogMessage} from 'components/MessageDialog';
+import { SetDialogMessage } from 'components/MessageDialog';
 import UploadProgress from './UploadProgress';
 
 import ChoiceModal from './ChoiceModal';
-import {SetCollectionNamerAttributes} from './CollectionNamer';
-import {SetCollectionSelectorAttributes} from './CollectionSelector';
-import {SetLoading} from '..';
+import { SetCollectionNamerAttributes } from './CollectionNamer';
+import { SetCollectionSelectorAttributes } from './CollectionSelector';
+import { SetLoading } from '..';
 
 interface Props {
     syncWithRemote: () => Promise<void>;
@@ -38,7 +38,7 @@ export default function Upload(props: Props) {
     const [uploadStage, setUploadStage] = useState<UPLOAD_STAGES>(
         UPLOAD_STAGES.START,
     );
-    const [fileCounter, setFileCounter] = useState({current: 0, total: 0});
+    const [fileCounter, setFileCounter] = useState({ current: 0, total: 0 });
     const [fileProgress, setFileProgress] = useState(new Map<string, number>());
     const [percentComplete, setPercentComplete] = useState(0);
     const [choiceModalView, setChoiceModalView] = useState(false);
@@ -61,7 +61,7 @@ export default function Upload(props: Props) {
 
     const uploadInit = function() {
         setUploadStage(UPLOAD_STAGES.START);
-        setFileCounter({current: 0, total: 0});
+        setFileCounter({ current: 0, total: 0 });
         setFileProgress(new Map<string, number>());
         setPercentComplete(0);
     };
@@ -161,7 +161,7 @@ export default function Upload(props: Props) {
                 for (const [collectionName, files] of collectionWiseFiles) {
                     const collection = await createAlbum(collectionName);
                     for (const file of files) {
-                        filesWithCollectionToUpload.push({collection, file});
+                        filesWithCollectionToUpload.push({ collection, file });
                     }
                 }
             } catch (e) {
@@ -169,7 +169,7 @@ export default function Upload(props: Props) {
                 props.setDialogMessage({
                     title: constants.ERROR,
                     staticBackdrop: true,
-                    close: {variant: 'danger'},
+                    close: { variant: 'danger' },
                     content: constants.CREATE_ALBUM_FAILED,
                 });
                 throw e;

src/pages/gallery/components/UploadButton.tsx

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
     min-height: 64px;
     right: 32px;
 `;
-function UploadButton({openFileUploader}) {
+function UploadButton({ openFileUploader }) {
     return (
         <Wrapper onClick={openFileUploader}>
             <svg

src/pages/gallery/components/UploadProgress.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
     Alert, Button, Modal, ProgressBar,
 } from 'react-bootstrap';
-import {UPLOAD_STAGES} from 'services/uploadService';
+import { UPLOAD_STAGES } from 'services/uploadService';
 import constants from 'utils/strings/constants';
 
 interface Props {
@@ -17,7 +17,7 @@ export default function UploadProgress(props: Props) {
     const fileProgressStatuses = [];
     if (props.fileProgress) {
         for (const [fileName, progress] of props.fileProgress) {
-            fileProgressStatuses.push({fileName, progress});
+            fileProgressStatuses.push({ fileName, progress });
         }
         fileProgressStatuses.sort((a, b) => {
             if (b.progress !== -1 && a.progress === -1) return 1;
@@ -75,8 +75,8 @@ export default function UploadProgress(props: Props) {
                             maxHeight: '250px',
                         }}
                     >
-                        {fileProgressStatuses.map(({fileName, progress}) => (
-                            <li key={fileName} style={{marginTop: '12px'}}>
+                        {fileProgressStatuses.map(({ fileName, progress }) => (
+                            <li key={fileName} style={{ marginTop: '12px' }}>
                                 {props.now === 100 ?
                                     fileName :
                                     constants.FILE_UPLOAD_PROGRESS(
@@ -88,10 +88,10 @@ export default function UploadProgress(props: Props) {
                     </ul>
                 )}
                 {props.now === 100 && (
-                    <Modal.Footer style={{border: 'none'}}>
+                    <Modal.Footer style={{ border: 'none' }}>
                         <Button
                             variant="outline-secondary"
-                            style={{width: '100%'}}
+                            style={{ width: '100%' }}
                             onClick={props.closeModal}
                         >
                             {constants.CLOSE}

src/pages/gallery/index.tsx

@@ -1,6 +1,6 @@
-import React, {createContext, useEffect, useRef, useState} from 'react';
-import {useRouter} from 'next/router';
-import {clearKeys, getKey, SESSION_KEYS} from 'utils/storage/sessionStorage';
+import React, { createContext, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/router';
+import { clearKeys, getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
 import {
     File,
     getLocalFiles,
@@ -20,28 +20,28 @@ import {
 } from 'services/collectionService';
 import constants from 'utils/strings/constants';
 import billingService from 'services/billingService';
-import {checkSubscriptionPurchase} from 'utils/billingUtil';
+import { checkSubscriptionPurchase } from 'utils/billingUtil';
 
 import FullScreenDropZone from 'components/FullScreenDropZone';
 import Sidebar from 'components/Sidebar';
-import {checkConnectivity} from 'utils/common';
+import { checkConnectivity } from 'utils/common';
 import {
     isFirstLogin,
     justSignedUp,
     setIsFirstLogin,
     setJustSignedUp,
 } from 'utils/storage';
-import {isTokenValid, logoutUser} from 'services/userService';
-import MessageDialog, {MessageAttributes} from 'components/MessageDialog';
-import {useDropzone} from 'react-dropzone';
+import { isTokenValid, logoutUser } from 'services/userService';
+import MessageDialog, { MessageAttributes } from 'components/MessageDialog';
+import { useDropzone } from 'react-dropzone';
 import EnteSpinner from 'components/EnteSpinner';
-import {LoadingOverlay} from 'components/LoadingOverlay';
+import { LoadingOverlay } from 'components/LoadingOverlay';
 import PhotoFrame from 'components/PhotoFrame';
-import {getSelectedFileIds} from 'utils/file';
-import {addFilesToCollection} from 'utils/collection';
-import {errorCodes} from 'utils/common/errorUtil';
-import SearchBar, {DateValue} from 'components/SearchBar';
-import {Bbox} from 'services/searchService';
+import { getSelectedFileIds } from 'utils/file';
+import { addFilesToCollection } from 'utils/collection';
+import { errorCodes } from 'utils/common/errorUtil';
+import SearchBar, { DateValue } from 'components/SearchBar';
+import { Bbox } from 'services/searchService';
 import SelectedFileOptions from './components/SelectedFileOptions';
 import CollectionSelector, {
     CollectionSelectorAttributes,
@@ -116,7 +116,7 @@ export default function Gallery() {
     const [bannerMessage, setBannerMessage] = useState<string>(null);
     const [isFirstLoad, setIsFirstLoad] = useState(false);
     const [isFirstFetch, setIsFirstFetch] = useState(false);
-    const [selected, setSelected] = useState<selectedState>({count: 0});
+    const [selected, setSelected] = useState<selectedState>({ count: 0 });
     const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
     const [dialogView, setDialogView] = useState(false);
     const [planModalView, setPlanModalView] = useState(false);
@@ -201,7 +201,7 @@ export default function Gallery() {
             await billingService.updatePlans();
             await billingService.syncSubscription();
             const collections = await syncCollections();
-            const {files} = await syncFiles(collections, setFiles);
+            const { files } = await syncFiles(collections, setFiles);
             const nonEmptyCollections = getNonEmptyCollections(
                 collections,
                 files,
@@ -247,12 +247,12 @@ export default function Gallery() {
     };
 
     const clearSelection = function() {
-        setSelected({count: 0});
+        setSelected({ count: 0 });
     };
 
     const selectCollection = (id?: number) => {
         const href = `/gallery?collection=${id || ''}`;
-        router.push(href, undefined, {shallow: true});
+        router.push(href, undefined, { shallow: true });
     };
 
     if (!files) {

src/pages/generate/index.tsx

@@ -1,18 +1,18 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import constants from 'utils/strings/constants';
-import {logoutUser, putAttributes} from 'services/userService';
-import {getData, LS_KEYS, setData} from 'utils/storage/localStorage';
-import {useRouter} from 'next/router';
-import {getKey, SESSION_KEYS} from 'utils/storage/sessionStorage';
+import { logoutUser, putAttributes } from 'services/userService';
+import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import { useRouter } from 'next/router';
+import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
 import {
     setSessionKeys,
     generateAndSaveIntermediateKeyAttributes,
     generateKeyAttributes,
 } from 'utils/crypto';
 import SetPasswordForm from 'components/SetPasswordForm';
-import {setJustSignedUp} from 'utils/storage';
+import { setJustSignedUp } from 'utils/storage';
 import RecoveryKeyModal from 'components/RecoveryKeyModal';
-import {KeyAttributes} from 'types';
+import { KeyAttributes } from 'types';
 import Container from 'components/Container';
 import EnteSpinner from 'components/EnteSpinner';
 
@@ -59,7 +59,7 @@ export default function Generate() {
 
     const onSubmit = async (passphrase, setFieldError) => {
         try {
-            const {keyAttributes, masterKey} = await generateKeyAttributes(
+            const { keyAttributes, masterKey } = await generateKeyAttributes(
                 passphrase,
             );
 

src/pages/index.tsx

@@ -1,15 +1,15 @@
-import React, {useState, useEffect} from 'react';
-import {useRouter} from 'next/router';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import constants from 'utils/strings/constants';
-import {Formik, FormikHelpers} from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
-import {getOtt} from 'services/userService';
+import { getOtt } from 'services/userService';
 import Container from 'components/Container';
-import {setData, LS_KEYS, getData} from 'utils/storage/localStorage';
+import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import SubmitButton from 'components/SubmitButton';
 
 interface formValues {
@@ -30,13 +30,13 @@ export default function Home() {
     }, []);
 
     const loginUser = async (
-        {email}: formValues,
-        {setFieldError}: FormikHelpers<formValues>,
+        { email }: formValues,
+        { setFieldError }: FormikHelpers<formValues>,
     ) => {
         try {
             setLoading(true);
             await getOtt(email);
-            setData(LS_KEYS.USER, {email});
+            setData(LS_KEYS.USER, { email });
             router.push('/verify');
         } catch (e) {
             setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
@@ -50,13 +50,13 @@ export default function Home() {
 
     return (
         <Container>
-            <Card style={{minWidth: '320px'}} className="text-center">
-                <Card.Body style={{padding: '40px 30px'}}>
-                    <Card.Title style={{marginBottom: '32px'}}>
+            <Card style={{ minWidth: '320px' }} className="text-center">
+                <Card.Body style={{ padding: '40px 30px' }}>
+                    <Card.Title style={{ marginBottom: '32px' }}>
                         {constants.LOGIN}
                     </Card.Title>
                     <Formik<formValues>
-                        initialValues={{email: ''}}
+                        initialValues={{ email: '' }}
                         validationSchema={Yup.object().shape({
                             email: Yup.string()
                                 .email(constants.EMAIL_ERROR)

src/pages/recover/index.tsx

@@ -1,14 +1,14 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 
 import constants from 'utils/strings/constants';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
-import {useRouter} from 'next/router';
-import {KeyAttributes} from 'types';
-import CryptoWorker, {setSessionKeys} from 'utils/crypto';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { useRouter } from 'next/router';
+import { KeyAttributes } from 'types';
+import CryptoWorker, { setSessionKeys } from 'utils/crypto';
 import SingleInputForm from 'components/SingleInputForm';
 import MessageDialog from 'components/MessageDialog';
 import Container from 'components/Container';
-import {Card, Button} from 'react-bootstrap';
+import { Card, Button } from 'react-bootstrap';
 
 export default function Recover() {
     const router = useRouter();
@@ -47,11 +47,11 @@ export default function Recover() {
         <>
             <Container>
                 <Card
-                    style={{minWidth: '320px', padding: '40px 30px'}}
+                    style={{ minWidth: '320px', padding: '40px 30px' }}
                     className="text-center"
                 >
                     <Card.Body>
-                        <Card.Title style={{marginBottom: '24px'}}>
+                        <Card.Title style={{ marginBottom: '24px' }}>
                             {constants.RECOVER_ACCOUNT}
                         </Card.Title>
                         <SingleInputForm

src/pages/signup/index.tsx

@@ -1,22 +1,22 @@
-import React, {useState, useEffect} from 'react';
-import {useRouter} from 'next/router';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
 import constants from 'utils/strings/constants';
-import {Formik, FormikHelpers} from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
-import {getOtt} from 'services/userService';
+import { getOtt } from 'services/userService';
 import Container from 'components/Container';
-import {setData, LS_KEYS, getData} from 'utils/storage/localStorage';
+import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import SubmitButton from 'components/SubmitButton';
-import {Button} from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import {
     generateAndSaveIntermediateKeyAttributes,
     generateKeyAttributes,
     setSessionKeys,
 } from 'utils/crypto';
-import {setJustSignedUp} from 'utils/storage';
+import { setJustSignedUp } from 'utils/storage';
 
 interface FormValues {
     email: string;
@@ -37,19 +37,19 @@ export default function SignUp() {
     }, []);
 
     const registerUser = async (
-        {email, passphrase, confirm}: FormValues,
-        {setFieldError}: FormikHelpers<FormValues>,
+        { email, passphrase, confirm }: FormValues,
+        { setFieldError }: FormikHelpers<FormValues>,
     ) => {
         setLoading(true);
         try {
-            setData(LS_KEYS.USER, {email});
+            setData(LS_KEYS.USER, { email });
             await getOtt(email);
         } catch (e) {
             setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
         }
         try {
             if (passphrase === confirm) {
-                const {keyAttributes, masterKey} = await generateKeyAttributes(passphrase);
+                const { keyAttributes, masterKey } = await generateKeyAttributes(passphrase);
                 setData(LS_KEYS.ORIGINAL_KEY_ATTRIBUTES, keyAttributes);
                 await generateAndSaveIntermediateKeyAttributes(
                     passphrase,
@@ -72,9 +72,9 @@ export default function SignUp() {
 
     return (
         <Container>
-            <Card style={{width: '400px'}} className="text-center">
-                <Card.Body style={{padding: '40px 30px'}}>
-                    <Card.Title style={{marginBottom: '20px'}}>
+            <Card style={{ width: '400px' }} className="text-center">
+                <Card.Body style={{ padding: '40px 30px' }}>
+                    <Card.Title style={{ marginBottom: '20px' }}>
                         {constants.SIGN_UP}
                     </Card.Title>
                     <Formik<FormValues>

src/pages/verify/index.tsx

@@ -1,11 +1,11 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import Container from 'components/Container';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import constants from 'utils/strings/constants';
-import {LS_KEYS, getData, setData} from 'utils/storage/localStorage';
-import {useRouter} from 'next/router';
-import {Formik, FormikHelpers} from 'formik';
+import { LS_KEYS, getData, setData } from 'utils/storage/localStorage';
+import { useRouter } from 'next/router';
+import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import {
     verifyOtt,
@@ -14,9 +14,9 @@ import {
     clearFiles,
     isTokenValid,
 } from 'services/userService';
-import {setIsFirstLogin} from 'utils/storage';
+import { setIsFirstLogin } from 'utils/storage';
 import SubmitButton from 'components/SubmitButton';
-import {clearKeys} from 'utils/storage/sessionStorage';
+import { clearKeys } from 'utils/storage/sessionStorage';
 
 interface formValues {
     ott: string;
@@ -49,8 +49,8 @@ export default function Verify() {
     }, []);
 
     const onSubmit = async (
-        {ott}: formValues,
-        {setFieldError}: FormikHelpers<formValues>,
+        { ott }: formValues,
+        { setFieldError }: FormikHelpers<formValues>,
     ) => {
         try {
             setLoading(true);
@@ -61,7 +61,7 @@ export default function Verify() {
                 token: resp.data.token,
                 id: resp.data.id,
             });
-            const {subscription, keyAttributes} = resp.data;
+            const { subscription, keyAttributes } = resp.data;
             keyAttributes && setData(LS_KEYS.KEY_ATTRIBUTES, keyAttributes);
             subscription && setData(LS_KEYS.SUBSCRIPTION, subscription);
             clearFiles();
@@ -95,19 +95,19 @@ export default function Verify() {
 
     return (
         <Container>
-            <Card style={{minWidth: '300px'}} className="text-center">
+            <Card style={{ minWidth: '300px' }} className="text-center">
                 <Card.Body>
                     <Card.Title
-                        style={{fontWeight: 'bold', marginBottom: '24px'}}
+                        style={{ fontWeight: 'bold', marginBottom: '24px' }}
                     >
                         {constants.VERIFY_EMAIL}
                     </Card.Title>
-                    {constants.EMAIL_SENT({email})}
+                    {constants.EMAIL_SENT({ email })}
                     {constants.CHECK_INBOX}
                     <br />
                     <br />
                     <Formik<formValues>
-                        initialValues={{ott: ''}}
+                        initialValues={{ ott: '' }}
                         validationSchema={Yup.object().shape({
                             ott: Yup.string().required(constants.REQUIRED),
                         })}
@@ -144,7 +144,7 @@ export default function Verify() {
                                     buttonText={constants.VERIFY}
                                     loading={loading}
                                 />
-                                <div style={{marginTop: '24px'}}>
+                                <div style={{ marginTop: '24px' }}>
                                     {resend === 0 && (
                                         <a href="#" onClick={resendEmail}>
                                             {constants.RESEND_MAIL}
@@ -156,7 +156,7 @@ export default function Verify() {
                                     {resend === 2 && (
                                         <span>{constants.SENT}</span>
                                     )}
-                                    <div style={{marginTop: '8px'}}>
+                                    <div style={{ marginTop: '8px' }}>
                                         <a href="#" onClick={logoutUser}>
                                             {constants.CHANGE_EMAIL}
                                         </a>

src/serviceWorker.js

@@ -1,7 +1,7 @@
-import {precacheAndRoute} from 'workbox-precaching';
-import {setDefaultHandler} from 'workbox-routing';
-import {NetworkOnly} from 'workbox-strategies';
-import {pageCache, offlineFallback} from 'workbox-recipes';
+import { precacheAndRoute } from 'workbox-precaching';
+import { setDefaultHandler } from 'workbox-routing';
+import { NetworkOnly } from 'workbox-strategies';
+import { pageCache, offlineFallback } from 'workbox-recipes';
 
 pageCache();
 

src/services/HTTPService.ts

@@ -1,4 +1,4 @@
-import axios, {AxiosRequestConfig} from 'axios';
+import axios, { AxiosRequestConfig } from 'axios';
 
 interface IHTTPHeaders {
     [headerKey: string]: any;
@@ -19,7 +19,7 @@ class HTTPService {
                 if (!err.response) {
                     return Promise.reject(err);
                 }
-                const {response} = err;
+                const { response } = err;
                 return Promise.reject(response);
             },
         );
@@ -76,7 +76,7 @@ class HTTPService {
             ...this.headers,
             ...config.headers,
         };
-        return await axios({...config, ...customConfig});
+        return await axios({ ...config, ...customConfig });
     }
 
     /**

src/services/billingService.ts

@@ -1,10 +1,10 @@
-import {getEndpoint} from 'utils/common/apiUtil';
-import {getStripePublishableKey, getToken} from 'utils/common/key';
-import {checkConnectivity, runningInBrowser} from 'utils/common/';
-import {setData, LS_KEYS} from 'utils/storage/localStorage';
-import {convertBytesToGBs} from 'utils/billingUtil';
-import {loadStripe, Stripe} from '@stripe/stripe-js';
-import {SUBSCRIPTION_VERIFICATION_ERROR} from 'utils/common/errorUtil';
+import { getEndpoint } from 'utils/common/apiUtil';
+import { getStripePublishableKey, getToken } from 'utils/common/key';
+import { checkConnectivity, runningInBrowser } from 'utils/common/';
+import { setData, LS_KEYS } from 'utils/storage/localStorage';
+import { convertBytesToGBs } from 'utils/billingUtil';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+import { SUBSCRIPTION_VERIFICATION_ERROR } from 'utils/common/errorUtil';
 import HTTPService from './HTTPService';
 
 const ENDPOINT = getEndpoint();
@@ -60,7 +60,7 @@ class billingService {
     public async updatePlans() {
         try {
             const response = await HTTPService.get(`${ENDPOINT}/billing/plans`);
-            const {plans} = response.data;
+            const { plans } = response.data;
             setData(LS_KEYS.PLANS, plans);
         } catch (e) {
             console.error('failed to get plans', e);
@@ -76,7 +76,7 @@ class billingService {
                     'X-Auth-Token': getToken(),
                 },
             );
-            const {subscription} = response.data;
+            const { subscription } = response.data;
             setData(LS_KEYS.SUBSCRIPTION, subscription);
         } catch (e) {
             console.error('failed to get user\'s subscription details', e);
@@ -107,7 +107,7 @@ class billingService {
                     'X-Auth-Token': getToken(),
                 },
             );
-            const {result} = response.data;
+            const { result } = response.data;
             switch (result.status) {
             case PAYMENT_INTENT_STATUS.SUCCESS:
                 // subscription updated successfully
@@ -119,7 +119,7 @@ class billingService {
                 );
             case PAYMENT_INTENT_STATUS.REQUIRE_ACTION:
                 {
-                    const {error} = await this.stripe.confirmCardPayment(
+                    const { error } = await this.stripe.confirmCardPayment(
                         result.clientSecret,
                     );
                     if (error) {
@@ -149,7 +149,7 @@ class billingService {
                     'X-Auth-Token': getToken(),
                 },
             );
-            const {subscription} = response.data;
+            const { subscription } = response.data;
             setData(LS_KEYS.SUBSCRIPTION, subscription);
         } catch (e) {
             console.error(e);
@@ -167,7 +167,7 @@ class billingService {
                     'X-Auth-Token': getToken(),
                 },
             );
-            const {subscription} = response.data;
+            const { subscription } = response.data;
             setData(LS_KEYS.SUBSCRIPTION, subscription);
         } catch (e) {
             console.error(e);
@@ -203,7 +203,7 @@ class billingService {
                     'X-Auth-Token': getToken(),
                 },
             );
-            const {subscription} = response.data;
+            const { subscription } = response.data;
             setData(LS_KEYS.SUBSCRIPTION, subscription);
             return subscription;
         } catch (err) {
@@ -232,7 +232,7 @@ class billingService {
         try {
             const response = await HTTPService.get(
                 `${ENDPOINT}/billing/usage`,
-                {startTime: 0, endTime: Date.now() * 1000},
+                { startTime: 0, endTime: Date.now() * 1000 },
                 {
                     'X-Auth-Token': getToken(),
                 },

src/services/collectionService.ts

@@ -1,15 +1,15 @@
-import {getEndpoint} from 'utils/common/apiUtil';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
+import { getEndpoint } from 'utils/common/apiUtil';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import localForage from 'utils/storage/localForage';
 
-import {getActualKey, getToken} from 'utils/common/key';
+import { getActualKey, getToken } from 'utils/common/key';
 import CryptoWorker from 'utils/crypto';
-import {SetDialogMessage} from 'components/MessageDialog';
+import { SetDialogMessage } from 'components/MessageDialog';
 import constants from 'utils/strings/constants';
-import {getPublicKey, User} from './userService';
-import {B64EncryptionResult} from './uploadService';
+import { getPublicKey, User } from './userService';
+import { B64EncryptionResult } from './uploadService';
 import HTTPService from './HTTPService';
-import {File} from './fileService';
+import { File } from './fileService';
 
 const ENDPOINT = getEndpoint();
 
@@ -98,7 +98,7 @@ const getCollections = async (
             {
                 sinceTime,
             },
-            {'X-Auth-Token': token},
+            { 'X-Auth-Token': token },
         );
         const promises: Promise<Collection>[] = resp.data.collections.map(
             async (collection: Collection) => {
@@ -284,7 +284,7 @@ const postCollection = async (
             `${ENDPOINT}/collections`,
             collectionData,
             null,
-            {'X-Auth-Token': token},
+            { 'X-Auth-Token': token },
         );
         return response.data.collection;
     } catch (e) {
@@ -339,7 +339,7 @@ export const addToCollection = async (
             `${ENDPOINT}/collections/add-files`,
             params,
             null,
-            {'X-Auth-Token': token},
+            { 'X-Auth-Token': token },
         );
     } catch (e) {
         console.error('Add to collection Failed ', e);
@@ -362,7 +362,7 @@ const removeFromCollection = async (collection: Collection, files: File[]) => {
             `${ENDPOINT}/collections/remove-files`,
             params,
             null,
-            {'X-Auth-Token': token},
+            { 'X-Auth-Token': token },
         );
     } catch (e) {
         console.error('remove from collection failed ', e);
@@ -382,7 +382,7 @@ export const deleteCollection = async (
             `${ENDPOINT}/collections/${collectionID}`,
             null,
             null,
-            {'X-Auth-Token': token},
+            { 'X-Auth-Token': token },
         );
         await syncWithRemote();
         redirectToAll();
@@ -391,7 +391,7 @@ export const deleteCollection = async (
         setDialogMessage({
             title: constants.ERROR,
             content: constants.DELETE_COLLECTION_FAILED,
-            close: {variant: 'danger'},
+            close: { variant: 'danger' },
         });
     }
 };

src/services/downloadManager.ts

@@ -1,9 +1,9 @@
-import {getToken} from 'utils/common/key';
-import {getFileUrl, getThumbnailUrl} from 'utils/common/apiUtil';
+import { getToken } from 'utils/common/key';
+import { getFileUrl, getThumbnailUrl } from 'utils/common/apiUtil';
 import CryptoWorker from 'utils/crypto';
-import {fileIsHEIC, convertHEIC2JPEG} from 'utils/file';
+import { fileIsHEIC, convertHEIC2JPEG } from 'utils/file';
 import HTTPService from './HTTPService';
-import {File} from './fileService';
+import { File } from './fileService';
 
 class DownloadManager {
     private fileDownloads = new Map<number, Promise<string>>();
@@ -26,8 +26,8 @@ class DownloadManager {
                     const resp = await HTTPService.get(
                         getThumbnailUrl(file.id),
                         null,
-                        {'X-Auth-Token': token},
-                        {responseType: 'arraybuffer'},
+                        { 'X-Auth-Token': token },
+                        { responseType: 'arraybuffer' },
                     );
                     const worker = await new CryptoWorker();
                     const decrypted: any = await worker.decryptThumbnail(
@@ -81,8 +81,8 @@ class DownloadManager {
             const resp = await HTTPService.get(
                 getFileUrl(file.id),
                 null,
-                {'X-Auth-Token': token},
-                {responseType: 'arraybuffer'},
+                { 'X-Auth-Token': token },
+                { responseType: 'arraybuffer' },
             );
             const decrypted: any = await worker.decryptFile(
                 new Uint8Array(resp.data),
@@ -123,7 +123,7 @@ class DownloadManager {
                 // The following function handles each data chunk
                 function push() {
                     // "done" is a Boolean and value a "Uint8Array"
-                    reader.read().then(async ({done, value}) => {
+                    reader.read().then(async ({ done, value }) => {
                         // Is there more data to read?
                         if (!done) {
                             const buffer = new Uint8Array(

src/services/exportService.ts

@@ -1,7 +1,7 @@
-import {runningInBrowser} from 'utils/common';
-import {Collection} from './collectionService';
+import { runningInBrowser } from 'utils/common';
+import { Collection } from './collectionService';
 import downloadManager from './downloadManager';
-import {File} from './fileService';
+import { File } from './fileService';
 
 enum ExportNotification {
     START = 'export started',

src/services/fileService.ts

@@ -1,11 +1,11 @@
-import {getEndpoint} from 'utils/common/apiUtil';
+import { getEndpoint } from 'utils/common/apiUtil';
 import localForage from 'utils/storage/localForage';
 
 import CryptoWorker from 'utils/crypto';
-import {getToken} from 'utils/common/key';
-import {ErrorHandler} from 'utils/common/errorUtil';
-import {DataStream, MetadataObject} from './uploadService';
-import {Collection} from './collectionService';
+import { getToken } from 'utils/common/key';
+import { ErrorHandler } from 'utils/common/errorUtil';
+import { DataStream, MetadataObject } from './uploadService';
+import { Collection } from './collectionService';
 import HTTPService from './HTTPService';
 
 const ENDPOINT = getEndpoint();
@@ -184,7 +184,7 @@ export const deleteFiles = async (
         }
         await HTTPService.post(
             `${ENDPOINT}/files/delete`,
-            {fileIDs: filesToDelete},
+            { fileIDs: filesToDelete },
             null,
             {
                 'X-Auth-Token': token,

src/services/searchService.ts

@@ -1,7 +1,7 @@
 import * as chrono from 'chrono-node';
-import {getEndpoint} from 'utils/common/apiUtil';
-import {getToken} from 'utils/common/key';
-import {DateValue, Suggestion, SuggestionType} from 'components/SearchBar';
+import { getEndpoint } from 'utils/common/apiUtil';
+import { getToken } from 'utils/common/key';
+import { DateValue, Suggestion, SuggestionType } from 'components/SearchBar';
 import HTTPService from './HTTPService';
 
 const ENDPOINT = getEndpoint();
@@ -18,8 +18,8 @@ export function parseHumanDate(humanDate: string): DateValue[] {
     const date1 = chrono.parseDate(`${humanDate} 1`);
     if (date !== null) {
         const dates = [
-            {month: date.getMonth()},
-            {date: date.getDate(), month: date.getMonth()},
+            { month: date.getMonth() },
+            { date: date.getDate(), month: date.getMonth() },
         ];
         let reverse = false;
         humanDate.split('').forEach((c) => {
@@ -32,7 +32,7 @@ export function parseHumanDate(humanDate: string): DateValue[] {
         }
         return dates;
     } if (date1) {
-        return [{month: date1.getMonth()}];
+        return [{ month: date1.getMonth() }];
     }
     return [];
 }
@@ -57,22 +57,22 @@ export function getHolidaySuggestion(searchPhrase: string): Suggestion[] {
     return [
         {
             label: 'Christmas',
-            value: {month: 11, date: 25},
+            value: { month: 11, date: 25 },
             type: SuggestionType.DATE,
         },
         {
             label: 'Christmas Eve',
-            value: {month: 11, date: 24},
+            value: { month: 11, date: 24 },
             type: SuggestionType.DATE,
         },
         {
             label: 'New Year',
-            value: {month: 0, date: 1},
+            value: { month: 0, date: 1 },
             type: SuggestionType.DATE,
         },
         {
             label: 'New Year Eve',
-            value: {month: 11, date: 31},
+            value: { month: 11, date: 31 },
             type: SuggestionType.DATE,
         },
     ].filter((suggestion) => suggestion.label.toLowerCase().includes(searchPhrase.toLowerCase()));
@@ -86,7 +86,7 @@ export function getYearSuggestion(searchPhrase: string): Suggestion[] {
                 return [
                     {
                         label: searchPhrase,
-                        value: {year},
+                        value: { year },
                         type: SuggestionType.DATE,
                     },
                 ];

src/services/uploadService.ts

@@ -1,22 +1,22 @@
-import {getEndpoint} from 'utils/common/apiUtil';
+import { getEndpoint } from 'utils/common/apiUtil';
 import EXIF from 'exif-js';
-import {FILE_TYPE} from 'pages/gallery';
-import {checkConnectivity, WaitFor2Seconds} from 'utils/common';
+import { FILE_TYPE } from 'pages/gallery';
+import { checkConnectivity, WaitFor2Seconds } from 'utils/common';
 import {
     ErrorHandler,
     THUMBNAIL_GENERATION_FAILED,
 } from 'utils/common/errorUtil';
-import {ComlinkWorker, getDedicatedCryptoWorker} from 'utils/crypto';
+import { ComlinkWorker, getDedicatedCryptoWorker } from 'utils/crypto';
 import * as convert from 'xml-js';
-import {ENCRYPTION_CHUNK_SIZE} from 'types';
-import {getToken} from 'utils/common/key';
+import { ENCRYPTION_CHUNK_SIZE } from 'types';
+import { getToken } from 'utils/common/key';
 import {
     fileIsHEIC,
     convertHEIC2JPEG,
     sortFilesIntoCollections,
 } from 'utils/file';
-import {Collection} from './collectionService';
-import {File, fileAttribute} from './fileService';
+import { Collection } from './collectionService';
+import { File, fileAttribute } from './fileService';
 import HTTPService from './HTTPService';
 
 const ENDPOINT = getEndpoint();
@@ -35,7 +35,7 @@ const WEST_DIRECTION = 'W';
 const MIN_STREAM_FILE_SIZE = 20 * 1024 * 1024;
 const CHUNKS_COMBINED_FOR_UPLOAD = 5;
 const RANDOM_PERCENTAGE_PROGRESS_FOR_PUT = () => 90 + 10 * Math.random();
-const NULL_LOCATION: Location = {latitude: null, longitude: null};
+const NULL_LOCATION: Location = { latitude: null, longitude: null };
 const WAIT_TIME_THUMBNAIL_GENERATION = 30 * 1000;
 const FILE_UPLOAD_FAILED = -1;
 const FILE_UPLOAD_SKIPPED = -2;
@@ -168,7 +168,7 @@ class UploadService {
             const metadataFiles: globalThis.File[] = [];
             const actualFiles: FileWithCollection[] = [];
             filesWithCollectionToUpload.forEach((fileWithCollection) => {
-                const {file} = fileWithCollection;
+                const { file } = fileWithCollection;
                 if (file?.name.substr(0, 1) === '.') {
                     // ignore files with name starting with . (hidden files)
                     return;
@@ -246,7 +246,7 @@ class UploadService {
         reader: FileReader,
         fileWithCollection: FileWithCollection,
     ) {
-        const {file: rawFile, collection} = fileWithCollection;
+        const { file: rawFile, collection } = fileWithCollection;
         this.fileProgress.set(rawFile.name, 0);
         this.updateProgressBarUI();
         try {
@@ -260,7 +260,7 @@ class UploadService {
                 this.fileProgress.delete(rawFile.name);
                 return;
             }
-            let {file: encryptedFile, fileKey: encryptedKey}: EncryptedFile = await this.encryptFile(worker, file, collection.key);
+            let { file: encryptedFile, fileKey: encryptedKey }: EncryptedFile = await this.encryptFile(worker, file, collection.key);
             let backupedFile: BackupedFile = await this.uploadToBucket(
                 encryptedFile,
             );
@@ -299,7 +299,7 @@ class UploadService {
     }
 
     private updateProgressBarUI() {
-        const {setPercentComplete, setFileCounter, setFileProgress} = this.progressBarProps;
+        const { setPercentComplete, setFileCounter, setFileProgress } = this.progressBarProps;
         setFileCounter({
             finished: this.filesCompleted,
             total: this.totalFileCount,
@@ -373,7 +373,7 @@ class UploadService {
                 fileType = FILE_TYPE.IMAGE;
             }
 
-            const {location, creationTime} = await this.getExifData(
+            const { location, creationTime } = await this.getExifData(
                 reader,
                 receivedFile,
                 fileType,
@@ -416,12 +416,12 @@ class UploadService {
         encryptionKey: string,
     ): Promise<EncryptedFile> {
         try {
-            const {key: fileKey, file: encryptedFiledata}: EncryptionResult = isDataStream(file.filedata) ?
+            const { key: fileKey, file: encryptedFiledata }: EncryptionResult = isDataStream(file.filedata) ?
                 await this.encryptFileStream(worker, file.filedata) :
                 await worker.encryptFile(file.filedata);
 
-            const {file: encryptedThumbnail}: EncryptionResult = await worker.encryptThumbnail(file.thumbnail, fileKey);
-            const {file: encryptedMetadata}: EncryptionResult = await worker.encryptMetadata(file.metadata, fileKey);
+            const { file: encryptedThumbnail }: EncryptionResult = await worker.encryptThumbnail(file.thumbnail, fileKey);
+            const { file: encryptedMetadata }: EncryptionResult = await worker.encryptMetadata(file.metadata, fileKey);
 
             const encryptedKey: B64EncryptionResult = await worker.encryptToB64(
                 fileKey,
@@ -445,13 +445,13 @@ class UploadService {
     }
 
     private async encryptFileStream(worker, fileData: DataStream) {
-        const {stream, chunkCount} = fileData;
+        const { stream, chunkCount } = fileData;
         const fileStreamReader = stream.getReader();
-        const {key, decryptionHeader, pushState} = await worker.initChunkEncryption();
-        const ref = {pullCount: 1};
+        const { key, decryptionHeader, pushState } = await worker.initChunkEncryption();
+        const ref = { pullCount: 1 };
         const encryptedFileStream = new ReadableStream({
             async pull(controller) {
-                const {value} = await fileStreamReader.read();
+                const { value } = await fileStreamReader.read();
                 const encryptedFileChunk = await worker.encryptFileChunk(
                     value,
                     pushState,
@@ -468,7 +468,7 @@ class UploadService {
             key,
             file: {
                 decryptionHeader,
-                encryptedData: {stream: encryptedFileStream, chunkCount},
+                encryptedData: { stream: encryptedFileStream, chunkCount },
             },
         };
     }
@@ -477,7 +477,7 @@ class UploadService {
         try {
             let fileObjectKey;
             if (isDataStream(file.file.encryptedData)) {
-                const {chunkCount, stream} = file.file.encryptedData;
+                const { chunkCount, stream } = file.file.encryptedData;
                 const uploadPartCount = Math.ceil(
                     chunkCount / CHUNKS_COMBINED_FOR_UPLOAD,
                 );
@@ -808,7 +808,7 @@ class UploadService {
                             (this.totalFileCount - this.filesCompleted) * 2,
                         ),
                     },
-                    {'X-Auth-Token': token},
+                    { 'X-Auth-Token': token },
                 );
                 const response = await this.uploadURLFetchInProgress;
 
@@ -835,7 +835,7 @@ class UploadService {
                 {
                     count,
                 },
-                {'X-Auth-Token': token},
+                { 'X-Auth-Token': token },
             );
 
             return response.data.urls;
@@ -884,7 +884,7 @@ class UploadService {
         ] of multipartUploadURLs.partURLs.entries()) {
             const combinedChunks = [];
             for (let i = 0; i < CHUNKS_COMBINED_FOR_UPLOAD; i++) {
-                const {done, value: chunk} = await streamEncryptedFileReader.read();
+                const { done, value: chunk } = await streamEncryptedFileReader.read();
                 if (done) {
                     break;
                 }
@@ -907,9 +907,9 @@ class UploadService {
                 ETag: response.headers.etag,
             });
         }
-        const options = {compact: true, ignoreComment: true, spaces: 4};
+        const options = { compact: true, ignoreComment: true, spaces: 4 };
         const body = convert.js2xml(
-            {CompleteMultipartUpload: {Part: resParts}},
+            { CompleteMultipartUpload: { Part: resParts } },
             options,
         );
         await this.retryPromise(
@@ -952,7 +952,7 @@ class UploadService {
         try {
             if (fileType === FILE_TYPE.VIDEO) {
                 // Todo  extract exif data from videos
-                return {location: NULL_LOCATION, creationTime: null};
+                return { location: NULL_LOCATION, creationTime: null };
             }
             const exifData: any = await new Promise((resolve) => {
                 reader.onload = () => {
@@ -961,7 +961,7 @@ class UploadService {
                 reader.readAsArrayBuffer(receivedFile);
             });
             if (!exifData) {
-                return {location: NULL_LOCATION, creationTime: null};
+                return { location: NULL_LOCATION, creationTime: null };
             }
             return {
                 location: this.getEXIFLocation(exifData),
@@ -1016,7 +1016,7 @@ class UploadService {
             lonSecond,
             lonDirection,
         );
-        return {latitude: latFinal * 1.0, longitude: lonFinal * 1.0};
+        return { latitude: latFinal * 1.0, longitude: lonFinal * 1.0 };
     }
 
     private convertDMSToDD(degrees, minutes, seconds, direction) {

src/services/userService.ts

@@ -1,10 +1,10 @@
-import {KeyAttributes} from 'types';
-import {getEndpoint} from 'utils/common/apiUtil';
-import {clearKeys} from 'utils/storage/sessionStorage';
+import { KeyAttributes } from 'types';
+import { getEndpoint } from 'utils/common/apiUtil';
+import { clearKeys } from 'utils/storage/sessionStorage';
 import router from 'next/router';
-import {clearData} from 'utils/storage/localStorage';
+import { clearData } from 'utils/storage/localStorage';
 import localForage from 'utils/storage/localForage';
-import {getToken} from 'utils/common/key';
+import { getToken } from 'utils/common/key';
 import HTTPService from './HTTPService';
 
 export interface UpdatedKey {
@@ -38,7 +38,7 @@ export const getPublicKey = async (email: string) => {
 
     const resp = await HTTPService.get(
         `${ENDPOINT}/users/public-key`,
-        {email},
+        { email },
         {
             'X-Auth-Token': token,
         },
@@ -46,11 +46,11 @@ export const getPublicKey = async (email: string) => {
     return resp.data.publicKey;
 };
 
-export const verifyOtt = (email: string, ott: string) => HTTPService.get(`${ENDPOINT}/users/credentials`, {email, ott});
+export const verifyOtt = (email: string, ott: string) => HTTPService.get(`${ENDPOINT}/users/credentials`, { email, ott });
 
 export const putAttributes = (token: string, keyAttributes: KeyAttributes) => HTTPService.put(
     `${ENDPOINT}/users/attributes`,
-    {keyAttributes},
+    { keyAttributes },
     null,
     {
         'X-Auth-Token': token,

src/utils/billingUtil.ts

@@ -5,11 +5,11 @@ import billingService, {
     Plan,
     Subscription,
 } from 'services/billingService';
-import {NextRouter} from 'next/router';
-import {SetDialogMessage} from 'components/MessageDialog';
-import {SetLoading} from 'pages/gallery';
-import {getData, LS_KEYS} from './storage/localStorage';
-import {SUBSCRIPTION_VERIFICATION_ERROR} from './common/errorUtil';
+import { NextRouter } from 'next/router';
+import { SetDialogMessage } from 'components/MessageDialog';
+import { SetLoading } from 'pages/gallery';
+import { getData, LS_KEYS } from './storage/localStorage';
+import { SUBSCRIPTION_VERIFICATION_ERROR } from './common/errorUtil';
 
 const STRIPE = 'stripe';
 
@@ -90,7 +90,7 @@ export async function updateSubscription(
             content: constants.SUBSCRIPTION_PURCHASE_SUCCESS(
                 getUserSubscription().expiryTime,
             ),
-            close: {variant: 'success'},
+            close: { variant: 'success' },
         });
     } catch (err) {
         switch (err?.message) {
@@ -109,21 +109,21 @@ export async function updateSubscription(
                         setLoading,
                     ),
                 },
-                close: {text: constants.CANCEL},
+                close: { text: constants.CANCEL },
             });
             break;
         case SUBSCRIPTION_VERIFICATION_ERROR:
             setDialogMessage({
                 title: constants.ERROR,
                 content: constants.SUBSCRIPTION_VERIFICATION_FAILED,
-                close: {variant: 'danger'},
+                close: { variant: 'danger' },
             });
             break;
         default:
             setDialogMessage({
                 title: constants.ERROR,
                 content: constants.SUBSCRIPTION_PURCHASE_FAILED,
-                close: {variant: 'danger'},
+                close: { variant: 'danger' },
             });
         }
     } finally {
@@ -143,13 +143,13 @@ export async function cancelSubscription(
         setDialogMessage({
             title: constants.SUCCESS,
             content: constants.SUBSCRIPTION_CANCEL_SUCCESS,
-            close: {variant: 'success'},
+            close: { variant: 'success' },
         });
     } catch (e) {
         setDialogMessage({
             title: constants.ERROR,
             content: constants.SUBSCRIPTION_CANCEL_FAILED,
-            close: {variant: 'danger'},
+            close: { variant: 'danger' },
         });
     } finally {
         closePlanSelectorModal();
@@ -168,13 +168,13 @@ export async function activateSubscription(
         setDialogMessage({
             title: constants.SUCCESS,
             content: constants.SUBSCRIPTION_ACTIVATE_SUCCESS,
-            close: {variant: 'success'},
+            close: { variant: 'success' },
         });
     } catch (e) {
         setDialogMessage({
             title: constants.ERROR,
             content: constants.SUBSCRIPTION_ACTIVATE_FAILED,
-            close: {variant: 'danger'},
+            close: { variant: 'danger' },
         });
     } finally {
         closePlanSelectorModal();
@@ -193,7 +193,7 @@ export async function updatePaymentMethod(
         setDialogMessage({
             title: constants.ERROR,
             content: constants.UNKNOWN_ERROR,
-            close: {variant: 'danger'},
+            close: { variant: 'danger' },
         });
     } finally {
         setLoading(true);
@@ -211,7 +211,7 @@ export async function checkSubscriptionPurchase(
             setDialogMessage({
                 title: constants.MESSAGE,
                 content: constants.SUBSCRIPTION_PURCHASE_CANCELLED,
-                close: {variant: 'danger'},
+                close: { variant: 'danger' },
             });
         } else if (sessionId) {
             try {
@@ -220,7 +220,7 @@ export async function checkSubscriptionPurchase(
                 );
                 setDialogMessage({
                     title: constants.SUBSCRIPTION_PURCHASE_SUCCESS_TITLE,
-                    close: {variant: 'success'},
+                    close: { variant: 'success' },
                     content: constants.SUBSCRIPTION_PURCHASE_SUCCESS(
                         subscription?.expiryTime,
                     ),
@@ -236,6 +236,6 @@ export async function checkSubscriptionPurchase(
     } catch (e) {
         // ignore
     } finally {
-        router.push('gallery', undefined, {shallow: true});
+        router.push('gallery', undefined, { shallow: true });
     }
 }

src/utils/collection/index.ts

@@ -4,8 +4,8 @@ import {
     CollectionType,
     createCollection,
 } from 'services/collectionService';
-import {getSelectedFiles} from 'utils/file';
-import {File} from 'services/fileService';
+import { getSelectedFiles } from 'utils/file';
+import { File } from 'services/fileService';
 
 export async function addFilesToCollection(
     setCollectionSelectorView: (value: boolean) => void,

src/utils/common/index.ts

@@ -1,4 +1,4 @@
-import {errorCodes} from './errorUtil';
+import { errorCodes } from './errorUtil';
 
 const TwoSecondInMillSeconds = 2000;
 const DESKTOP_APP_DOWNLOAD_URL = 'https://github.com/ente-io/bhari-frame/releases/';

src/utils/common/key.ts

@@ -1,8 +1,8 @@
-import {B64EncryptionResult} from 'services/uploadService';
+import { B64EncryptionResult } from 'services/uploadService';
 import CryptoWorker from 'utils/crypto';
-import {getData, LS_KEYS} from 'utils/storage/localStorage';
-import {getKey, SESSION_KEYS} from 'utils/storage/sessionStorage';
-import {errorCodes} from './errorUtil';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
+import { errorCodes } from './errorUtil';
 
 export const getActualKey = async () => {
     try {

src/utils/common/useLongPress.ts

@@ -1,5 +1,5 @@
 // https://stackoverflow.com/a/54749871/2760968
-import {useState, useEffect} from 'react';
+import { useState, useEffect } from 'react';
 
 export default function useLongPress(callback: () => void, ms = 300) {
     const [startLongPress, setStartLongPress] = useState(false);

src/utils/crypto/index.ts

@@ -1,12 +1,12 @@
-import {KEK} from 'pages/generate';
-import {B64EncryptionResult} from 'services/uploadService';
-import {KeyAttributes} from 'types';
+import { KEK } from 'pages/generate';
+import { B64EncryptionResult } from 'services/uploadService';
+import { KeyAttributes } from 'types';
 import * as Comlink from 'comlink';
-import {runningInBrowser} from 'utils/common';
-import {SESSION_KEYS, setKey} from 'utils/storage/sessionStorage';
-import {getData, LS_KEYS, setData} from 'utils/storage/localStorage';
-import {getActualKey, getToken} from 'utils/common/key';
-import {setRecoveryKey} from 'services/userService';
+import { runningInBrowser } from 'utils/common';
+import { SESSION_KEYS, setKey } from 'utils/storage/sessionStorage';
+import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import { getActualKey, getToken } from 'utils/common/key';
+import { setRecoveryKey } from 'services/userService';
 
 export interface ComlinkWorker {
     comlink: any;
@@ -19,7 +19,7 @@ export const getDedicatedCryptoWorker = (): ComlinkWorker => {
             type: 'module',
         });
         const comlink = Comlink.wrap(worker);
-        return {comlink, worker};
+        return { comlink, worker };
     }
 };
 const CryptoWorker: any = getDedicatedCryptoWorker()?.comlink;
@@ -57,7 +57,7 @@ export async function generateKeyAttributes(
         recoveryKeyDecryptionNonce: recoveryKeyEncryptedWithMasterKey.nonce,
     };
 
-    return {keyAttributes, masterKey};
+    return { keyAttributes, masterKey };
 }
 
 export async function generateAndSaveIntermediateKeyAttributes(

src/utils/crypto/libsodium.ts

@@ -1,5 +1,5 @@
-import sodium, {StateAddress} from 'libsodium-wrappers';
-import {ENCRYPTION_CHUNK_SIZE} from 'types';
+import sodium, { StateAddress } from 'libsodium-wrappers';
+import { ENCRYPTION_CHUNK_SIZE } from 'types';
 
 export async function decryptChaChaOneShot(
     data: Uint8Array,
@@ -62,7 +62,7 @@ export async function initChunkDecryption(header: Uint8Array, key: Uint8Array) {
     const decryptionChunkSize = ENCRYPTION_CHUNK_SIZE +
         sodium.crypto_secretstream_xchacha20poly1305_ABYTES;
     const tag = sodium.crypto_secretstream_xchacha20poly1305_TAG_MESSAGE;
-    return {pullState, decryptionChunkSize, tag};
+    return { pullState, decryptionChunkSize, tag };
 }
 
 export async function decryptChunk(data: Uint8Array, pullState: StateAddress) {
@@ -72,7 +72,7 @@ export async function decryptChunk(data: Uint8Array, pullState: StateAddress) {
         data,
     );
     const newTag = pullResult.tag;
-    return {decryptedData: pullResult.message, newTag};
+    return { decryptedData: pullResult.message, newTag };
 }
 
 export async function encryptChaChaOneShot(data: Uint8Array, key?: string) {

src/utils/file/index.ts

@@ -1,5 +1,5 @@
-import {File} from 'services/fileService';
-import {runningInBrowser} from 'utils/common';
+import { File } from 'services/fileService';
+import { runningInBrowser } from 'utils/common';
 
 const TYPE_HEIC = 'heic';
 

src/utils/search/index.ts

@@ -1,6 +1,6 @@
-import {DateValue} from 'components/SearchBar';
-import {File} from 'services/fileService';
-import {Bbox} from 'services/searchService';
+import { DateValue } from 'components/SearchBar';
+import { File } from 'services/fileService';
+import { Bbox } from 'services/searchService';
 
 export function isInsideBox(
     file: { longitude: number; latitude: number },

src/utils/sentry/index.ts

@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/node';
-import {RewriteFrames, CaptureConsole} from '@sentry/integrations';
+import { RewriteFrames, CaptureConsole } from '@sentry/integrations';
 
 export const sentryInit = () => {
     if (process.env.NEXT_PUBLIC_SENTRY_DSN) {

src/utils/storage/index.ts

@@ -1,13 +1,13 @@
-import {getData, LS_KEYS, setData} from './localStorage';
+import { getData, LS_KEYS, setData } from './localStorage';
 
 export const isFirstLogin = () => getData(LS_KEYS.IS_FIRST_LOGIN)?.status ?? false;
 
 export function setIsFirstLogin(status) {
-    setData(LS_KEYS.IS_FIRST_LOGIN, {status});
+    setData(LS_KEYS.IS_FIRST_LOGIN, { status });
 }
 
 export const justSignedUp = () => getData(LS_KEYS.JUST_SIGNED_UP)?.status ?? false;
 
 export function setJustSignedUp(status) {
-    setData(LS_KEYS.JUST_SIGNED_UP, {status});
+    setData(LS_KEYS.JUST_SIGNED_UP, { status });
 }

src/utils/storage/localForage.ts

@@ -1,4 +1,4 @@
-import {runningInBrowser} from 'utils/common';
+import { runningInBrowser } from 'utils/common';
 
 const localForage:LocalForage = runningInBrowser() && require('localforage');
 

src/utils/strings/constants.ts

@@ -1,4 +1,4 @@
-import {getConstantValue} from './vernacularStrings';
+import { getConstantValue } from './vernacularStrings';
 
 const constants = getConstantValue();
 export default constants;

src/utils/strings/englishConstants.tsx

@@ -24,7 +24,7 @@ const englishConstants = {
     EMAIL_ERROR: 'enter a valid email',
     REQUIRED: 'required',
     VERIFY_EMAIL: 'verify email',
-    EMAIL_SENT: ({email}) => (
+    EMAIL_SENT: ({ email }) => (
         <p>
         we have sent a mail to <b>{email}</b>
         </p>
@@ -164,7 +164,7 @@ const englishConstants = {
             <a
                 href="https://play.google.com/store/apps/details?id=io.ente.photos"
                 target="_blank"
-                style={{color: '#2dc262'}} rel="noreferrer"
+                style={{ color: '#2dc262' }} rel="noreferrer"
             >
               android
             </a>
@@ -173,7 +173,7 @@ const englishConstants = {
             {' '}
             <a
                 href="https://apps.apple.com/in/app/ente-photos/id1542026904"
-                style={{color: '#2dc262'}}
+                style={{ color: '#2dc262' }}
                 target="_blank" rel="noreferrer"
             >
               ios app
@@ -303,7 +303,7 @@ const englishConstants = {
     ZERO_SHAREES: () => (
         <>
             <p>currently shared with no one 😔</p>
-            <em style={{color: '#777'}}>"memories are fonder when shared"</em>
+            <em style={{ color: '#777' }}>"memories are fonder when shared"</em>
         </>
     ),
     SHARE_WITH_SELF: 'oops, you cannot share with yourself',
@@ -338,13 +338,13 @@ const englishConstants = {
         with ente
         </p>
     ),
-    SEARCH_STATS: ({resultCount, timeTaken}) => (
+    SEARCH_STATS: ({ resultCount, timeTaken }) => (
         <span>
-        found <span style={{color: '#2dc262'}}>{resultCount}</span>
+        found <span style={{ color: '#2dc262' }}>{resultCount}</span>
             {' '}
         memories (
             {' '}
-            <span style={{color: '#2dc262'}}>
+            <span style={{ color: '#2dc262' }}>
                 {' '}
                 {timeTaken}
             </span>

src/utils/strings/vernacularStrings.ts

@@ -1,4 +1,4 @@
-import {runningInBrowser} from 'utils/common';
+import { runningInBrowser } from 'utils/common';
 import englishConstants from './englishConstants';
 
 /** Enums of supported locale */

src/worker/crypto.worker.js

@@ -27,7 +27,7 @@ export class Crypto {
         const {
             file: encryptedMetadata,
         } = await libsodium.encryptChaChaOneShot(encodedMetadata, key);
-        const {encryptedData, ...other} = encryptedMetadata;
+        const { encryptedData, ...other } = encryptedMetadata;
         return {
             file: {
                 encryptedData: await libsodium.toB64(encryptedData),