Skip to content

Instantly share code, notes, and snippets.

@gabrielEloy
Last active Aug 4, 2021
Embed
What would you like to do?
import { useState } from "react";
import Parse from 'parse';
import './App.css'
Parse.initialize(process.env.PARSE_APP_ID,process.env.PARSE_JS_KEY);
Parse.serverURL = 'https://parseapi.back4app.com/';
export default function Home() {
const [employeeName, setEmployeeName] = useState("");
const [employeeEmail, setEmployeeEmail] = useState("");
const [employeePassword, setEmployeePassword] = useState("");
const [employees, setEmployees] = useState([]);
const createEmployee = () => {
const employee = new Parse.Object('Employee');
employee
.save({
username: employeeName,
email: employeeEmail,
password: employeePassword,
})
.then(function (response) {
setEmployeeName('');
setEmployeeEmail('');
setEmployeePassword('');
alert(
"New object create with success! ObjectId: " +
response.id +
", " +
employee.get("username")
);
})
.catch(function (error) {
alert("Error: " + error.message);
});
};
const getEmployees = async () => {
const query = new Parse.Query("Employee");
const res = await query.findAll();
const employees = res.map((employee) => ({ name: employee.get("username") }));
setEmployees(employees);
};
return (
<div className="App">
<header className="app-header">
<img className="logo" alt="back4app's logo" src={'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'} />
<h2 className="spacing">React on Back4App</h2>
<span>Employees list</span>
</header>
<main>
<h1>Create a employee </h1>
<div className="form">
<input
placeholder="name"
onChange={(e) => setEmployeeName(e.target.value)}
value={employeeName}
/>
<input
placeholder="email"
onChange={(e) => setEmployeeEmail(e.target.value)}
value={employeeEmail}
/>
<input
placeholder="password"
onChange={(e) => setEmployeePassword(e.target.value)}
value={employeePassword}
type="password"
/>
</div>
<div
className="button-container"
>
<button className="action-button create" onClick={createEmployee}>create employee</button>
<button className="action-button" onClick={getEmployees}> list created employees</button>
</div>
<div className="employees-container">
<h2>employees</h2>
<ul>
{employees.map(({ name }) => (
<li key={name}>
{name}
</li>
))}
</ul>
</div>
</main>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment