WIP #2: Added disabled to props and moved to TypeScript types instead…

… of JavaScript ones

src/components/ArrowComponent.tsx

@@ -5,16 +5,18 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 type ArrowProps = {
-    handleClick: (direction: Number) => void;
-    direction: String;
+    handleClick: (direction: number) => void;
+    direction: string;
+    disabled: boolean;
 }
 
 const ArrowComponent: React.FC<ArrowProps> = (props: ArrowProps) => {
     const directionNumber = (props.direction === "right") ? 1 : -1;
     return (
         <div>
             <Fab size='large' aria-label='add' variant='extended' 
-                onClick={() => props.handleClick(directionNumber)}>
+                onClick={() => props.handleClick(directionNumber)}
+                disabled={props.disabled}>
                 {(directionNumber == 1) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
             </Fab>
         </div>
@@ -23,7 +25,8 @@ const ArrowComponent: React.FC<ArrowProps> = (props: ArrowProps) => {
 
 ArrowComponent.propTypes = {
     handleClick: PropType.func.isRequired,
-    direction: PropType.instanceOf(String).isRequired
+    direction: PropType.string.isRequired,
+    disabled: PropType.bool.isRequired,
 }
 
 export default ArrowComponent;