Refactor modals; no functional change
This should be equivalent to the previous, just that the promises are stored in an object rather than variable. Benefits: - Allows a single "prettier-ignore" to bypass the multiline import. - Slightly less work when adding new modals by not having to create a named variable and handle the switch-case. The webpack lazy-load syntax is unfortunately verbose, so this is the best I can come up with for now.
This commit is contained in:
infinite-persistence
Thomas Zarebczan
parent
57ff910bbb
commit
c8bdb33e65
1 changed files with 51 additions and 190 deletions
|
|
@ -1,196 +1,56 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { withRouter } from 'react-router';
|
||||
import { lazyImport } from 'util/lazyImport';
|
||||
import * as MODALS from 'constants/modal_types';
|
||||
import LoadingBarOneOff from 'component/loadingBarOneOff';
|
||||
import * as MODALS from 'constants/modal_types';
|
||||
import { lazyImport } from 'util/lazyImport';
|
||||
|
||||
const ModalAffirmPurchase = lazyImport(() =>
|
||||
import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */)
|
||||
);
|
||||
const ModalAutoGenerateThumbnail = lazyImport(() =>
|
||||
import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */)
|
||||
);
|
||||
const ModalAutoUpdateDownloaded = lazyImport(() =>
|
||||
import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */)
|
||||
);
|
||||
const ModalBlockChannel = lazyImport(() =>
|
||||
import('modal/modalBlockChannel' /* webpackChunkName: "modalBlockChannel" */)
|
||||
);
|
||||
const ModalClaimCollectionAdd = lazyImport(() =>
|
||||
import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */)
|
||||
);
|
||||
const ModalConfirm = lazyImport(() => import('modal/modalConfirm' /* webpackChunkName: "modalConfirm" */));
|
||||
const ModalConfirmAge = lazyImport(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
|
||||
const ModalConfirmThumbnailUpload = lazyImport(() =>
|
||||
import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */)
|
||||
);
|
||||
const ModalConfirmTransaction = lazyImport(() =>
|
||||
import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */)
|
||||
);
|
||||
const ModalDeleteCollection = lazyImport(() =>
|
||||
import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */)
|
||||
);
|
||||
const ModalDownloading = lazyImport(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */));
|
||||
const ModalError = lazyImport(() => import('modal/modalError' /* webpackChunkName: "modalError" */));
|
||||
const ModalFileSelection = lazyImport(() =>
|
||||
import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */)
|
||||
);
|
||||
const ModalFileTimeout = lazyImport(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */));
|
||||
const ModalFirstReward = lazyImport(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */));
|
||||
const ModalImageUpload = lazyImport(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */));
|
||||
const ModalMassTipsUnlock = lazyImport(() =>
|
||||
import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)
|
||||
);
|
||||
const ModalMinChannelAge = lazyImport(() =>
|
||||
import('modal/modalMinChannelAge' /* webpackChunkName: "modalMinChannelAge" */)
|
||||
);
|
||||
const ModalMobileSearch = lazyImport(() =>
|
||||
import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */)
|
||||
);
|
||||
const ModalOpenExternalResource = lazyImport(() =>
|
||||
import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */)
|
||||
);
|
||||
const ModalPasswordUnsave = lazyImport(() =>
|
||||
import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */)
|
||||
);
|
||||
const ModalPhoneCollection = lazyImport(() =>
|
||||
import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */)
|
||||
);
|
||||
const ModalPublish = lazyImport(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */));
|
||||
const ModalPublishPreview = lazyImport(() =>
|
||||
import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)
|
||||
);
|
||||
const ModalRemoveCard = lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */));
|
||||
const ModalConfirmOdyseeMembership = lazyImport(() =>
|
||||
import('modal/modalConfirmOdyseeMembership' /* webpackChunkName: "modalConfirmOdyseeMembership" */)
|
||||
);
|
||||
const OdyseeMembershipSplash = lazyImport(() =>
|
||||
import('modal/modalMembershipSplash' /* webpackChunkName: "modalMembershipSplash" */)
|
||||
);
|
||||
const ModalRemoveComment = lazyImport(() =>
|
||||
import('modal/modalRemoveComment' /* webpackChunkName: "modalRemoveComment" */)
|
||||
);
|
||||
const ModalRemoveFile = lazyImport(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
|
||||
const ModalRevokeClaim = lazyImport(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */));
|
||||
const ModalRewardCode = lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
|
||||
const ModalSendTip = lazyImport(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */));
|
||||
const ModalSetReferrer = lazyImport(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */));
|
||||
const ModalSocialShare = lazyImport(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */));
|
||||
const ModalSupportsLiquidate = lazyImport(() =>
|
||||
import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */)
|
||||
);
|
||||
const ModalSyncEnable = lazyImport(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */));
|
||||
const ModalTransactionFailed = lazyImport(() =>
|
||||
import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */)
|
||||
);
|
||||
const ModalUpgrade = lazyImport(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */));
|
||||
const ModalViewImage = lazyImport(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */));
|
||||
const ModalWalletDecrypt = lazyImport(() =>
|
||||
import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */)
|
||||
);
|
||||
const ModalWalletEncrypt = lazyImport(() =>
|
||||
import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */)
|
||||
);
|
||||
const ModalWalletUnlock = lazyImport(() =>
|
||||
import('modal/modalWalletUnlock' /* webpackChunkName: "modalWalletUnlock" */)
|
||||
);
|
||||
const ModalYoutubeWelcome = lazyImport(() =>
|
||||
import('modal/modalYoutubeWelcome' /* webpackChunkName: "modalYoutubeWelcome" */)
|
||||
);
|
||||
|
||||
function getModal(id) {
|
||||
switch (id) {
|
||||
case MODALS.CONFIRM:
|
||||
return ModalConfirm;
|
||||
case MODALS.UPGRADE:
|
||||
return ModalUpgrade;
|
||||
case MODALS.DOWNLOADING:
|
||||
return ModalDownloading;
|
||||
case MODALS.AUTO_GENERATE_THUMBNAIL:
|
||||
return ModalAutoGenerateThumbnail;
|
||||
case MODALS.AUTO_UPDATE_DOWNLOADED:
|
||||
return ModalAutoUpdateDownloaded;
|
||||
case MODALS.ERROR:
|
||||
return ModalError;
|
||||
case MODALS.FILE_TIMEOUT:
|
||||
return ModalFileTimeout;
|
||||
case MODALS.FIRST_REWARD:
|
||||
return ModalFirstReward;
|
||||
case MODALS.TRANSACTION_FAILED:
|
||||
return ModalTransactionFailed;
|
||||
case MODALS.CONFIRM_FILE_REMOVE:
|
||||
return ModalRemoveFile;
|
||||
case MODALS.AFFIRM_PURCHASE:
|
||||
return ModalAffirmPurchase;
|
||||
case MODALS.CONFIRM_CLAIM_REVOKE:
|
||||
return ModalRevokeClaim;
|
||||
case MODALS.PHONE_COLLECTION:
|
||||
return ModalPhoneCollection;
|
||||
case MODALS.SEND_TIP:
|
||||
return ModalSendTip;
|
||||
case MODALS.MEMBERSHIP_SPLASH:
|
||||
return OdyseeMembershipSplash;
|
||||
case MODALS.SOCIAL_SHARE:
|
||||
return ModalSocialShare;
|
||||
case MODALS.PUBLISH:
|
||||
return ModalPublish;
|
||||
case MODALS.PUBLISH_PREVIEW:
|
||||
return ModalPublishPreview;
|
||||
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
|
||||
return ModalOpenExternalResource;
|
||||
case MODALS.CONFIRM_TRANSACTION:
|
||||
return ModalConfirmTransaction;
|
||||
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
|
||||
return ModalConfirmThumbnailUpload;
|
||||
case MODALS.WALLET_ENCRYPT:
|
||||
return ModalWalletEncrypt;
|
||||
case MODALS.WALLET_DECRYPT:
|
||||
return ModalWalletDecrypt;
|
||||
case MODALS.WALLET_UNLOCK:
|
||||
return ModalWalletUnlock;
|
||||
case MODALS.WALLET_PASSWORD_UNSAVE:
|
||||
return ModalPasswordUnsave;
|
||||
case MODALS.REWARD_GENERATED_CODE:
|
||||
return ModalRewardCode;
|
||||
case MODALS.YOUTUBE_WELCOME:
|
||||
return ModalYoutubeWelcome;
|
||||
case MODALS.SET_REFERRER:
|
||||
return ModalSetReferrer;
|
||||
case MODALS.CONFIRM_AGE:
|
||||
return ModalConfirmAge;
|
||||
case MODALS.FILE_SELECTION:
|
||||
return ModalFileSelection;
|
||||
case MODALS.LIQUIDATE_SUPPORTS:
|
||||
return ModalSupportsLiquidate;
|
||||
case MODALS.IMAGE_UPLOAD:
|
||||
return ModalImageUpload;
|
||||
case MODALS.SYNC_ENABLE:
|
||||
return ModalSyncEnable;
|
||||
case MODALS.MOBILE_SEARCH:
|
||||
return ModalMobileSearch;
|
||||
case MODALS.VIEW_IMAGE:
|
||||
return ModalViewImage;
|
||||
case MODALS.MASS_TIP_UNLOCK:
|
||||
return ModalMassTipsUnlock;
|
||||
case MODALS.BLOCK_CHANNEL:
|
||||
return ModalBlockChannel;
|
||||
case MODALS.MIN_CHANNEL_AGE:
|
||||
return ModalMinChannelAge;
|
||||
case MODALS.COLLECTION_ADD:
|
||||
return ModalClaimCollectionAdd;
|
||||
case MODALS.COLLECTION_DELETE:
|
||||
return ModalDeleteCollection;
|
||||
case MODALS.CONFIRM_REMOVE_CARD:
|
||||
return ModalRemoveCard;
|
||||
case MODALS.CONFIRM_ODYSEE_MEMBERSHIP:
|
||||
return ModalConfirmOdyseeMembership;
|
||||
case MODALS.CONFIRM_REMOVE_COMMENT:
|
||||
return ModalRemoveComment;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
// prettier-ignore
|
||||
const MAP = Object.freeze({
|
||||
[MODALS.AFFIRM_PURCHASE]: lazyImport(() => import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */)),
|
||||
[MODALS.AUTO_GENERATE_THUMBNAIL]: lazyImport(() => import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */)),
|
||||
[MODALS.AUTO_UPDATE_DOWNLOADED]: lazyImport(() => import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */)),
|
||||
[MODALS.BLOCK_CHANNEL]: lazyImport(() => import('modal/modalBlockChannel' /* webpackChunkName: "modalBlockChannel" */)),
|
||||
[MODALS.COLLECTION_ADD]: lazyImport(() => import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */)),
|
||||
[MODALS.COLLECTION_DELETE]: lazyImport(() => import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */)),
|
||||
[MODALS.CONFIRM]: lazyImport(() => import('modal/modalConfirm' /* webpackChunkName: "modalConfirm" */)),
|
||||
[MODALS.CONFIRM_AGE]: lazyImport(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */)),
|
||||
[MODALS.CONFIRM_CLAIM_REVOKE]: lazyImport(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */)),
|
||||
[MODALS.CONFIRM_EXTERNAL_RESOURCE]: lazyImport(() => import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */)),
|
||||
[MODALS.CONFIRM_FILE_REMOVE]: lazyImport(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */)),
|
||||
[MODALS.CONFIRM_ODYSEE_MEMBERSHIP]: lazyImport(() => import('modal/modalConfirmOdyseeMembership' /* webpackChunkName: "modalConfirmOdyseeMembership" */)),
|
||||
[MODALS.CONFIRM_REMOVE_CARD]: lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */)),
|
||||
[MODALS.CONFIRM_REMOVE_COMMENT]: lazyImport(() => import('modal/modalRemoveComment' /* webpackChunkName: "modalRemoveComment" */)),
|
||||
[MODALS.CONFIRM_THUMBNAIL_UPLOAD]: lazyImport(() => import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */)),
|
||||
[MODALS.CONFIRM_TRANSACTION]: lazyImport(() => import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */)),
|
||||
[MODALS.DOWNLOADING]: lazyImport(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */)),
|
||||
[MODALS.ERROR]: lazyImport(() => import('modal/modalError' /* webpackChunkName: "modalError" */)),
|
||||
[MODALS.FILE_SELECTION]: lazyImport(() => import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */)),
|
||||
[MODALS.FILE_TIMEOUT]: lazyImport(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */)),
|
||||
[MODALS.FIRST_REWARD]: lazyImport(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */)),
|
||||
[MODALS.IMAGE_UPLOAD]: lazyImport(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */)),
|
||||
[MODALS.LIQUIDATE_SUPPORTS]: lazyImport(() => import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */)),
|
||||
[MODALS.MASS_TIP_UNLOCK]: lazyImport(() => import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)),
|
||||
[MODALS.MEMBERSHIP_SPLASH]: lazyImport(() => import('modal/modalMembershipSplash' /* webpackChunkName: "modalMembershipSplash" */)),
|
||||
[MODALS.MIN_CHANNEL_AGE]: lazyImport(() => import('modal/modalMinChannelAge' /* webpackChunkName: "modalMinChannelAge" */)),
|
||||
[MODALS.MOBILE_SEARCH]: lazyImport(() => import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */)),
|
||||
[MODALS.PHONE_COLLECTION]: lazyImport(() => import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */)),
|
||||
[MODALS.PUBLISH]: lazyImport(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */)),
|
||||
[MODALS.PUBLISH_PREVIEW]: lazyImport(() => import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)),
|
||||
[MODALS.REWARD_GENERATED_CODE]: lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */)),
|
||||
[MODALS.SEND_TIP]: lazyImport(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */)),
|
||||
[MODALS.SET_REFERRER]: lazyImport(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */)),
|
||||
[MODALS.SOCIAL_SHARE]: lazyImport(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */)),
|
||||
[MODALS.SYNC_ENABLE]: lazyImport(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */)),
|
||||
[MODALS.TRANSACTION_FAILED]: lazyImport(() => import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */)),
|
||||
[MODALS.UPGRADE]: lazyImport(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */)),
|
||||
[MODALS.VIEW_IMAGE]: lazyImport(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */)),
|
||||
[MODALS.WALLET_DECRYPT]: lazyImport(() => import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */)),
|
||||
[MODALS.WALLET_ENCRYPT]: lazyImport(() => import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */)),
|
||||
[MODALS.WALLET_PASSWORD_UNSAVE]: lazyImport(() => import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */)),
|
||||
[MODALS.WALLET_UNLOCK]: lazyImport(() => import('modal/modalWalletUnlock' /* webpackChunkName: "modalWalletUnlock" */)),
|
||||
[MODALS.YOUTUBE_WELCOME]: lazyImport(() => import('modal/modalYoutubeWelcome' /* webpackChunkName: "modalYoutubeWelcome" */)),
|
||||
});
|
||||
|
||||
type Props = {
|
||||
modal: { id: string, modalProps: {} },
|
||||
|
|
@ -208,6 +68,7 @@ function ModalRouter(props: Props) {
|
|||
}, [pathname, hideModal]);
|
||||
|
||||
if (error) {
|
||||
const ModalError = MAP[MODALS.ERROR];
|
||||
return (
|
||||
<React.Suspense fallback={<LoadingBarOneOff />}>
|
||||
<ModalError {...error} />
|
||||
|
|
@ -220,9 +81,9 @@ function ModalRouter(props: Props) {
|
|||
}
|
||||
|
||||
const { id, modalProps } = modal;
|
||||
const SelectedModal = getModal(id);
|
||||
const SelectedModal = MAP[id];
|
||||
|
||||
if (SelectedModal === null) {
|
||||
if (!SelectedModal) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue