Implementación de la incidencia JOKO-62

.dockerignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.github/workflows/fly.yml

@@ -0,0 +1,17 @@
+name: Fly Deploy
+on:
+  push:
+    branches:
+      - JOKO-62-deploy
+      - develop
+      - main
+jobs:
+  deploy:
+    name: Deploy app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Dockerfile

@@ -0,0 +1,50 @@
+# syntax = docker/dockerfile:1
+
+# Adjust NODE_VERSION as desired
+ARG NODE_VERSION=18.16.0
+FROM node:${NODE_VERSION}-slim as base
+
+LABEL fly_launch_runtime="Next.js"
+
+# Next.js app lives here
+WORKDIR /app
+
+# Set production environment
+ENV NODE_ENV=production
+
+
+# Throw-away build stage to reduce size of final image
+FROM base as build
+
+# Install packages needed to build node modules
+RUN apt-get update -qq && \
+    apt-get install -y python-is-python3 pkg-config build-essential 
+
+# Install node modules
+COPY --link package-lock.json package.json ./
+RUN npm ci --include=dev
+
+# Copy application code
+COPY --link . .
+
+# Environment variables
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_MOCK_USER_URL
+ARG NEXT_PUBLIC_MOCK_ACTIVE_USER_URL
+
+# Build application
+RUN npm run build
+
+# Remove development dependencies
+RUN npm prune --omit=dev
+
+
+# Final stage for app image
+FROM base
+
+# Copy built application
+COPY --from=build /app /app
+
+# Start the server by default, this can be overwritten at runtime
+EXPOSE 3000
+CMD [ "npm", "run", "start" ]

README.md

@@ -1,17 +1,26 @@
-# security-starter-react
-React starter project to work with security-starter-backend
-
 # Información del proyecto
 ## Datos del proyecto
+
 El proyecto tiene las siguientes opciones de configuración:
 - TypeScript: Sí.
 - ESLint: Sí, para tener un estándar de código entre los colaboradores.
 - Tailwind CSS: Fue agregado después de manera manual.
 - Utilizar el directorio src/: Sí.
 - Utilizar el direction app/: No.
 - Import alias: @/* (opción por defecto).
+
 ## Informacion sobre el [layout](/docs/layout.md)
 
+## Deploy
+
+El frontend del proyecto (este repositorio) está montado en fly.io y se puede acceder en el siguiente enlace: https://security-starter-react.fly.dev/.
+
+Además, este repositorio cuenta con un GitHub Action para hacer un redeploy cada vez que se realiza un push a la rama JOKO-62-deploy, develop o main. Para realizar este redeploy se debe generar un FLY_API_TOKEN, un ejemplo de esto se puede ver en la siguiente guía.
+
+El backend está montado en Vercel.
+Repositorio: https://github.com/MathiMartinez00/security-starter-react-backend.  
+Enlace: https://security-starter-react-backend.vercel.app/.
+
 # Correr el proyecto
 Para probar el proyecto seguir en orden los siguientes pasos:
 ## Clonar el repositorio:

components/layout.tsx

@@ -4,11 +4,6 @@ import { useState } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import logoJoko from '../public/images/logoJoko.png'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from '../tailwind.config.js'
-import colors from 'tailwindcss/colors'
-
-const fullConfig = resolveConfig(tailwindConfig)
 
 /**
  * Representa informacion de un modulo.
@@ -136,7 +131,7 @@ function Sidebar({ selectedModule, setSelectedModule, classes }: {
               setSelectedModule={setSelectedModule}
               moduleData={modules['/']}
             >
-              <BarChart2 color={selectedModule.id == modules['/'].id ? colors.blue[500] : "gray"} className="inline-block" />
+              <BarChart2 color={selectedModule.id == modules['/'].id ? "blue" : "gray"} className="inline-block" />
               <div className="px-4 text-base lg:text-lg">Dashboard</div>
             </SidebarItem>
           </Link>
@@ -146,7 +141,7 @@ function Sidebar({ selectedModule, setSelectedModule, classes }: {
               setSelectedModule={setSelectedModule}
               moduleData={modules['/usuarios']}
             >
-              <User color={selectedModule.id == modules['/usuarios'].id ? colors.blue[500] : "gray"} className="inline-block" />
+              <User color={selectedModule.id == modules['/usuarios'].id ? "blue" : "gray"} className="inline-block" />
               <div className="px-4 text-base lg:text-lg">Usuarios</div>
             </SidebarItem>
           </Link>
@@ -200,7 +195,7 @@ function Header({ selectedModule, setSidebarCollapsed}: {
  * Logica del cierre de sesion.
  * Limpia el storage del browser solamente cuando existe un usuario logueado.
  */
-  function handleLogout() {
+  const handleLogout = () => {
     const ServerSideRendering = typeof window === 'undefined'
     if (!ServerSideRendering && isUserLogged()) { //Lado del cliente y el usuario esta logueado
       localStorage.removeItem("email")