From af08fd57b306414db115ff85cd397bad25dd2223 Mon Sep 17 00:00:00 2001 From: Oleksiy Kachynskyy Date: Wed, 8 Apr 2020 10:19:37 +0300 Subject: [PATCH] refactor: add early returns, rename components and files --- .../CallbackSamples/CallbackReqSamples.tsx | 20 +++---- .../CallbackSamples/CallbackSamples.tsx | 55 +++++++++---------- src/components/Callbacks/CallbackDetails.tsx | 1 - .../GenericChildrenSwitcher.tsx} | 16 ++++-- 4 files changed, 45 insertions(+), 47 deletions(-) rename src/components/{GenericDropdown/GenericDropdown.tsx => GenericChildrenSwitcher/GenericChildrenSwitcher.tsx} (76%) diff --git a/src/components/CallbackSamples/CallbackReqSamples.tsx b/src/components/CallbackSamples/CallbackReqSamples.tsx index 6fa46ca9..e7a51723 100644 --- a/src/components/CallbackSamples/CallbackReqSamples.tsx +++ b/src/components/CallbackSamples/CallbackReqSamples.tsx @@ -7,29 +7,29 @@ import { OperationModel } from '../../services/models'; import { XPayloadSample } from '../../services/models/Operation'; import { isPayloadSample } from '../../services'; -export interface PayloadSamplesProps { +export interface PayloadSampleProps { callback: OperationModel; renderDropdown: (props: DropdownProps) => JSX.Element; } -export class CallbackReqSamples extends React.Component { +export class CallbackPayloadSample extends React.Component { render() { const payloadSample = this.props.callback.codeSamples.find(sample => isPayloadSample(sample), ) as XPayloadSample | undefined; + if (!payloadSample) { + return null; + } + return ( - <> - {payloadSample ? ( - - - - ) : null} - + + + ); } } -export const ReqSamplesWrapper = styled.div` +export const PayloadSampleWrapper = styled.div` margin-top: 15px; `; diff --git a/src/components/CallbackSamples/CallbackSamples.tsx b/src/components/CallbackSamples/CallbackSamples.tsx index c86e081c..b5064d5c 100644 --- a/src/components/CallbackSamples/CallbackSamples.tsx +++ b/src/components/CallbackSamples/CallbackSamples.tsx @@ -6,10 +6,10 @@ import { RightPanelHeader } from '../../common-elements'; import { RedocNormalizedOptions } from '../../services'; import { CallbackModel } from '../../services/models'; import { OptionsContext } from '../OptionsProvider'; -import { GenericDropdown } from '../GenericDropdown/GenericDropdown'; +import { GenericChildrenSwitcher } from '../GenericChildrenSwitcher/GenericChildrenSwitcher'; import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel'; import { InvertedSimpleDropdown, MimeLabel } from '../PayloadSamples/styled.elements'; -import { CallbackReqSamples } from './CallbackReqSamples'; +import { CallbackPayloadSample } from './CallbackReqSamples'; export interface CallbackSamplesProps { callbacks: CallbackModel[]; @@ -35,13 +35,11 @@ export class CallbackSamples extends React.Component { .map(callback => callback.operations.map(operation => operation)) .reduce((a, b) => a.concat(b), []); - // Sums number of code samples per operation per callback - const numSamples = operations.reduce( - (sampleSum, operation) => sampleSum + operation.codeSamples.length, - 0, - ); + const hasSamples = operations.some(operation => operation.codeSamples.length > 0); - const hasSamples = numSamples > 0; + if (!hasSamples) { + return null; + } const dropdownOptions = operations.map((callback, idx) => { return { @@ -51,29 +49,26 @@ export class CallbackSamples extends React.Component { }); return ( - (hasSamples && ( -
- Callback payload samples +
+ Callback payload samples - - - {callback => ( - - )} - - -
- )) || - null + + + {callback => ( + + )} + + +
); } } diff --git a/src/components/Callbacks/CallbackDetails.tsx b/src/components/Callbacks/CallbackDetails.tsx index 3730aa9f..ce003c56 100644 --- a/src/components/Callbacks/CallbackDetails.tsx +++ b/src/components/Callbacks/CallbackDetails.tsx @@ -32,7 +32,6 @@ export class CallbackDetails extends React.Component { )} - {/* Do we need Extensions in callback details? */} diff --git a/src/components/GenericDropdown/GenericDropdown.tsx b/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx similarity index 76% rename from src/components/GenericDropdown/GenericDropdown.tsx rename to src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx index ae85ed14..b850fd99 100644 --- a/src/components/GenericDropdown/GenericDropdown.tsx +++ b/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { DropdownProps, DropdownOption } from '../../common-elements/dropdown'; import { DropdownLabel, DropdownWrapper } from '../PayloadSamples/styled.elements'; -export interface GenericDropdownProps { +export interface GenericChildrenSwitcherProps { items?: T[]; options: DropdownOption[]; label?: string; @@ -12,14 +12,18 @@ export interface GenericDropdownProps { children: (activeItem: T) => JSX.Element; } -export interface GenericDropdownState { +export interface GenericChildrenSwitcherState { activeItemIdx: number; } - +/** + * TODO: Refactor this component: + * Implement rendering dropdown/label directly in this component + * Accept as a parameter mapper-function for building dropdown option labels + */ @observer -export class GenericDropdown extends React.Component< - GenericDropdownProps, - GenericDropdownState +export class GenericChildrenSwitcher extends React.Component< + GenericChildrenSwitcherProps, + GenericChildrenSwitcherState > { constructor(props) { super(props);