Getting Material UI integrated

samvera-deprecated · Feb 17, 2020 · eb977ff · eb977ff
1 parent f8dafb0
commit eb977ff
Show file tree

Hide file tree

Showing 16 changed files with 636 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.4.2",
+    "@material-ui/icons": "^4.4.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1",
@@ -57,6 +59,7 @@
     "fetch-mock": "^7.3.9",
     "node-fetch": "^2.6.0",
     "prettier": "^1.18.2",
+    "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.3",
     "timekeeper": "^2.2.0"
   }

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <title>Browse Everything</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.css → src/containers/App.css b/src/App.css → src/containers/App.css
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './App.css';
+import UploadForm from './UploadForm';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+import { connect } from 'react-redux'
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className="App">
+        <Container maxWidth="lg">
+          <Typography variant="h1" component="h2" gutterBottom>
+            Browse Everything
+          </Typography>
+        </Container>
+        <Container maxWidth="lg">
+          <UploadForm styles={this.props.style} dispatch={this.props.dispatch} selectedProvider={this.props.selectedProvider}/>
+        </Container>
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  style: PropTypes.object,
+  selectedProvider: PropTypes.string.isRequired,
+  providers: PropTypes.array.isRequired,
+  isRequesting: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number,
+  dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  const { selectedProvider, providers } = state
+  const { isRequesting, lastUpdated, items } = providers || {
+    isFetching: true,
+    items: []
+  }
+
+  return {
+    selectedProvider,
+    providers: items,
+    isRequesting,
+    lastUpdated
+  }
+}
+
+export default connect(mapStateToProps)(App);
diff --git a/src/containers/AuthButton.js b/src/containers/AuthButton.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import PropTypes from 'prop-types';
+
+class AuthButton extends React.Component {
+  render() {
+    return (
+      <Button variant="contained" color="secondary" style={this.props.style}>Sign In</Button>
+    );
+  }
+}
+
+AuthButton.propTypes = {
+  style: PropTypes.object
+};
+
+export default AuthButton;
diff --git a/src/containers/BrowseEverything.js b/src/containers/BrowseEverything.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Provider } from 'react-redux'
+import configureStore from '../configureStore'
+import App from './App'
+
+const store = configureStore()
+
+export default class BrowseEverything extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <App />
+      </Provider>
+    )
+  }
+}
diff --git a/src/containers/ResourceNode.js b/src/containers/ResourceNode.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Checkbox from '@material-ui/core/Checkbox';
+
+class ResourceNode extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: this.props.selected
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Checkbox
+          checked={this.state.selected}
+          value="selected"
+          inputProps={
+            {
+              'aria-label': 'primary checkbox',
+            }
+          }
+        />
+        <span>{this.props.label}</span>
+      </div>
+    );
+  }
+}
+
+ResourceNode.propTypes = {
+  selected: PropTypes.bool,
+  label: PropTypes.string.isRequired
+};
+
+ResourceNode.defaultProps = {
+  selected: false
+};
+
+export default ResourceNode;
diff --git a/src/containers/ResourceTree.js b/src/containers/ResourceTree.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Checkbox from '@material-ui/core/Checkbox';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+class ResourceTree extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: this.props.selected,
+      expanded: this.props.expanded
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          {!this.props.root && (
+            <span>
+              <IconButton aria-label="expand or collapse" size="small">
+                <ArrowDownwardIcon fontSize="inherit" />
+              </IconButton>
+              <Checkbox
+                checked={this.state.selected}
+                value="selected"
+                inputProps={
+                  {
+                    'aria-label': 'primary checkbox',
+                  }
+                }
+              />
+            </span>
+          )}
+          <span>{this.props.label}</span>
+        </div>
+
+        <div>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
+
+ResourceTree.propTypes = {
+  styles: PropTypes.object,
+  selected: PropTypes.bool,
+  expanded: PropTypes.bool,
+  root: PropTypes.bool,
+  label: PropTypes.string.isRequired
+};
+
+ResourceTree.defaultProps = {
+  selected: false,
+  expanded: false,
+  root: false
+};
+
+export default ResourceTree;
diff --git a/src/containers/SelectProvider.css b/src/containers/SelectProvider.css
diff --git a/src/containers/SelectProvider.js b/src/containers/SelectProvider.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import './SelectProvider.css';
+import PropTypes from 'prop-types';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+
+class SelectProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      provider: this.props.provider
+    };
+  }
+
+  render() {
+    return (
+      <FormControl variant="outlined" style={this.props.style.formControl}>
+        <Select
+          value={this.props.provider}
+          onChange={this.props.handleChange}
+          inputProps={
+            {
+              name: 'provider',
+              id: 'provider'
+            }
+          }
+        >
+          <MenuItem value="file_system">File System</MenuItem>
+          <MenuItem value="google_drive">Google Drive</MenuItem>
+        </Select>
+      </FormControl>
+    );
+  }
+}
+
+SelectProvider.propTypes = {
+  style: PropTypes.object,
+  provider: PropTypes.string,
+  handleChange: PropTypes.func.isRequired
+};
+
+SelectProvider.defaultProps = {
+  style: {
+    formControl: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }
+}
+
+export default SelectProvider;
diff --git a/src/containers/UploadForm.css b/src/containers/UploadForm.css
diff --git a/src/containers/UploadForm.js b/src/containers/UploadForm.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import './UploadForm.css';
+import Button from '@material-ui/core/Button';
+import PropTypes from 'prop-types';
+import SelectProvider from './SelectProvider';
+import AuthButton from './AuthButton';
+import ResourceTree from './ResourceTree';
+import ResourceNode from './ResourceNode';
+import Grid from '@material-ui/core/Grid';
+import { selectProvider } from '../actions';
+import Paper from '@material-ui/core/Paper';
+
+class UploadForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChangeProvider = this.handleChangeProvider.bind(this)
+  }
+
+  handleChangeProvider(event) {
+    const provider = event.target.value;
+    this.props.dispatch(selectProvider(provider));
+  }
+
+  render() {
+    return (
+      <form className="upload">
+        <Grid container spacing={3}>
+          <Grid item xs={6}>
+            <SelectProvider style={this.props.style.selectProvider} handleChange={this.handleChangeProvider} provider={this.props.selectedProvider}/>
+          </Grid>
+
+          <Grid item xs={6} style={this.props.style.grid.item}>
+            <AuthButton style={this.props.style.authButton} />
+          </Grid>
+
+          <Grid container spacing={3} align="left">
+            <Grid item xs={12}>
+              <Paper>
+                <ResourceTree style={this.props.style.resourceTree} root={true} label="Current Files">
+
+                  <ResourceTree style={this.props.style} label="Test Directory" />
+                  <ResourceNode style={this.props.style} label="Test File" />
+                </ResourceTree>
+              </Paper>
+            </Grid>
+          </Grid>
+
+          <Grid item xs={12} align="left">
+            <label htmlFor="upload-form-submit">
+              <Button variant="contained" color="primary" style={this.props.style.submit}>Upload</Button>
+            </label>
+          </Grid>
+
+        </Grid>
+      </form>
+    );
+  }
+}
+
+UploadForm.propTypes = {
+  style: PropTypes.object,
+  selectedProvider: PropTypes.string.isRequired,
+  dispatch: PropTypes.func.isRequired
+};
+
+UploadForm.defaultProps = {
+  style: {
+    submit: {
+    },
+    selectProvider: {
+      formControl: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      }
+    },
+    grid: {
+      item: {
+        alignSelf: 'center'
+      }
+    },
+    authButton: {
+      alignSelf: 'center'
+    }
+
+  }
+}
+
+export default UploadForm;