From c3afcd45dd40289a6d2cdf5aa3959cdb77b6b6e8 Mon Sep 17 00:00:00 2001 From: David Cui Date: Wed, 17 Jun 2020 14:08:22 -0700 Subject: [PATCH 1/7] migrate create_report/ to typescript --- .../{create_report.js => create_report.tsx} | 28 ++++++++++++++++--- .../delivery/{delivery.js => delivery.tsx} | 10 +------ ...el_radio.js => delivery_channel_radio.tsx} | 0 ...nts_box.js => delivery_recipients_box.tsx} | 0 .../create_report/{index.js => index.ts} | 0 ...report_settings.js => report_settings.tsx} | 0 .../schedule/{schedule.js => schedule.tsx} | 0 7 files changed, 25 insertions(+), 13 deletions(-) rename public/components/create_report/{create_report.js => create_report.tsx} (93%) rename public/components/create_report/delivery/{delivery.js => delivery.tsx} (92%) rename public/components/create_report/delivery/{delivery_channel_radio.js => delivery_channel_radio.tsx} (100%) rename public/components/create_report/delivery/{delivery_recipients_box.js => delivery_recipients_box.tsx} (100%) rename public/components/create_report/{index.js => index.ts} (100%) rename public/components/create_report/report_settings/{report_settings.js => report_settings.tsx} (100%) rename public/components/create_report/schedule/{schedule.js => schedule.tsx} (100%) diff --git a/public/components/create_report/create_report.js b/public/components/create_report/create_report.tsx similarity index 93% rename from public/components/create_report/create_report.js rename to public/components/create_report/create_report.tsx index 4153bc6a..e11465cf 100644 --- a/public/components/create_report/create_report.js +++ b/public/components/create_report/create_report.tsx @@ -38,14 +38,34 @@ import { EuiRadioGroup, } from '@elastic/eui'; import { htmlIdGenerator } from '@elastic/eui/lib/services'; -import moment from 'moment'; +import moment, { Moment } from 'moment'; import { ReportSettings } from './report_settings/report_settings'; import { ReportDelivery } from './delivery/delivery'; import { ReportSchedule } from './schedule/schedule'; const idPrefix = htmlIdGenerator()(); -export class CreateReport extends React.Component { +interface RouterHomeProps { + httpClient?: any +} + +interface CreateReportState { + reportSettingsRadioIdSelected: string, + reportSettingsSetRadioIdSelected: string, + reportSettingsDashboard: string, + deliveryEmailSubject: string, + deliveryEmailBody: string, + scheduleRadioFutureDateSelected: boolean, + scheduleRadioRecurringSelected: boolean, + scheduleUTCOffset: number, + scheduleRecurringFrequency: string, + scheduleRecurringDailyTime: string, + scheduleRecurringUTCOffset: number, + scheduleRecurringWeeklyDayOfWeek: string, + scheduleRecurringStartDate: Moment +} + +export class CreateReport extends React.Component { constructor(props) { super(props); this.state = { @@ -56,10 +76,10 @@ export class CreateReport extends React.Component { deliveryEmailBody: "", scheduleRadioFutureDateSelected: false, scheduleRadioRecurringSelected: false, - scheduleUTCOffset: '', + scheduleUTCOffset: 0, scheduleRecurringFrequency: 'Daily', scheduleRecurringDailyTime: '', - scheduleRecurringUTCOffset: '', + scheduleRecurringUTCOffset: 0, scheduleRecurringWeeklyDayOfWeek: 'Monday', scheduleRecurringStartDate: moment(), }; diff --git a/public/components/create_report/delivery/delivery.js b/public/components/create_report/delivery/delivery.tsx similarity index 92% rename from public/components/create_report/delivery/delivery.js rename to public/components/create_report/delivery/delivery.tsx index 75521749..26aa06aa 100644 --- a/public/components/create_report/delivery/delivery.js +++ b/public/components/create_report/delivery/delivery.tsx @@ -13,24 +13,16 @@ * permissions and limitations under the License. */ -import React, { useState } from 'react'; +import React from 'react'; import { EuiFieldText, EuiFormRow, - EuiButton, - EuiPage, EuiPageHeader, EuiTitle, - EuiPageBody, EuiPageContent, EuiPageContentBody, - EuiInMemoryTable, EuiHorizontalRule, - EuiSpacer, - EuiSuggest, EuiTextArea, - EuiRadioGroup, - EuiComboBox, } from '@elastic/eui'; import { DeliveryRecipientsBox } from './delivery_recipients_box'; import { DeliveryChannelRadio } from './delivery_channel_radio'; diff --git a/public/components/create_report/delivery/delivery_channel_radio.js b/public/components/create_report/delivery/delivery_channel_radio.tsx similarity index 100% rename from public/components/create_report/delivery/delivery_channel_radio.js rename to public/components/create_report/delivery/delivery_channel_radio.tsx diff --git a/public/components/create_report/delivery/delivery_recipients_box.js b/public/components/create_report/delivery/delivery_recipients_box.tsx similarity index 100% rename from public/components/create_report/delivery/delivery_recipients_box.js rename to public/components/create_report/delivery/delivery_recipients_box.tsx diff --git a/public/components/create_report/index.js b/public/components/create_report/index.ts similarity index 100% rename from public/components/create_report/index.js rename to public/components/create_report/index.ts diff --git a/public/components/create_report/report_settings/report_settings.js b/public/components/create_report/report_settings/report_settings.tsx similarity index 100% rename from public/components/create_report/report_settings/report_settings.js rename to public/components/create_report/report_settings/report_settings.tsx diff --git a/public/components/create_report/schedule/schedule.js b/public/components/create_report/schedule/schedule.tsx similarity index 100% rename from public/components/create_report/schedule/schedule.js rename to public/components/create_report/schedule/schedule.tsx From 3c8bd8ea283a80c98aec019b6ada2837251edcae Mon Sep 17 00:00:00 2001 From: David Cui Date: Fri, 19 Jun 2020 12:29:59 -0700 Subject: [PATCH 2/7] addressed comments- refactored create report to use hooks and functional component --- .../create_report/create_report.tsx | 392 ++++++------------ .../delivery/delivery_channel_radio.tsx | 3 - 2 files changed, 135 insertions(+), 260 deletions(-) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index e11465cf..34118c6d 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -16,25 +16,16 @@ import React, { useState } from 'react'; import { EuiButtonEmpty, - EuiComboBox, EuiDatePicker, - EuiFieldText, EuiSelect, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiButton, EuiPage, - EuiPageHeader, EuiTitle, EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiInMemoryTable, - EuiHorizontalRule, EuiSpacer, - EuiSuggest, - EuiTextArea, EuiRadioGroup, } from '@elastic/eui'; import { htmlIdGenerator } from '@elastic/eui/lib/services'; @@ -45,108 +36,49 @@ import { ReportSchedule } from './schedule/schedule'; const idPrefix = htmlIdGenerator()(); -interface RouterHomeProps { - httpClient?: any -} - -interface CreateReportState { - reportSettingsRadioIdSelected: string, - reportSettingsSetRadioIdSelected: string, - reportSettingsDashboard: string, - deliveryEmailSubject: string, - deliveryEmailBody: string, - scheduleRadioFutureDateSelected: boolean, - scheduleRadioRecurringSelected: boolean, - scheduleUTCOffset: number, - scheduleRecurringFrequency: string, - scheduleRecurringDailyTime: string, - scheduleRecurringUTCOffset: number, - scheduleRecurringWeeklyDayOfWeek: string, - scheduleRecurringStartDate: Moment -} - -export class CreateReport extends React.Component { - constructor(props) { - super(props); - this.state = { - reportSettingsRadioIdSelected: '', - reportSettingsSetRadioIdSelected: `${idPrefix}1`, - reportSettingsDashboard: '', - deliveryEmailSubject: "", - deliveryEmailBody: "", - scheduleRadioFutureDateSelected: false, - scheduleRadioRecurringSelected: false, - scheduleUTCOffset: 0, - scheduleRecurringFrequency: 'Daily', - scheduleRecurringDailyTime: '', - scheduleRecurringUTCOffset: 0, - scheduleRecurringWeeklyDayOfWeek: 'Monday', - scheduleRecurringStartDate: moment(), - }; - } - - onChangeReportSettingsDashboard = (e) => { - this.setState({ - reportSettingsDashboard: e.target.value - }); - } - - onChangeDeliveryEmailSubject = (e) => { - this.setState({ - deliveryEmailSubject: e.target.value - }); +export function CreateReport() { + const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); + const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); + const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); + const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); + const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); + const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); + const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); + const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); + const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); + const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); + const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); + const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); + + const onChangeReportSettingsDashboard = (e) => { + setReportSettingsDashboard(e.target.value); } - onChangeDeliveryEmailBody = (e) => { - this.setState({ - deliveryEmailBody: e.target.value - }); + const onChangeDeliveryEmailSubject = (e) => { + setDeliveryEmailSubject(e.target.value); } - componentDidMount() { - const { httpClient } = this.props; + const onChangeDeliveryEmailBody = (e) => {; + setDeliveryEmailBody(e.target.value); } - ReportSettingsDashboardSelect = () => { - const description = 'this is a short description'; - const sampleItems = [ - { - type: { iconType: 'kqlField', color: 'tint4' }, - label: 'Flight Dashboard Data', - description: description, - }, - { - type: { iconType: 'kqlValue', color: 'tint0' }, - label: 'E-commerce data', - description: description, - }, - { - type: { iconType: 'kqlSelector', color: 'tint2' }, - label: 'Ticket data', - description: description, - }, - ]; - - const [status, setStatus] = useState('unchanged'); - - const onItemClick = item => { - alert(`Item [${item.label}] was clicked`); - }; - - return ( -
- {} } - onItemClick={this.onChangeReportSettingsDashboard} - placeholder="Start typing to display suggestions" - suggestions={sampleItems} - /> -
- ); - } + const onChangeScheduleSettingsRadio = optionId => { + setScheduleRadioIdSelected(optionId); + if (optionId === `${idPrefix}7`) { + setScheduleRadioFutureDateSelected(false); + setScheduleRadioRecurringSelected(false); + } + else if (optionId === `${idPrefix}8`) { + setScheduleRadioFutureDateSelected(true); + setScheduleRadioRecurringSelected(false); + } + else if (optionId === `${idPrefix}9`) { + setScheduleRadioFutureDateSelected(false); + setScheduleRadioRecurringSelected(true); + } + }; - ScheduleRadio = () => { + const ScheduleRadio = () => { const radios = [ { id: `${idPrefix}7`, @@ -161,72 +93,32 @@ export class CreateReport extends React.Component { - setRadioIdSelected(optionId); - console.log(optionId) - if (optionId === `${idPrefix}7`) { - this.setState({ - scheduleRadioFutureDateSelected: false - }); - this.setState({ - scheduleRadioRecurringSelected: false - }); - } - else if (optionId === `${idPrefix}8`) { - this.setState({ - scheduleRadioFutureDateSelected: true - }); - this.setState({ - scheduleRadioRecurringSelected: false - }); - } - else if (optionId === `${idPrefix}9`) { - this.setState({ - scheduleRadioFutureDateSelected: false - }); - this.setState({ - scheduleRadioRecurringSelected: true - }); - } - }; - return ( onChangeSettingsRadio(id)} + idSelected={scheduleRadioIdSelected} + onChange={onChangeScheduleSettingsRadio} name="scheduleRadioGroup" - legend={{ - children: This is a legend for a radio group, - }} /> ); }; - - timezone_options = [ - { value: -4, text: 'EDT -04:00' }, - { value: -5, text: 'CDT -05:00' }, - { value: -6, text: 'MDT -06:00' }, - { value: -7, text: 'MST/PDT -07:00' }, - { value: -8, text: 'AKDT -08:00' }, - { value: -10, text: 'HST -10:00' } + const timezone_options = [ + { value: -4, text: 'EDT -04:00' }, + { value: -5, text: 'CDT -05:00' }, + { value: -6, text: 'MDT -06:00' }, + { value: -7, text: 'MST/PDT -07:00' }, + { value: -8, text: 'AKDT -08:00' }, + { value: -10, text: 'HST -10:00' } ]; - ScheduleFutureDatePicker = () => { - const [startDate, setStartDate] = useState(moment()); - + const ScheduleFutureDatePicker = () => { const handleChangeScheduleDate = date => { - setStartDate(date); + setScheduleFutureDate(date); }; const onSelectOffsetChange = e => { - this.setState({ - scheduleUTCOffset: parseInt(e.target.value, 10), - }); + setScheduleUTCOffset(parseInt(e.target.value, 10)); }; return ( @@ -234,14 +126,14 @@ export class CreateReport extends React.Component @@ -249,20 +141,13 @@ export class CreateReport extends React.Component { - const [startDate, setStartDate] = useState(moment()); - + const ScheduleRecurringDailyInput = () => { const handleTimeChange = date => { - setStartDate(date); - this.setState({ - scheduleRecurringStartDate: date - }); + setScheduleRecurringStartDate(date); }; const onSelectOffsetChange = e => { - this.setState({ - scheduleRecurringUTCOffset: parseInt(e.target.value, 10), - }); + setScheduleRecurringUTCOffset(parseInt(e.target.value, 10)); }; return ( @@ -271,7 +156,7 @@ export class CreateReport extends React.Component @@ -288,49 +173,45 @@ export class CreateReport extends React.Component { + const ScheduleRecurringWeeklyInput = () => { const recurringDayOptions = [ - { value: 'Monday', text: 'Monday' }, - { value: 'Tuesday', text: 'Tuesday' }, - { value: 'Wednesday', text: 'Wednesday' }, - { value: 'Thursday', text: 'Thursday' }, - { value: 'Friday', text: 'Friday' }, - { value: 'Saturday', text: 'Saturday' }, - { value: 'Sunday', text: 'Sunday' }, + { value: 'Monday', text: 'Monday' }, + { value: 'Tuesday', text: 'Tuesday' }, + { value: 'Wednesday', text: 'Wednesday' }, + { value: 'Thursday', text: 'Thursday' }, + { value: 'Friday', text: 'Friday' }, + { value: 'Saturday', text: 'Saturday' }, + { value: 'Sunday', text: 'Sunday' }, ]; const onChangeDayOfWeek = (e) => { - this.setState({ - scheduleRecurringWeeklyDayOfWeek: e.target.value - }); + setScheduleRecurringWeeklyDayOfWeek(e.target.value); } return ( -
- - - - -
+
+ + + + +
); } - ScheduleRecurringMonthlyInput = () => { + const ScheduleRecurringMonthlyInput = () => { const handleChangeMonthly = (date) => { - this.setState({ - scheduleRecurringStartDate: date - }); + setScheduleRecurringStartDate(date); } return (
{ + const ScheduleRecurringFrequency = () => { const options = [ { value: 'Daily', text: 'Daily' }, { value: 'Weekly', text: 'Weekly' }, @@ -348,21 +229,19 @@ export class CreateReport extends React.Component { - this.setState({ - scheduleRecurringFrequency: e.target.value - }); + setScheduleRecurringFrequency(e.target.value); } - const daily = (this.state.scheduleRecurringFrequency == 'Daily') - ? + const daily = (scheduleRecurringFrequency == 'Daily') + ? : null; - const weekly = (this.state.scheduleRecurringFrequency == 'Weekly') - ? + const weekly = (scheduleRecurringFrequency == 'Weekly') + ? : null; - const monthly = (this.state.scheduleRecurringFrequency == 'Monthly') - ? + const monthly = (scheduleRecurringFrequency == 'Monthly') + ? : null; return ( @@ -370,7 +249,7 @@ export class CreateReport extends React.Component @@ -381,52 +260,51 @@ export class CreateReport extends React.Component - : null; - - const scheduleRecurringFrequencySelect = this.state.scheduleRadioRecurringSelected - ? - : null; - return ( - - - -

Create Report

- - - - - - - - - - {window.location.assign('opendistro-kibana-reports#/')}} - > - Cancel - - - - Create - - - - - ); - } + const scheduleFutureDateCalendar = scheduleRadioFutureDateSelected + ? + : null; + + const scheduleRecurringFrequencySelect = scheduleRadioRecurringSelected + ? + : null; + + return ( + + + +

Create Report

+ + + + + + + + + + {window.location.assign('opendistro-kibana-reports#/')}} + > + Cancel + + + + Create + + + + + ); } \ No newline at end of file diff --git a/public/components/create_report/delivery/delivery_channel_radio.tsx b/public/components/create_report/delivery/delivery_channel_radio.tsx index b83690aa..f4c712e4 100644 --- a/public/components/create_report/delivery/delivery_channel_radio.tsx +++ b/public/components/create_report/delivery/delivery_channel_radio.tsx @@ -51,9 +51,6 @@ const DeliveryChannelRadio = () => { idSelected={radioIdSelected} onChange={handleChangeDeliveryChannel} name="deliveryChannelRadioGroup" - legend={{ - children: This is a legend for a radio group, - }} /> ); }; From a488ba9175cff32562bf74042e7883bb0e59b06a Mon Sep 17 00:00:00 2001 From: David Cui Date: Mon, 22 Jun 2020 10:19:49 -0700 Subject: [PATCH 3/7] addressed switch() comments and moved weekday const out of function --- .../create_report/create_report.tsx | 47 +++++++++---------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index 34118c6d..7863f850 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -36,6 +36,16 @@ import { ReportSchedule } from './schedule/schedule'; const idPrefix = htmlIdGenerator()(); +const recurringDayOptions = [ + { value: 'Monday', text: 'Monday' }, + { value: 'Tuesday', text: 'Tuesday' }, + { value: 'Wednesday', text: 'Wednesday' }, + { value: 'Thursday', text: 'Thursday' }, + { value: 'Friday', text: 'Friday' }, + { value: 'Saturday', text: 'Saturday' }, + { value: 'Sunday', text: 'Sunday' }, +]; + export function CreateReport() { const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); @@ -174,16 +184,6 @@ export function CreateReport() { } const ScheduleRecurringWeeklyInput = () => { - const recurringDayOptions = [ - { value: 'Monday', text: 'Monday' }, - { value: 'Tuesday', text: 'Tuesday' }, - { value: 'Wednesday', text: 'Wednesday' }, - { value: 'Thursday', text: 'Thursday' }, - { value: 'Friday', text: 'Friday' }, - { value: 'Saturday', text: 'Saturday' }, - { value: 'Sunday', text: 'Sunday' }, - ]; - const onChangeDayOfWeek = (e) => { setScheduleRecurringWeeklyDayOfWeek(e.target.value); } @@ -232,17 +232,18 @@ export function CreateReport() { setScheduleRecurringFrequency(e.target.value); } - const daily = (scheduleRecurringFrequency == 'Daily') - ? - : null; - - const weekly = (scheduleRecurringFrequency == 'Weekly') - ? - : null; - - const monthly = (scheduleRecurringFrequency == 'Monthly') - ? - : null; + let frequency = null; + switch(scheduleRecurringFrequency) { + case 'Daily': + frequency= + break; + case 'Weekly': + frequency= + break; + case 'Monthly': + frequency= + break; + } return (
@@ -253,9 +254,7 @@ export function CreateReport() { onChange={onChangeScheduleRecurringFrequency} /> - {daily} - {weekly} - {monthly} + {frequency}
); } From ab7a3d45162447500c87208e77d3fb50e6fb73cf Mon Sep 17 00:00:00 2001 From: David Cui Date: Tue, 30 Jun 2020 14:01:39 -0700 Subject: [PATCH 4/7] changed type of e to Event --- .../create_report/create_report.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index 7863f850..9a92de93 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -46,7 +46,7 @@ const recurringDayOptions = [ { value: 'Sunday', text: 'Sunday' }, ]; -export function CreateReport() { +interface CreateReportState { const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); @@ -59,6 +59,25 @@ export function CreateReport() { const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); +} + +export function CreateReport() { + // const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); + // const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); + // const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); + // const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); + // const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); + // const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); + // const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); + // const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); + // const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); + // const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); + // const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); + // const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); + + const reportState = useState({ + + }); const onChangeReportSettingsDashboard = (e) => { setReportSettingsDashboard(e.target.value); @@ -184,7 +203,7 @@ export function CreateReport() { } const ScheduleRecurringWeeklyInput = () => { - const onChangeDayOfWeek = (e) => { + const onChangeDayOfWeek = (e: React.MouseEvent<>) => { setScheduleRecurringWeeklyDayOfWeek(e.target.value); } From 3d56e84cec5f42fea08e70f75de00cab99adcf01 Mon Sep 17 00:00:00 2001 From: David Cui Date: Wed, 1 Jul 2020 09:30:54 -0700 Subject: [PATCH 5/7] undo incomplete useState change --- .../create_report/create_report.tsx | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index 9a92de93..36c828aa 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -46,7 +46,22 @@ const recurringDayOptions = [ { value: 'Sunday', text: 'Sunday' }, ]; -interface CreateReportState { +// interface CreateReportState { +// const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); +// const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); +// const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); +// const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); +// const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); +// const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); +// const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); +// const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); +// const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); +// const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); +// const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); +// const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); +// } + +export function CreateReport() { const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); @@ -59,25 +74,6 @@ interface CreateReportState { const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); -} - -export function CreateReport() { - // const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); - // const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); - // const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); - // const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); - // const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); - // const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); - // const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); - // const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); - // const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); - // const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); - // const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); - // const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); - - const reportState = useState({ - - }); const onChangeReportSettingsDashboard = (e) => { setReportSettingsDashboard(e.target.value); From f279962e1009c9b4d5bcb7b374f5c2fa509a19d6 Mon Sep 17 00:00:00 2001 From: David Cui Date: Wed, 1 Jul 2020 17:30:17 -0700 Subject: [PATCH 6/7] moved hooks into separate functions to simplify CreateReport() --- .../create_report/create_report.tsx | 271 +++++++++--------- 1 file changed, 129 insertions(+), 142 deletions(-) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index 36c828aa..edb6ed26 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -46,124 +46,29 @@ const recurringDayOptions = [ { value: 'Sunday', text: 'Sunday' }, ]; -// interface CreateReportState { -// const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); -// const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); -// const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); -// const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); -// const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); -// const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); -// const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); -// const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); -// const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); -// const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); -// const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); -// const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); -// } +const timezone_options = [ + { value: -4, text: 'EDT -04:00' }, + { value: -5, text: 'CDT -05:00' }, + { value: -6, text: 'MDT -06:00' }, + { value: -7, text: 'MST/PDT -07:00' }, + { value: -8, text: 'AKDT -08:00' }, + { value: -10, text: 'HST -10:00' } +]; -export function CreateReport() { - const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); - const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); - const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); - const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); - const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); - const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); - const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); +function ScheduleRecurringFrequency() { const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily'); + const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0); const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday'); - const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment()); - const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); - - const onChangeReportSettingsDashboard = (e) => { - setReportSettingsDashboard(e.target.value); - } - const onChangeDeliveryEmailSubject = (e) => { - setDeliveryEmailSubject(e.target.value); - } - - const onChangeDeliveryEmailBody = (e) => {; - setDeliveryEmailBody(e.target.value); - } - - const onChangeScheduleSettingsRadio = optionId => { - setScheduleRadioIdSelected(optionId); - if (optionId === `${idPrefix}7`) { - setScheduleRadioFutureDateSelected(false); - setScheduleRadioRecurringSelected(false); - } - else if (optionId === `${idPrefix}8`) { - setScheduleRadioFutureDateSelected(true); - setScheduleRadioRecurringSelected(false); - } - else if (optionId === `${idPrefix}9`) { - setScheduleRadioFutureDateSelected(false); - setScheduleRadioRecurringSelected(true); - } - }; - - const ScheduleRadio = () => { - const radios = [ - { - id: `${idPrefix}7`, - label: 'Now', - }, - { - id: `${idPrefix}8`, - label: 'Future Date', - }, - { - id: `${idPrefix}9`, - label: 'Recurring', - }, - ]; - return ( - - ); - }; - - const timezone_options = [ - { value: -4, text: 'EDT -04:00' }, - { value: -5, text: 'CDT -05:00' }, - { value: -6, text: 'MDT -06:00' }, - { value: -7, text: 'MST/PDT -07:00' }, - { value: -8, text: 'AKDT -08:00' }, - { value: -10, text: 'HST -10:00' } + const options = [ + { value: 'Daily', text: 'Daily' }, + { value: 'Weekly', text: 'Weekly' }, + { value: 'Monthly', text: 'Monthly' }, ]; - const ScheduleFutureDatePicker = () => { - const handleChangeScheduleDate = date => { - setScheduleFutureDate(date); - }; - - const onSelectOffsetChange = e => { - setScheduleUTCOffset(parseInt(e.target.value, 10)); - }; - - return ( -
- - - - - - -
- ); + const onChangeScheduleRecurringFrequency = e => { + setScheduleRecurringFrequency(e.target.value); } const ScheduleRecurringDailyInput = () => { @@ -236,43 +141,125 @@ export function CreateReport() { ); } - const ScheduleRecurringFrequency = () => { - const options = [ - { value: 'Daily', text: 'Daily' }, - { value: 'Weekly', text: 'Weekly' }, - { value: 'Monthly', text: 'Monthly' }, - ]; + let frequency = null; + switch(scheduleRecurringFrequency) { + case 'Daily': + frequency= + break; + case 'Weekly': + frequency= + break; + case 'Monthly': + frequency= + break; + } - const onChangeScheduleRecurringFrequency = e => { - setScheduleRecurringFrequency(e.target.value); - } + return ( +
+ + + + {frequency} +
+ ); +} - let frequency = null; - switch(scheduleRecurringFrequency) { - case 'Daily': - frequency= - break; - case 'Weekly': - frequency= - break; - case 'Monthly': - frequency= - break; +function ScheduleFutureDatePicker() { + const [scheduleFutureDate, setScheduleFutureDate] = useState(moment()); + const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0); + + const handleChangeScheduleDate = date => { + setScheduleFutureDate(date); + }; + + const onSelectOffsetChange = e => { + setScheduleUTCOffset(parseInt(e.target.value, 10)); + }; + + return ( +
+ + + + + + +
+ ); +} + +export function CreateReport() { + const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); + const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); + const [deliveryEmailBody, setDeliveryEmailBody] = useState(''); + const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false); + const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false); + const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`); + + const onChangeReportSettingsDashboard = (e) => { + setReportSettingsDashboard(e.target.value); + } + + const onChangeDeliveryEmailSubject = (e) => { + setDeliveryEmailSubject(e.target.value); + } + + const onChangeDeliveryEmailBody = (e) => {; + setDeliveryEmailBody(e.target.value); + } + + const onChangeScheduleSettingsRadio = optionId => { + setScheduleRadioIdSelected(optionId); + if (optionId === `${idPrefix}7`) { + setScheduleRadioFutureDateSelected(false); + setScheduleRadioRecurringSelected(false); + } + else if (optionId === `${idPrefix}8`) { + setScheduleRadioFutureDateSelected(true); + setScheduleRadioRecurringSelected(false); + } + else if (optionId === `${idPrefix}9`) { + setScheduleRadioFutureDateSelected(false); + setScheduleRadioRecurringSelected(true); } + }; + const ScheduleRadio = () => { + const radios = [ + { + id: `${idPrefix}7`, + label: 'Now', + }, + { + id: `${idPrefix}8`, + label: 'Future Date', + }, + { + id: `${idPrefix}9`, + label: 'Recurring', + }, + ]; return ( -
- - - - {frequency} -
+ ); - } + }; const scheduleFutureDateCalendar = scheduleRadioFutureDateSelected ? From 282619fd871ad5fa8a0b46ae266272b8d10738a1 Mon Sep 17 00:00:00 2001 From: David Cui Date: Wed, 8 Jul 2020 08:55:59 -0700 Subject: [PATCH 7/7] add todo for simplify useState --- public/components/create_report/create_report.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx index edb6ed26..7b841919 100644 --- a/public/components/create_report/create_report.tsx +++ b/public/components/create_report/create_report.tsx @@ -201,6 +201,7 @@ function ScheduleFutureDatePicker() { } export function CreateReport() { + // todo: simplify useState const [reportSettingsDashboard, setReportSettingsDashboard] = useState(''); const [deliveryEmailSubject, setDeliveryEmailSubject] = useState(''); const [deliveryEmailBody, setDeliveryEmailBody] = useState('');