Skip to content

Added Delete link on card. Forms working, needing backend API information #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nova-Blackstock wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added Delete link on card. Forms working, needing backend API information #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb26b27
Merge branch 'master' of https://github.com/HOWTO-2/front-end into No…
Jul 29, 2020
0b78ea9
Forms Complete, needing backend. Also Psychedelic Dropdown town
Jul 30, 2020
85f26b2
Merge branch 'master' of https://github.com/HOWTO-2/front-end into No…
Jul 30, 2020
36e97b2
Added delete on card and routed to placeholder page
Jul 30, 2020
e85c6f7
Responsive. Check out new design below 1000px in your devtools to see…
Jul 30, 2020
3a8dd74
Revert "Responsive. Check out new design below 1000px in your devtool…
Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 78 additions & 65 deletions howto/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,53 +12,15 @@ 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 Delete from './Components/Delete'

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'
Expand Down Expand Up @@ -99,6 +61,9 @@ padding: 2%;
width: 95%;
`
const kfLogo = keyframes`
25%{
border: 1px dotted gray;
}
100%{
background teal;
color: black;
Expand All @@ -107,7 +72,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;
Expand All @@ -117,6 +82,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;
}
`



/////////////////////////////////(╯°□°）╯︵ ┻━┻
Expand All @@ -136,7 +126,8 @@ const initialLogIn = {
}

const initialHowToForm = {
username: '',
title: '',
author: '',
topic: '',
steps: '',
}
Expand All @@ -160,6 +151,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(╯°□°）╯︵ ┻━┻
Expand Down Expand Up @@ -189,6 +181,7 @@ function App(props) {
})
.catch(err => {
console.log(err)
debugger
})
}

Expand All @@ -200,6 +193,7 @@ function App(props) {
})
.catch(err => {
console.log(err)
debugger
})
}
////////////////////////////////////////////////
Expand All @@ -208,9 +202,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)

Expand All @@ -228,8 +222,8 @@ function App(props) {
})
})

setSignUpFormValues({
...signUpFormValues,
setValues({
...values,
[name]: value
})
}
Expand All @@ -243,7 +237,7 @@ function App(props) {
password: signUpFormValues.password.trim(),
email: signUpFormValues.email.trim(),
}
props.postUser(newUser)
postNewUser(newUser)
}

const submitCard = () => {
Expand All @@ -264,11 +258,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 (
<StyledBody>
Expand All @@ -285,31 +279,46 @@ function App(props) {

<StyledLowerTopDiv>

<Route path='/user/delete'>
<Delete />
</Route>

<Route path='/user/edit'>
<EditHowToForm
values={howToFormValues}
setValues={setHowToFormValues}
inputChange={inputChange}
submit={submitCard}
disabled={disabled}
errors={formErrors}
cards={howToCards}
setCards={setHowToCards}
initial={initialHowToForm}
setDisabled={setDisabled}
/>
</Route>

<Route path='/user/create'>
{/* A workable link is commented out inside the Header Component */}

<AddHowToForm
values={howToFormValues}
setValues={setHowToFormValues}
inputChange={inputChange}
submit={submitCard}
disabled={disabled}
setDisabled={setDisabled}
errors={formErrors}
/>
</Route>

<Route path='/signup'>
<Signup
values={signUpFormValues}
setValues={setSignUpFormValues}
inputChange={inputChange}
submit={submitUser}
disabled={disabled}
setDisabled={setDisabled}
errors={formErrors}
/>
</Route>
Expand All @@ -319,7 +328,15 @@ function App(props) {
</Route>

<Route path ='/login'>
<Login />
<Login
values={login}
setValues={setLogin}
inputChange={inputChange}
disabled={disabled}
setDisabled={setDisabled}
errors={formErrors}
initial={initialLogIn}
/>
</Route>

</StyledLowerTopDiv>
Expand All @@ -332,17 +349,13 @@ function App(props) {
<h1>Popular How To's!</h1>

<form>
<SearchBar/>
</form>
<form>
<select>
<option>Select a Category</option>
<option>Home and Living</option>
<option>Business</option>
<option>Health</option>
<option>Educational</option>
</select>
<SearchBar
cards={howToCards}
setCards={setHowToCards}
getCards={getCards}
/>
</form>
<Dropdown />
</div>
{props.isLoading && <h2>LOADING...</h2>}
{props.error && (<p>ERROR {this.props.error}</p>)}
Expand Down
Loading