refactor: add early returns, rename components

and files

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<PayloadSamplesProps> {
+export class CallbackPayloadSample extends React.Component<PayloadSampleProps> {
   render() {
     const payloadSample = this.props.callback.codeSamples.find(sample =>
       isPayloadSample(sample),
     ) as XPayloadSample | undefined;
 
+    if (!payloadSample) {
+      return null;
+    }
+
     return (
-      <>
+      <PayloadSampleWrapper>
-        {payloadSample ? (
+        <PayloadSamples content={payloadSample.requestBodyContent} />
-          <ReqSamplesWrapper>
+      </PayloadSampleWrapper>
-            <PayloadSamples content={payloadSample.requestBodyContent} />
-          </ReqSamplesWrapper>
-        ) : null}
-      </>
     );
   }
 }
 
-export const ReqSamplesWrapper = styled.div`
+export const PayloadSampleWrapper = styled.div`
   margin-top: 15px;
 `;

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<CallbackSamplesProps> {
       .map(callback => callback.operations.map(operation => operation))
       .reduce((a, b) => a.concat(b), []);
 
-    // Sums number of code samples per operation per callback
+    const hasSamples = operations.some(operation => operation.codeSamples.length > 0);
-    const numSamples = operations.reduce(
-      (sampleSum, operation) => sampleSum + 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<CallbackSamplesProps> {
     });
 
     return (
-      (hasSamples && (
+      <div>
-        <div>
+        <RightPanelHeader> Callback payload samples </RightPanelHeader>
-          <RightPanelHeader> Callback payload samples </RightPanelHeader>
 
-          <SamplesWrapper>
+        <SamplesWrapper>
-            <GenericDropdown
+          <GenericChildrenSwitcher
-              items={operations}
+            items={operations}
-              renderDropdown={this.renderDropdown}
+            renderDropdown={this.renderDropdown}
-              label={'Callback'}
+            label={'Callback'}
-              options={dropdownOptions}
+            options={dropdownOptions}
-            >
+          >
-              {callback => (
+            {callback => (
-                <CallbackReqSamples
+              <CallbackPayloadSample
-                  key="callbackReqSamples"
+                key="callbackPayloadSample"
-                  callback={callback}
+                callback={callback}
-                  renderDropdown={this.renderDropdown}
+                renderDropdown={this.renderDropdown}
-                />
+              />
-              )}
+            )}
-            </GenericDropdown>
+          </GenericChildrenSwitcher>
-          </SamplesWrapper>
+        </SamplesWrapper>
-        </div>
+      </div>
-      )) ||
-      null
     );
   }
 }

src/components/Callbacks/CallbackDetails.tsx

@@ -32,7 +32,6 @@ export class CallbackDetails extends React.Component<CallbackDetailsProps> {
           </Description>
         )}
         <Endpoint operation={this.props.operation} inverted={true} compact={true} />
-        {/* Do we need Extensions in callback details? */}
         <Extensions extensions={operation.extensions} />
         <SecurityRequirements securities={operation.security} />
         <Parameters parameters={operation.parameters} body={operation.requestBody} />

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<T> {
+export interface GenericChildrenSwitcherProps<T> {
   items?: T[];
   options: DropdownOption[];
   label?: string;
@@ -12,14 +12,18 @@ export interface GenericDropdownProps<T> {
   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<T> extends React.Component<
+export class GenericChildrenSwitcher<T> extends React.Component<
-  GenericDropdownProps<T>,
+  GenericChildrenSwitcherProps<T>,
-  GenericDropdownState
+  GenericChildrenSwitcherState
 > {
   constructor(props) {
     super(props);