feat: add import and react-hooks eslint plugins (#24)

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ['react-hooks', 'simple-import-sort', 'import'],
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
     'airbnb-typescript', // Uses the recommended rules from @airbnb-typescript
@@ -29,6 +30,14 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'sort-imports': 'off',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
     'consistent-return': 0,
     '@typescript-eslint/return-await': 0,
     '@typescript-eslint/no-var-requires': 0,

package.json

@@ -44,11 +44,13 @@
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^7.2.0",
     "eslint-loader": "^4.0.2",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^4.3.8",
     "hygen": "^6.0.4",
     "lerna": "^3.22.1",

packages/admin/src/App.tsx

@@ -1,7 +1,8 @@
 import crudProvider from 'ra-data-nestjsx-crud';
 import React from 'react';
 import { Admin, Resource } from 'react-admin';
-import { UserCreate, UserList, UserEdit, UserShow } from './models/users';
+
+import { UserCreate, UserEdit, UserList, UserShow } from './models/users';
 import authProvider from './providers';
 
 const API_URL = process.env.REACT_APP_API_URL ?? 'http://localhost:3000';

packages/admin/src/index.tsx

@@ -1,9 +1,11 @@
+import './index.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+
 import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 ReactDOM.render(
   <React.StrictMode>

packages/admin/src/models/users/Create.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Create as RaCreate, SimpleForm, TextInput, CreateProps } from 'react-admin';
+import { Create as RaCreate, CreateProps, SimpleForm, TextInput } from 'react-admin';
 
 const Create = (props: CreateProps) => (
   <RaCreate {...props}>

packages/admin/src/models/users/Edit.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Edit as RaEdit, SimpleForm, TextInput, EditProps } from 'react-admin';
+import { Edit as RaEdit, EditProps, SimpleForm, TextInput } from 'react-admin';
 
 const Edit = (props: EditProps) => (
   <RaEdit {...props}>

packages/admin/src/models/users/index.ts

@@ -1,4 +1,4 @@
 export { default as UserCreate } from './Create';
+export { default as UserEdit } from './Edit';
 export { default as UserList } from './List';
 export { default as UserShow } from './show/Show';
-export { default as UserEdit } from './Edit';

packages/admin/src/models/users/show/Show.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Show as RaShow, ShowProps, TabbedShowLayout } from 'react-admin';
+
 import { BasicsTab } from './tabs';
 
 const Show = (props: ShowProps) => (

packages/admin/src/service-worker.ts

@@ -10,7 +10,7 @@
 
 import { clientsClaim } from 'workbox-core';
 import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
 import { StaleWhileRevalidate } from 'workbox-strategies';
 

packages/api/src/app.module.ts

@@ -1,4 +1,5 @@
 import { Module } from '@nestjs/common';
+
 import { AuthModule } from './auth/auth.module';
 import { DatabaseModule } from './database/database.module';
 import { UsersModule } from './users/users.module';

packages/api/src/auth/auth.controller.ts

@@ -9,14 +9,15 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { CookieOptions } from 'express';
-import { AuthService } from './auth.service';
-import { LocalAuthGuard } from './strategies/local/local-auth.guard';
-import { CookiePayload } from './decorators/cookiePayload.decorator';
-import { CreateUserDto } from '../users/dto/create-user.dto';
+
 import { CookieRequest, CookieResponse, LoginRequest } from '../interfaces/cookie-types';
 import { GeneratedTokens, Payload } from '../interfaces/token-types';
+import { CreateUserDto } from '../users/dto/create-user.dto';
+import { constants, getCookies } from '../utils';
+import { AuthService } from './auth.service';
+import { CookiePayload } from './decorators/cookiePayload.decorator';
 import { OnlyAuthenticatedGuard } from './guards/only-authenticated.guard';
-import { getCookies, constants } from '../utils';
+import { LocalAuthGuard } from './strategies/local/local-auth.guard';
 
 @Controller('auth')
 export class AuthController {

packages/api/src/auth/auth.module.ts

@@ -1,12 +1,13 @@
 import { forwardRef, Module } from '@nestjs/common';
 import { PassportModule } from '@nestjs/passport';
-import { AuthService } from './auth.service';
-import { OnlyAuthenticatedGuard } from './guards/only-authenticated.guard';
-import { LocalStrategy } from './strategies/local/local.strategy';
+
 // eslint-disable-next-line import/no-cycle
 import { UsersModule } from '../users/users.module';
 import { AuthController } from './auth.controller';
+import { AuthService } from './auth.service';
+import { OnlyAuthenticatedGuard } from './guards/only-authenticated.guard';
 import { RefreshTokenService } from './refresh-token.service';
+import { LocalStrategy } from './strategies/local/local.strategy';
 
 @Module({
   imports: [forwardRef(() => UsersModule), PassportModule],

packages/api/src/auth/auth.service.ts

@@ -1,11 +1,12 @@
 import { forwardRef, Inject, NotFoundException, UnauthorizedException } from '@nestjs/common';
-import jsonwebtoken from 'jsonwebtoken';
 import * as bcrypt from 'bcrypt';
+import jsonwebtoken from 'jsonwebtoken';
+
 import { UserEntity } from '../database/entities/user.entity';
+import { GeneratedTokens, Payload, TokenPayload, Tokens } from '../interfaces/token-types';
+import { CreateUserDto } from '../users/dto/create-user.dto';
 import { UsersService } from '../users/users.service';
 import { constants } from '../utils';
-import { CreateUserDto } from '../users/dto/create-user.dto';
-import { GeneratedTokens, Payload, TokenPayload, Tokens } from '../interfaces/token-types';
 import { RefreshTokenService } from './refresh-token.service';
 
 export class AuthService {

packages/api/src/auth/decorators/cookiePayload.decorator.ts

@@ -1,8 +1,9 @@
 import { createParamDecorator, ExecutionContext, UnauthorizedException } from '@nestjs/common';
 import jsonwebtoken from 'jsonwebtoken';
-import { Payload } from '../../interfaces/token-types';
+
 import { CookieRequest } from '../../interfaces/cookie-types';
-import { getCookies, constants } from '../../utils';
+import { Payload } from '../../interfaces/token-types';
+import { constants, getCookies } from '../../utils';
 
 export const CookiePayload = createParamDecorator(
   (data: unknown, context: ExecutionContext): Payload => {

packages/api/src/auth/guards/only-admin.guard.ts

@@ -1,4 +1,5 @@
 import { CanActivate, Injectable, Scope } from '@nestjs/common';
+
 import { AuthService } from '../auth.service';
 
 @Injectable({

packages/api/src/auth/guards/only-authenticated.guard.ts

@@ -1,8 +1,9 @@
-import { CanActivate, Injectable, ExecutionContext } from '@nestjs/common';
-import { AuthService } from '../auth.service';
-import { Tokens } from '../../interfaces/token-types';
+import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+
 import { CookieRequest } from '../../interfaces/cookie-types';
-import { getCookies, constants } from '../../utils';
+import { Tokens } from '../../interfaces/token-types';
+import { constants, getCookies } from '../../utils';
+import { AuthService } from '../auth.service';
 
 @Injectable()
 export class OnlyAuthenticatedGuard implements CanActivate {

packages/api/src/auth/refresh-token.service.ts

@@ -1,7 +1,8 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
-import { Connection, LessThan } from 'typeorm';
 import * as bcrypt from 'bcrypt';
 import jsonwebtoken from 'jsonwebtoken';
+import { Connection, LessThan } from 'typeorm';
+
 import { RefreshTokenEntity } from '../database/entities/refreshToken.entity';
 import { UserEntity } from '../database/entities/user.entity';
 import { Payload } from '../interfaces/token-types';

packages/api/src/auth/roles.decorator.ts

@@ -1,4 +1,5 @@
 import { SetMetadata } from '@nestjs/common';
+
 import { Role } from './role.enum';
 
 export const ROLES_KEY = 'roles';

packages/api/src/auth/roles.guard.ts

@@ -1,5 +1,6 @@
-import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
+import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
+
 import { Role } from './role.enum';
 import { ROLES_KEY } from './roles.decorator';
 

packages/api/src/auth/strategies/local/local.strategy.ts

@@ -1,6 +1,7 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { Strategy } from 'passport-local';
+
 import { UserEntity } from '../../../database/entities/user.entity';
 import { AuthService } from '../../auth.service';
 

packages/api/src/database/config/database-config.module.ts

@@ -1,4 +1,5 @@
 import { Module } from '@nestjs/common';
+
 import { DatabaseConfigService } from './database-config.service';
 
 @Module({

packages/api/src/database/database.module.ts

@@ -1,8 +1,9 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import entities from './entities';
+
 import { DatabaseConfigModule } from './config/database-config.module';
 import { DatabaseConfig, DatabaseConfigService } from './config/database-config.service';
+import entities from './entities';
 
 @Module({
   imports: [

packages/api/src/database/entities/index.ts

@@ -1,4 +1,4 @@
-import { UserEntity } from './user.entity';
 import { RefreshTokenEntity } from './refreshToken.entity';
+import { UserEntity } from './user.entity';
 
 export default [UserEntity, RefreshTokenEntity];

packages/api/src/database/entities/refreshToken.entity.ts

@@ -1,4 +1,5 @@
-import { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, ManyToOne } from 'typeorm';
+import { Column, CreateDateColumn, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
+
 // eslint-disable-next-line import/no-cycle
 import { UserEntity } from './user.entity';
 

packages/api/src/database/entities/user.entity.ts

@@ -6,6 +6,7 @@ import {
   OneToMany,
   PrimaryGeneratedColumn,
 } from 'typeorm';
+
 import { Role } from '../../auth/role.enum';
 // eslint-disable-next-line import/no-cycle
 import { RefreshTokenEntity } from './refreshToken.entity';

packages/api/src/interfaces/cookie-types.d.ts

@@ -1,5 +1,6 @@
 import { Request } from '@nestjs/common';
 import { CookieOptions } from 'express';
+
 import { UserEntity } from '../database/entities/user.entity';
 
 type Modify<T, R> = Omit<T, keyof R> & R;

packages/api/src/main.ts

@@ -1,6 +1,8 @@
 import 'dotenv/config';
+
 import { NestFactory } from '@nestjs/core';
 import cookieParser from 'cookie-parser';
+
 import { AppModule } from './app.module';
 
 async function bootstrap() {

packages/api/src/users/dto/create-user.dto.ts

@@ -1,4 +1,5 @@
-import { IsString, IsEmail } from 'class-validator';
+import { IsEmail, IsString } from 'class-validator';
+
 import { Role } from '../../auth/role.enum';
 
 export class CreateUserDto {

packages/api/src/users/dto/update-user.dto.ts

@@ -1,4 +1,5 @@
 import { PartialType } from '@nestjs/mapped-types';
+
 import { CreateUserDto } from './create-user.dto';
 
 export class UpdateUserDto extends PartialType(CreateUserDto) {}

packages/api/src/users/users.controller.ts

@@ -10,6 +10,7 @@ import {
   Post,
   UseGuards,
 } from '@nestjs/common';
+
 import { AuthService } from '../auth/auth.service';
 import { RolesGuard } from '../auth/roles.guard';
 import { CreateUserDto } from './dto/create-user.dto';

packages/api/src/users/users.module.ts

@@ -1,8 +1,9 @@
 import { forwardRef, Module } from '@nestjs/common';
+
 // eslint-disable-next-line import/no-cycle
 import { AuthModule } from '../auth/auth.module';
-import { UsersService } from './users.service';
 import { UsersController } from './users.controller';
+import { UsersService } from './users.service';
 
 @Module({
   controllers: [UsersController],

packages/api/src/users/users.service.ts

@@ -1,5 +1,6 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
 import { Connection } from 'typeorm';
+
 import { UserEntity } from '../database/entities/user.entity';
 import { GetList } from '../interfaces/react-admin-types';
 import { CreateUserDto } from './dto/create-user.dto';

packages/api/src/utils/index.ts

@@ -1,2 +1,2 @@
-export { default as getCookies } from './getCookies';
 export { default as constants } from './constants';
+export { default as getCookies } from './getCookies';

packages/client/src/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
 import AuthProvider from './api/AuthProvider';
 import AxiosProvider from './api/AxiosProvider';
 import { Dashboard, SignIn, SignUp } from './containers';

packages/client/src/api/AuthProvider.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, PropsWithChildren, useCallback } from 'react';
+
 import useAxios from '../hooks/useAxios';
 
 interface User {
@@ -38,38 +39,44 @@ const AuthProvider = ({ children }: PropsWithChildren<unknown>) => {
     } catch (ignore) {}
 
     return authUser;
-  }, [axios]);
-
-  const login = useCallback(async (userData: User) => {
-    const response = await axios.post(
-      `${API_URL}/auth/login`,
-      { ...userData },
-      { withCredentials: true },
-    );
-    localStorage.setItem('access_token', response.data.access_token);
-
-    return true;
-  }, []);
-
-  const register = useCallback(async (userData?: User) => {
-    const response = await axios.post(
-      `${API_URL}/auth/register`,
-      { ...userData },
-      { withCredentials: true },
-    );
-    localStorage.setItem('access_token', response.data.access_token);
-    console.log('response', response);
-    return true;
-  }, []);
+  }, [API_URL, axios]);
+
+  const login = useCallback(
+    async (userData: User) => {
+      const response = await axios.post(
+        `${API_URL}/auth/login`,
+        { ...userData },
+        { withCredentials: true },
+      );
+      localStorage.setItem('access_token', response.data.access_token);
+
+      return true;
+    },
+    [API_URL, axios],
+  );
+
+  const register = useCallback(
+    async (userData?: User) => {
+      const response = await axios.post(
+        `${API_URL}/auth/register`,
+        { ...userData },
+        { withCredentials: true },
+      );
+      localStorage.setItem('access_token', response.data.access_token);
+      console.log('response', response);
+      return true;
+    },
+    [API_URL, axios],
+  );
 
   const logout = useCallback(async () => {
     const response = await axios.get(`${API_URL}/auth/logout`, { withCredentials: true });
     return response.data;
-  }, []);
+  }, [API_URL, axios]);
 
   const refresh = useCallback(async () => {
     await axios.get(`${API_URL}/auth/refresh`, { withCredentials: true });
-  }, []);
+  }, [API_URL, axios]);
 
   const AuthValue = {
     getCurrentUser,