// components/UserHome.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
const UserHome = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://your-api-base-url/api/users');
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
}
};
fetchData();
}, []);
return (
<div>
<h2>Users</h2>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.username}
<Link to={`/edit/${user.id}`}>Edit</Link>
</li>
))}
</ul>
<Link to="/create">Create New User</Link>
</div>
);
};
export default UserHome;
// components/UserCreate.js
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
const validationSchema = Yup.object({
username: Yup.string().required('Username is required'),
password: Yup.string().required('Password is required'),
});
const UserCreate = () => {
const history = useHistory();
const formik = useFormik({
initialValues: {
username: '',
password: '',
},
validationSchema,
onSubmit: async (values) => {
try {
await axios.post('https://your-api-base-url/api/users/register', values);
history.push('/');
} catch (error) {
console.error('Error creating user:', error);
}
},
});
return (
<div>
<h2>Create User</h2>
<form onSubmit={formik.handleSubmit}>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
name="username"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.username}
/>
{formik.touched.username && formik.errors.username && <div>{formik.errors.username}</div>}
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
name="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.password}
/>
{formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>}
<button type="submit">Submit</button>
</form>
</div>
);
};
export default UserCreate;
// components/UserEdit.js
import React, { useState, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
const validationSchema = Yup.object({
username: Yup.string().required('Username is required'),
password: Yup.string().required('Password is required'),
});
const UserEdit = () => {
const { id } = useParams();
const history = useHistory();
const [initialValues, setInitialValues] = useState({});
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(`https://your-api-base-url/api/users/${id}`);
setInitialValues(response.data.user);
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchData();
}, [id]);
const formik = useFormik({
initialValues,
validationSchema,
onSubmit: async (values) => {
try {
await axios.put(`https://your-api-base-url/api/users/update`, values);
history.push('/');
} catch (error) {
console.error('Error updating user:', error);
}
},
});
return (
<div>
<h2>Edit User</h2>
<form onSubmit={formik.handleSubmit}>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
name="username"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.username}
/>
{formik.touched.username && formik.errors.username && <div>{formik.errors.username}</div>}
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
name="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.password}
/>
{formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>}
<button type="submit">Update</button>
</form>
</div>
);
};
export default UserEdit;
// components/UserSingle.js
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
const UserSingle = () => {
const { id } = useParams();
const [user, setUser] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(`https://your-api-base-url/api/users/${id}`);
setUser(response.data.user);
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchData();
}, [id]);
return (
<div>
<h2>User Details</h2>
{user ? (
<div>
<p>Username: {user.username}</p>
<p>Password: {user.password}</p>
</div>
) : (
<p>User not found</p>
)}
</div>
);
};
export default UserSingle;
// components/UserDelete.js
import React, { useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import axios from 'axios';
const UserDelete = () => {
const { id } = useParams();
const history = useHistory();
useEffect(() => {
const deleteUser = async () => {
try {
await axios.delete(`https://your-api-base-url/api/users/${id}`);
history.push('/');
} catch (error) {
console.error('Error deleting user:', error);
}
};
deleteUser();
}, [id, history]);
return (
<div>
<p>Deleting user...</p>
</div>
);
};
export default UserDelete;
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import UserHome from './components/UserHome';
import UserCreate from './components/UserCreate';
import UserEdit from './components/UserEdit';
import UserSingle from './components/UserSingle';
import UserDelete from './components/UserDelete';
import NotFound from './components/NotFound';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={UserHome} />
<Route path="/create" component={UserCreate} />
<Route path="/edit/:id" component={UserEdit} />
<Route path="/user/:id" component={UserSingle} />
<Route path="/delete/:id" component={UserDelete} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
export default App;