[Cleanup] - Part 2 (#461)

* make button onCloick requried proptypes * carousel callout * dialogModal and rest param types * convert offclick wrapper * feedback changes
curology · Oct 27, 2020 · b4e89d3 · b4e89d3
1 parent 868d930
commit b4e89d3
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 384 deletions.
diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import ChevronIcon from 'src/svgs/icons/chevron-icon.svg';
 import { COLORS } from 'src/constants';
 
@@ -52,7 +52,7 @@ export const Accordion = ({
 }: AccordionProps) => {
   const [contentHeight, setContentHeight] = useState('0px');
 
-  const contentRef = React.createRef<HTMLDivElement>();
+  const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const nextHeight =

diff --git a/src/shared-components/alert/index.tsx b/src/shared-components/alert/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { Avatar } from '../avatar';
@@ -71,7 +71,7 @@ export const Alert = (alertProps: AlertProps) => {
   const [exiting, setExiting] = useState(false);
   const [exited, setExited] = useState(false);
 
-  const contentText = React.createRef<HTMLDivElement>();
+  const contentText = useRef<HTMLDivElement>(null);
 
   let timer: number | undefined;
 

diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/index.tsx
@@ -130,7 +130,7 @@ Button.propTypes = {
   isFullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
   loading: isLoadingPropFunction,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
   textColor: PropTypes.string,
 };
 

diff --git a/src/shared-components/callout/index.tsx b/src/shared-components/callout/index.tsx
@@ -30,8 +30,8 @@ type CalloutProps = {
  */
 export const Callout = ({
   children,
-  icon = null,
   color = COLORS.primary,
+  icon = null,
 }: CalloutProps) => (
   <CalloutContainer>
     <Text color={color}>{children}</Text>
@@ -41,8 +41,8 @@ export const Callout = ({
 
 Callout.propTypes = {
   children: PropTypes.node.isRequired,
-  icon: PropTypes.node,
   color: PropTypes.string,
+  icon: PropTypes.node,
 };
 
 Callout.Container = ParentContainer;
diff --git a/src/shared-components/carousel/arrow/index.tsx b/src/shared-components/carousel/arrow/index.tsx
@@ -8,65 +8,51 @@ import { ArrowContainer, BottomRightAlignedArrowContainer } from './style';
 
 type ArrowProps = {
   bottomRightAlignedArrows?: boolean;
-  prev?: boolean;
-  next?: boolean;
   disabled?: boolean;
-  onClick: () => void;
+  next?: boolean;
+  onClick?: () => void;
+  prev?: boolean;
 };
 
-class Arrow extends React.Component<ArrowProps> {
-  static propTypes = {
-    bottomRightAlignedArrows: PropTypes.bool,
-    prev: PropTypes.bool,
-    next: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    bottomRightAlignedArrows: false,
-    prev: false,
-    next: false,
-    disabled: false,
-  };
-
-  arrowClickHandler = () => {
-    const { onClick } = this.props;
-    onClick();
-  };
-
-  render() {
-    const {
-      bottomRightAlignedArrows = false,
-      prev = false,
-      next = false,
-      disabled = false,
-    } = this.props;
-    const ArrowContainerComponent = bottomRightAlignedArrows
-      ? BottomRightAlignedArrowContainer
-      : ArrowContainer;
+const Arrow = ({
+  bottomRightAlignedArrows = false,
+  disabled = false,
+  next = false,
+  onClick = () => undefined,
+  prev = false,
+}: ArrowProps) => {
+  const ArrowContainerComponent = bottomRightAlignedArrows
+    ? BottomRightAlignedArrowContainer
+    : ArrowContainer;
+
+  return (
+    <ArrowContainerComponent prev={prev} next={next} disabled={disabled}>
+      {prev && (
+        <RoundButton
+          buttonType={bottomRightAlignedArrows ? 'primary' : 'action'}
+          disabled={disabled}
+          icon={<ArrowLeftIcon />}
+          onClick={onClick}
+        />
+      )}
+      {next && (
+        <RoundButton
+          buttonType={bottomRightAlignedArrows ? 'primary' : 'action'}
+          disabled={disabled}
+          icon={<ArrowRightIcon />}
+          onClick={onClick}
+        />
+      )}
+    </ArrowContainerComponent>
+  );
+};
 
-    return (
-      <ArrowContainerComponent prev={prev} next={next} disabled={disabled}>
-        {prev && (
-          <RoundButton
-            buttonType={bottomRightAlignedArrows ? 'primary' : 'action'}
-            disabled={disabled}
-            icon={<ArrowLeftIcon />}
-            onClick={this.arrowClickHandler}
-          />
-        )}
-        {next && (
-          <RoundButton
-            buttonType={bottomRightAlignedArrows ? 'primary' : 'action'}
-            disabled={disabled}
-            icon={<ArrowRightIcon />}
-            onClick={this.arrowClickHandler}
-          />
-        )}
-      </ArrowContainerComponent>
-    );
-  }
-}
+Arrow.propTypes = {
+  bottomRightAlignedArrows: PropTypes.bool,
+  disabled: PropTypes.bool,
+  next: PropTypes.bool,
+  onClick: PropTypes.func,
+  prev: PropTypes.bool,
+};
 
 export default Arrow;