import React, { useState, useEffect } from 'react' import styled from 'styled-components' import axios from 'axios' import { useForm } from 'react-hook-form' import CardList from './CardList' const StyledDiv = styled.div` form { width: 80%; margin: ${(pr) => pr.theme.marginLarge} auto 0; display: flex; justify-content: space-between; } input { width: 70%; height: 35px; font-size: 1.2rem; padding-left: 1%; border-radius: 5px; border: 1px solid ${(pr) => pr.theme.manatee}; } button { width: 25%; font-size: 1.3rem; background: ${(pr) => pr.theme.manatee}; cursor: pointer; border: none; border-radius: 5px; } button:hover { background: ${(pr) => pr.theme.amaranthRed}; transition: linear 0.5s; } ` const Submit = () => { const [videos, setVideos] = useState([]) const [update, setUpdate] = useState(false) const { handleSubmit, register, errors } = useForm() const url = 'http://localhost:5555/api/videos/' const onSubmit = (values) => { console.log('values', typeof values) axios .post(url, values) .then((res) => { setVideos(res.data) setUpdate(!update) }) .catch((err) => console.log(`Error: ${err}`)) .finally() } useEffect(() => { axios .get(url) .then((res) => { setVideos(res.data) }) .catch((err) => console.log(`Error: ${err}`)) }, [update]) console.log('videos', videos) return ( <StyledDiv> <form onSubmit={handleSubmit(onSubmit)}> <input type="text" placeholder="Enter your YouTube URL" name="url" ref={register({ required: 'Required', pattern: { // value: '', message: 'invalid YouTube url', }, })} /> {errors.url && errors.url.message} <button type="submit">submit</button> </form> <CardList data={videos} /> </StyledDiv> ) } export default Submit