Cambia a por link, quita html en layout anidado, quita /api de endpoint, agrega key en TBody,

2 years ago · 2a2dd4f4e3
parent d039d051e7
commit 2a2dd4f4e3
12 changed files with 55 additions and 166 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -19,7 +19,7 @@ export default function RootLayout({
    <html lang="en">
      <body className={inter.className}>
  
-        <div className='flex'>
+        <div>

          {children}
        </div>
--- a/src/app/login/LoginForm.tsx
+++ b/src/app/login/LoginForm.tsx
@ -2,6 +2,7 @@

 import useBasicAuth from '@/hooks/useBasicAuth';
 import Cookies from 'js-cookie';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
@ -43,7 +44,7 @@ export const LoginForm = () => {
            {...register("password")}
        />
        <label className="label">
-            <a href="#" className="label-text-alt link link-hover">Forgot password?</a>
+            <Link href="#" className="label-text-alt link link-hover">Forgot password?</Link>
        </label>
        </div>
        <div className="form-control mt-6">
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -3,111 +3,10 @@ import Image from 'next/image'
 export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+      <div>
+        Home
      </div>
+      
    </main>
  )
 }
--- a/src/app/pedidos/cliente/[id]/page.tsx
+++ b/src/app/pedidos/cliente/[id]/page.tsx
@ -0,0 +1,3 @@
+export default function Page({ params }: { params: { id: string } }) {
+  return <div>My Post: {params.id}</div>
+}
--- a/src/app/pedidos/cliente/form.tsx
+++ b/src/app/pedidos/cliente/form.tsx
@ -1,21 +0,0 @@
-import { NextPage } from 'next';
-import { useRouter } from 'next/router'
-import { FC } from 'react'
-
-interface Props {
-}
-
-const Form:NextPage = () => {
-
-    const router = useRouter();
-    const entidadId = router.query.id ? router.query.id as string : "0";
-
-
- return (
-   <>
-   formulario
-   </>
- )
-}
-
-export default Form
--- a/src/app/pedidos/cliente/page.tsx
+++ b/src/app/pedidos/cliente/page.tsx
@ -14,7 +14,7 @@ const ListadoCliente:FC <Props> = () => {
     <div className='overflow-x-auto'>
      <table className='table table-xs table-pin-rows table-pin-cols'>
          <Head columnas={["","Cédula","Nombre completo"]}/>
-          <TBody columnas={["cedula","nombreCompleto"]} endpoint='api/cliente'/>
+          <TBody columnas={["cedula","nombreCompleto"]} endpoint='cliente'/>
        </table>
     </div>
      
--- a/src/app/pedidos/layout.tsx
+++ b/src/app/pedidos/layout.tsx
@ -16,16 +16,16 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Navbar/>
+
+    <>
+      <Navbar />
        <div className='flex'>
+          
          <Sidebar />
          {children}
        </div>
-        
-        
-      </body>
-    </html>
+    </>
+
+
  )
 }
--- a/src/app/pedidos/page.tsx
+++ b/src/app/pedidos/page.tsx
@ -0,0 +1,9 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      Home
+    </main>
+  )
+}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -4,6 +4,7 @@ import { FC } from 'react'
 import Button from './Button'
 import Cookies from 'js-cookie'
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';

 interface Props {
 }
@ -22,34 +23,28 @@ const name:FC <Props> = () => {
 return (
   <>
        <div className="navbar bg-base-100">
-        <div className="flex-1">
-            <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
-        </div>
-        <div className="flex-none gap-2">
-            <div className="form-control">
-            <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
+            <div className="flex-1">
+                <Link href={"/pedidos"} className="btn btn-ghost normal-case text-xl">daisyUI</Link>
            </div>
-            <div className="dropdown dropdown-end">
-            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-                <div className="w-10 rounded-full">
-                <img src="/usuario.jpg" />
+            <div className="flex-none gap-2">
+                <div className="form-control">
+                <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
+                </div>
+                <div className="dropdown dropdown-end">
+                    <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+                        <div className="w-10 rounded-full">
+                        <img src="/usuario.jpg" />
+                        </div>
+                    </label>
+                    <ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+                        <li>Settings</li>
+                        <li>
+                            <Button label='LogOut' onClick={()=>logout()}/>
+                        </li>
+                    </ul>
                </div>
-            </label>
-            <ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
-                <li>
-                <a className="justify-between">
-                    Profile
-                    <span className="badge">New</span>
-                </a>
-                </li>
-                <li><a>Settings</a></li>
-                <li>
-                    <Button label='LogOut' onClick={()=>logout()}/>
-                </li>
-            </ul>
            </div>
        </div>
-        </div>
   </>
 )
 }
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -7,7 +7,8 @@ interface Props {
 const Sidebar:FC <Props> = () => {
 return (
   <>
-    <ul className="menu bg-base-200 w-56 rounded-box mr-2" >
+   <div>
+   <ul className="menu bg-base-200 w-56 rounded-box mr-2" >
        <li>
            <Link href={"/pedidos/producto"}>
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
@ -21,12 +22,14 @@ const Sidebar:FC <Props> = () => {
            </Link>
        </li>
        <li>
-            <a>
+            <Link href={"/pedidos"}>
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
            Pedido
-            </a>
+            </Link>
        </li>
    </ul>
+   </div>
+
   </>
 )
 }
--- a/src/components/table/TBody.tsx
+++ b/src/components/table/TBody.tsx
@ -33,14 +33,14 @@ const TBody:FC <Props> = ({columnas, endpoint}) => {
            <tr key={entidad['id']}>
                <td>
                    <Link href={{
-                        pathname: endpoint+"/form",
-                        query: {id: entidad['id']}
+                        pathname: "/pedidos/"+endpoint+"/"+entidad['id'],
+                        
                    }}>
                        Editar
                    </Link>
                </td>
               {columnas.map((columna)=> (
-                <td>{entidad[columna]}</td>
+                <td key={entidad['id']+entidad[columna]}>{entidad[columna]}</td>
               ))}
            </tr>
        ))}
--- a/src/hooks/useFetchWithAuth.tsx
+++ b/src/hooks/useFetchWithAuth.tsx
@ -15,7 +15,7 @@ const useBasicAuth = async (endpoint:string) => {
        
        const token = Cookies.get("token")|| "";
        
-        const baseUrl = process.env.API_URL + "/"+ endpoint + "/";
+        const baseUrl = process.env.API_URL + "/api/"+ endpoint + "/";
        
        const response = await fecher(baseUrl, token);