[Draft] [Issue-55] Submit a resource

src/App.js

@@ -48,14 +48,14 @@ function App() {
               <Coworking />
             </Route>
             <PrivateRoute path="/profile" component={Profile} />
+            <PrivateRoute path="/resources/submit" component={SubmitResource} />
             <Route
               path="/resources/:guid"
               render={matchProps => <ResourcePage matchProps={matchProps} />}
             />
             <Route path="/resources">
               <Resources getResourcesUrl="/api/v1/resources" />
             </Route>
-            <PrivateRoute path="/resources/submit" component={SubmitResource} />
             <Route exact path="/">
               <Home />
             </Route>

src/components/Resources/ResourceCard.js

@@ -23,6 +23,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 const useStyles = makeStyles(theme => ({
   card: {
     maxWidth: 345,
+    height: '100%',
   },
   media: {
     height: 0,

src/components/Resources/submitResource.js

@@ -1,7 +1,19 @@
-import React, { useState, useRef, useEffect } from 'react';
+// TODO :
+// DONE: after typing, store values on change
+// DONE: successful submit with bearer token passed in
+// fix tags
+// fix "paid" checkbox
+// decide what happens on successful submit (redirect to created resource, alert like "congrats you submitted resource..")
+// validation (follow auth implementation) (as type, post-submit)
+// display failed submissions to the user (if not already)
+// test for posting to mock up successful response
+// ensure these are all desired fields for forms
+
+import React, { useState, useRef, useEffect, useReducer } from 'react';
 import CreatableSelect from 'react-select/creatable';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
+import { postResource } from '../../utils/queries';
 import {
   Grid,
   Paper,
@@ -17,6 +29,7 @@ import {
   FormControlLabel,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { useAuth } from '../Auth/AuthContext';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import PersonalMenu from '../PersonalMenu';
 
@@ -26,18 +39,17 @@ const defaultTags = [
   { label: 'devops', value: 'devops' },
 ];
 const mediaTypes = [
-  'PDF',
-  'Video',
-  'Podcast',
-  'Tutorial',
-  'Course',
-  'Book',
-  'Game',
-  'Blog',
-  'Post',
-  'Event',
-  'Website',
+  { VID: 'Video' },
+  { POD: 'Podcast' },
+  { TUTOR: 'Tutorial' },
+  { COURSE: 'Course' },
+  { BOOK: 'Book' },
+  { GAME: 'Game' },
+  { BLOG: 'Blog' },
+  { EVENT: 'Event' },
+  { WEB: 'Website' },
 ];
+
 const useStyles = makeStyles(theme => ({
   textField: {
     marginLeft: theme.spacing(1),
@@ -80,40 +92,100 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SubmitResource = () => {
+const initialState = {
+  url: '',
+  year: '',
+  level: '',
+  title: '',
+  review: '',
+  media_type: '',
+  description: '',
+  paid: true,
+};
+
+function reducer(state, { field, value }) {
+  return {
+    ...state,
+    [field]: value,
+  };
+}
+
+function SubmitResource() {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
+  const auth = useAuth();
+  console.log(auth);
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const onChange = e => {
+    console.log(e.target.name);
+    console.log(e.target.value);
+    if (e.target.name === 'paid') {
+      console.log(e.target.name);
+    } else {
+      dispatch({ field: e.target.name, value: e.target.value });
+    }
+  };
+
+  const {
+    url,
+    year,
+    level,
+    title,
+    review,
+    media_type: mediaType,
+    description,
+    paid,
+  } = state;
+
+  const data = {
+    url,
+    year,
+    level,
+    title,
+    review,
+    media_type: mediaType,
+    description,
+    paid,
+  };
+  console.log(data);
+
+  const handleSubmit = data => {
+    console.log(data);
+    console.log(auth.authTokens.token);
+    postResource(data, auth);
+  };
   useEffect(() => {
     setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
 
-  const [values, setValues] = useState({
-    url: '',
-    year: '',
-    level: '',
-    title: '',
-    review: '',
-    mediaType: '',
-    description: '',
-    freeResource: true,
-  });
+  // const [values, setValues] = useState({
+  //   url: '',
+  //   year: '',
+  //   level: '',
+  //   title: '',
+  //   review: '',
+  //   mediaType: '',
+  //   description: '',
+  //   freeResource: true,
+  // });
+
   const [tags, setTags] = useState([]);
 
-  const handleChange = name => event => {
-    setValues({ ...values, [name]: event.target.value });
-  };
+  // const onChange = name => event => {
+  //   setValues({ ...values, [name]: event.target.value });
+  // };
 
-  const handleSwitchChange = name => event => {
-    setValues({ ...values, [name]: event.target.checked });
-  };
+  // const handleSwitchChange = name => event => {
+  //   setValues({ ...values, [name]: event.target.checked });
+  // };
 
   const handleTagChange = newValue => {
     setTags(newValue);
   };
 
-  const handleSubmit = () => alert('Ready to handle tour submit request 🚀');
-
   return (
     <Grid container spacing={1}>
       <Grid item lg={3}>
@@ -130,7 +202,7 @@ const SubmitResource = () => {
               <Link color="inherit" to="/resources">
                 Resources
               </Link>
-              <Typography color="textPrimary">Submit</Typography>
+              <Typography color="textPrimary">Add</Typography>
             </Breadcrumbs>
           </Paper>
         </div>
@@ -139,12 +211,13 @@ const SubmitResource = () => {
           required
           id="outlined-dense"
           label="URL"
+          name="url"
           className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="outlined"
           fullWidth
-          value={values.url}
-          onChange={handleChange('url')}
+          defaultValue={url}
+          onChange={onChange}
         />
 
         <TextField
@@ -154,19 +227,21 @@ const SubmitResource = () => {
           margin="dense"
           variant="outlined"
           fullWidth
-          value={values.title}
-          onChange={handleChange('title')}
+          defaultValue={title}
+          onChange={onChange}
+          name="title"
         />
 
         <TextField
           id="outlined-dense"
           label="Description"
+          name={description}
           className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="outlined"
           fullWidth
-          value={values.description}
-          onChange={handleChange('description')}
+          defaultValue={description}
+          onChange={onChange}
         />
 
         <TextField
@@ -175,17 +250,19 @@ const SubmitResource = () => {
           className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="outlined"
-          value={values.year}
-          onChange={handleChange('year')}
+          defaultValue={year}
+          onChange={onChange}
+          name="year"
         />
         <FormGroup aria-label="position" row className={classes.freeSwitch}>
           <FormControlLabel
-            checked={values.freeResource}
-            value="start"
+            checked={paid}
+            defaultValue="start"
             control={<Switch color="primary" />}
             label="Free"
             labelPlacement="start"
-            onChange={handleSwitchChange('freeResource')}
+            onChange={onChange}
+            name="paid"
           />
         </FormGroup>
 
@@ -199,20 +276,21 @@ const SubmitResource = () => {
           </InputLabel>
           <Select
             native
-            value={values.mediaType}
+            defaultValue={mediaType}
             inputProps={{
-              name: 'media-type',
+              name: 'media_type',
               id: 'outlined-media-type-native-simple',
             }}
             className={classes.dense}
             margin="dense"
             labelWidth={labelWidth}
-            onChange={handleChange('mediaType')}
+            onChange={onChange}
+            name="media_type"
           >
             <option value="" />
             {mediaTypes.map(type => (
-              <option key={type} value={type}>
-                {type}
+              <option key={Object.keys(type)[0]} value={Object.keys(type)[0]}>
+                {Object.values(type)[0]}
               </option>
             ))}
           </Select>
@@ -228,15 +306,16 @@ const SubmitResource = () => {
           </InputLabel>
           <Select
             native
-            value={values.level}
+            defaultValue={level}
             inputProps={{
               name: 'level',
               id: 'outlined-level-native-simple',
             }}
+            name="level"
             className={classes.dense}
             margin="dense"
             labelWidth={labelWidth}
-            onChange={handleChange('level')}
+            onChange={onChange}
           >
             <option value="" />
             <option value="beginner">Beginner</option>
@@ -248,21 +327,23 @@ const SubmitResource = () => {
         <TextField
           id="outlined-dense"
           label="Your Review"
-          value={values.review}
+          defaultValue={review}
           className={clsx(classes.textField, classes.dense)}
           margin="dense"
+          name="review"
           variant="outlined"
           fullWidth
           multiline
           rowsMax="4"
-          onChange={handleChange('review')}
+          onChange={onChange}
         />
 
         <CreatableSelect
           className={classes.select}
           isMulti
           onChange={handleTagChange}
           placeholder="Tags"
+          name="tags"
           options={defaultTags}
           styles={{
             control: styles => ({
@@ -280,14 +361,14 @@ const SubmitResource = () => {
           <Button
             variant="contained"
             className={classes.button}
-            onClick={handleSubmit}
+            onClick={() => handleSubmit(data)}
           >
             Submit
           </Button>
         </FormGroup>
       </Grid>
     </Grid>
   );
-};
+}
 
 export default SubmitResource;

src/utils/queries.js

@@ -1,10 +1,20 @@
 import axios from 'axios';
 
-const API_URL = '/api/v1';
+const API_URL = 'https://localhost:8000/api/v1';
 
 const getResource = async (_key, id) => {
   const { data } = await axios.get(`${API_URL}/resources/${id}`);
   return data;
 };
 
-export { getResource };
+const postResource = async (data, auth) => {
+  console.log('post resource');
+  console.log(auth);
+  console.log(data);
+  const { response } = await axios.post(`${API_URL}/resources`, data, {
+    headers: { Authorization: `Bearer ${auth.authTokens.token}` },
+  });
+  return response;
+};
+
+export { getResource, postResource };