mobx v6 and style edits (#156 in progress)

async-labs · May 24, 2021 · c961374 · c961374
1 parent d859a19
commit c961374
Show file tree

Hide file tree

Showing 54 changed files with 655 additions and 230 deletions.
diff --git a/book/10-begin/app/components/discussions/DiscussionListItem.tsx b/book/10-begin/app/components/discussions/DiscussionListItem.tsx
@@ -22,7 +22,7 @@ class DiscussionListItem extends React.Component<Props> {
     const trimmingLength = 16;
 
     const selectedDiscussion =
-      store.currentUrl === `/team/${team.slug}/discussions/${discussion.slug}`;
+      store.currentUrl === `/teams/${team.slug}/discussions/${discussion.slug}`;
 
     console.log(store.currentUrl);
 
@@ -46,7 +46,7 @@ class DiscussionListItem extends React.Component<Props> {
           <Link
             scroll={false}
             href={`/discussion?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
-            as={`/team/${team.slug}/discussions/${discussion.slug}`}
+            as={`/teams/${team.slug}/discussions/${discussion.slug}`}
           >
             <a
               style={{ fontWeight: 300, color: isThemeDark ? '#fff' : '#000' }}

diff --git a/book/10-begin/app/pages/_app.tsx b/book/10-begin/app/pages/_app.tsx
@@ -11,7 +11,7 @@ import { getInitialDataApiMethod } from '../lib/api/team-member';
 import { isMobile } from '../lib/isMobile';
 import { getStore, initializeStore, Store } from '../lib/store';
 
-class MyApp extends App<{ isMobile: boolean }> {
+class MyApp extends App {
   public static async getInitialProps({ Component, ctx }) {
     let firstGridItem = true;
     let teamRequired = false;

diff --git a/book/10-end/api/server/api/team-member.ts b/book/10-end/api/server/api/team-member.ts
@@ -152,17 +152,17 @@ router.post('/get-initial-data', async (req, res, next) => {
   }
 });
 
-router.get('/teams', async (req, res, next) => {
-  try {
-    const teams = await Team.getAllTeamsForUser(req.user.id);
+// router.get('/teams', async (req, res, next) => {
+//   try {
+//     const teams = await Team.getAllTeamsForUser(req.user.id);
 
-    console.log(teams);
+//     console.log(teams);
 
-    res.json({ teams });
-  } catch (err) {
-    next(err);
-  }
-});
+//     res.json({ teams });
+//   } catch (err) {
+//     next(err);
+//   }
+// });
 
 router.get('/teams/get-members', async (req, res, next) => {
   try {

diff --git a/book/10-end/api/server/google-auth.ts b/book/10-end/api/server/google-auth.ts
@@ -98,7 +98,7 @@ function setupGoogle({ server }) {
       if (req.user && !req.user.defaultTeamSlug) {
         redirectUrlAfterLogin = '/create-team';
       } else {
-        redirectUrlAfterLogin = `/team/${req.user.defaultTeamSlug}/discussions`;
+        redirectUrlAfterLogin = `/teams/${req.user.defaultTeamSlug}/discussions`;
       }
 
       res.redirect(

diff --git a/book/10-end/api/server/passwordless-auth.ts b/book/10-end/api/server/passwordless-auth.ts
@@ -103,7 +103,7 @@ function setupPasswordless({ server }) {
       if (req.user && !req.user.defaultTeamSlug) {
         redirectUrlAfterLogin = '/create-team';
       } else {
-        redirectUrlAfterLogin = `/team/${req.user.defaultTeamSlug}/discussions`;
+        redirectUrlAfterLogin = `/teams/${req.user.defaultTeamSlug}/discussions`;
       }
 
       res.redirect(

diff --git a/book/10-end/api/server/stripe.ts b/book/10-end/api/server/stripe.ts
@@ -24,7 +24,7 @@ function createSession({ userId, teamId, teamSlug, customerId, subscriptionId, u
     }/stripe/checkout-completed/{CHECKOUT_SESSION_ID}`,
     cancel_url: `${
       dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP
-    }/team/${teamSlug}/billing?redirectMessage=Checkout%20canceled`,
+    }/teams/${teamSlug}/billing?redirectMessage=Checkout%20canceled`,
     metadata: { userId, teamId },
   };
 
@@ -171,13 +171,13 @@ function stripeWebhookAndCheckoutCallback({ server }) {
       }
 
       res.redirect(
-        `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/team/${team.slug}/billing`,
+        `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${team.slug}/billing`,
       );
     } catch (err) {
       console.error(err);
 
       res.redirect(
-        `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/team/${
+        `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
           team.slug
         }/billing?redirectMessage=${err.message || err.toString()}`,
       );

diff --git a/book/10-end/app/components/discussions/CreateDiscussionForm.tsx b/book/10-end/app/components/discussions/CreateDiscussionForm.tsx
@@ -238,7 +238,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
 
         await discussion.sendDataToLambda({
           discussionName: discussion.name,
-          discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/team/${
+          discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
             discussion.team.slug
           }/discussions/${discussion.slug}`,
           postContent: post.content,
@@ -253,7 +253,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
 
       Router.push(
         `/discussion?teamSlug=${currentTeam.slug}&discussionSlug=${discussion.slug}`,
-        `/team/${currentTeam.slug}/discussions/${discussion.slug}`,
+        `/teams/${currentTeam.slug}/discussions/${discussion.slug}`,
       );
     } catch (error) {
       console.log(error);

diff --git a/book/10-end/app/components/discussions/DiscussionActionMenu.tsx b/book/10-end/app/components/discussions/DiscussionActionMenu.tsx
@@ -105,7 +105,7 @@ class DiscussionActionMenu extends React.Component<Props, State> {
 
     const selectedDiscussion = currentTeam.discussions.find((d) => d._id === id);
 
-    const discussionUrl = `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/team/${
+    const discussionUrl = `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
       currentTeam.slug
     }/discussions/${selectedDiscussion.slug}`;
 

diff --git a/book/10-end/app/components/discussions/DiscussionListItem.tsx b/book/10-end/app/components/discussions/DiscussionListItem.tsx
@@ -22,7 +22,7 @@ class DiscussionListItem extends React.Component<Props> {
     const trimmingLength = 16;
 
     const selectedDiscussion =
-      store.currentUrl === `/team/${team.slug}/discussions/${discussion.slug}`;
+      store.currentUrl === `/teams/${team.slug}/discussions/${discussion.slug}`;
 
     console.log(store.currentUrl);
 
@@ -46,7 +46,7 @@ class DiscussionListItem extends React.Component<Props> {
           <Link
             scroll={false}
             href={`/discussion?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
-            as={`/team/${team.slug}/discussions/${discussion.slug}`}
+            as={`/teams/${team.slug}/discussions/${discussion.slug}`}
           >
             <a
               style={{ fontWeight: 300, color: isThemeDark ? '#fff' : '#000' }}

diff --git a/book/10-end/app/components/layout/index.tsx b/book/10-end/app/components/layout/index.tsx
@@ -93,23 +93,25 @@ function LayoutWrapper({
               </svg>
               <MenuWithLinks
                 options={[
+                  {
+                    text: 'Your Settings',
+                    href: `/your-settings?teamSlug=${store.currentTeam.slug}`,
+                    as: `/teams/${store.currentTeam.slug}/your-settings`,
+                    highlighterSlug: '/your-settings',
+                  },
                   {
                     text: 'Team Settings',
                     href: `/team-settings?teamSlug=${store.currentTeam.slug}`,
-                    as: `/team/${store.currentTeam.slug}/team-settings`,
-                    simple: true,
+                    as: `/teams/${store.currentTeam.slug}/team-settings`,
+                    highlighterSlug: '/team-settings',
                   },
                   {
                     text: 'Billing',
                     href: `/billing?teamSlug=${store.currentTeam.slug}`,
-                    as: `/team/${store.currentTeam.slug}/billing`,
-                    simple: true,
-                  },
-                  {
-                    text: 'Your Settings',
-                    href: '/your-settings',
-                    highlighterSlug: '/your-settings',
+                    as: `/teams/${store.currentTeam.slug}/billing`,
+                    highlighterSlug: '/billing',
                   },
+
                   {
                     separator: true,
                   },
@@ -204,7 +206,7 @@ class Layout extends React.Component<Props> {
                 Select existing team or create a new team.
                 <p />
                 <Link href="/create-team" as="/create-team">
-                  <Button variant="outlined" color="primary">
+                  <Button variant="contained" color="primary">
                     Create new team
                   </Button>
                 </Link>

diff --git a/book/10-end/app/components/posts/PostForm.tsx b/book/10-end/app/components/posts/PostForm.tsx
@@ -183,7 +183,7 @@ class PostForm extends React.Component<Props, State> {
 
         await discussion.sendDataToLambda({
           discussionName: discussion.name,
-          discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/team/${
+          discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
             discussion.team.slug
           }/discussions/${discussion.slug}`,
           postContent: post.content,

diff --git a/book/10-end/app/lib/api/team-member.ts b/book/10-end/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/book/10-end/app/lib/store/discussion.ts b/book/10-end/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 };