-
CRM - React
-
+
+
+
+
+
)
}
diff --git a/src/data/clientes.jsx b/src/data/clientes.jsx
new file mode 100644
index 0000000..8722eb9
--- /dev/null
+++ b/src/data/clientes.jsx
@@ -0,0 +1,3 @@
+export async function obtenerClientes() {
+ return await (await fetch(import.meta.env.VITE_API_URL)).json()
+}
diff --git a/src/main.jsx b/src/main.jsx
index 946b54b..9c07a35 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client'
import './index.css'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Layout from './components/Layout'
+import NewClient, { action as newClientAction } from './pages/NewClient'
+import Index, { loader as clientsLoader } from './pages/Index'
const router = createBrowserRouter([
{
@@ -10,8 +12,14 @@ const router = createBrowserRouter([
element:
,
children: [
{
- path: '/nosotros',
- element:
Nosotros
,
+ index: true,
+ element:
,
+ loader: clientsLoader,
+ },
+ {
+ path: '/clients/new',
+ element:
,
+ action: newClientAction,
},
],
},
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
new file mode 100644
index 0000000..08039db
--- /dev/null
+++ b/src/pages/Index.jsx
@@ -0,0 +1,43 @@
+import { useLoaderData } from 'react-router-dom'
+import Client from '../components/Client'
+import { obtenerClientes } from '../data/clientes'
+
+export function loader() {
+ const clientes = obtenerClientes()
+ return clientes
+}
+
+function Index() {
+ const clients = useLoaderData()
+ console.log(clients)
+
+ return (
+ <>
+
Clientes
+
Administra Tus Clientes
+ {clients.length ? (
+
+
+
+ | Clients |
+ Contact |
+ Actions |
+
+
+
+ {clients.map(client => (
+
+ ))}
+
+
+ ) : (
+
No Hay Clientes Aun
+ )}
+
+ )
+}
+
+export default Index
diff --git a/src/pages/NewClient.jsx b/src/pages/NewClient.jsx
new file mode 100644
index 0000000..26269da
--- /dev/null
+++ b/src/pages/NewClient.jsx
@@ -0,0 +1,71 @@
+import { useNavigate, Form, useActionData } from 'react-router-dom'
+import Formulario from '../components/Formulario'
+import Error from '../components/Error'
+
+export async function action({ request }) {
+ const formData = await request.formData()
+ const datos = Object.fromEntries(formData)
+ const email = datos.email
+ console.log(email)
+ // Validacion de Datos
+ const errores = []
+ if (Object.values(datos).includes('')) {
+ errores.push('Todos los campos son obligatorios')
+ }
+
+ let regex = new RegExp(
+ "([!#-'*+/-9=?A-Z^-~-]+(.[!#-'*+/-9=?A-Z^-~-]+)*|\"([]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(.[!#-'*+/-9=?A-Z^-~-]+)*|[[\t -Z^-~]*])"
+ )
+
+ if (!regex.test(email)) {
+ errores.push('Email no es válido')
+ }
+
+ //return datos si hay errores
+ if (Object.keys(errores).length) {
+ console.log('si hay errores')
+ return errores
+ }
+}
+
+function NewClient() {
+ const navigate = useNavigate()
+ const errores = useActionData()
+
+ console.log(errores)
+ return (
+ <>
+
Nuevo Cliente
+
+ Llena todos los campos para registrar un nuevo cliente
+
+
+
+
+
+
+
+ {errores?.length &&
+ errores.map((error, i) => {error})}
+
+
+
+ )
+}
+
+export default NewClient
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 935470a..a443980 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ['./index.html', './src/components/*.{js,ts,jsx,tsx}'],
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},