From 0b78ea9d5dc6874becd2c33f2d1f9f1e49b9b97f Mon Sep 17 00:00:00 2001 From: Nova Blackstock Date: Thu, 30 Jul 2020 06:13:09 -0700 Subject: [PATCH 1/4] Forms Complete, needing backend. Also Psychedelic Dropdown town --- howto/src/App.js | 138 +++++++++--------- howto/src/Components/AddHowToForm.js | 49 +++++-- howto/src/Components/Dropdown.js | 74 ++++++++++ howto/src/Components/EditHowToForm.js | 103 +++++++++++-- howto/src/Components/HowToCard.js | 2 +- howto/src/Components/Login.js | 67 +++++++-- howto/src/Components/Logo.js | 16 ++ howto/src/Components/SearchBar.js | 45 +++--- howto/src/Components/Signup.js | 31 +++- howto/src/Components/Validation/FormSchema.js | 30 +--- .../Components/Validation/FormSchemaCard.js | 21 +++ .../Components/Validation/FormSchemaLogin.js | 12 ++ 12 files changed, 440 insertions(+), 148 deletions(-) create mode 100644 howto/src/Components/Dropdown.js create mode 100644 howto/src/Components/Logo.js create mode 100644 howto/src/Components/Validation/FormSchemaCard.js create mode 100644 howto/src/Components/Validation/FormSchemaLogin.js diff --git a/howto/src/App.js b/howto/src/App.js index 4e858f0..b4c9e64 100644 --- a/howto/src/App.js +++ b/howto/src/App.js @@ -12,53 +12,14 @@ import { postUser, fetchHowto } from './Components/Store/actions/action' import Header from './Components/Header' import HowToCard from './Components/HowToCard' import Signup from './Components/Signup' -import formSchema from './Components/Validation/FormSchema' import Login from './Components/Login' -import SearchBar from './Components/SearchBar' import AddHowToForm from './Components/AddHowToForm' import EditHowToForm from './Components/EditHowToForm' +import SearchBar from './Components/SearchBar' +import Dropdown from './Components/Dropdown' import styled, { keyframes } from 'styled-components' - - - -const StyledCardsDiv = styled.div` -display:flex; -flex-direction: column; -align-items: center; -.cardsHeading{ - display: flex; - justify-content: space-between; - align-items: center; - color: white; - background: black; - width: 100%; - h1{ - padding: 5px 15px; - font-size: 1.5rem; - } - form{ - select{ - color: white; - font-size: 1.3rem; - background: black; - border: 0px solid silver; - option{ - font-size: 2rem; - } - } - } - h3{ - padding: 5px; - font-size: 1rem; - } -} -h2{ - font-size: 2rem; -} -` - const StyledBody = styled.div` background: url( 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80' @@ -99,6 +60,9 @@ padding: 2%; width: 95%; ` const kfLogo = keyframes` +25%{ + border: 1px dotted gray; +} 100%{ background teal; color: black; @@ -107,7 +71,7 @@ const kfLogo = keyframes` ` const StyledLogo = styled.img` width: 20%; -border: 1px solid gray; +border: 1px dotted gray; border-radius: 50% 50%; margin: 150px 0px 32px 0px; color: white; @@ -117,6 +81,31 @@ box-shadow: 0px 0px 80px 1px; animation: ${kfLogo} 1.3s ease-in-out forwards; ` +const StyledCardsDiv = styled.div` +display:flex; +flex-direction: column; +align-items: center; +.cardsHeading{ + display: flex; + justify-content: space-between; + align-items: center; + color: white; + background: black; + width: 100%; + h1{ + padding: 5px 15px; + font-size: 1.5rem; + } + h3{ + padding: 5px; + font-size: 1rem; + } +} +h2{ + font-size: 2rem; +} +` + /////////////////////////////////(╯°□°）╯︵ ┻━┻ @@ -136,7 +125,8 @@ const initialLogIn = { } const initialHowToForm = { - username: '', + title: '', + author: '', topic: '', steps: '', } @@ -160,6 +150,7 @@ function App(props) { const [formErrors, setFormErrors] = useState(initialFormErrors) const [disabled, setDisabled] = useState(initialDisabled) const [users, setUser] = useState(initialUsers) + const [login, setLogin] = useState(initialLogIn) /////////////////////////////// //HowToCardStates(╯°□°）╯︵ ┻━┻ @@ -189,6 +180,7 @@ function App(props) { }) .catch(err => { console.log(err) + debugger }) } @@ -200,6 +192,7 @@ function App(props) { }) .catch(err => { console.log(err) + debugger }) } //////////////////////////////////////////////// @@ -208,9 +201,9 @@ function App(props) { //////////////FORM HELPER FUNCTIONS START HERE////// /////////////////////////////////////////////////// - const inputChange = (name, value) => { + const inputChange = (name, value, values, setValues, schema) => { yup - .reach(formSchema, name) + .reach(schema, name) .validate(value) @@ -228,8 +221,8 @@ function App(props) { }) }) - setSignUpFormValues({ - ...signUpFormValues, + setValues({ + ...values, [name]: value }) } @@ -243,7 +236,7 @@ function App(props) { password: signUpFormValues.password.trim(), email: signUpFormValues.email.trim(), } - props.postUser(newUser) + postNewUser(newUser) } const submitCard = () => { @@ -264,11 +257,11 @@ function App(props) { props.fetchHowto() }, []) - useEffect(() => { - formSchema.isValid(signUpFormValues).then(valid => { - setDisabled(!valid) - }) - }, [signUpFormValues]) + // useEffect(() => { + // formSchemaLogin.isValid(login).then(valid => { + // setDisabled(!valid) + // }) + // }, [login]) return ( @@ -287,19 +280,28 @@ function App(props) { - {/* A workable link is commented out inside the Header Component */} + @@ -307,9 +309,11 @@ function App(props) { @@ -319,7 +323,15 @@ function App(props) { - + @@ -332,17 +344,13 @@ function App(props) {

Popular How To's!

- - -
- + + {props.isLoading &&

LOADING...

} {props.error && (

ERROR {this.props.error}

)} diff --git a/howto/src/Components/AddHowToForm.js b/howto/src/Components/AddHowToForm.js index bc6d7c2..4748dc0 100644 --- a/howto/src/Components/AddHowToForm.js +++ b/howto/src/Components/AddHowToForm.js @@ -1,25 +1,27 @@ -import React from 'react' +import React, { useEffect } from 'react' import styled from 'styled-components' +import formSchemaCard from './Validation/FormSchemaCard' + +import Logo from './Logo' const StyledAddForm = styled.form` display: flex; flex-direction: column; align-items: center; -width: 30%; -margin: 20px;; -padding: 30px; +width: 27%; + +padding: 16px; color: white; font-size: 1.3rem; text-align: center; -background: black; +background: url('https://images.unsplash.com/photo-1557683311-eac922347aa1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2030&q=80'); border-radius: 20% 20%; h2{ - } input { display: flex; - color: lightblue; + color: white; font-size: 2rem; background: black; border-radius: 10px; @@ -27,24 +29,33 @@ input { } #stepsInput{ display: flex; - } - button{ color: white; - background: green; + background: violet; width: 40%; padding: 5px; border-radius: 15px; + &:hover{ + cursor: pointer; + background: gold; + } } ` export default function AddHowToForm(props){ - const { inputChange, submit, disabled, errors } = props + const { + values, + setValues, + inputChange, + submit, + disabled, + setDisabled, + errors } = props const onInputChange = e =>{ const { name, value } = e.target - inputChange(name, value) + inputChange(name, value, values, setValues, formSchemaCard) } const onSubmit = e =>{ @@ -52,6 +63,12 @@ export default function AddHowToForm(props){ submit() } + useEffect(() => { + formSchemaCard.isValid(values).then(valid => { + setDisabled(!valid) + }) + }, [values]) + return( {errors.topic}
{errors.steps}
+ +

Create a How To

-