Tarea final electivo frontend marcelo rojas

app/users/bulkcreate/page.js

@@ -0,0 +1,101 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import AuthService from "@/services/AuthService";
+import { Button, TextField, IconButton } from "@mui/material";
+import { Add, Delete } from "@mui/icons-material";
+
+import { useRouter } from "next/navigation";
+import Navbar from "../../../components/Navbar";
+
+const BulkCreateUsers = () => {
+  const router = useRouter();
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+    if (!user) {
+      router.push("/login");
+    }
+  });
+
+  const handleAddUser = () => {
+    setUsers([
+      ...users,
+      {
+        name: "",
+        email: "",
+        password: "",
+        password_second: "",
+        cellphone: "",
+      },
+    ]);
+  };
+
+  const handleRemoveUser = (index) => {
+    const newUsers = [...users];
+    newUsers.splice(index, 1);
+    setUsers(newUsers);
+  };
+
+  const handleChange = (index, field, value) => {
+    const newUsers = [...users];
+    newUsers[index][field] = value;
+    setUsers(newUsers);
+  };
+
+  const handleSubmit = async () => {
+    const response = await AuthService.bulkCreateUsers(users);
+    console.log(response);
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div>
+        <h1>Bulk create</h1>
+        {users.map((user, index) => (
+          <div key={index}>
+            <TextField
+              label="Nombre"
+              value={user.name}
+              onChange={(e) => handleChange(index, "name", e.target.value)}
+            />
+            <TextField
+              label="Email"
+              value={user.email}
+              onChange={(e) => handleChange(index, "email", e.target.value)}
+            />
+            <TextField
+              label="Contraseña"
+              type="password"
+              value={user.password}
+              onChange={(e) => handleChange(index, "password", e.target.value)}
+            />
+            <TextField
+              label="Confirmar Contraseña"
+              type="password"
+              value={user.password_second}
+              onChange={(e) =>
+                handleChange(index, "password_second", e.target.value)
+              }
+            />
+            <TextField
+              label="Teléfono"
+              value={user.cellphone}
+              onChange={(e) => handleChange(index, "cellphone", e.target.value)}
+            />
+            <IconButton onClick={() => handleRemoveUser(index)}>
+              <Delete />
+            </IconButton>
+          </div>
+        ))}
+        <Button onClick={handleAddUser}>
+          <Add /> Añadir Usuario
+        </Button>
+        <Button onClick={handleSubmit}>Enviar</Button>
+      </div>
+    </>
+  );
+};
+
+export default BulkCreateUsers;

app/users/findusers/page.js

@@ -0,0 +1,130 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Container, TextField, Button, Checkbox } from "@mui/material";
+import AuthService from "../../../services/AuthService";
+import Navbar from "../../../components/Navbar";
+
+import { useRouter } from "next/navigation";
+
+export default function FindUsersPage() {
+  const router = useRouter();
+  const [filters, setFilters] = useState({
+    name: "",
+    login_before_date: "",
+    login_after_date: "",
+    active: false,
+  });
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+    if (!user) {
+      router.push("/login");
+    }
+  })
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    let finalValue = value;
+
+    if (value === "true" || value === "false") {
+      finalValue = value === "true";
+    }
+
+    setFilters({ ...filters, [name]: finalValue });
+  };
+
+  const handleSearch = async () => {
+    const users = await AuthService.findUsers(filters);
+    setUsers(users);
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div>
+        <Container>
+          <TextField label="name" name="name" onChange={handleInputChange} />
+          <TextField
+            label="login_before_date"
+            name="login_before_date"
+            type="date"
+            onChange={handleInputChange}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+          <TextField
+            label="login_after_date"
+            name="login_after_date"
+            InputLabelProps={{
+              shrink: true,
+            }}
+            type="date"
+            onChange={handleInputChange}
+          />
+          <Checkbox
+            checked={filters.active}
+            onChange={(e) =>
+              setFilters({ ...filters, active: e.target.checked })
+            }
+            name="active"
+          />
+          <Button onClick={handleSearch}>Buscar</Button>
+          <Container>
+            {users && users.length > 0 && (
+              <table style={{ width: "100%", borderCollapse: "collapse" }}>
+                <thead>
+                  <tr>
+                    <th
+                      style={{
+                        border: "1px solid black",
+                        padding: "8px",
+                        textAlign: "left",
+                      }}
+                    >
+                      Name
+                    </th>
+                    <th
+                      style={{
+                        border: "1px solid black",
+                        padding: "8px",
+                        textAlign: "left",
+                      }}
+                    >
+                      Email
+                    </th>
+                    <th
+                      style={{
+                        border: "1px solid black",
+                        padding: "8px",
+                        textAlign: "left",
+                      }}
+                    >
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {users.map((user) => (
+                    <tr key={user.id}>
+                      <td style={{ border: "1px solid black", padding: "8px" }}>
+                        {user.name}
+                      </td>
+                      <td style={{ border: "1px solid black", padding: "8px" }}>
+                        {user.email}
+                      </td>
+                      <td style={{ border: "1px solid black", padding: "8px" }}>
+                        {user.status ? "Active" : "Inactive"}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </Container>
+        </Container>
+      </div>
+    </>
+  );
+}

components/Navbar.js

@@ -26,9 +26,16 @@ const Navbar = () => {
                 {user?.name}
             </div>
             <div className="navbar-item">
+                <Button onClick={() => {router.push("/users/bulkcreate")}}>
+                    Bulk Create
+                </Button>
+                <Button onClick={() => {router.push("/users/findusers")}}>
+                    Find Users
+                </Button>
                 <Button onClick={handleLogout}>
                     Logout
                 </Button>
+
             </div>
         </div>
     )

services/AuthService.js

@@ -18,6 +18,46 @@ const handleLogin = async (user, pass) => {
     }
 }
 
+const findUsers = async ({ name, login_before_date, login_after_date, active }) => {
+    try {
+        const response = await axios.get('http://localhost:3001/api/v1/users/findUsers', {
+            params: {
+                nombre: name,
+                antesSesion: login_before_date,
+                despuesSesion: login_after_date,
+                eliminados: active,
+            }
+        },
+        {
+            headers: {
+                token: localStorage.getItem('token')
+            }
+        }
+    );
+        return response.data;
+    } catch (e) {
+        console.error(e);
+        return [];
+    }
+};
+
+const bulkCreateUsers = async (users) => {
+    try {
+        const response = await axios.post('http://localhost:3001/api/v1/users/bulkCreate', 
+            users,
+            {
+                headers: {
+                    token: localStorage.getItem('token')
+                }
+            }
+        );
+        console.log(response)
+        return response.data
+    } catch (e) {
+        return null;
+    }
+}
+
 const getUsers = async () => {
     try {
         //const response = await axios.get('fakeapi');
@@ -116,6 +156,8 @@ const updateUser = async (id, user, token) => {
 
 export default {
     handleLogin,
+    findUsers,
+    bulkCreateUsers,
     getUsers,
     getUserById,
     logOut,