feat: get upload component up to spec

new-lamassu-admin/src/pages/Customers/components/Upload.js

@@ -1,30 +1,68 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { useFormikContext } from 'formik'
+import * as R from 'ramda'
+import React, { useState, useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+
+import { Info3 } from 'src/components/typography'
+import { offColor, subheaderColor } from 'src/styling/variables'
 
 const useStyles = makeStyles({
-  input: {
-    width: 200
+  box: {
+    boxSizing: 'border-box',
+    marginTop: 31,
+    width: 450,
+    height: 120,
+    borderStyle: 'dashed',
+    borderColor: offColor,
+    borderRadius: 4,
+    borderWidth: 1,
+    backgroundColor: subheaderColor,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  boxContent: {
+    marginTop: 30
+  },
+  board: {
+    width: 450,
+    height: 120
   }
 })
 
 const Upload = ({ type }) => {
   const classes = useStyles()
-  const { values } = useFormikContext()
-  console.log(values)
+  const IMAGE = 'image'
+
+  const [data, setData] = useState({})
+
+  const message =
+    type === IMAGE
+      ? 'Drag and drop an image or click to select a file'
+      : 'Drag and drop or click to select a file'
+
+  const onDrop = useCallback(acceptedData => {
+    setData({ preview: URL.createObjectURL(R.head(acceptedData)) })
+  }, [])
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   return (
     <>
-      <div className={classes.board}>
-        <input
-          type={type}
-          name={type}
-          onClick={() => {
-            console.log(values)
-          }}
-          className={classes.input}
-        />
+      <div {...getRootProps()} className={classes.board}>
+        <input {...getInputProps()} />
+        {R.isEmpty(data) && (
+          <div className={classes.box}>
+            <div className={classes.boxContent}>
+              <Info3>{message}</Info3>
+            </div>
+          </div>
+        )}
+        {!R.isEmpty(data) && type === IMAGE && (
+          <div key={data.name}>
+            <img src={data.preview} className={classes.box}></img>
+          </div>
+        )}
       </div>
-      <div className={classes.picture}></div>
     </>
   )
 }