Skip to content

Instantly share code, notes, and snippets.

@amadeujunior18
Last active October 2, 2019 22:31
Show Gist options
  • Save amadeujunior18/d6564cf30debc058f61aecae1c7754f4 to your computer and use it in GitHub Desktop.
Save amadeujunior18/d6564cf30debc058f61aecae1c7754f4 to your computer and use it in GitHub Desktop.
index.js {Arquivo de cadastro de spots SmanaOniStak #09}
import React, {useState, useMemo} from 'react';
import api from '../../services/api';
import camera from '../../assets/camera.svg';
import './styles.css';
export default function New({ history }){
const [thumbnail, setThumbnail] = useState(null);
const [company, setCompany] = useState('');
const [techs, setTechs] = useState('');
const [price, setPrice] = useState('');
const preview = useMemo(()=>{
return thumbnail ? URL.createObjectURL(thumbnail) :null
},
[thumbnail]
);
async function handleSubmit(event){
event.preventDefault();
const data = new FormData();
const user_id = localStorage.getItem('user');
data.append('thumbnail', thumbnail);
data.append('company', company);
data.append('techs',techs);
data.append('price',price);
await api.post('/spot', data,{
headers: {user_id}
});
history.push('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
<label
id="thumbnail"
style={{backgroundImage: `url(${preview})`}}
className={thumbnail ? 'has-thumbnail':''}
>
<input type="file" onChange={event => setThumbnail(event.target.files[0])}/>
<img src={camera} alt="Selecionar uma imagem"/>
</label>
<label htmlFor="company">EMPRESA *</label>
<input
type="text"
id="company"
placeholder="Sua empresa Incrível"
value={company}
onChange={event => setCompany(event.target.value)}
/>
<label htmlFor="techs">TECNOLOGIAS *<span>(separadas por vírgulas)</span></label>
<input
type="text"
id="techs"
placeholder="Quais tecnologias usam?"
value={techs}
onChange={event => setTechs(event.target.value)}
/>
<label htmlFor="price">VALOR DA DIARIA *<span>(embranco para GRATUITO)</span></label>
<input
type="text"
id="price"
placeholder="Valor cobrado dia"
value={price}
onChange={event => setPrice(event.target.value)}
/>
<button type="submit" className="btn">Cadastrar</button>
</form>
)
}
@everton4292
Copy link

Valeu, ajudou a tirar umas dúvidas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment