・src/server.js
let users = [
{
id: "1",
name: "Smith",
age: 55,
country: "United Kingdom",
magazines: ["VOGUE-UK", "ELLE"],
},
{
id: "2",
name: "Michele",
age: 71,
country: "United States",
magazines: ["VOGUE-US", "ELLE"],
},
{
id: "3",
name: "John",
age: 43,
country: "Canada",
magazines: ["VOGUE-CA", "ELLE"],
},
];
app.get("/users/:id", (req, res) => {
const { id } = req.params;
res.json(users.find((user) => user.id === id));
});
app.post("/users/:id", (req, res) => {
const { id } = req.params;
const { user: editedUser } = req.body;
users = users.map((user) => (user.id === id ? editedUser : user));
res.json(users.find((user) => user.id === id));
});
let SERVER_PORT = 8080;
app.listen(SERVER_PORT, () =>
console.log(`Server is listening on port: ${SERVER_PORT}`)
);
・This file is executed on the server with a command like "node server.js".
・Install Express.js by running a command like "npm install express" if necessary
・If "Server listening on port: 8080" is displayed on the terminal,
means that the server has been successfully connected.
・You can get user by using app.get function.
・You can update user by using app.post function.
・src/components/user-form.jsx
import { includeUpdatableResource } from "./include-updatable-resource";
export const UserInfoForm = includeUpdatableResource(
({ user, onChangeUser, onPostUser, onResetUser }) => {
const { name, age } = user || {};
return user ? (
<>
<label>
Name:
<input
value={name}
onChange={(e) => onChangeUser({ name: e.target.value })}
/>
</label>
<label>
Age:
<input
type="number"
value={age}
onChange={(e) => onChangeUser({ age: Number(e.target.value) })}
/>
</label>
<button onClick={onResetUser}>Reset</button>
<button onClick={onPostUser}>Save</button>
</>
) : (
<h3>Loading...</h3>
);
},
"/users/2",
"user"
);
This component displays name, age as user information.
・include-updatable-resource.jsx
import axios from "axios";
import React, { useEffect, useState } from "react";
const toCapital = (str) => str.charAt(0).toUpperCase() + str.slice(1);
export const includeUpdatableResource = (
Component,
resourceUrl,
resourceName
) => {
return (props) => {
const [initialResource, setInitialResource] = useState(null);
const [resource, setResource] = useState(null);
useEffect(() => {
(async () => {
const response = await axios.get(resourceUrl);
setInitialResource(response.data);
setResource(response.data);
})();
}, []);
const onChange = (updates) => {
setResource({ ...resource, ...updates });
};
const onPost = async () => {
const response = await axios.post(resourceUrl, {
[resourceName]: resource,
});
setInitialResource(response.data);
setResource(response.data);
};
const onReset = () => {
setResource(initialResource);
};
const resourceProps = {
[resourceName]: resource,
[`onChange${toCapital(resourceName)}`]: onChange,
[`onPost${toCapital(resourceName)}`]: onPost,
[`onReset${toCapital(resourceName)}`]: onReset,
};
return <Component {...props} {...resourceProps} />;
};
};
・This component is a High Order Component.
・This component retrieves user information with axios on the server.
・This component updates user information with axios on the server.
・This component returns a component received as props, passing some props and user , onChangeUser, onPostUser, onResetUser as user props.
・src/App.js
import { UserInfoForm } from "./components/user-form";
function App() {
return (
<>
<UserInfoForm />
</>
);
}
export default App;
・This component returns the UserInfoForm component .
Top comments (0)