Rename CallbackView to CallbackOperation,

Refactor params

src/components/Callbacks/CallbackOperation.tsx

@@ -2,27 +2,23 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { OperationModel } from '../../services/models';
-import { CallbackDetailsWrap, StyledCallbackTitle } from '../Callbacks/styled.elements';
+import { CallbackDetailsWrap, StyledCallbackTitle } from './styled.elements';
 import { CallbackDetails } from './CallbackDetails';
 
 @observer
-// TODO: rename to Callback
+export class CallbackOperation extends React.Component<{ callbackOperation: OperationModel }> {
-export class CallbackView extends React.Component<{ callbackOperation: OperationModel }> {
   toggle = () => {
     this.props.callbackOperation.toggle();
   };
 
   render() {
-    const { name, expanded, httpVerb, deprecated } = this.props.callbackOperation;
+    const { expanded } = this.props.callbackOperation;
 
     return (
       <>
         <StyledCallbackTitle
           onClick={this.toggle}
-          name={name}
+          callbackOperation={this.props.callbackOperation}
-          opened={expanded}
-          httpVerb={httpVerb}
-          deprecated={deprecated}
         />
         {expanded && (
           <CallbackDetailsWrap>

src/components/Callbacks/CallbackTitle.tsx

@@ -6,23 +6,23 @@ import { shortenHTTPVerb } from '../../utils/openapi';
 import styled from '../../styled-components';
 import { Badge } from '../../common-elements/';
 import { l } from '../../services/Labels';
+import { OperationModel } from '../../services/models';
 
 export interface CallbackTitleProps {
-  name: string;
-  opened?: boolean;
   className?: string;
   onClick?: () => void;
-  httpVerb: string;
+  callbackOperation: OperationModel;
-  deprecated?: boolean;
 }
 
 export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
   render() {
-    const { name, opened, className, onClick, httpVerb, deprecated } = this.props;
+    const { className, onClick, callbackOperation } = this.props;
+    const { name, httpVerb, deprecated, expanded } = callbackOperation;
+
     return (
       <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
         <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
-        <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
+        <ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} />
         <CallbackNameStyled deprecated={deprecated}>{name}</CallbackNameStyled>
         {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
       </CallbackTitleWrapper>

src/components/Callbacks/CallbacksList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { CallbackModel } from '../../services/models';
 import styled from '../../styled-components';
-import { CallbackView } from './Callback';
+import { CallbackOperation } from './CallbackOperation';
 
 const CallbacksHeader = styled.h3`
   font-size: 18px;
@@ -29,7 +29,9 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
         <CallbacksHeader> Callbacks </CallbacksHeader>
         {callbacks.map(callback => {
           return callback.operations.map((operation, index) => {
-            return <CallbackView key={callback.name + index} callbackOperation={operation} />;
+            return (
+              <CallbackOperation key={`${callback.name}_${index}`} callbackOperation={operation} />
+            );
           });
         })}
       </div>

src/components/Callbacks/index.ts

@@ -1,3 +1,3 @@
-export * from './Callback';
+export * from './CallbackOperation';
 export * from './CallbackTitle';
 export * from './CallbacksList';

src/components/Callbacks/styled.elements.ts

@@ -1,6 +1,8 @@
 import styled from '../../styled-components';
 import { CallbackTitle } from './CallbackTitle';
 
+// TODO: get 'background-color' from theme
+// e.g. "theme.colors.secondary.main" or "theme.colors.callbacks.background.main"
 export const StyledCallbackTitle = styled(CallbackTitle)`
   padding: 10px;
   border-radius: 2px;
@@ -10,6 +12,8 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
   cursor: pointer;
 `;
 
+// TODO: get 'background-color' from theme
+// e.g. "theme.colors.secondary.light" or "theme.colors.callbacks.background.light"
 export const CallbackDetailsWrap = styled.div`
   padding: 10px 25px;
   background-color: #fafafa;

src/components/__tests__/Callbacks.test.tsx

@@ -6,8 +6,9 @@ import * as React from 'react';
 import { OpenAPIParser } from '../../services';
 import { CallbackModel } from '../../services/models/Callback';
 import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
-import { CallbacksList, CallbackTitle, CallbackView } from '../Callbacks';
+import { CallbacksList, CallbackTitle, CallbackOperation } from '../Callbacks';
 import * as simpleCallbackFixture from './fixtures/simple-callback.json';
+import { OperationModel } from '../../services/models';
 
 const options = new RedocNormalizedOptions({});
 describe('Components', () => {
@@ -22,7 +23,7 @@ describe('Components', () => {
       );
       // There should be 1 operation defined in simple-callback.json, just get it manually for readability.
       const callbackViewElement = shallow(
-        <CallbackView key={callback.name} callbackOperation={callback.operations[0]} />,
+        <CallbackOperation key={callback.name} callbackOperation={callback.operations[0]} />,
       ).getElement();
       expect(callbackViewElement.props).toBeDefined();
       expect(callbackViewElement.props.children).toBeDefined();
@@ -30,8 +31,16 @@ describe('Components', () => {
     });
 
     it('should correctly render CallbackTitle', () => {
+      const callbackOperation = {
+        name: 'Test',
+        httpVerb: 'get',
+      } as OperationModel;
       const callbackTitleViewElement = shallow(
-        <CallbackTitle name={'Test'} className={'.test'} onClick={undefined} httpVerb={'get'} />,
+        <CallbackTitle
+          className={'.test'}
+          onClick={undefined}
+          callbackOperation={callbackOperation}
+        />,
       ).getElement();
       expect(callbackTitleViewElement.props).toBeDefined();
       expect(callbackTitleViewElement.props.className).toEqual('.test');