Fix frontend and backend issue

Author: fsabado00

.env

@@ -14,3 +14,7 @@ CLIENT_API_BASE_URL=http://127.0.0.1:6868/api
 
 REACT_LOCAL_PORT=8080
 REACT_DOCKER_PORT=8080
+
+#Frontend
+VITE_API_URL=http://localhost:8888/
+

backend/Dockerfile

@@ -2,10 +2,14 @@ FROM node:18
 
 WORKDIR /backend
 
+RUN echo "Set working directory for backend ===  $(pwd)"
+
 COPY package.json .
 COPY package*.json ./
 COPY tsconfig*.json ./
 
+RUN echo "Install deps within ===  $(pwd)"
+
 RUN npm install -g pnpm
 RUN pnpm install
 
@@ -15,17 +19,18 @@ COPY ./waitForIt.sh ./
 COPY ./migratePrisma.sh ./
 
 # run prisma
+RUN echo "Running prisma ===  $(pwd)"
 RUN npx prisma generate
 RUN chmod +x waitForIt.sh
 RUN chmod +x migratePrisma.sh
 
-
 # RUN pnpm run build
 EXPOSE $NODE_DOCKER_PORT
 
-
 CMD ["./waitForIt.sh", "db:3306", "--", "./migratePrisma.sh"]
 
+RUN echo "Running nginx server ===  $(pwd)"
+
 CMD ["npx","prisma", "migrate", "dev"]
 CMD ["pnpm", "run", "start"]
 

backend/prisma/old-migs/20231011220759_init/migration.sql

@@ -3,6 +3,6 @@ import { Injectable } from '@nestjs/common';
 @Injectable()
 export class AppService {
   getHello(): string {
-    return 'Café Page!';
+    return 'Café Page API!';
   }
 }

backend/prisma/old-migs/20231015213738_relations/migration.sql

@@ -6,6 +6,7 @@ import {
   Patch,
   Param,
   Delete,
+  Header
 } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { CafesService } from './cafes.service';
@@ -20,11 +21,13 @@ export class CafesController {
   }
 
   @Get()
+  @Header('Content-Type', 'application/json')
   findAll() {
     return this.cafesService.findAll();
   }
 
   @Get(':id')
+  @Header('Content-Type', 'application/json')  
   findOne(@Param('id') id: string) {
     return this.cafesService.findOne(+id);
   }

backend/prisma/old-migs/20240919030844_cafe_emp/migration.sql

@@ -1,5 +1,6 @@
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import { CorsOptions } from '@nestjs/common/interfaces/external/cors-options.interface';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
@@ -10,8 +11,7 @@ async function bootstrap() {
     preflightContinue: false,
     optionsSuccessStatus: 204,
     credentials: true,
-  };
-
+  } as CorsOptions;
   app.enableCors(options);
   await app.listen(port || 8888);
 }

backend/prisma/old-migs/20240919031931_again/migration.sql

@@ -0,0 +1,2 @@
+# NOTE: Change this according to your prod settigns
+VITE_API_URL=http://localhost:8888/

backend/prisma/old-migs/20240919033817_update_cafe_employees/migration.sql

@@ -3,7 +3,6 @@
 .idea
 .DS_Store
 
-
 logs
 *.log
 npm-debug.log*
@@ -17,5 +16,7 @@ dist
 dist-ssr
 *.local
 
-.env
 docs
+
+# NOTE: In real world we need to add this file to get ignore when pushing to the repo
+# .env

backend/prisma/old-migs/20240919034312_clean_up_schema/migration.sql

@@ -2,7 +2,6 @@ FROM node:18-alpine AS vite-app
 #ENV NODE_ENV production
 WORKDIR /frontend
 
-
 COPY . .
 #COPY package*.json ./
 #COPY tsconfig*.json ./
@@ -14,7 +13,7 @@ RUN npm install -g pnpm
 RUN pnpm install
 COPY . .
 
-
+RUN echo "Running build frontend in ===  $(pwd)"
 RUN pnpm run build
 
 FROM nginx:alpine
@@ -24,19 +23,18 @@ FROM nginx:alpine
 #WORKDIR /frontend/dist
 
 WORKDIR /usr/share/nginx/
+RUN echo "Set working directory for nginx in ===  $(pwd)"
 RUN rm -rf html
 RUN mkdir html
 WORKDIR /
 
-#RUN rm -rf *
-
+RUN echo "Set working directory within nginx html to dis in ===  $(pwd)"
 
 #COPY --from=builder /frontend/dist .
 #COPY --from=builder /frontend/dist /etc/nginx/html
 COPY nginx/nginx.conf /etc/nginx
-COPY --from=vite-app  /frontend/dist /usr/share/nginx/html
+COPY --from=vite-app /frontend/dist /usr/share/nginx/html
 #STOPSIGNAL SIGTERM
 #EXPOSE 3000
 
 ENTRYPOINT ["nginx", "-g", "daemon off;"]
-

backend/src/app.service.ts

@@ -3,22 +3,19 @@ import axios, { AxiosError } from 'axios';
 const axiosClient = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
   headers: {
-    'Content-Type': 'application/json',
     'Cache-Control': 'no-cache',
     'Access-Control-Allow-Origin': '*',
+    'Content-Type': 'application/json;charset=UTF-8',
     'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
+     Accept: 'application/json'
   },
-  withCredentials: false,
 });
 
 axiosClient.interceptors.response.use(
   function (response) {
     return response.data;
   },
   function (error: AxiosError) {
-    if (error.response?.status === 401) {
-      localStorage.removeItem('token');
-    }
     return Promise.reject(error);
   }
 );

backend/src/cafes/cafes.controller.ts

@@ -12,7 +12,7 @@ const Header: React.FC<HeaderProps> = ({ darkMode, setDarkMode }) => {
     <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
       <Toolbar>
         <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
-          Cafe Management
+          Cafe Employee
         </Typography>
         <IconButton color="inherit" onClick={setDarkMode}>
           {darkMode ? <Brightness7Icon /> : <Brightness4Icon />}

backend/src/main.ts

@@ -34,7 +34,6 @@ const Sidebar = () => {
               }}>
               <ListItem disablePadding>
                 <ListItemButton
-                  selected={isActive}
                   sx={{
                     '&.Mui-selected': {
                       backgroundColor: theme.palette.action.selected,
@@ -49,12 +48,7 @@ const Sidebar = () => {
                     }}>
                     {route.icon}
                   </ListItemIcon>
-                  <ListItemText
-                    primary={route.label}
-                    sx={{
-                      color: isActive ? theme.palette.primary.main : 'inherit',
-                    }}
-                  />
+                  <ListItemText primary={route.label} />
                 </ListItemButton>
               </ListItem>
             </Link>