From 6308d619118f8d66b301e3618dbeb1a3a8ddcfd6 Mon Sep 17 00:00:00 2001
From: Phil Steinke <phil@tgrrr.com>
Date: Wed, 9 Sep 2020 19:45:15 +0800
Subject: [PATCH 1/3] chore: rebase main onto submit Resources branch

---
 src/components/Resources/index.js          | 36 ++++++++++++++++++++--
 src/components/Resources/submitResource.js | 23 ++++++++++++--
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/components/Resources/index.js b/src/components/Resources/index.js
index 59c6e38..480dd7b 100644
--- a/src/components/Resources/index.js
+++ b/src/components/Resources/index.js
@@ -1,13 +1,31 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 import PersonalMenu from '../PersonalMenu';
 import Search from '../Search';
-import Grid from '@material-ui/core/Grid';
+import { Grid, Button } from '@material-ui/core';
 import { ResourceCard } from './ResourceCard';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import { makeStyles } from '@material-ui/core/styles';
 
-function Resources({ getResourcesUrl }) {
+const useStyles = makeStyles(theme => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+  input: {
+    display: 'none',
+  },
+  heading: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
+
+function Resources() {
+  const classes = useStyles();
   const [resources, setResources] = useState([]);
+  const getResourcesUrl = '/api/v1/resources';
 
   useEffect(() => {
     axios
@@ -29,8 +47,20 @@ function Resources({ getResourcesUrl }) {
           <PersonalMenu />
         </Grid>
         <Grid item lg={9}>
-          <h2>Resources</h2>
+          <h2 className={classes.heading}>
+            Resources{' '}
+            <Link to="/submit-resource">
+              <Button
+                variant="contained"
+                color="primary"
+                className={classes.button}
+              >
+                <AddCircleOutlineIcon /> &nbsp; Add new resource
+              </Button>
+            </Link>
+          </h2>
           <Search label="Search resources" />
+
           <br />
           <Grid container spacing={1}>
             {resources.map(resource => {
diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js
index 940bf20..daae897 100644
--- a/src/components/Resources/submitResource.js
+++ b/src/components/Resources/submitResource.js
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import axios from 'axios';
 import CreatableSelect from 'react-select/creatable';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
@@ -80,7 +81,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SubmitResource = () => {
+const SubmitResource = matchProps => {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
@@ -90,6 +91,7 @@ const SubmitResource = () => {
 
   const [values, setValues] = useState({
     url: '',
+    created: Date.now(),
     year: '',
     level: '',
     title: '',
@@ -112,7 +114,20 @@ const SubmitResource = () => {
     setTags(newValue);
   };
 
-  const handleSubmit = () => alert('Ready to handle tour submit request 🚀');
+  const handleSubmit = () => {
+    axios
+      .post('http://localhost:3001/resources', values)
+      .then(function(response) {
+        // handle success
+        console.log(matchProps);
+        matchProps.history.push('/resources');
+        console.log(response);
+      })
+      .catch(function(error) {
+        // handle error
+        console.log(error);
+      });
+  };
 
   return (
     <Grid container spacing={1}>
@@ -130,7 +145,7 @@ const SubmitResource = () => {
               <Link color="inherit" to="/resources">
                 Resources
               </Link>
-              <Typography color="textPrimary">Submit</Typography>
+              <Typography color="textPrimary">Add new resource</Typography>
             </Breadcrumbs>
           </Paper>
         </div>
@@ -148,6 +163,7 @@ const SubmitResource = () => {
         />
 
         <TextField
+          required
           id="outlined-dense"
           label="Title"
           className={clsx(classes.textField, classes.dense)}
@@ -159,6 +175,7 @@ const SubmitResource = () => {
         />
 
         <TextField
+          required
           id="outlined-dense"
           label="Description"
           className={clsx(classes.textField, classes.dense)}

From 56f028381b6329c365de7f631fdb5106feca0eb0 Mon Sep 17 00:00:00 2001
From: Linda Peng <lpnotes@Lindas-MacBook-Pro-2.local>
Date: Mon, 3 Feb 2020 01:47:05 -0800
Subject: [PATCH 2/3] WIP: implemeent react hook form

---
 package-lock.json                          |   5 +
 src/components/Resources/submitResource.js | 308 +++++++++++----------
 2 files changed, 168 insertions(+), 145 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a7f9f1..d1642ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21839,6 +21839,11 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-hook-form": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-4.8.1.tgz",
+      "integrity": "sha512-3DFNKCB+a1RDq7nuQXjvHqzWl6Mt80USts6j47duI0Jn+07T+liXh7JuIOne+Fnb59kSGWCSHMvT0ytqNo7YOg=="
+    },
     "react-input-autosize": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js
index daae897..4f7d6e4 100644
--- a/src/components/Resources/submitResource.js
+++ b/src/components/Resources/submitResource.js
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import axios from 'axios';
 import CreatableSelect from 'react-select/creatable';
 import clsx from 'clsx';
+import { useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 import {
   Grid,
@@ -85,6 +86,8 @@ const SubmitResource = matchProps => {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
+  const { register, handleSubmit, errors } = useForm();
+
   useEffect(() => {
     setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
@@ -114,7 +117,7 @@ const SubmitResource = matchProps => {
     setTags(newValue);
   };
 
-  const handleSubmit = () => {
+  const onSubmit = () => {
     axios
       .post('http://localhost:3001/resources', values)
       .then(function(response) {
@@ -149,159 +152,174 @@ const SubmitResource = matchProps => {
             </Breadcrumbs>
           </Paper>
         </div>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <TextField
+            required
+            id="outlined-dense"
+            label="URL"
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            value={values.url}
+            onChange={handleChange('url')}
+            name="url"
+            ref={register({ required: true, maxLength: 400 })}
+          />
+          {errors.url && 'URL is required'}
 
-        <TextField
-          required
-          id="outlined-dense"
-          label="URL"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.url}
-          onChange={handleChange('url')}
-        />
-
-        <TextField
-          required
-          id="outlined-dense"
-          label="Title"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.title}
-          onChange={handleChange('title')}
-        />
-
-        <TextField
-          required
-          id="outlined-dense"
-          label="Description"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.description}
-          onChange={handleChange('description')}
-        />
-
-        <TextField
-          id="outlined-dense"
-          label="Year Updated"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          value={values.year}
-          onChange={handleChange('year')}
-        />
-        <FormGroup aria-label="position" row className={classes.freeSwitch}>
-          <FormControlLabel
-            checked={values.freeResource}
-            value="start"
-            control={<Switch color="primary" />}
-            label="Free"
-            labelPlacement="start"
-            onChange={handleSwitchChange('freeResource')}
+          <TextField
+            required
+            id="outlined-dense"
+            label="Title"
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            name="title"
+            ref={register}
+            value={values.title}
+            onChange={handleChange('title')}
           />
-        </FormGroup>
 
-        <FormControl variant="outlined" className={classes.formControl}>
-          <InputLabel
-            ref={inputLabel}
-            htmlFor="outlined-media-type-native-simple"
-            className={classes.label}
-          >
-            Media Type
-          </InputLabel>
-          <Select
-            native
-            value={values.mediaType}
-            inputProps={{
-              name: 'media-type',
-              id: 'outlined-media-type-native-simple',
-            }}
-            className={classes.dense}
+          <TextField
+            required
+            id="outlined-dense"
+            label="Description"
+            className={clsx(classes.textField, classes.dense)}
             margin="dense"
-            labelWidth={labelWidth}
-            onChange={handleChange('mediaType')}
-          >
-            <option value="" />
-            {mediaTypes.map(type => (
-              <option key={type} value={type}>
-                {type}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+            variant="outlined"
+            fullWidth
+            name="description"
+            ref={register}
+            value={values.description}
+            onChange={handleChange('description')}
+          />
 
-        <FormControl variant="outlined" className={classes.formControl}>
-          <InputLabel
-            ref={inputLabel}
-            htmlFor="outlined-level-native-simple"
-            className={classes.label}
-          >
-            Level
-          </InputLabel>
-          <Select
-            native
-            value={values.level}
-            inputProps={{
-              name: 'level',
-              id: 'outlined-level-native-simple',
-            }}
-            className={classes.dense}
+          <TextField
+            id="outlined-dense"
+            label="Year Updated"
+            className={clsx(classes.textField, classes.dense)}
             margin="dense"
-            labelWidth={labelWidth}
-            onChange={handleChange('level')}
-          >
-            <option value="" />
-            <option value="beginner">Beginner</option>
-            <option value="intermediate">Intermediate</option>
-            <option value="advanced">Advanced</option>
-          </Select>
-        </FormControl>
+            variant="outlined"
+            name="year_updated"
+            ref={register}
+            value={values.year}
+            onChange={handleChange('year')}
+          />
+          <FormGroup aria-label="position" row className={classes.freeSwitch}>
+            <FormControlLabel
+              checked={values.freeResource}
+              value="start"
+              control={<Switch color="primary" />}
+              label="Free"
+              name="price"
+              ref={register}
+              labelPlacement="start"
+              onChange={handleSwitchChange('freeResource')}
+            />
+          </FormGroup>
 
-        <TextField
-          id="outlined-dense"
-          label="Your Review"
-          value={values.review}
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          multiline
-          rowsMax="4"
-          onChange={handleChange('review')}
-        />
+          <FormControl variant="outlined" className={classes.formControl}>
+            <InputLabel
+              ref={inputLabel}
+              htmlFor="outlined-media-type-native-simple"
+              className={classes.label}
+            >
+              Media Type
+            </InputLabel>
+            <Select
+              native
+              value={values.mediaType}
+              inputProps={{
+                name: 'media-type',
+                id: 'outlined-media-type-native-simple',
+              }}
+              name="media_type"
+              ref={register}
+              className={classes.dense}
+              margin="dense"
+              labelWidth={labelWidth}
+              onChange={handleChange('mediaType')}
+            >
+              <option value="" />
+              {mediaTypes.map(type => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl variant="outlined" className={classes.formControl}>
+            <InputLabel
+              ref={inputLabel}
+              htmlFor="outlined-level-native-simple"
+              className={classes.label}
+            >
+              Level
+            </InputLabel>
+            <Select
+              native
+              value={values.level}
+              inputProps={{
+                name: 'level',
+                id: 'outlined-level-native-simple',
+              }}
+              ref={register}
+              className={classes.dense}
+              margin="dense"
+              labelWidth={labelWidth}
+              onChange={handleChange('level')}
+            >
+              <option value="" />
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </Select>
+          </FormControl>
 
-        <CreatableSelect
-          className={classes.select}
-          isMulti
-          onChange={handleTagChange}
-          placeholder="Tags"
-          options={defaultTags}
-          styles={{
-            control: styles => ({
-              ...styles,
-              borderColor: 'hsl(0, 0%, 77%)',
-              ':hover': { borderColor: 'rgba(0, 0, 0, 0.87)' },
-              ':focus': { border: '2px solid #3f51b5' },
-            }),
-            placeholder: styles => ({ ...styles, color: '#757575' }),
-          }}
-          value={tags}
-        />
+          <TextField
+            id="outlined-dense"
+            label="Your Review"
+            value={values.review}
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            multiline
+            rowsMax="4"
+            onChange={handleChange('review')}
+            name="your_review"
+            ref={register}
+          />
+
+          <CreatableSelect
+            className={classes.select}
+            isMulti
+            onChange={handleTagChange}
+            placeholder="Tags"
+            options={defaultTags}
+            styles={{
+              control: (styles, state) => ({
+                ...styles,
+                borderColor: 'hsl(0, 0%, 77%)',
+                ':hover': { borderColor: 'rgba(0, 0, 0, 0.87)' },
+                ':focus': { border: '2px solid #3f51b5' },
+              }),
+              placeholder: styles => ({ ...styles, color: '#757575' }),
+            }}
+            value={tags}
+            name="tags"
+            ref={register}
+          />
 
-        <FormGroup aria-label="position" className={classes.submit}>
-          <Button
-            variant="contained"
-            className={classes.button}
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
-        </FormGroup>
+          <FormGroup aria-label="position" className={classes.submit}>
+            <Button variant="contained" className={classes.button}>
+              Submit
+            </Button>
+          </FormGroup>
+        </form>
       </Grid>
     </Grid>
   );

From 7143ec9e6ed90969b622853f376590afec6e0248 Mon Sep 17 00:00:00 2001
From: Phil Steinke <phil@tgrrr.com>
Date: Wed, 9 Sep 2020 19:51:59 +0800
Subject: [PATCH 3/3] rebase main onto issue-55 (pt2)

---
 package.json                               |  4 +--
 src/components/Resources/ResourceCard.js   |  3 +-
 src/components/Resources/index.js          | 12 +++----
 src/components/Resources/submitResource.js | 41 ++++++++++++++--------
 4 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index e59b74c..2373e52 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "prop-types": "^15.7.2",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "react-hook-form": "5.5.1",
+    "react-hook-form": "^6.7.2",
     "react-query": "^2.5.14",
     "react-router-dom": "5.1.2",
     "react-scripts": "^3.4.0",
@@ -90,4 +90,4 @@
       "git add"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Resources/ResourceCard.js b/src/components/Resources/ResourceCard.js
index 562e72d..bc64b9b 100644
--- a/src/components/Resources/ResourceCard.js
+++ b/src/components/Resources/ResourceCard.js
@@ -50,6 +50,7 @@ export const ResourceCard = ({ guid, title, created, description, url }) => {
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
+
   return (
     <Card className={classes.card}>
       <Link to={`/resources/${guid}`}>
@@ -115,7 +116,7 @@ export const ResourceCard = ({ guid, title, created, description, url }) => {
 ResourceCard.propTypes = {
   guid: PropTypes.string,
   title: PropTypes.string,
-  created: PropTypes.string,
+  created: PropTypes.string, // is actually a PropTypes.instanceOf(Date),
   description: PropTypes.string,
   url: PropTypes.string,
 };
diff --git a/src/components/Resources/index.js b/src/components/Resources/index.js
index 480dd7b..75ee507 100644
--- a/src/components/Resources/index.js
+++ b/src/components/Resources/index.js
@@ -63,13 +63,11 @@ function Resources() {
 
           <br />
           <Grid container spacing={1}>
-            {resources.map(resource => {
-              return (
-                <Grid item lg={3} key={resource.guid}>
-                  <ResourceCard {...resource} />
-                </Grid>
-              );
-            })}
+            {resources.map(resource => (
+              <Grid item lg={3} key={resource.guid}>
+                <ResourceCard {...resource} />
+              </Grid>
+            ))}
           </Grid>
         </Grid>
       </Grid>
diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js
index 4f7d6e4..58ddbd4 100644
--- a/src/components/Resources/submitResource.js
+++ b/src/components/Resources/submitResource.js
@@ -1,3 +1,4 @@
+// Component to submit a resource at `/submit-resource`
 import React, { useState, useRef, useEffect } from 'react';
 import axios from 'axios';
 import CreatableSelect from 'react-select/creatable';
@@ -82,27 +83,31 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+const initialState = {
+  created: Date.now(),
+  description: '',
+  freeResource: true,
+  level: '',
+  mediaType: '',
+  review: '',
+  title: '',
+  url: '',
+  year: '',
+};
+
 const SubmitResource = matchProps => {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
-  const { register, handleSubmit, errors } = useForm();
+  const { register, handleSubmit, errors } = useForm({
+    defaultValues: initialState,
+  });
 
   useEffect(() => {
     setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
 
-  const [values, setValues] = useState({
-    url: '',
-    created: Date.now(),
-    year: '',
-    level: '',
-    title: '',
-    review: '',
-    mediaType: '',
-    description: '',
-    freeResource: true,
-  });
+  const [values, setValues] = useState(initialState);
   const [tags, setTags] = useState([]);
 
   const handleChange = name => event => {
@@ -164,8 +169,9 @@ const SubmitResource = matchProps => {
             value={values.url}
             onChange={handleChange('url')}
             name="url"
-            ref={register({ required: true, maxLength: 400 })}
+            ref={register({ name: 'url', required: true, maxLength: 400 })}
           />
+          {/* TODO: error for maxLength */}
           {errors.url && 'URL is required'}
 
           <TextField
@@ -196,6 +202,8 @@ const SubmitResource = matchProps => {
             onChange={handleChange('description')}
           />
 
+          {/* TODO: date validation */}
+          {/* TODO: date selector */}
           <TextField
             id="outlined-dense"
             label="Year Updated"
@@ -207,6 +215,7 @@ const SubmitResource = matchProps => {
             value={values.year}
             onChange={handleChange('year')}
           />
+
           <FormGroup aria-label="position" row className={classes.freeSwitch}>
             <FormControlLabel
               checked={values.freeResource}
@@ -315,7 +324,11 @@ const SubmitResource = matchProps => {
           />
 
           <FormGroup aria-label="position" className={classes.submit}>
-            <Button variant="contained" className={classes.button}>
+            <Button
+              variant="contained"
+              className={classes.button}
+              type="submit"
+            >
               Submit
             </Button>
           </FormGroup>