I receive a lint error over the context API default state that consists only of functions?

34 Views Asked by At

I receive this lint warning over the following code: the idea here is that the auth provider's default state consists of functions that are implemented later down the code

src\context\auth\AuthProvider.tsx Line 76:17: Unexpected empty method 'Signup' @typescript-eslint/no-empty-function Line 77:17: Unexpected empty method 'Signin' @typescript-eslint/no-empty-function Line 78:18: Unexpected empty method 'SignOut' @typescript-eslint/no-empty-function Line 79:22: Unexpected empty method 'UpdateEmail' @typescript-eslint/no-empty-function Line 80:32: Unexpected empty method 'SendRestPasswordEmail' @typescript-eslint/no-empty-function Line 81:23: Unexpected empty method 'RestPassword' @typescript-eslint/no-empty-function Line 82:29: Unexpected empty method 'UpdatePremiumUntil' @typescript-eslint/no-empty-function Line 83:23: Unexpected empty method 'DeletAccount' @typescript-eslint/no-empty-function

interface AuthState {
  Signup: (email: string, password: string, userType: string, privacySettings: PrivacySettings) => void;
  Signin: (email: string, password: string) => void;
  SignOut: (actionType: SignOutAction) => void;
  UpdateEmail: (newEmail: string) => void;
  SendRestPasswordEmail: (email: string) => void;
  RestPassword: (oobCode: string, newPassword: string) => void;
  UpdatePremiumUntil: () => void;
  DeletAccount: (
    userType: UsersTypes,
    uid: string,
    password: string,
    clientsIds: string[],
    profileImage: boolean,
    customEquipmentObject: { customData: string[] }
  ) => void;
}

const defaultState: AuthState = {
  Signup: () => {},
  Signin: () => {},
  SignOut: () => {},
  UpdateEmail: () => {},
  SendRestPasswordEmail: () => {},
  RestPassword: () => {},
  UpdatePremiumUntil: () => {},
  DeletAccount: () => {},
};

// later on 

 // Signup with email and password
  const Signup = async (email: string, password: string, userType: string, privacySettigns: PrivacySettings) => {
  // the implementations 
  }
  
  // rest of the functions..

2

There are 2 best solutions below

8
baterja On
2
Ruan Mendes On

If you must have empty functions you should add an explanation as to why they're empty. The rule is there because:

Empty functions can reduce readability because readers need to guess whether it’s intentional or not. So writing a clear comment for empty functions is a good practice.

See https://eslint.org/docs/latest/rules/no-empty-function#rule-details

I would use


const emptyFunction = () => {
  // Default value for no behavior
  // This way callers don't need to check if a function is defined.
}; 

const defaultState: AuthState = {
  Signup: emptyFn
  Signin: emptyFn,
  SignOut: emptyFn,
  UpdateEmail: emptyFn,
  SendRestPasswordEmail: emptyFn,
  RestPassword: emptyFn,
  UpdatePremiumUntil: emptyFn,
  DeletAccount: emptyFn,
};


However, your empty functions don't really match the AuthState definition, so your code looks wrong. You should update each empty function to have the right parameters and add the // Default value is no behavior