Components: refactored UI components to use new state. Minor changes to exports and props

client/src/components/UI/Buttons/ActionButton/ActionButton.tsx

@@ -2,55 +2,45 @@ import { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 import classes from './ActionButton.module.css';
-import Icon from '../../Icons/Icon/Icon';
+import { Icon } from '../..';
 
-interface ComponentProps {
+interface Props {
   name: string;
   icon: string;
   link?: string;
   handler?: () => void;
 }
 
-const ActionButton = (props: ComponentProps): JSX.Element => {
+export const ActionButton = (props: Props): JSX.Element => {
   const body = (
     <Fragment>
       <div className={classes.ActionButtonIcon}>
         <Icon icon={props.icon} />
       </div>
-      <div className={classes.ActionButtonName}>
-        {props.name}
-      </div>
+      <div className={classes.ActionButtonName}>{props.name}</div>
     </Fragment>
   );
 
   if (props.link) {
     return (
-      <Link
-        to={props.link}
-        tabIndex={0}>
+      <Link to={props.link} tabIndex={0}>
         {body}
       </Link>
-    )
+    );
   } else if (props.handler) {
     return (
       <div
         className={classes.ActionButton}
         onClick={props.handler}
         onKeyPress={(e) => {
-          if (e.key === 'Enter' && props.handler) props.handler()
+          if (e.key === 'Enter' && props.handler) props.handler();
         }}
         tabIndex={0}
-        >{body}
-      </div>
-    )
-  } else {
-    return (
-      <div
-        className={classes.ActionButton}>
+      >
         {body}
       </div>
-    )
+    );
+  } else {
+    return <div className={classes.ActionButton}>{body}</div>;
   }
-}
-
-export default ActionButton;
+};