Javascript - Refactor class as a JS Object

Question

I am splitting my current Firebase class in smaller fragments.

export default class Firebase {
  constructor() {
    if (!firebase.apps.length) {
      // Initialize App
      firebase.initializeApp(Constants.manifest.web.config.firebase);

      // Initialize APIs
      this._usersAPI = new Users();
      this._contentAPI = new Content();
      this._messagingAPI = new Messaging();
      this._notificationsAPI = new Notifications();
    }
  }

  get usersAPI() {
    return this._usersAPI;
  }

  ...
}

As you can see, the Firebase class is composed by smaller classes.

But, to be honest, the smalle classes seems that they don't need to be implemented as classes.

Now, I am thinking about moving them to JS Objects

export default class Auth {
  constructor() {
    this.auth = firebase.auth();
    this.firestore = firebase.firestore();
  }

  /*
    Persistance
  */

  enableAuthPersistence() {
    return this.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL);
  }

  /*
    Sign in/out
  */

  signInWithEmailAndPassword(email, password) {
    return this.auth.signInWithEmailAndPassword(email, password);
  }

  async signInWithUsernameAndPassword(username, password) {
    ...
  }

  signOut() {
    return this.auth.signOut();
  }

  /*
    Password
  */

  resetPassword(email) {
    return this.auth.sendPasswordResetEmail(email);
  }

  updatePassword(password) {
    return this.auth.currentUser.updatePassword(password);
  }

  /*
    Helpers
  */

  parseError(errorCode) {
    ...
  }

  get currentUser() {
    return this.auth.currentUser;
  }
}

How can I convert them to objects? So that I do

  import users from "./api/users";
 
  ...


  constructor() {
     ...
     // Initialize APIs
     this._usersAPI = users;
     this._contentAPI = content;
     this._messagingAPI = messaging;
     this._notificationsAPI = notifications;
  }

  ...

in my Firebase class, instead of instantiating?

Actually everything in JS in an object (not all inherited from Object). A class is just a simple way to call Object.create() and do some prototyping stuff. Maybe you should look at static class methods in js. Minimal changes in your code. — Kai Lehmann
– Kai Lehmann, Commented Apr 1, 2021 at 18:11
Just use global variables and functions, like let userApi = new Users(); export function getUser() { /*...*/ } and so on? — Jonas Wilms
– Jonas Wilms, Commented Apr 1, 2021 at 18:24

Bergi · Accepted Answer · 2021-04-01 19:23:22Z

You just put the stuff that you'd normally initialise in the constructor as properties of an object literal, and all the methods and getters/setters similarly as shorthand methods and getters/setters on the same object literal:

export default {
  auth: firebase.auth(),
  firestore: firebase.firestore(),

  /*
    Persistance
  */
  enableAuthPersistence() {
    return this.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL);
  },

  /*
    Sign in/out
  */
  signInWithEmailAndPassword(email, password) {
    return this.auth.signInWithEmailAndPassword(email, password);
  },

  async signInWithUsernameAndPassword(username, password) {
    ...
  },

  signOut() {
    return this.auth.signOut();
  },

  /*
    Password
  */
  resetPassword(email) {
    return this.auth.sendPasswordResetEmail(email);
  },
  updatePassword(password) {
    return this.auth.currentUser.updatePassword(password);
  },

  /*
    Helpers
  */
  parseError(errorCode) {
    ...
  },
  get currentUser() {
    return this.auth.currentUser;
  },
};

All that changed were the class, the constructor, and some addition of commas between the elements.

Collectives™ on Stack Overflow

Javascript - Refactor class as a JS Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related