chore: create the service for the creation of links

client/src/App.tsx

@@ -1,6 +1,6 @@
 import { Routes } from './Routes';
 import { AuthProvider } from './context/AuthContext';
-import { LinksProvider } from './context/LinxContext';
+import { LinksProvider } from './context/LinksContext';
 import { ThemeProvider } from './context/ThemeContext';
 
 function App() {

client/src/Routes.tsx

@@ -1,5 +1,5 @@
 import { Routes as ReactRoutes, Route } from 'react-router';
-import useAuth from './hooks/Auth';
+import useAuth from './hooks/useAuth';
 import HomeApp from './pages/(app)/Home';
 import Login from './pages/(auth)/Login';
 import Signup from './pages/(auth)/Signup';

client/src/components/datagrids/links/links-table-toolbar.tsx

@@ -1,9 +1,10 @@
-import { Cross2Icon } from '@radix-ui/react-icons';
+import { Cross2Icon, Link1Icon } from '@radix-ui/react-icons';
 import type { Table } from '@tanstack/react-table';
 
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import { DataTableViewOptions } from './links-table-view-options';
+import { LinkModalCreate } from './modal-create';
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
@@ -29,7 +30,7 @@ export function DataTableToolbar<TData>({
         />
         {/* 
         todo: for enums of data
-         {table.getColumn('shorter_name') && (
+          {table.getColumn('shorter_name') && (
           <DataTableFacetedFilter
             column={table.getColumn('shorter_name')}
             title="shorter_name"
@@ -49,6 +50,7 @@ export function DataTableToolbar<TData>({
         )}
       </div>
       <DataTableViewOptions table={table} />
+      <LinkModalCreate />
     </div>
   );
 }

client/src/components/datagrids/links/modal-create.tsx

@@ -0,0 +1,83 @@
+import { TextField } from '@/components/text-field';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import useLinks from '@/hooks/useLinks';
+import { LinkForCreateSchema } from '@linx/shared';
+import { Link1Icon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+
+import type { FormEvent } from 'react';
+
+export function LinkModalCreate() {
+  const [shorterName, setShorterName] = useState('');
+  const [url, setUrl] = useState('');
+  const { create } = useLinks();
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    const dto = LinkForCreateSchema.parse({
+      shorter_name: shorterName,
+      url,
+    });
+    console.log;
+
+    create(dto);
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="ml-2 h-8 px-2 lg:px-3">
+          <Link1Icon className="mr-2 h-4 w-4" />
+          Create
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create link</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <form id="create-link" className="space-y-4" onSubmit={handleSubmit}>
+            <TextField
+              label="Shorter Name"
+              type="text"
+              id="shorter_name"
+              name="shorter_name"
+              placeholder="linx-short-url"
+              autoComplete="off"
+              onValue={setShorterName}
+              required
+            />
+            <TextField
+              label="Redirect URL"
+              type="url"
+              id="url"
+              name="url"
+              placeholder="https://example.com/longlonglonglonglonglongurl"
+              onValue={setUrl}
+              required
+            />
+          </form>
+        </div>
+        <DialogFooter>
+          <DialogTrigger asChild>
+            <Button form="create-link" type="submit">
+              Create Link
+            </Button>
+          </DialogTrigger>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/user-nav.tsx

@@ -1,4 +1,4 @@
-import useAuth from '@/hooks/Auth';
+import useAuth from '@/hooks/useAuth';
 import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
 import { Button } from './ui/button';
 import {

client/src/context/LinxContext.tsx → client/src/context/LinksContext.tsx

@@ -1,11 +1,13 @@
-import type { ILink } from '@linx/shared';
+import { useContext } from 'react';
+
+import type { ILink, ILinkForCreate } from '@linx/shared';
 import { createContext, useEffect, useState } from 'react';
 import Services from '../services';
-import { AuthContext } from './AuthContext';
 
 export interface LinksContextProps {
   isLoading: boolean;
   links: ILink[] | [];
+  create: (link: ILinkForCreate) => void;
 }
 
 export const LinksContext = createContext<LinksContextProps | undefined>(
@@ -28,12 +30,21 @@ export const LinksProvider = ({ children }: { children?: React.ReactNode }) => {
     }
   };
 
+  const create = async (linkDTO: ILinkForCreate) => {
+    const link = await Services.link.create(linkDTO);
+    setLinks((oldLinks) => {
+      const newList = [...oldLinks];
+      newList.unshift(link);
+      return newList;
+    });
+  };
+
   useEffect(() => {
     getLinks();
   }, []);
 
   return (
-    <LinksContext.Provider value={{ isLoading: loading, links }}>
+    <LinksContext.Provider value={{ isLoading: loading, links, create }}>
       {children}
     </LinksContext.Provider>
   );

client/src/hooks/useLinks.tsx

@@ -1,10 +1,10 @@
-import { LinksContext } from '@/context/LinxContext';
+import { LinksContext } from '@/context/LinksContext';
 import { useContext } from 'react';
 
 export default function useLinks() {
   const context = useContext(LinksContext);
   if (context === undefined) {
-    throw new Error('useLinks must be used in LinksProvider');
+    throw new Error('useLinks must be used in AuthProvider');
   }
   return context;
 }

client/src/pages/(app)/Home.tsx

@@ -2,7 +2,6 @@ import { DataTable } from '@/components/data-table';
 import { linksColumns } from '@/components/datagrids/links/links-columns';
 import { MainNav } from '@/components/main-nav';
 import { UserNav } from '@/components/user-nav';
-
 import useLinks from '@/hooks/useLinks';
 
 export default function HomeApp() {

client/src/pages/(auth)/Login.tsx

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import useAuth from '../../hooks/Auth';
+import useAuth from '../../hooks/useAuth';
 import Services from '../../services';
 
 export default function Login() {

client/src/pages/(auth)/Signup.tsx

@@ -9,7 +9,7 @@ import {
 import { type FormEvent, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TextField } from '../../components/text-field';
-import useAuth from '../../hooks/Auth';
+import useAuth from '../../hooks/useAuth';
 import Services from '../../services';
 
 export default function Signup() {

client/src/services/Link.ts

@@ -2,17 +2,34 @@ import { LinkSchema } from '@linx/shared';
 import { z } from 'zod';
 import fetch from '../utils/fetch';
 
+import type { ILinkForCreate } from '@linx/shared';
+
 export default class Link {
   static async getAll() {
     try {
       const request = await fetch('/links/getAll');
 
-      const response = await request.json();
+      const body = await request.json();
 
-      return z.array(LinkSchema).parse(response.data.links);
+      return z.array(LinkSchema).parse(body.data.links);
     } catch (error) {
       console.error('LinkService', error);
       throw error;
     }
   }
+
+  static async create(link: ILinkForCreate) {
+    try {
+      const request = await fetch('/links/create', {
+        method: 'POST',
+        body: JSON.stringify(link),
+      });
+      const body = await request.json();
+
+      return LinkSchema.parse(body.data.link);
+    } catch (e) {
+      console.log('LinkService', e);
+      throw e;
+    }
+  }
 }

server/src/controllers/Link/create.ts

@@ -20,5 +20,5 @@ export default async function create(request: Request, reply: Reply) {
 
   return reply
     .code(201)
-    .send({ success: true, message: 'Link created', data: { id: link } });
+    .send({ success: true, message: 'Link created', data: { link: link } });
 }

server/src/repository/Link.ts

@@ -3,9 +3,12 @@ import database from './database';
 import type { ILink, ILinkForCreate } from '@linx/shared';
 
 export class Link {
-  static async create(link: ILinkForCreate): Promise<string> {
-    const [id] = await database<ILink>('links').insert(link).returning('id');
-    return id.id;
+  static async create(linkDTO: ILinkForCreate): Promise<ILink> {
+    const [link] = await database<ILink>('links')
+      .insert(linkDTO)
+      .returning('*')
+      .orderBy('created_at');
+    return link;
   }
 
   static async getByShorterName(shorter_name: string): Promise<ILink> {
@@ -16,16 +19,16 @@ export class Link {
   }
 
   static async getByID(ID: string): Promise<ILink[]> {
-    const link = await database<ILink>('links')
-      .select('*')
-      .where({ user_id: ID });
+    const link = await database<ILink>('links').select('*').where({ id: ID });
     return link;
   }
 
   static async getUserLinks(userID: string): Promise<ILink[]> {
     const links = await database<ILink>('links')
       .select('*')
-      .where({ user_id: userID });
+      .where({ user_id: userID })
+      .orderBy('created_at', 'desc');
+
     return links;
   }
 }

server/src/services/Link.ts

@@ -4,7 +4,7 @@ import { BadRequestError } from '../utils/errorHandler';
 import type { ILink, ILinkForCreate } from '@linx/shared';
 
 export default class Link {
-  static async create(link_dto: ILinkForCreate): Promise<string> {
+  static async create(link_dto: ILinkForCreate): Promise<ILink> {
     const check = await Repository.link.getByShorterName(link_dto.shorter_name);
     if (check)
       throw new BadRequestError('Exists the shorter name, please select other');
@@ -15,7 +15,7 @@ export default class Link {
   }
 
   static async getAllByUser(user_id: string): Promise<ILink[]> {
-    const links = await Repository.link.getByID(user_id);
+    const links = await Repository.link.getUserLinks(user_id);
     return links;
   }
 }

shared/src/interfaces/link.ts

@@ -10,5 +10,5 @@ export interface ILink {
 export interface ILinkForCreate {
   url: string;
   shorter_name: string;
-  user_id: string;
+  user_id?: string;
 }