From 6f3ed96e53b299cf9996a739fb36d76295973d24 Mon Sep 17 00:00:00 2001
From: Baibhav Vatsa <baibhavvatsa@gmail.com>
Date: Wed, 27 Nov 2019 09:52:57 -0600
Subject: [PATCH] WIP #2: Added propTypes and directional icons.

---
 src/components/ArrowComponent.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ArrowComponent.tsx b/src/components/ArrowComponent.tsx
index 28f773a..1b9f0ba 100644
--- a/src/components/ArrowComponent.tsx
+++ b/src/components/ArrowComponent.tsx
@@ -1,25 +1,29 @@
 import React from 'react';
 import PropType from 'prop-types';
 import { Fab } from '@material-ui/core';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 type ArrowProps = {
-    // TODO check for MouseEvent
-    handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    suppliedIcon: JSX.Element;
+    handleClick: (direction: Number) => void;
+    direction: String;
 }
 
 const ArrowComponent: React.FC<ArrowProps> = (props: ArrowProps) => {
+    const directionNumber = (props.direction === "right") ? 1 : -1;
     return (
         <div>
-            <Fab size='large' aria-label='add' variant='extended'>
-                {props.suppliedIcon}
+            <Fab size='large' aria-label='add' variant='extended' 
+                onClick={() => props.handleClick(directionNumber)}>
+                {(directionNumber == 1) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
             </Fab>
         </div>
     );
 }
 
 ArrowComponent.propTypes = {
-    // TODO add suppliedIcon and handleClick
+    handleClick: PropType.func.isRequired,
+    direction: PropType.instanceOf(String).isRequired
 }
 
 export default ArrowComponent;
\ No newline at end of file