Authentication Crud

// 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;