added image upload functionality (#27)

* added image upload functionality

* Image upload whth linear progress. This closes #14

frontend/package.json

@@ -4,10 +4,12 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.4.11",
+    "@rmwc/dialog": "^6.1.4",
     "@rmwc/drawer": "^6.1.4",
     "@rmwc/grid": "^6.1.4",
     "@rmwc/icon": "^6.1.4",
     "@rmwc/image-list": "^6.1.4",
+    "@rmwc/linear-progress": "^6.1.4",
     "@rmwc/list": "^6.1.4",
     "@rmwc/textfield": "^6.1.4",
     "@rmwc/theme": "^6.1.4",
@@ -16,6 +18,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "apollo-upload-client": "^16.0.0",
     "graphql": "^15.5.3",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",

frontend/src/App.js

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import { ThemeProvider } from '@rmwc/theme';
 import { BrowserRouter } from 'react-router-dom';
+import { createUploadLink } from 'apollo-upload-client';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { Header, Content } from './components';
 import '@rmwc/theme/styles';
 import './App.scss';
 
 const App = () => {
+  const link = createUploadLink({ uri: process.env.REACT_APP_API_URL });
   const client = new ApolloClient({
-    uri: process.env.REACT_APP_API_URL,
+    link,
     cache: new InMemoryCache(),
   });
   const [open, setOpen] = useState(true);

frontend/src/components/UploadDialog.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { gql, useMutation } from '@apollo/client';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogButton,
+} from '@rmwc/dialog';
+import '@rmwc/dialog/styles';
+import { LinearProgress } from '@rmwc/linear-progress';
+import '@rmwc/linear-progress/styles';
+
+const MUTATION = gql`
+  mutation ($file: Upload!) {
+    upload(file: $file)
+  }
+`;
+
+const UploadDialog = ({ open, setOpen }) => {
+  const [mutate, { data, loading, error }] = useMutation(MUTATION);
+  let history = useHistory();
+
+  const onChange = ({
+    target: {
+      validity,
+      files: [file],
+    },
+  }) => {
+    if (validity.valid) mutate({ variables: { file } });
+  };
+
+  if (data && data.upload) {
+    // console.log(data.upload);
+    setTimeout(() => {
+      history.push('/');
+      history.go(0);
+      setOpen(false);
+    }, 2000);
+  }
+  if (loading) {
+    console.log(loading);
+  }
+  if (error) {
+    console.log(error);
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={(evt) => {
+        console.log(evt.detail.action);
+        setOpen(false);
+      }}
+      onClosed={(evt) => console.log(evt.detail.action)}
+    >
+      <DialogTitle>Upload Photo</DialogTitle>
+      <DialogContent>
+        <input type="file" required onChange={onChange} />
+        <br />
+        {loading && (
+          <>
+            <br />
+            <LinearProgress />
+          </>
+        )}
+        {data && data.upload && (
+          <span style={{ color: 'green' }}>Photo uploaded successfully!</span>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <DialogButton action="close">Close</DialogButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+UploadDialog.propTypes = {
+  open: PropTypes.bool,
+  setOpen: PropTypes.func,
+};
+
+export default UploadDialog;

frontend/src/components/header/Header.js

@@ -12,6 +12,7 @@ import {
 import { NavLink } from 'react-router-dom';
 import '@rmwc/top-app-bar/styles';
 import SearchBar from './SearchBar';
+import Upload from './Upload';
 
 const Header = ({ toggleSideNav }) => {
   return (
@@ -30,7 +31,7 @@ const Header = ({ toggleSideNav }) => {
             <SearchBar />
           </TopAppBarSection>
           <TopAppBarSection alignEnd>
-            <TopAppBarActionItem icon="file_upload" />
+            <Upload />
             <TopAppBarActionItem icon="help" />
             <TopAppBarActionItem icon="settings" />
           </TopAppBarSection>

frontend/src/components/header/Upload.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { TopAppBarActionItem } from '@rmwc/top-app-bar';
+import UploadDialog from '../UploadDialog';
+
+const Upload = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <UploadDialog open={open} setOpen={setOpen} />
+      <TopAppBarActionItem icon="file_upload" onClick={() => setOpen(true)} />
+    </>
+  );
+};
+
+export default Upload;