From 8ace40522e49041f2d054903a04db7230599e609 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 23 Feb 2022 11:54:45 +0800 Subject: [PATCH] Add modal to change "min channel age" It'll be easier to handle through a modal -- we won't need to debounce the values, and it also clears up the clutter from 'settingsCreator' --- static/app-strings.json | 3 ++ ui/constants/modal_types.js | 1 + ui/modal/modalMinChannelAge/index.js | 9 ++++ ui/modal/modalMinChannelAge/view.jsx | 76 ++++++++++++++++++++++++++++ ui/modal/modalRouter/view.jsx | 5 ++ 5 files changed, 94 insertions(+) create mode 100644 ui/modal/modalMinChannelAge/index.js create mode 100644 ui/modal/modalMinChannelAge/view.jsx diff --git a/static/app-strings.json b/static/app-strings.json index 88f6a38f7..2cab060bc 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2197,5 +2197,8 @@ "When do you want to go live?": "When do you want to go live?", "Anytime": "Anytime", "Scheduled Time": "Scheduled Time", + "Set minimum channel age": "Set minimum channel age", + "Note that the restriction can only be applied to channels created after Feb 8th, 2022.": "Note that the restriction can only be applied to channels created after Feb 8th, 2022.", + "No limit": "No limit", "--end--": "--end--" } diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js index 706a55944..7570b9d4f 100644 --- a/ui/constants/modal_types.js +++ b/ui/constants/modal_types.js @@ -42,6 +42,7 @@ export const IMAGE_UPLOAD = 'image_upload'; export const MOBILE_SEARCH = 'mobile_search'; export const VIEW_IMAGE = 'view_image'; export const BLOCK_CHANNEL = 'block_channel'; +export const MIN_CHANNEL_AGE = 'min_channel_age'; export const COLLECTION_ADD = 'collection_add'; export const COLLECTION_DELETE = 'collection_delete'; export const CONFIRM_REMOVE_CARD = 'CONFIRM_REMOVE_CARD'; diff --git a/ui/modal/modalMinChannelAge/index.js b/ui/modal/modalMinChannelAge/index.js new file mode 100644 index 000000000..537f3f0cf --- /dev/null +++ b/ui/modal/modalMinChannelAge/index.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import ModalMinChannelAge from './view'; +import { doHideModal } from 'redux/actions/app'; + +const perform = { + doHideModal, +}; + +export default connect(null, perform)(ModalMinChannelAge); diff --git a/ui/modal/modalMinChannelAge/view.jsx b/ui/modal/modalMinChannelAge/view.jsx new file mode 100644 index 000000000..4b43e1f5f --- /dev/null +++ b/ui/modal/modalMinChannelAge/view.jsx @@ -0,0 +1,76 @@ +// @flow +import React from 'react'; +import moment from 'moment'; +import Button from 'component/button'; +import Card from 'component/common/card'; +import { FormField } from 'component/common/form-components/form-field'; +import FormFieldDuration from 'component/formFieldDuration'; +import { Modal } from 'modal/modal'; + +const CHANNEL_AGE_LIMIT_MIN_DATE = new Date('February 8, 2022 00:00:00'); +const LIMITATION_WARNING = 'Note that the restriction can only be applied to channels created after Feb 8th, 2022.'; + +type Props = { + onConfirm: (limitInMinutes: number, closeModal: () => void) => void, + doHideModal: () => void, +}; + +export default function ModalMinChannelAge(props: Props) { + const { onConfirm, doHideModal } = props; + + const [showLimitationWarning, setShowLimitationWarning] = React.useState(''); + const [limitDisabled, setLimitDisabled] = React.useState(false); + const [minChannelAgeInput, setMinChannelAgeInput] = React.useState(''); + const [minChannelAgeMinutes, setMinChannelAgeMinutes] = React.useState(-1); + const inputOk = limitDisabled || minChannelAgeMinutes > 0; + + function handleOnClick() { + if (onConfirm) { + onConfirm(limitDisabled ? 0 : minChannelAgeMinutes, doHideModal); + } + } + + function handleOnInputResolved(valueInSeconds) { + if (valueInSeconds > 0) { + const minCreationDate = moment().subtract(valueInSeconds, 'seconds').toDate(); + setShowLimitationWarning(minCreationDate.getTime() < CHANNEL_AGE_LIMIT_MIN_DATE.getTime()); + setMinChannelAgeMinutes(Math.ceil(valueInSeconds / 60)); + } else { + setShowLimitationWarning(false); + setMinChannelAgeMinutes(-1); + } + } + + return ( + + + setMinChannelAgeInput(e.target.value)} + onResolve={handleOnInputResolved} + /> + {showLimitationWarning && !limitDisabled &&

{__(LIMITATION_WARNING)}

} + setLimitDisabled(!limitDisabled)} + /> + + } + actions={ +
+
+ } + /> +
+ ); +} diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx index 2bb9f4ba5..9b29b6b20 100644 --- a/ui/modal/modalRouter/view.jsx +++ b/ui/modal/modalRouter/view.jsx @@ -45,6 +45,9 @@ const ModalImageUpload = lazyImport(() => import('modal/modalImageUpload' /* web const ModalMassTipsUnlock = lazyImport(() => import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */) ); +const ModalMinChannelAge = lazyImport(() => + import('modal/modalMinChannelAge' /* webpackChunkName: "modalMinChannelAge" */) +); const ModalMobileSearch = lazyImport(() => import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */) ); @@ -169,6 +172,8 @@ function getModal(id) { 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: