From b4fa0fe1106a30e13e0907463f05b1fdc6eeadea Mon Sep 17 00:00:00 2001
From: Oleksiy Kachynskyy <oleksiy.kachynskyy@gmail.com>
Date: Thu, 2 Apr 2020 11:25:33 +0300
Subject: [PATCH] Update CallbackSamples structure, Create GenericDropdown

---
 .../CallbackSamples/CallbackReqSamples.tsx    |  6 +-
 .../CallbackSamples/CallbackSamples.tsx       | 25 +++++--
 .../CallbackSamples/styled.elements.ts        | 10 ---
 .../CallbacksSwitch/CallbacksSwitch.tsx       | 75 -------------------
 .../GenericDropdown/GenericDropdown.tsx       | 71 ++++++++++++++++++
 5 files changed, 95 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/CallbackSamples/styled.elements.ts
 delete mode 100644 src/components/CallbacksSwitch/CallbacksSwitch.tsx
 create mode 100644 src/components/GenericDropdown/GenericDropdown.tsx

diff --git a/src/components/CallbackSamples/CallbackReqSamples.tsx b/src/components/CallbackSamples/CallbackReqSamples.tsx
index 5b444e1f..6fa46ca9 100644
--- a/src/components/CallbackSamples/CallbackReqSamples.tsx
+++ b/src/components/CallbackSamples/CallbackReqSamples.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
+import styled from '../../styled-components';
 import { DropdownProps } from '../../common-elements';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { OperationModel } from '../../services/models';
 import { XPayloadSample } from '../../services/models/Operation';
 import { isPayloadSample } from '../../services';
-import { ReqSamplesWrapper } from './styled.elements';
 
 export interface PayloadSamplesProps {
   callback: OperationModel;
@@ -29,3 +29,7 @@ export class CallbackReqSamples extends React.Component<PayloadSamplesProps> {
     );
   }
 }
+
+export const ReqSamplesWrapper = styled.div`
+  margin-top: 15px;
+`;
diff --git a/src/components/CallbackSamples/CallbackSamples.tsx b/src/components/CallbackSamples/CallbackSamples.tsx
index 5bebad4a..611e8ea2 100644
--- a/src/components/CallbackSamples/CallbackSamples.tsx
+++ b/src/components/CallbackSamples/CallbackSamples.tsx
@@ -1,15 +1,15 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
+import styled from '../../styled-components';
 import { RightPanelHeader } from '../../common-elements';
 import { RedocNormalizedOptions } from '../../services';
 import { CallbackModel } from '../../services/models';
 import { OptionsContext } from '../OptionsProvider';
-import { CallbacksSwitch } from '../CallbacksSwitch/CallbacksSwitch';
+import { GenericDropdown } from '../GenericDropdown/GenericDropdown';
 import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
 import { InvertedSimpleDropdown, MimeLabel } from '../PayloadSamples/styled.elements';
 import { CallbackReqSamples } from './CallbackReqSamples';
-import { SamplesWrapper } from './styled.elements';
 
 export interface CallbackSamplesProps {
   callbacks: CallbackModel[];
@@ -39,16 +39,24 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
 
     const hasSamples = numSamples > 0;
 
+    const dropdownOptions = operations.map((callback, idx) => {
+      return {
+        label: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
+        value: idx.toString(),
+      };
+    });
+
     return (
       (hasSamples && (
         <div>
           <RightPanelHeader> Callback request samples </RightPanelHeader>
 
           <SamplesWrapper>
-            <CallbacksSwitch
-              callbacks={operations}
+            <GenericDropdown
+              items={operations}
               renderDropdown={this.renderDropdown}
-              withLabel={true}
+              label={'Callback'}
+              options={dropdownOptions}
             >
               {callback => (
                 <CallbackReqSamples
@@ -57,7 +65,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
                   renderDropdown={this.renderDropdown}
                 />
               )}
-            </CallbacksSwitch>
+            </GenericDropdown>
           </SamplesWrapper>
         </div>
       )) ||
@@ -65,3 +73,8 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
     );
   }
 }
+
+export const SamplesWrapper = styled.div`
+  background: ${({ theme }) => theme.codeSample.backgroundColor};
+  padding: ${props => props.theme.spacing.unit * 4}px;
+`;
diff --git a/src/components/CallbackSamples/styled.elements.ts b/src/components/CallbackSamples/styled.elements.ts
deleted file mode 100644
index 13eec1bf..00000000
--- a/src/components/CallbackSamples/styled.elements.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from '../../styled-components';
-
-export const SamplesWrapper = styled.div`
-  background: ${({ theme }) => theme.codeSample.backgroundColor};
-  padding: ${props => props.theme.spacing.unit * 4}px;
-`;
-
-export const ReqSamplesWrapper = styled.div`
-  margin-top: 15px;
-`;
diff --git a/src/components/CallbacksSwitch/CallbacksSwitch.tsx b/src/components/CallbacksSwitch/CallbacksSwitch.tsx
deleted file mode 100644
index 8c5b1da8..00000000
--- a/src/components/CallbacksSwitch/CallbacksSwitch.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { observer } from 'mobx-react';
-import * as React from 'react';
-
-import { DropdownProps } from '../../common-elements/dropdown';
-import { DropdownLabel, DropdownWrapper } from '../PayloadSamples/styled.elements';
-import { OperationModel } from '../../services/models';
-
-export interface CallbacksSwitchProps {
-  callbacks?: OperationModel[];
-  withLabel?: boolean;
-
-  renderDropdown: (props: DropdownProps) => JSX.Element;
-  children: (activeCallback: OperationModel) => JSX.Element;
-}
-
-export interface CallbacksSwitchState {
-  activeItemIdx: number;
-}
-
-@observer
-export class CallbacksSwitch extends React.Component<CallbacksSwitchProps, CallbacksSwitchState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItemIdx: 0,
-    };
-  }
-
-  switchCallback = ({ value }) => {
-    if (this.props.callbacks) {
-      this.setState({
-        activeItemIdx: parseInt(value, 10),
-      });
-    }
-  };
-
-  render() {
-    const { callbacks } = this.props;
-
-    if (!callbacks || !callbacks.length) {
-      return null;
-    }
-
-    const options = callbacks.map((callback, idx) => {
-      return {
-        label: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
-        value: idx.toString(),
-      };
-    });
-
-    const Wrapper = ({ children }) =>
-      this.props.withLabel ? (
-        <DropdownWrapper>
-          <DropdownLabel>Callback</DropdownLabel>
-          {children}
-        </DropdownWrapper>
-      ) : (
-        children
-      );
-
-    return (
-      <>
-        <Wrapper>
-          {this.props.renderDropdown({
-            value: options[this.state.activeItemIdx],
-            options,
-            onChange: this.switchCallback,
-          })}
-        </Wrapper>
-
-        {this.props.children(callbacks[this.state.activeItemIdx])}
-      </>
-    );
-  }
-}
diff --git a/src/components/GenericDropdown/GenericDropdown.tsx b/src/components/GenericDropdown/GenericDropdown.tsx
new file mode 100644
index 00000000..15f69855
--- /dev/null
+++ b/src/components/GenericDropdown/GenericDropdown.tsx
@@ -0,0 +1,71 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+
+import { DropdownProps, DropdownOption } from '../../common-elements/dropdown';
+import { DropdownLabel, DropdownWrapper } from '../PayloadSamples/styled.elements';
+
+export interface GenericDropdownProps<T> {
+  items?: T[];
+  options: DropdownOption[];
+  label?: string;
+
+  renderDropdown: (props: DropdownProps) => JSX.Element;
+  children: (activeItem: T) => JSX.Element;
+}
+
+export interface GenericDropdownState {
+  activeItemIdx: number;
+}
+
+@observer
+export class GenericDropdown<T> extends React.Component<
+  GenericDropdownProps<T>,
+  GenericDropdownState
+> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItemIdx: 0,
+    };
+  }
+
+  switchItem = ({ value }) => {
+    if (this.props.items) {
+      this.setState({
+        activeItemIdx: parseInt(value, 10),
+      });
+    }
+  };
+
+  render() {
+    const { items } = this.props;
+
+    if (!items || !items.length) {
+      return null;
+    }
+
+    const Wrapper = ({ children }) =>
+      this.props.label ? (
+        <DropdownWrapper>
+          <DropdownLabel>{this.props.label}</DropdownLabel>
+          {children}
+        </DropdownWrapper>
+      ) : (
+        children
+      );
+
+    return (
+      <>
+        <Wrapper>
+          {this.props.renderDropdown({
+            value: this.props.options[this.state.activeItemIdx],
+            options: this.props.options,
+            onChange: this.switchItem,
+          })}
+        </Wrapper>
+
+        {this.props.children(items[this.state.activeItemIdx])}
+      </>
+    );
+  }
+}