remove passing setMessageAttribute through props

src/components/IncognitoWarning.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import constants from 'utils/strings/constants';
-import DialogBox from './DialogBox';
-
-export default function IncognitoWarning() {
-    return (
-        <DialogBox
-            show={true}
-            onHide={() => null}
-            attributes={{
-                title: constants.LOCAL_STORAGE_NOT_ACCESSIBLE,
-                staticBackdrop: true,
-                nonClosable: true,
-            }}>
-            <div>{constants.LOCAL_STORAGE_NOT_ACCESSIBLE_MESSAGE}</div>
-        </DialogBox>
-    );
-}

src/components/Sidebar/UtilitySection.tsx

@@ -73,7 +73,6 @@ export default function UtilitySection({ closeSidebar }) {
             <TwoFactorModal
                 show={twoFactorModalView}
                 onHide={closeTwoFactorModalView}
-                setDialogMessage={setDialogMessage}
                 closeSidebar={closeSidebar}
                 setLoading={startLoading}
             />

src/components/TwoFactor/Modal/index.tsx

@@ -3,14 +3,13 @@ import { getTwoFactorStatus } from 'services/userService';
 import { SetLoading } from 'types/gallery';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
 import constants from 'utils/strings/constants';
-import DialogBox, { SetDialogBoxAttributes } from '../../DialogBox';
+import DialogBox from '../../DialogBox';
 import TwoFactorModalSetupSection from './Setup';
 import TwoFactorModalManageSection from './Manage';
 
 interface Props {
     show: boolean;
     onHide: () => void;
-    setDialogMessage: SetDialogBoxAttributes;
     setLoading: SetLoading;
     closeSidebar: () => void;
 }

src/components/pages/gallery/PlanSelector.tsx

@@ -20,7 +20,6 @@ import {
     hasPaypalSubscription,
 } from 'utils/billing';
 import { reverseString } from 'utils/common';
-import { SetDialogBoxAttributes } from 'components/DialogBox';
 import ArrowEast from 'components/icons/ArrowEast';
 import LinkButton from './LinkButton';
 import { DeadCenter, GalleryContext } from 'pages/gallery';
@@ -79,7 +78,7 @@ export const PlanIcon = styled.div<{ currentlySubscribed: boolean }>`
 interface Props {
     modalView: boolean;
     closeModal: any;
-    setDialogMessage: SetDialogBoxAttributes;
+
     setLoading: SetLoading;
 }
 enum PLAN_PERIOD {
@@ -128,7 +127,7 @@ function PlanSelector(props: Props) {
             } catch (e) {
                 logError(e, 'plan selector modal open failed');
                 props.closeModal();
-                props.setDialogMessage({
+                appContext.setDialogMessage({
                     title: constants.OPEN_PLAN_SELECTOR_MODAL_FAILED,
                     content: constants.UNKNOWN_ERROR,
                     close: { text: 'close', variant: 'danger' },
@@ -150,7 +149,7 @@ function PlanSelector(props: Props) {
             hasMobileSubscription(subscription) &&
             !isSubscriptionCancelled(subscription)
         ) {
-            props.setDialogMessage({
+            appContext.setDialogMessage({
                 title: constants.ERROR,
                 content: constants.CANCEL_SUBSCRIPTION_ON_MOBILE,
                 close: { variant: 'danger' },
@@ -159,13 +158,13 @@ function PlanSelector(props: Props) {
             hasPaypalSubscription(subscription) &&
             !isSubscriptionCancelled(subscription)
         ) {
-            props.setDialogMessage({
+            appContext.setDialogMessage({
                 title: constants.MANAGE_PLAN,
                 content: constants.PAYPAL_MANAGE_NOT_SUPPORTED_MESSAGE(),
                 close: { variant: 'danger' },
             });
         } else if (hasStripeSubscription(subscription)) {
-            props.setDialogMessage({
+            appContext.setDialogMessage({
                 title: `${constants.CONFIRM} ${reverseString(
                     constants.UPDATE_SUBSCRIPTION
                 )}`,
@@ -176,7 +175,7 @@ function PlanSelector(props: Props) {
                     action: updateSubscription.bind(
                         null,
                         plan,
-                        props.setDialogMessage,
+                        appContext.setDialogMessage,
                         props.setLoading,
                         props.closeModal
                     ),
@@ -190,7 +189,7 @@ function PlanSelector(props: Props) {
                 await billingService.buySubscription(plan.stripeID);
             } catch (e) {
                 props.setLoading(false);
-                props.setDialogMessage({
+                appContext.setDialogMessage({
                     title: constants.ERROR,
                     content: constants.SUBSCRIPTION_PURCHASE_FAILED,
                     close: { variant: 'danger' },
@@ -320,7 +319,7 @@ function PlanSelector(props: Props) {
                                 <LinkButton
                                     color={'success'}
                                     onClick={() =>
-                                        props.setDialogMessage({
+                                        appContext.setDialogMessage({
                                             title: constants.CONFIRM_ACTIVATE_SUBSCRIPTION,
                                             content:
                                                 constants.ACTIVATE_SUBSCRIPTION_MESSAGE(
@@ -331,7 +330,7 @@ function PlanSelector(props: Props) {
                                                 text: constants.ACTIVATE_SUBSCRIPTION,
                                                 action: activateSubscription.bind(
                                                     null,
-                                                    props.setDialogMessage,
+                                                    appContext.setDialogMessage,
                                                     props.closeModal,
                                                     props.setLoading
                                                 ),
@@ -348,7 +347,7 @@ function PlanSelector(props: Props) {
                                 <LinkButton
                                     color="danger"
                                     onClick={() =>
-                                        props.setDialogMessage({
+                                        appContext.setDialogMessage({
                                             title: constants.CONFIRM_CANCEL_SUBSCRIPTION,
                                             content:
                                                 constants.CANCEL_SUBSCRIPTION_MESSAGE(),
@@ -357,7 +356,7 @@ function PlanSelector(props: Props) {
                                                 text: constants.CANCEL_SUBSCRIPTION,
                                                 action: cancelSubscription.bind(
                                                     null,
-                                                    props.setDialogMessage,
+                                                    appContext.setDialogMessage,
                                                     props.closeModal,
                                                     props.setLoading
                                                 ),
@@ -375,7 +374,7 @@ function PlanSelector(props: Props) {
                                 color="primary"
                                 onClick={updatePaymentMethod.bind(
                                     null,
-                                    props.setDialogMessage,
+                                    appContext.setDialogMessage,
                                     props.setLoading
                                 )}
                                 style={{ marginTop: '20px' }}>

src/components/pages/gallery/SelectedFileOptions/DeduplicateOptions.tsx

@@ -6,8 +6,8 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { DeduplicateContext } from 'pages/deduplicate';
 import LeftArrow from 'components/icons/LeftArrow';
-import { SetDialogBoxAttributes } from 'components/DialogBox';
 import { IconWithMessage } from 'components/IconWithMessage';
+import { AppContext } from 'pages/_app';
 
 const VerticalLine = styled.div`
     position: absolute;
@@ -19,18 +19,17 @@ const VerticalLine = styled.div`
 
 interface IProps {
     deleteFileHelper: () => void;
-    setDialogMessage: SetDialogBoxAttributes;
     close: () => void;
     count: number;
 }
 
 export default function DeduplicateOptions({
-    setDialogMessage,
     deleteFileHelper,
     close,
     count,
 }: IProps) {
     const deduplicateContext = useContext(DeduplicateContext);
+    const { setDialogMessage } = useContext(AppContext);
 
     const trashHandler = () =>
         setDialogMessage({

src/components/pages/gallery/SelectedFileOptions/GalleryOptions.tsx

@@ -1,5 +1,4 @@
-import { SetDialogBoxAttributes } from 'components/DialogBox';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { SetCollectionSelectorAttributes } from '../CollectionSelector';
 import DeleteIcon from 'components/icons/DeleteIcon';
 import CloseIcon from '@mui/icons-material/Close';
@@ -25,13 +24,13 @@ import DownloadIcon from 'components/icons/DownloadIcon';
 import { User } from 'types/user';
 import { IconWithMessage } from 'components/IconWithMessage';
 import { SelectionBar, SelectionContainer } from '.';
+import { AppContext } from 'pages/_app';
 
 interface Props {
     addToCollectionHelper: (collection: Collection) => void;
     moveToCollectionHelper: (collection: Collection) => void;
     restoreToCollectionHelper: (collection: Collection) => void;
     showCreateCollectionModal: (opsType: COLLECTION_OPS_TYPE) => () => void;
-    setDialogMessage: SetDialogBoxAttributes;
     setCollectionSelectorAttributes: SetCollectionSelectorAttributes;
     deleteFileHelper: (permanent?: boolean) => void;
     removeFromCollectionHelper: () => void;
@@ -52,7 +51,6 @@ const SelectedFileOptions = ({
     showCreateCollectionModal,
     removeFromCollectionHelper,
     fixTimeHelper,
-    setDialogMessage,
     setCollectionSelectorAttributes,
     deleteFileHelper,
     downloadHelper,
@@ -63,8 +61,8 @@ const SelectedFileOptions = ({
     activeCollection,
     isFavoriteCollection,
 }: Props) => {
+    const { setDialogMessage } = useContext(AppContext);
     const [showFixCreationTime, setShowFixCreationTime] = useState(false);
-
     useEffect(() => {
         const user: User = getData(LS_KEYS.USER);
         const showFixCreationTime =

src/components/pages/gallery/Upload.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { syncCollections, createAlbum } from 'services/collectionService';
 import constants from 'utils/strings/constants';
-import { SetDialogBoxAttributes } from 'components/DialogBox';
 import UploadProgress from './UploadProgress';
 
 import UploadStrategyChoiceModal from './UploadStrategyChoiceModal';
@@ -34,7 +33,6 @@ interface Props {
     setCollectionSelectorAttributes: SetCollectionSelectorAttributes;
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
     setLoading: SetLoading;
-    setDialogMessage: SetDialogBoxAttributes;
     setUploadInProgress: any;
     showCollectionSelector: () => void;
     fileRejections: FileRejection[];
@@ -279,7 +277,7 @@ export default function Upload(props: Props) {
             } catch (e) {
                 setProgressView(false);
                 logError(e, 'Failed to create album');
-                props.setDialogMessage({
+                appContext.setDialogMessage({
                     title: constants.ERROR,
                     staticBackdrop: true,
                     close: { variant: 'danger' },

src/pages/deduplicate/index.tsx

@@ -168,7 +168,6 @@ export default function Deduplicate() {
                 activeCollection={ALL_SECTION}
             />
             <DeduplicateOptions
-                setDialogMessage={setDialogMessage}
                 deleteFileHelper={deleteFileHelper}
                 count={selected.count}
                 close={closeDeduplication}

src/pages/gallery/index.tsx

@@ -598,7 +598,6 @@ export default function Gallery() {
                 <PlanSelector
                     modalView={planModalView}
                     closeModal={() => setPlanModalView(false)}
-                    setDialogMessage={setDialogMessage}
                     setLoading={setBlockingLoad}
                 />
                 <AlertBanner bannerMessage={bannerMessage} />
@@ -660,7 +659,6 @@ export default function Gallery() {
                     )}
                     setLoading={setBlockingLoad}
                     setCollectionNamerAttributes={setCollectionNamerAttributes}
-                    setDialogMessage={setDialogMessage}
                     setUploadInProgress={setUploadInProgress}
                     fileRejections={fileRejections}
                     setFiles={setFiles}
@@ -721,7 +719,6 @@ export default function Gallery() {
                             showCreateCollectionModal={
                                 showCreateCollectionModal
                             }
-                            setDialogMessage={setDialogMessage}
                             setCollectionSelectorAttributes={
                                 setCollectionSelectorAttributes
                             }

src/pages/index.tsx

@@ -10,7 +10,6 @@ import EnteSpinner from 'components/EnteSpinner';
 import SignUp from 'components/SignUp';
 import constants from 'utils/strings/constants';
 import localForage from 'utils/storage/localForage';
-import IncognitoWarning from 'components/IncognitoWarning';
 import { logError } from 'utils/sentry';
 import { getAlbumSiteHost, PAGES } from 'constants/pages';
 
@@ -102,7 +101,7 @@ export default function LandingPage() {
     const appContext = useContext(AppContext);
     const [loading, setLoading] = useState(true);
     const [showLogin, setShowLogin] = useState(true);
-    const [blockUsage, setBlockUsage] = useState(false);
+
     useEffect(() => {
         appContext.showNavBar(false);
         const currentURL = new URL(window.location.href);
@@ -143,7 +142,12 @@ export default function LandingPage() {
             await localForage.ready();
         } catch (e) {
             logError(e, 'usage in incognito mode tried');
-            setBlockUsage(true);
+            appContext.setDialogMessage({
+                title: constants.LOCAL_STORAGE_NOT_ACCESSIBLE,
+                staticBackdrop: true,
+                nonClosable: true,
+                content: constants.LOCAL_STORAGE_NOT_ACCESSIBLE_MESSAGE,
+            });
         } finally {
             setLoading(false);
         }
@@ -216,7 +220,6 @@ export default function LandingPage() {
                             )}
                         </SideBox>
                     </DesktopBox>
-                    {blockUsage && <IncognitoWarning />}
                 </>
             )}
         </Container>