From e808d1289cf35ca818ef01e7086d01fe10c0d53c Mon Sep 17 00:00:00 2001 From: Brent Wade Date: Sun, 2 Aug 2020 17:20:48 -0400 Subject: [PATCH 1/3] useReducer hook implementation --- src/App.js | 4 +- src/components/Resources/ResourceCard.js | 1 + src/components/Resources/submitResource.js | 138 +++++++++++++++------ 3 files changed, 106 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index d0097a2..a6ad0a3 100644 --- a/src/App.js +++ b/src/App.js @@ -48,6 +48,9 @@ function App() { + + + } @@ -55,7 +58,6 @@ function App() { - diff --git a/src/components/Resources/ResourceCard.js b/src/components/Resources/ResourceCard.js index 562e72d..6324291 100644 --- a/src/components/Resources/ResourceCard.js +++ b/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, diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js index 940bf20..26e2274 100644 --- a/src/components/Resources/submitResource.js +++ b/src/components/Resources/submitResource.js @@ -1,7 +1,16 @@ -import React, { useState, useRef, useEffect } from 'react'; +// TODO : +// when type, store values on change +// 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 axios from 'axios'; import { Grid, Paper, @@ -80,40 +89,97 @@ const useStyles = makeStyles(theme => ({ }, })); +const initialState = { + url: '', + year: '', + level: '', + title: '', + review: '', + mediaType: '', + description: '', + freeResource: true, +}; + +function reducer(state, { field, value }) { + return { + ...state, + [field]: value, + }; +} + const SubmitResource = () => { const classes = useStyles(); const inputLabel = useRef(null); const [labelWidth, setLabelWidth] = useState(0); + + const [state, dispatch] = useReducer(reducer, initialState); + + const onChange = e => { + dispatch({ field: e.target.name, value: e.target.value }); + }; + + const { + url, + year, + level, + title, + review, + mediaType, + description, + freeResource, + } = state; + + const data = { + url, + year, + level, + title, + review, + mediaType, + description, + freeResource, + }; + + const handleSubmit = data => { + axios + .post('/api/v1/resources/', data) + .then(function(response) { + // handle success + console.log(response); + }) + .catch(function(error) { + // handle error + console.log(error); + }); + }; 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 ( @@ -130,7 +196,7 @@ const SubmitResource = () => { Resources - Submit + Add @@ -143,8 +209,8 @@ const SubmitResource = () => { margin="dense" variant="outlined" fullWidth - value={values.url} - onChange={handleChange('url')} + value={url} + onChange={onChange} /> { margin="dense" variant="outlined" fullWidth - value={values.title} - onChange={handleChange('title')} + value={title} + onChange={onChange} /> { margin="dense" variant="outlined" fullWidth - value={values.description} - onChange={handleChange('description')} + value={description} + onChange={onChange} /> { className={clsx(classes.textField, classes.dense)} margin="dense" variant="outlined" - value={values.year} - onChange={handleChange('year')} + value={year} + onChange={onChange} /> } label="Free" labelPlacement="start" - onChange={handleSwitchChange('freeResource')} + onChange={onChange} /> @@ -199,7 +265,7 @@ const SubmitResource = () => { { className={classes.dense} margin="dense" labelWidth={labelWidth} - onChange={handleChange('level')} + onChange={onChange} > @@ -248,14 +314,14 @@ const SubmitResource = () => { Date: Sun, 2 Aug 2020 16:42:54 -0700 Subject: [PATCH 2/3] Fix issue with not being able to type in form fields, fix media_types, and add bearer token so we can submit successfully --- src/App.js | 4 +- src/components/Resources/submitResource.js | 94 ++++++++++++++-------- 2 files changed, 61 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index a6ad0a3..3ff6c2a 100644 --- a/src/App.js +++ b/src/App.js @@ -48,9 +48,7 @@ function App() { - - - + } diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js index 26e2274..6b618f7 100644 --- a/src/components/Resources/submitResource.js +++ b/src/components/Resources/submitResource.js @@ -1,5 +1,8 @@ // TODO : -// when type, store values on change +// 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) @@ -26,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'; @@ -35,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), @@ -95,9 +98,9 @@ const initialState = { level: '', title: '', review: '', - mediaType: '', + media_type: '', description: '', - freeResource: true, + paid: true, }; function reducer(state, { field, value }) { @@ -111,11 +114,19 @@ const 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 => { - dispatch({ field: e.target.name, value: e.target.value }); + 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 { @@ -124,9 +135,9 @@ const SubmitResource = () => { level, title, review, - mediaType, + media_type: mediaType, description, - freeResource, + paid, } = state; const data = { @@ -135,14 +146,19 @@ const SubmitResource = () => { level, title, review, - mediaType, + media_type: mediaType, description, - freeResource, + paid, }; + console.log(data); const handleSubmit = data => { + console.log(data); + console.log(auth.authTokens.token); axios - .post('/api/v1/resources/', data) + .post('/api/v1/resources/', data, { + headers: { Authorization: `Bearer ${auth.authTokens.token}` }, + }) .then(function(response) { // handle success console.log(response); @@ -165,7 +181,8 @@ const SubmitResource = () => { // mediaType: '', // description: '', // freeResource: true, - //}); + // }); + const [tags, setTags] = useState([]); // const onChange = name => event => { @@ -205,11 +222,12 @@ const SubmitResource = () => { required id="outlined-dense" label="URL" + name="url" className={clsx(classes.textField, classes.dense)} margin="dense" variant="outlined" fullWidth - value={url} + defaultValue={url} onChange={onChange} /> @@ -220,18 +238,20 @@ const SubmitResource = () => { margin="dense" variant="outlined" fullWidth - value={title} + defaultValue={title} onChange={onChange} + name="title" /> @@ -241,17 +261,19 @@ const SubmitResource = () => { className={clsx(classes.textField, classes.dense)} margin="dense" variant="outlined" - value={year} + defaultValue={year} onChange={onChange} + name="year" /> } label="Free" labelPlacement="start" onChange={onChange} + name="paid" /> @@ -265,20 +287,21 @@ const SubmitResource = () => { @@ -294,11 +317,12 @@ const SubmitResource = () => {