Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "react-query";
// create a query client
const queryClient = new QueryClient();
ReactDOM.render(
// wrap the app in the query client provider
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import React, { useState } from "react";
import { useMutation, useQueryClient } from "react-query";
import axios from "axios";
const gender = ["male", "female"];
const status = ["active", "inactive"];
const random = (array) => array[Math.floor(Math.random() * array.length)];
export default function User() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const queryClient = useQueryClient();
const createUser = async (input) => {
Object.assign(input, { gender: random(gender), status: random(status) });
const response = await axios.post(
"https://gorest.co.in/public/v1/users",
input,
{
headers: {
Authorization: `Bearer ${process.env.REACT_APP_ACCESS_TOKEN}`,
},
}
);
setMessage(response.data);
};
const { isLoading, error, isError, mutate } = useMutation(createUser, {
onSuccess: async () => queryClient.invalidateQueries("users"),
});
return (
<>
<h1>Create a new user</h1>
<form className="user" onSubmit={(e) => e.preventDefault()}>
<div className="input">
<label>Name:</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="input">
<label>Email:</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<br />
<div className="input">
<button onClick={() => mutate({ name, email })}>Create</button>
</div>
</form>
<p> Created a new User : {message && JSON.stringify(message?.data)}</p>
<div style={{ color: isError ? "red" : "green" }}>
{isLoading ? "saving.." : ""}
{isError ? error.message : ""}
</div>
</>
);
}
import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
import User from "./User";
export default function Users() {
const fetchUsers = async () => {
const response = await axios.get(
`https://gorest.co.in/public/v1/users?page=66`
);
return response.data;
};
const { data, isLoading, error, isError } = useQuery("users", fetchUsers, {
refetchOnWindowFocus: false,
});
if (isLoading) return <p>Loading...</p>;
if (isError) return <p>Error {error.message}</p>;
return (
<div className="container">
<User />
<h1>Users</h1>
<table>
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
{data?.data?.map((user) => {
return (
<tr key={user.id}>
<td>{user.id} </td>
<td>{user.name} </td>
<td>{user.email} </td>
<td>{user.status} </td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment