Eslint upgrade & rename frontend to react-client (#11)

* upgrade @nish1896/eslint-config

* lint express-server

* lint frontend

* lint nestjs-server

* lint next-client

* rename frontend folder to react-client

* rename frontend to react-client in files

* update react-client name in pkg.json

* rm yarn.lock and run yarn again

.github/workflows/docker-img.yml

@@ -25,8 +25,8 @@
 #       - name: Build Server Image
 #         run: docker build -f ./apps/fastify-server/Dockerfile -t ${{secrets.DOCKER_HUB_USERNAME}}/rnm-server:${{ steps.date.outputs.date }} .
 
-#       - name: Build Frontend Image
-#         run: docker build -f ./apps/frontend/Dockerfile -t ${{ secrets.DOCKER_HUB_USERNAME }}/rnm-frontend:${{ steps.date.outputs.date }} .
+#       - name: Build react-client Image
+#         run: docker build -f ./apps/react-client/Dockerfile -t ${{ secrets.DOCKER_HUB_USERNAME }}/rnm-react-client:${{ steps.date.outputs.date }} .
 
 #       - name: Login to DockerHub
 #         uses: docker/login-action@v2
@@ -37,5 +37,5 @@
 #       - name: Push Backend Image to Docker Hub
 #         run: docker push  ${{ secrets.DOCKER_HUB_USERNAME }}/rnm-server:${{ steps.date.outputs.date }}
 
-#       - name: Push Frontend Image to Docker Hub
-#         run: docker push  ${{ secrets.DOCKER_HUB_USERNAME }}/rnm-frontend:${{ steps.date.outputs.date }}
+#       - name: Push react-client Image to Docker Hub
+#         run: docker push  ${{ secrets.DOCKER_HUB_USERNAME }}/rnm-react-client:${{ steps.date.outputs.date }}

.github/workflows/github-actions.yml

@@ -33,8 +33,8 @@ jobs:
       - name: Build nestjs-server
         run: yarn workspace nestjs-server build
 
-      - name: Build frontend
-        run: yarn workspace frontend build
+      - name: Build react-client
+        run: yarn workspace react-client build
 
       - name: Build next-client
         run: yarn workspace next-client build

Docker-commands.md

@@ -1,21 +1,21 @@
 # Docker Commands
 
-1. Build `frontend` image
+1. Build `react-client` image
 
 ```
-docker build -f ./apps/frontend/Dockerfile -t docker_username/frontend.
+docker build -f ./apps/react-client/Dockerfile -t docker_username/react-client.
 ```
 
 2. Run Image
 
 ```
-docker run -p 3000:3000 docker_username/frontend
+docker run -p 3000:3000 docker_username/react-client
 ```
 
 3. Run Image with [Volume Mount](https://docs.docker.com/get-started/06_bind_mounts/)
 
 ```
-docker run -p 3000:3000 -v /app/node_modules -v "$(pwd):/app" docker_username/frontend
+docker run -p 3000:3000 -v /app/node_modules -v "$(pwd):/app" docker_username/react-client
 ```
 
 If using the `-v /app/node_modules` flag, you don't need to install `node_modules` folder. It means that not to take reference for `node_modules` in the actual directory
@@ -29,7 +29,7 @@ docker-compose up
 To run a particular service,
 
 ```
-docker-compose up [serviceName]  // eg. frontend-dev
+docker-compose up [serviceName]  // eg. react-client-dev
 ```
 
 Add `--build` flag to rebuild and then restart containers.

apps/express-server/.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@nish1896']
+  extends: ['@nish1896/eslint-config/js']
 };

apps/express-server/src/app-constants/env_vars.ts

@@ -7,5 +7,5 @@ const env = process.env;
 
 export const ENV_VARS = Object.freeze({
   env: env.NODE_ENV ?? 'development',
-  port: env.PORT ?? 5000,
+  port: env.PORT ?? 5000
 });

apps/express-server/src/index.ts

@@ -23,7 +23,7 @@ function bootstrap() {
 
   server.listen(port, () => {
     winstonLogger.info(
-      `[ ⚡️ ${hostName} ⚡️ ] - Server running on port ${port}`,
+      `[ ⚡️ ${hostName} ⚡️ ] - Server running on port ${port}`
     );
   });
 }

apps/express-server/src/middleware/guard.ts

@@ -4,15 +4,16 @@ import { winstonLogger } from './winston-logger';
 export function validateAuthHeader(
   req: Request<object, object, object, object>,
   res: Response,
-  next: NextFunction,
+  next: NextFunction
 ) {
   /* Check presence of jwt and refresh-token */
   const token: string | undefined = req.cookies?.jwt;
 
   if (!token) {
     const errorMsg = 'Unauthorized request';
     winstonLogger.error(errorMsg);
-    return res.status(401).send(errorMsg).end();
+    return res.status(401).send(errorMsg)
+      .end();
   }
   /* Set user info after extracting his details from token */
   // res.locals.user = userInfo;
@@ -22,25 +23,27 @@ export function validateAuthHeader(
 export function authenticateAdmin(
   _: Request<object, object, object, object>,
   res: Response,
-  next: NextFunction,
+  next: NextFunction
 ) {
   if (res.locals?.user?.role === 'Admin') {
     next();
   } else {
     const errMsg = 'FORBIDDEN from accessing Admin route';
     winstonLogger.error(errMsg);
-    res.status(403).send(errMsg).end();
+    res.status(403).send(errMsg)
+      .end();
   }
 }
 
 export function checkTokenMismatchInReqParams(
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   req: Request<any, object, object, object>,
   res: Response,
-  next: NextFunction,
+  next: NextFunction
 ) {
   if (res.locals?.user?._id !== req.params.id) {
-    return res.status(406).send('Token Mismatch').end();
+    return res.status(406).send('Token Mismatch')
+      .end();
   }
   next();
 }

apps/express-server/src/middleware/request-logger.ts

@@ -4,14 +4,14 @@ import { winstonLogger } from './winston-logger';
 export function requestLogger(
   request: Request,
   response: Response,
-  next: NextFunction,
+  next: NextFunction
 ) {
   winstonLogger.info(`${request.method} ${request.url}`);
   response.on('finish', () => {
     const isSuccess = response.statusCode < 400;
     winstonLogger.log(
       isSuccess ? 'info' : 'error',
-      `${response.statusCode} ${response.statusMessage}`,
+      `${response.statusCode} ${response.statusMessage}`
     );
   });
   next();

apps/express-server/src/middleware/winston-logger.ts

@@ -12,19 +12,19 @@ const customLevels = {
     warn: 1,
     info: 2,
     http: 3,
-    success: 4,
+    success: 4
   },
   colors: {
     error: 'bold red blackBG',
     warn: 'italic yellow',
     info: 'blue',
     http: 'magenta',
-    success: 'green',
-  },
+    success: 'green'
+  }
 };
 
 const myFormat = printf(
-  ({ level, message, timestamp }) => `[ ${level} ]:: ${timestamp} - ${message}`,
+  ({ level, message, timestamp }) => `[ ${level} ]:: ${timestamp} - ${message}`
 );
 
 /**
@@ -47,7 +47,7 @@ const winstonLogger = createLogger({
 
     /* Aligns in a tabular format */
     // format.align(),
-    myFormat,
+    myFormat
   ),
   //   defaultMeta: { service: 'log-service' },
   transports: [
@@ -57,10 +57,10 @@ const winstonLogger = createLogger({
      */
     new transports.File({
       filename: 'logs/error.log',
-      level: 'error',
+      level: 'error'
     }),
-    new transports.File({ filename: 'logs/info-warning.log' }),
-  ],
+    new transports.File({ filename: 'logs/info-warning.log' })
+  ]
 });
 
 addColors(customLevels.colors);
@@ -72,7 +72,7 @@ addColors(customLevels.colors);
 
 if (ENV_VARS.env !== 'production') {
   winstonLogger.add(
-    new transports.Console({ format: format.colorize({ all: true }) }),
+    new transports.Console({ format: format.colorize({ all: true }) })
   );
 }
 

apps/express-server/src/routes/auth/controller.ts

@@ -5,19 +5,20 @@ import * as AuthTypes from './types';
 const authRouter = Router();
 
 authRouter.get('/test', function printHello(_, res: Response) {
-  return res.status(200).send('Hello World !!').end();
+  return res.status(200).send('Hello World !!')
+    .end();
 });
 
 /* Login user */
 authRouter.post(
   '/login',
   function loginUser(
     req: Request<object, object, AuthTypes.UserLoginBody>,
-    res: Response,
+    res: Response
   ) {
     const { email, password } = req.body;
     return authService.loginUser(res, email, password);
-  },
+  }
 );
 
 export { authRouter };

apps/express-server/src/routes/auth/service.ts

@@ -7,7 +7,7 @@ class AuthService {
         .status(200)
         .send({
           email,
-          password,
+          password
         })
         .end();
     } catch (err) {

apps/nestjs-server/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     sourceType: 'module',
   },
-  extends: ['@nish1896'],
+  extends: ['@nish1896/eslint-config/js'],
   rules: {
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',

apps/nestjs-server/package.json

@@ -30,7 +30,7 @@
     "@nestjs/cli": "^10.3.2",
     "@nestjs/schematics": "^10.1.1",
     "@nestjs/testing": "^10.3.2",
-    "@nish1896/eslint-config": "^1.0.4",
+    "@nish1896/eslint-config": "^2.0.2",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",

apps/nestjs-server/src/app.module.ts

@@ -4,6 +4,6 @@ import { HomeModule } from './routes';
 @Module({
   imports: [HomeModule],
   controllers: [],
-  providers: [],
+  providers: []
 })
 export class AppModule {}

apps/nestjs-server/src/main.ts

@@ -1,7 +1,7 @@
 import { NestFactory } from '@nestjs/core';
 import {
   FastifyAdapter,
-  NestFastifyApplication,
+  NestFastifyApplication
 } from '@nestjs/platform-fastify';
 import { AppModule } from './app.module';
 
@@ -25,8 +25,8 @@ async function bootstrap() {
     AppModule,
     new FastifyAdapter({
       ignoreTrailingSlash: true,
-      caseSensitive: false,
-    }),
+      caseSensitive: false
+    })
   );
   await app.listen(4000, '0.0.0.0');
 }

apps/nestjs-server/src/routes/home/controller.spec.ts

@@ -8,7 +8,7 @@ describe('HomeController', () => {
   beforeEach(async () => {
     const app: TestingModule = await Test.createTestingModule({
       controllers: [HomeController],
-      providers: [HomeService],
+      providers: [HomeService]
     }).compile();
 
     homeController = app.get<HomeController>(HomeController);

apps/nestjs-server/src/routes/home/module.ts

@@ -4,6 +4,6 @@ import { HomeService } from './service';
 
 @Module({
   controllers: [HomeController],
-  providers: [HomeService],
+  providers: [HomeService]
 })
 export class HomeModule {}

apps/nestjs-server/test/app.e2e-spec.ts

@@ -14,5 +14,7 @@ describe('AppController (e2e)', () => {
   });
 
   it('/ (GET)', () =>
-    request(app.getHttpServer()).get('/').expect(200).expect('Hello World!'));
+    request(app.getHttpServer()).get('/')
+      .expect(200)
+      .expect('Hello World!'));
 });

apps/next-client/.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: [
     'next/core-web-vitals',
-    '@nish1896'
+    '@nish1896/eslint-config/js',
+    '@nish1896/eslint-config/react'
   ],
 }

apps/next-client/package.json

@@ -20,7 +20,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@nish1896/eslint-config": "^1.0.4",
+    "@nish1896/eslint-config": "^2.0.2",
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

apps/next-client/src/app/layout.tsx

@@ -9,7 +9,7 @@ const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
-  description: 'Generated by create next app',
+  description: 'Generated by create next app'
 };
 
 export default function RootLayout({ children }: {

apps/next-client/src/app/pokemon/layout.tsx

@@ -7,15 +7,15 @@ type LayoutProps = {
 
 export const metadata: Metadata = {
   title: 'Pokemon',
-  description: 'List of pokemons',
+  description: 'List of pokemons'
 };
 
 export default function PokemonPageLayout({ children }: LayoutProps) {
   return (
     <Paper
       sx={{
         padding: '50px 20px',
-        borderRadius: 0,
+        borderRadius: 0
       }}
     >
       <div style={{ background: '#3d3d3d' }}>

apps/next-client/src/app/pokemon/page.tsx

@@ -11,7 +11,7 @@ type PokeApiResult = {
 
 async function getData() {
   const res = await fetch(
-    'https://pokeapi.co/api/v2/pokemon?limit=15&offset=0',
+    'https://pokeapi.co/api/v2/pokemon?limit=15&offset=0'
   );
   // The return value is *not* serialized
   // You can return Date, Map, Set, etc.

apps/next-client/src/assets/styles/palette.ts

@@ -13,12 +13,12 @@ export const LightThemePalette = {
   divider: '#9e9e9e',
   background: {
     default: '#FFFFFF',
-    paper: '#e0dfdc',
+    paper: '#e0dfdc'
   },
   text: {
     primary: '#121212',
-    secondary: '#4C4C4C',
-  },
+    secondary: '#4c4c4c'
+  }
 };
 
 export const DarkThemePalette = {
@@ -31,10 +31,10 @@ export const DarkThemePalette = {
   divider: '#4c4c4c',
   background: {
     default: '#1a1919',
-    paper: '#2b2b2b',
+    paper: '#2b2b2b'
   },
   text: {
     primary: '#f8f7ff',
-    secondary: '#f6e4df',
-  },
+    secondary: '#f6e4df'
+  }
 };