private buildDateRange()

in source/idea/idea-cluster-manager/webapp/src/components/list-view/list-view.tsx [310:423]
114 lines of code
5 McCabe index (conditional complexity)

    private buildDateRange() {
        return (
            <>
                <Select
                    selectedOption={this.state.selectedDateRangeFilterKey ?? null}
                    onChange={({ detail }) =>
                        this.setState({ selectedDateRangeFilterKey: detail.selectedOption }, () => {
                            this.fetchRecords();
                        })
                    }
                    options={this.props.dateRangeFilterKeyOptions}
                />
                <DateRangePicker
                    value={this.state.dateRangePickerValue!}
                    relativeOptions={[
                        {
                            key: "previous-1-hour",
                            amount: 1,
                            unit: "hour",
                            type: "relative",
                        },
                        {
                            key: "previous-12-hours",
                            amount: 12,
                            unit: "hour",
                            type: "relative",
                        },
                        {
                            key: "previous-1-day",
                            amount: 1,
                            unit: "day",
                            type: "relative",
                        },
                        {
                            key: "previous-1-month",
                            amount: 1,
                            unit: "month",
                            type: "relative",
                        },
                    ]}
                    isValidRange={(value) => {
                        return {
                            valid: true,
                        };
                    }}
                    onChange={(event) => {
                        this.setState(
                            {
                                dateRangePickerValue: event.detail.value!,
                            },
                            () => {
                                if (!this.state.selectedDateRangeFilterKey) {
                                    return;
                                }
                                const value = event.detail.value;
                                const dateRange = Utils.convertToDateRange(value);
                                if (dateRange == null) {
                                    this.setState(
                                        {
                                            listingRequest: {
                                                ...this.state.listingRequest,
                                                dateRange: undefined,
                                            },
                                        },
                                        () => {
                                            this.fetchRecords();
                                        }
                                    );
                                } else {
                                    this.setState(
                                        {
                                            listingRequest: {
                                                ...this.state.listingRequest,
                                                dateRange: this.getFormatedDateRange(),
                                            },
                                        },
                                        () => {
                                            this.fetchRecords();
                                        }
                                    );
                                }
                            }
                        );
                    }}
                    i18nStrings={{
                        todayAriaLabel: "Today",
                        nextMonthAriaLabel: "Next month",
                        previousMonthAriaLabel: "Previous month",
                        customRelativeRangeDurationLabel: "Duration",
                        customRelativeRangeDurationPlaceholder: "Enter duration",
                        customRelativeRangeOptionLabel: "Custom range",
                        customRelativeRangeOptionDescription: "Set a custom range in the past",
                        customRelativeRangeUnitLabel: "Unit of time",
                        formatRelativeRange: (e) => {
                            const t = 1 === e.amount ? e.unit : `${e.unit}s`;
                            return `Last ${e.amount} ${t}`;
                        },
                        formatUnit: (e, t) => (1 === t ? e : `${e}s`),
                        dateTimeConstraintText: "Range must be between 6 - 30 days. Use 24 hour format.",
                        relativeModeTitle: "Relative range",
                        absoluteModeTitle: "Absolute range",
                        relativeRangeSelectionHeading: "Choose a range",
                        startDateLabel: "Start date",
                        endDateLabel: "End date",
                        startTimeLabel: "Start time",
                        endTimeLabel: "End time",
                        clearButtonLabel: "Clear",
                        cancelButtonLabel: "Cancel",
                        applyButtonLabel: "Apply",
                    }}
                />
            </>
        );
    }