mobx 6 (#156, in progress)

async-labs · May 19, 2021 · 627aa06 · 627aa06
1 parent a19d5da
commit 627aa06
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 142 deletions.
diff --git a/saas/app/lib/api/team-member.ts b/saas/app/lib/api/team-member.ts
@@ -36,10 +36,10 @@ export const getInitialDataApiMethod = (options: any = {}) =>
     ),
   );
 
-export const getTeamListApiMethod = () =>
-  sendRequestAndGetResponse(`${BASE_PATH}/teams`, {
-    method: 'GET',
-  });
+// export const getTeamListApiMethod = () =>
+//   sendRequestAndGetResponse(`${BASE_PATH}/teams`, {
+//     method: 'GET',
+//   });
 
 export const getTeamMembersApiMethod = (teamId: string) =>
   sendRequestAndGetResponse(`${BASE_PATH}/teams/get-members`, {

diff --git a/saas/app/lib/store/discussion.ts b/saas/app/lib/store/discussion.ts
@@ -1,4 +1,4 @@
-import { action, decorate, IObservableArray, observable, runInAction, computed } from 'mobx';
+import { action, IObservableArray, observable, runInAction, computed, makeObservable } from 'mobx';
 
 import {
   addPostApiMethod,
@@ -26,6 +26,31 @@ class Discussion {
   public notificationType: string;
 
   constructor(params) {
+    makeObservable(this, {
+      name: observable,
+      slug: observable,
+      memberIds: observable,
+      posts: observable,
+      isLoadingPosts: observable,
+
+      editDiscussion: action,
+      changeLocalCache: action,
+
+      setInitialPosts: action,
+      loadPosts: action,
+      addPost: action,
+      addPostToLocalCache: action,
+      deletePost: action,
+
+      addDiscussionToLocalCache: action,
+      editDiscussionFromLocalCache: action,
+      deleteDiscussionFromLocalCache: action,
+      editPostFromLocalCache: action,
+      deletePostFromLocalCache: action,
+
+      members: computed,
+    });
+
     this._id = params._id;
     this.createdUserId = params.createdUserId;
     this.store = params.store;
@@ -236,29 +261,4 @@ class Discussion {
   }
 }
 
-decorate(Discussion, {
-  name: observable,
-  slug: observable,
-  memberIds: observable,
-  posts: observable,
-  isLoadingPosts: observable,
-
-  editDiscussion: action,
-  changeLocalCache: action,
-
-  setInitialPosts: action,
-  loadPosts: action,
-  addPost: action,
-  addPostToLocalCache: action,
-  deletePost: action,
-
-  addDiscussionToLocalCache: action,
-  editDiscussionFromLocalCache: action,
-  deleteDiscussionFromLocalCache: action,
-  editPostFromLocalCache: action,
-  deletePostFromLocalCache: action,
-
-  members: computed,
-});
-
 export { Discussion };
diff --git a/saas/app/lib/store/index.ts b/saas/app/lib/store/index.ts
@@ -1,11 +1,10 @@
-import * as mobx from 'mobx';
-import { action, decorate, IObservableArray, observable } from 'mobx';
+import { action, configure, IObservableArray, observable, makeObservable } from 'mobx';
 import { useStaticRendering } from 'mobx-react';
 // @ts-expect-error no exported member io socket.io-client
 import { io } from 'socket.io-client';
 
 import { addTeamApiMethod, getTeamInvitationsApiMethod } from '../api/team-leader';
-import { getTeamListApiMethod, getTeamMembersApiMethod } from '../api/team-member';
+import { getTeamMembersApiMethod } from '../api/team-member';
 
 import { User } from './user';
 import { Team } from './team';
@@ -14,15 +13,15 @@ const dev = process.env.NODE_ENV !== 'production';
 
 useStaticRendering(typeof window === 'undefined');
 
-mobx.configure({ enforceActions: 'observed' });
+configure({ enforceActions: 'observed' });
 
 class Store {
   public isServer: boolean;
 
   public currentUser?: User = null;
   public currentUrl = '';
 
-  public currentTeam?: Team;
+  public currentTeam?: Team = null;
 
   public teams: IObservableArray<Team> = observable([]);
 
@@ -37,6 +36,16 @@ class Store {
     isServer: boolean;
     socket?: SocketIOClient.Socket;
   }) {
+    makeObservable(this, {
+      currentUser: observable,
+      currentUrl: observable,
+      currentTeam: observable,
+
+      changeCurrentUrl: action,
+      setCurrentUser: action,
+      setCurrentTeam: action,
+    });
+
     this.isServer = !!isServer;
 
     this.setCurrentUser(initialState.user);
@@ -45,12 +54,16 @@ class Store {
 
     // console.log(initialState.user);
 
-    if (initialState.teamSlug || (initialState.user && initialState.user.defaultTeamSlug)) {
-      this.setCurrentTeam(
-        initialState.teamSlug || initialState.user.defaultTeamSlug,
-        initialState.teams,
-      );
-    }
+    // if (initialState.teamSlug || (initialState.user && initialState.user.defaultTeamSlug)) {
+    //   this.setCurrentTeam(
+    //     initialState.teamSlug || initialState.user.defaultTeamSlug,
+    //     initialState.teams,
+    //   );
+    // }
+
+    console.log(initialState.team);
+
+    this.setCurrentTeam(initialState.team);
 
     this.socket = socket;
 
@@ -84,40 +97,25 @@ class Store {
     return team;
   }
 
-  public async setCurrentTeam(slug: string, initialTeams: any[]) {
+  public async setCurrentTeam(team) {
     if (this.currentTeam) {
-      if (this.currentTeam.slug === slug) {
+      if (this.currentTeam.slug === team.slug) {
         return;
       }
     }
 
-    let found = false;
-
-    const teams = initialTeams || (await getTeamListApiMethod()).teams;
-
-    console.log(teams.length);
+    this.currentTeam = new Team({ ...team, store: this });
 
-    for (const team of teams) {
-      if (team.slug === slug) {
-        found = true;
-        this.currentTeam = new Team({ ...team, store: this });
+    console.log(team);
 
-        const users =
-          team.initialMembers || (await getTeamMembersApiMethod(this.currentTeam._id)).users;
+    const users =
+      team.initialMembers || (await getTeamMembersApiMethod(this.currentTeam._id)).users;
 
-        const invitations =
-          team.initialInvitations ||
-          (await getTeamInvitationsApiMethod(this.currentTeam._id)).invitations;
+    const invitations =
+      team.initialInvitations ||
+      (await getTeamInvitationsApiMethod(this.currentTeam._id)).invitations;
 
-        this.currentTeam.setInitialMembersAndInvitations(users, invitations);
-
-        break;
-      }
-    }
-
-    if (!found) {
-      this.currentTeam = null;
-    }
+    this.currentTeam.setInitialMembersAndInvitations(users, invitations);
   }
 
   public addTeamToLocalCache(data): Team {
@@ -148,16 +146,6 @@ class Store {
   }
 }
 
-decorate(Store, {
-  currentUser: observable,
-  currentUrl: observable,
-  currentTeam: observable,
-
-  changeCurrentUrl: action,
-  setCurrentUser: action,
-  setCurrentTeam: action,
-});
-
 let store: Store = null;
 
 function initializeStore(initialState = {}) {

diff --git a/saas/app/lib/store/post.ts b/saas/app/lib/store/post.ts
@@ -1,4 +1,4 @@
-import { action, computed, decorate, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, makeObservable } from 'mobx';
 
 import { editPostApiMethod } from '../api/team-member';
 
@@ -22,6 +22,18 @@ export class Post {
   public lastUpdatedAt: Date;
 
   constructor(params) {
+    makeObservable(this, {
+      content: observable,
+      htmlContent: observable,
+      isEdited: observable,
+      lastUpdatedAt: observable,
+
+      editPost: action,
+      changeLocalCache: action,
+
+      user: computed,
+    });
+
     this._id = params._id;
     this.createdUserId = params.createdUserId;
     this.createdAt = params.createdAt;
@@ -65,15 +77,3 @@ export class Post {
     return this.discussion.team.members.get(this.createdUserId) || null;
   }
 }
-
-decorate(Post, {
-  content: observable,
-  htmlContent: observable,
-  isEdited: observable,
-  lastUpdatedAt: observable,
-
-  editPost: action,
-  changeLocalCache: action,
-
-  user: computed,
-});
diff --git a/saas/app/lib/store/team.ts b/saas/app/lib/store/team.ts
@@ -1,4 +1,4 @@
-import { action, computed, decorate, IObservableArray, observable, runInAction } from 'mobx';
+import { action, computed, IObservableArray, observable, runInAction, makeObservable } from 'mobx';
 import Router from 'next/router';
 import {
   cancelSubscriptionApiMethod,
@@ -48,6 +48,33 @@ class Team {
   public isPaymentFailed: boolean;
 
   constructor(params) {
+    makeObservable(this, {
+      name: observable,
+      slug: observable,
+      avatarUrl: observable,
+      memberIds: observable,
+      members: observable,
+      invitations: observable,
+      currentDiscussion: observable,
+      currentDiscussionSlug: observable,
+      isLoadingDiscussions: observable,
+      discussions: observable,
+
+      setInitialMembersAndInvitations: action,
+      updateTheme: action,
+      inviteMember: action,
+      removeMember: action,
+      setInitialDiscussions: action,
+      loadDiscussions: action,
+      addDiscussion: action,
+      addDiscussionToLocalCache: action,
+      deleteDiscussion: action,
+      deleteDiscussionFromLocalCache: action,
+      getDiscussionBySlug: action,
+
+      orderedDiscussions: computed,
+    });
+
     this._id = params._id;
     this.teamLeaderId = params.teamLeaderId;
     this.slug = params.slug;
@@ -293,31 +320,4 @@ class Team {
   }
 }
 
-decorate(Team, {
-  name: observable,
-  slug: observable,
-  avatarUrl: observable,
-  memberIds: observable,
-  members: observable,
-  invitations: observable,
-  currentDiscussion: observable,
-  currentDiscussionSlug: observable,
-  isLoadingDiscussions: observable,
-  discussions: observable,
-
-  setInitialMembersAndInvitations: action,
-  updateTheme: action,
-  inviteMember: action,
-  removeMember: action,
-  setInitialDiscussions: action,
-  loadDiscussions: action,
-  addDiscussion: action,
-  addDiscussionToLocalCache: action,
-  deleteDiscussion: action,
-  deleteDiscussionFromLocalCache: action,
-  getDiscussionBySlug: action,
-
-  orderedDiscussions: computed,
-});
-
 export { Team };
diff --git a/saas/app/lib/store/user.ts b/saas/app/lib/store/user.ts
@@ -1,4 +1,4 @@
-import { action, decorate, observable, runInAction } from 'mobx';
+import { action, observable, runInAction, makeObservable } from 'mobx';
 
 import * as NProgress from 'nprogress';
 
@@ -41,6 +41,21 @@ class User {
   };
 
   constructor(params) {
+    makeObservable(this, {
+      slug: observable,
+      email: observable,
+      displayName: observable,
+      avatarUrl: observable,
+      // darkTheme: observable,
+      defaultTeamSlug: observable,
+      stripeCard: observable,
+      stripeListOfInvoices: observable,
+
+      updateProfile: action,
+      toggleTheme: action,
+      getListOfInvoices: action,
+    });
+
     this.store = params.store;
     this._id = params._id;
     this.slug = params.slug;
@@ -92,19 +107,4 @@ class User {
   }
 }
 
-decorate(User, {
-  slug: observable,
-  email: observable,
-  displayName: observable,
-  avatarUrl: observable,
-  // darkTheme: observable,
-  defaultTeamSlug: observable,
-  stripeCard: observable,
-  stripeListOfInvoices: observable,
-
-  updateProfile: action,
-  toggleTheme: action,
-  getListOfInvoices: action,
-});
-
 export { User };
diff --git a/saas/app/package.json b/saas/app/package.json
@@ -26,8 +26,8 @@
     "keycode": "^2.2.0",
     "lru-cache": "^6.0.0",
     "marked": "^1.2.7",
-    "mobx": "^5.15.7",
-    "mobx-react": "^6.3.0",
+    "mobx": "^6.3.1",
+    "mobx-react": "^6.3.1",
     "moment": "^2.29.1",
     "next": "^9.1.2",
     "nprogress": "0.2.0",