diff --git a/book/10-begin/app/components/discussions/DiscussionListItem.tsx b/book/10-begin/app/components/discussions/DiscussionListItem.tsx index 9d34f62c..a66a4024 100644 --- 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 { 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 { { +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 index ef28636a..b4a8465b 100644 --- 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 index 5aebec21..82e08fe7 100644 --- 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 index 8126e5f6..ba5b1986 100644 --- 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 index 5e42b17e..ac3f2a96 100644 --- 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 index 8c2d235d..98c1dea0 100644 --- 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 { 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 { 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 index 8f582d6c..e3cec615 100644 --- 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 { 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 index 9d34f62c..a66a4024 100644 --- 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 { 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 { { Select existing team or create a new team.

- diff --git a/book/10-end/app/components/posts/PostForm.tsx b/book/10-end/app/components/posts/PostForm.tsx index 70f2d96c..10a0dea9 100644 --- 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 { 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 index 548955b8..24faf72b 100644 --- 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 index c5cb3996..d028d30d 100644 --- 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 }; diff --git a/book/10-end/app/lib/store/index.ts b/book/10-end/app/lib/store/index.ts index da6d77cc..ec15e094 100644 --- a/book/10-end/app/lib/store/index.ts +++ b/book/10-end/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,7 +13,7 @@ const dev = process.env.NODE_ENV !== 'production'; useStaticRendering(typeof window === 'undefined'); -mobx.configure({ enforceActions: 'observed' }); +configure({ enforceActions: 'observed' }); class Store { public isServer: boolean; @@ -22,7 +21,7 @@ class Store { public currentUser?: User = null; public currentUrl = ''; - public currentTeam?: Team; + public currentTeam?: Team = null; public teams: IObservableArray = 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,36 +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; - - for (const team of teams) { - if (team.slug === slug) { - found = true; - this.currentTeam = new Team({ ...team, store: this }); - - const users = - team.initialMembers || (await getTeamMembersApiMethod(this.currentTeam._id)).users; - - const invitations = - team.initialInvitations || - (await getTeamInvitationsApiMethod(this.currentTeam._id)).invitations; + if (team) { + this.currentTeam = new Team({ ...team, store: this }); - this.currentTeam.setInitialMembersAndInvitations(users, invitations); + const users = + team.initialMembers || (await getTeamMembersApiMethod(this.currentTeam._id)).users; - break; - } - } + const invitations = + team.initialInvitations || + (await getTeamInvitationsApiMethod(this.currentTeam._id)).invitations; - if (!found) { + this.currentTeam.setInitialMembersAndInvitations(users, invitations); + } else { this.currentTeam = null; } } @@ -146,16 +148,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/book/10-end/app/lib/store/post.ts b/book/10-end/app/lib/store/post.ts index d8911878..bd446c53 100644 --- a/book/10-end/app/lib/store/post.ts +++ b/book/10-end/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/book/10-end/app/lib/store/team.ts b/book/10-end/app/lib/store/team.ts index 47e67eea..4c3ca9e4 100644 --- a/book/10-end/app/lib/store/team.ts +++ b/book/10-end/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; @@ -243,10 +270,10 @@ class Team { Router.push( `/discussion?teamSlug=${this.slug}&discussionSlug=${d.slug}`, - `/team/${this.slug}/discussions/${d.slug}`, + `/teams/${this.slug}/discussions/${d.slug}`, ); } else { - Router.push(`/discussion?teamSlug=${this.slug}`, `/team/${this.slug}/discussions`); + Router.push(`/discussion?teamSlug=${this.slug}`, `/teams/${this.slug}/discussions`); } } }); @@ -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/book/10-end/app/lib/store/user.ts b/book/10-end/app/lib/store/user.ts index 59647234..8d45a5c9 100644 --- a/book/10-end/app/lib/store/user.ts +++ b/book/10-end/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/book/10-end/app/pages/_app.tsx b/book/10-end/app/pages/_app.tsx index 8d78232e..d219c004 100644 --- a/book/10-end/app/pages/_app.tsx +++ b/book/10-end/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; @@ -25,6 +25,7 @@ class MyApp extends App<{ isMobile: boolean }> { } if ( + ctx.pathname.includes('/your-settings') || // because of MenuWithLinks inside `Layout` HOC ctx.pathname.includes('/team-settings') || ctx.pathname.includes('/discussion') || ctx.pathname.includes('/billing') @@ -62,7 +63,7 @@ class MyApp extends App<{ isMobile: boolean }> { console.log(error); } - let initialData = {}; + let initialData; if (userObj) { try { @@ -79,9 +80,24 @@ class MyApp extends App<{ isMobile: boolean }> { // console.log(teamSlug); + let selectedTeamSlug = ''; + + if (teamRequired) { + selectedTeamSlug = teamSlug; + } else if (userObj) { + selectedTeamSlug = userObj.defaulTeamSlug; + } + + let team; + if (initialData && initialData.teams) { + team = initialData.teams.find((t) => { + return t.slug === selectedTeamSlug; + }); + } + return { ...appProps, - initialState: { user: userObj, currentUrl: ctx.asPath, teamSlug, ...initialData }, + initialState: { user: userObj, currentUrl: ctx.asPath, team, teamSlug, ...initialData }, }; } diff --git a/book/10-end/app/pages/_document.tsx b/book/10-end/app/pages/_document.tsx index d549ccb5..e3926de5 100644 --- a/book/10-end/app/pages/_document.tsx +++ b/book/10-end/app/pages/_document.tsx @@ -25,9 +25,9 @@ class MyDocument extends Document { public render() { // console.log('rendered on the server'); - const isThemeDark = - this.props.__NEXT_DATA__.props.initialState.user && - this.props.__NEXT_DATA__.props.initialState.user.darkTheme; + const isThemeDark = this.props.__NEXT_DATA__.props.initialState.user + ? this.props.__NEXT_DATA__.props.initialState.user.darkTheme + : true; return ( diff --git a/book/10-end/app/pages/create-team.tsx b/book/10-end/app/pages/create-team.tsx index 0da8ce99..45d20c92 100644 --- a/book/10-end/app/pages/create-team.tsx +++ b/book/10-end/app/pages/create-team.tsx @@ -140,7 +140,7 @@ class CreateTeam extends React.Component { console.log(`Returned to client: ${team._id}, ${team.name}, ${team.slug}`); if (file == null) { - Router.push(`/team/${team.slug}/team-settings`); + Router.push(`/teams/${team.slug}/team-settings`); notify('You successfully created Team.

Redirecting...'); return; } @@ -178,7 +178,7 @@ class CreateTeam extends React.Component { (document.getElementById('upload-file') as HTMLFormElement).value = ''; - Router.push(`/team/${team.slug}/team-settings`); + Router.push(`/teams/${team.slug}/team-settings`); notify('You successfully created Team. Redirecting ...'); } catch (error) { diff --git a/book/10-end/app/pages/discussion.tsx b/book/10-end/app/pages/discussion.tsx index d75a9092..37c389cf 100644 --- a/book/10-end/app/pages/discussion.tsx +++ b/book/10-end/app/pages/discussion.tsx @@ -154,7 +154,7 @@ class DiscussionPageComp extends React.Component { if (!slug && currentTeam.discussions.length > 0) { Router.replace( `/discussion?teamSlug=${teamSlug}&discussionSlug=${currentTeam.orderedDiscussions[0].slug}`, - `/team/${teamSlug}/discussions/${currentTeam.orderedDiscussions[0].slug}`, + `/teams/${teamSlug}/discussions/${currentTeam.orderedDiscussions[0].slug}`, ); return; } diff --git a/book/10-end/app/pages/login.tsx b/book/10-end/app/pages/login.tsx index 1cbba80b..5250c487 100644 --- a/book/10-end/app/pages/login.tsx +++ b/book/10-end/app/pages/login.tsx @@ -22,7 +22,6 @@ class Login extends React.Component {

You’ll be logged in for 14 days unless you log out manually.


- diff --git a/book/10-end/app/pages/team-settings copy.tsx b/book/10-end/app/pages/team-settings copy.tsx new file mode 100644 index 00000000..61eb36a0 --- /dev/null +++ b/book/10-end/app/pages/team-settings copy.tsx @@ -0,0 +1,397 @@ +import Avatar from '@material-ui/core/Avatar'; +import Button from '@material-ui/core/Button'; +import Hidden from '@material-ui/core/Hidden'; +import TextField from '@material-ui/core/TextField'; +import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline'; +import { inject, observer } from 'mobx-react'; +import Head from 'next/head'; +import NProgress from 'nprogress'; +import * as React from 'react'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +import Layout from '../components/layout'; +import InviteMember from '../components/teams/InviteMember'; +import { + getSignedRequestForUploadApiMethod, + uploadFileUsingSignedPutRequestApiMethod, +} from '../lib/api/team-member'; +import confirm from '../lib/confirm'; +import notify from '../lib/notify'; +import { resizeImage } from '../lib/resizeImage'; +import { Store } from '../lib/store'; +import withAuth from '../lib/withAuth'; + +type Props = { isMobile: boolean; store: Store; teamSlug: string }; + +type State = { + newName: string; + newAvatarUrl: string; + disabled: boolean; + inviteMemberOpen: boolean; +}; + +class TeamSettings extends React.Component { + constructor(props) { + super(props); + + this.state = { + newName: this.props.store.currentTeam.name, + newAvatarUrl: this.props.store.currentTeam.avatarUrl, + disabled: false, + inviteMemberOpen: false, + }; + } + + public render() { + const { store, isMobile } = this.props; + const { currentTeam, currentUser } = store; + const { newName, newAvatarUrl } = this.state; + const isTeamLeader = currentTeam && currentUser && currentUser._id === currentTeam.teamLeaderId; + + // console.log(this.props.firstGridItem); + + if (!currentTeam || currentTeam.slug !== this.props.teamSlug) { + return ( + +
+

You did not select any team.

+

+ To access this page, please select existing team or create new team if you have no + teams. +

+
+ + ); + } + + if (!isTeamLeader) { + return ( + +
+

Only the Team Leader can access this page.

+

Create your own team to become a Team Leader.

+
+ + ); + } + + return ( + + + Team Settings + +
+

Team Settings

+

+
+

+

Team name

+ { + this.setState({ newName: event.target.value }); + }} + /> +
+
+ + +

+
+

Team logo

+ + + +

+
+
+

+ Team Members ( {Array.from(currentTeam.members.values()).length} / 20 ) +

+ +

+ + + + + Person + Role + Action + + + + + {currentTeam.memberIds + .map((userId) => currentTeam.members.get(userId)) + .map((m) => ( + + + + + + {m.email} + + + {isTeamLeader && m._id !== currentUser._id ? 'Team Member' : 'Team Leader'} + + + {isTeamLeader && m._id !== currentUser._id ? ( + + ) : null} + + + ))} + +
+ + +

+
+ + {Array.from(currentTeam.invitations.values()).length > 0 ? ( + +

Invited users

+

+ + + + + Email + Status + + + + + {Array.from(currentTeam.invitations.values()).map((i) => ( + + {i.email} + Sent + + ))} + +
+ + + ) : null} +

+
+ +
+

+ + ); + } + + private onSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + const { newName, newAvatarUrl } = this.state; + const { currentTeam } = this.props.store; + + if (!newName) { + notify('Team name is required'); + return; + } + + NProgress.start(); + + try { + this.setState({ disabled: true }); + + await currentTeam.updateTheme({ name: newName, avatarUrl: newAvatarUrl }); + + notify('You successfully updated Team name.'); + } catch (error) { + notify(error); + } finally { + this.setState({ disabled: false }); + NProgress.done(); + } + }; + + private uploadFile = async () => { + const { store } = this.props; + const { currentTeam } = store; + + const fileElement = document.getElementById('upload-file') as HTMLFormElement; + const file = fileElement.files[0]; + + if (file == null) { + notify('No file selected for upload.'); + return; + } + + const fileName = file.name; + const fileType = file.type; + + NProgress.start(); + this.setState({ disabled: true }); + + const bucket = process.env.BUCKET_FOR_TEAM_LOGOS; + const prefix = `${currentTeam.slug}`; + + console.log(bucket); + + try { + const responseFromApiServerForUpload = await getSignedRequestForUploadApiMethod({ + fileName, + fileType, + prefix, + bucket, + }); + + const resizedFile = await resizeImage(file, 128, 128); + + await uploadFileUsingSignedPutRequestApiMethod( + resizedFile, + responseFromApiServerForUpload.signedRequest, + { 'Cache-Control': 'max-age=2592000' }, + ); + + this.setState({ + newAvatarUrl: responseFromApiServerForUpload.url, + }); + + await currentTeam.updateTheme({ + name: this.state.newName, + avatarUrl: this.state.newAvatarUrl, + }); + + notify('You successfully uploaded new Team logo.'); + } catch (error) { + notify(error); + } finally { + this.setState({ disabled: false }); + NProgress.done(); + } + }; + + private openInviteMember = async () => { + const { currentTeam } = this.props.store; + if (!currentTeam) { + notify('You have not selected a Team.'); + return; + } + + const ifTeamLeaderMustBeCustomer = await currentTeam.checkIfTeamLeaderMustBeCustomer(); + + if (ifTeamLeaderMustBeCustomer) { + notify( + 'To add a third team member, you have to become a paid customer.' + + '

' + + ' To become a paid customer,' + + ' navigate to Billing page.', + ); + return; + } + + this.setState({ inviteMemberOpen: true }); + }; + + private handleInviteMemberClose = () => { + this.setState({ inviteMemberOpen: false }); + }; + + private removeMember = (event) => { + const { currentTeam } = this.props.store; + if (!currentTeam) { + notify('You have not selected a Team.'); + return; + } + + const userId = event.currentTarget.dataset.id; + if (!userId) { + notify('Select user.'); + return; + } + + confirm({ + title: 'Are you sure?', + message: '', + onAnswer: async (answer) => { + if (answer) { + try { + await currentTeam.removeMember(userId); + } catch (error) { + notify(error); + } + } + }, + }); + }; +} + +export default withAuth(inject('store')(observer(TeamSettings))); diff --git a/book/10-end/app/server/server.ts b/book/10-end/app/server/server.ts index e5d082c3..940c3874 100644 --- a/book/10-end/app/server/server.ts +++ b/book/10-end/app/server/server.ts @@ -44,26 +44,31 @@ app.prepare().then(() => { // res.json({ user: { email: 'team@builderbook.org' } }); // }); - server.get('/team/:teamSlug/team-settings', (req, res) => { + server.get('/teams/:teamSlug/your-settings', (req, res) => { + const { teamSlug } = req.params; + app.render(req, res, '/your-settings', { teamSlug }); + }); + + server.get('/teams/:teamSlug/team-settings', (req, res) => { const { teamSlug } = req.params; app.render(req, res, '/team-settings', { teamSlug }); }); - server.get('/team/:teamSlug/discussions/:discussionSlug', (req, res) => { + server.get('/teams/:teamSlug/billing', (req, res) => { + const { teamSlug } = req.params; + app.render(req, res, '/billing', { teamSlug, ...(req.query || {}) }); + }); + + server.get('/teams/:teamSlug/discussions/:discussionSlug', (req, res) => { const { teamSlug, discussionSlug } = req.params; app.render(req, res, '/discussion', { teamSlug, discussionSlug }); }); - server.get('/team/:teamSlug/discussions', (req, res) => { + server.get('/teams/:teamSlug/discussions', (req, res) => { const { teamSlug } = req.params; app.render(req, res, '/discussion', { teamSlug }); }); - server.get('/team/:teamSlug/billing', (req, res) => { - const { teamSlug } = req.params; - app.render(req, res, '/billing', { teamSlug, ...(req.query || {}) }); - }); - server.get('/signup', (req, res) => { app.render(req, res, '/login'); }); diff --git a/book/2-end/app/pages/_app.tsx b/book/2-end/app/pages/_app.tsx index b817958b..04f45892 100644 --- a/book/2-end/app/pages/_app.tsx +++ b/book/2-end/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/3-begin/app/pages/_app.tsx b/book/3-begin/app/pages/_app.tsx index b817958b..04f45892 100644 --- a/book/3-begin/app/pages/_app.tsx +++ b/book/3-begin/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/3-end/app/pages/_app.tsx b/book/3-end/app/pages/_app.tsx index 7ad38d13..b038a7f8 100644 --- a/book/3-end/app/pages/_app.tsx +++ b/book/3-end/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/4-begin/app/pages/_app.tsx b/book/4-begin/app/pages/_app.tsx index 7ad38d13..b038a7f8 100644 --- a/book/4-begin/app/pages/_app.tsx +++ b/book/4-begin/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/4-end/app/pages/_app.tsx b/book/4-end/app/pages/_app.tsx index 7ad38d13..b038a7f8 100644 --- a/book/4-end/app/pages/_app.tsx +++ b/book/4-end/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/5-begin/app/pages/_app.tsx b/book/5-begin/app/pages/_app.tsx index 7ad38d13..b038a7f8 100644 --- a/book/5-begin/app/pages/_app.tsx +++ b/book/5-begin/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { const pageProps = { isMobile: isMobile({ req: ctx.req }), firstGridItem: true }; diff --git a/book/5-end/app/pages/_app.tsx b/book/5-end/app/pages/_app.tsx index 18488c87..810a0b2f 100644 --- a/book/5-end/app/pages/_app.tsx +++ b/book/5-end/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { let firstGridItem = true; diff --git a/book/6-begin/app/pages/_app.tsx b/book/6-begin/app/pages/_app.tsx index 18488c87..810a0b2f 100644 --- a/book/6-begin/app/pages/_app.tsx +++ b/book/6-begin/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { let firstGridItem = true; diff --git a/book/6-end/app/pages/_app.tsx b/book/6-end/app/pages/_app.tsx index 18488c87..810a0b2f 100644 --- a/book/6-end/app/pages/_app.tsx +++ b/book/6-end/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { let firstGridItem = true; diff --git a/book/7-begin/app/pages/_app.tsx b/book/7-begin/app/pages/_app.tsx index 18488c87..810a0b2f 100644 --- a/book/7-begin/app/pages/_app.tsx +++ b/book/7-begin/app/pages/_app.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isMobile } from '../lib/isMobile'; import { themeDark, themeLight } from '../lib/theme'; -class MyApp extends App<{ isMobile: boolean }> { +class MyApp extends App { public static async getInitialProps({ Component, ctx }) { let firstGridItem = true; diff --git a/book/7-end/app/pages/_app.tsx b/book/7-end/app/pages/_app.tsx index 4a848977..a3c1d3a5 100644 --- a/book/7-end/app/pages/_app.tsx +++ b/book/7-end/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/8-begin/app/pages/_app.tsx b/book/8-begin/app/pages/_app.tsx index 4a848977..a3c1d3a5 100644 --- a/book/8-begin/app/pages/_app.tsx +++ b/book/8-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/8-end/app/pages/_app.tsx b/book/8-end/app/pages/_app.tsx index 5003eb76..2918344b 100644 --- a/book/8-end/app/pages/_app.tsx +++ b/book/8-end/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/9-begin/app/pages/_app.tsx b/book/9-begin/app/pages/_app.tsx index 5003eb76..2918344b 100644 --- a/book/9-begin/app/pages/_app.tsx +++ b/book/9-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/9-end/app/pages/_app.tsx b/book/9-end/app/pages/_app.tsx index 5003eb76..2918344b 100644 --- a/book/9-end/app/pages/_app.tsx +++ b/book/9-end/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/saas/api/server/google-auth.ts b/saas/api/server/google-auth.ts index 5aebec21..82e08fe7 100644 --- a/saas/api/server/google-auth.ts +++ b/saas/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/saas/api/server/passwordless-auth.ts b/saas/api/server/passwordless-auth.ts index 5f5adffb..db3748b9 100644 --- a/saas/api/server/passwordless-auth.ts +++ b/saas/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/saas/api/server/stripe.ts b/saas/api/server/stripe.ts index 1e774fcd..87881e85 100644 --- a/saas/api/server/stripe.ts +++ b/saas/api/server/stripe.ts @@ -41,7 +41,7 @@ function createSession({ }/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 }, }; @@ -188,13 +188,13 @@ function stripeWebhookAndCheckoutCallback({ server }: { server: express.Applicat } 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/saas/app/components/discussions/CreateDiscussionForm.tsx b/saas/app/components/discussions/CreateDiscussionForm.tsx index 5e4b5152..4b3eaa0c 100644 --- a/saas/app/components/discussions/CreateDiscussionForm.tsx +++ b/saas/app/components/discussions/CreateDiscussionForm.tsx @@ -239,7 +239,7 @@ class CreateDiscussionForm extends React.Component { 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, @@ -254,7 +254,7 @@ class CreateDiscussionForm extends React.Component { 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/saas/app/components/discussions/DiscussionActionMenu.tsx b/saas/app/components/discussions/DiscussionActionMenu.tsx index 8f582d6c..e3cec615 100644 --- a/saas/app/components/discussions/DiscussionActionMenu.tsx +++ b/saas/app/components/discussions/DiscussionActionMenu.tsx @@ -105,7 +105,7 @@ class DiscussionActionMenu extends React.Component { 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/saas/app/components/discussions/DiscussionListItem.tsx b/saas/app/components/discussions/DiscussionListItem.tsx index 9d34f62c..a66a4024 100644 --- a/saas/app/components/discussions/DiscussionListItem.tsx +++ b/saas/app/components/discussions/DiscussionListItem.tsx @@ -22,7 +22,7 @@ class DiscussionListItem extends React.Component { 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 { { 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/saas/app/lib/store/team.ts b/saas/app/lib/store/team.ts index 2b18f073..4c3ca9e4 100644 --- a/saas/app/lib/store/team.ts +++ b/saas/app/lib/store/team.ts @@ -270,10 +270,10 @@ class Team { Router.push( `/discussion?teamSlug=${this.slug}&discussionSlug=${d.slug}`, - `/team/${this.slug}/discussions/${d.slug}`, + `/teams/${this.slug}/discussions/${d.slug}`, ); } else { - Router.push(`/discussion?teamSlug=${this.slug}`, `/team/${this.slug}/discussions`); + Router.push(`/discussion?teamSlug=${this.slug}`, `/teams/${this.slug}/discussions`); } } }); diff --git a/saas/app/lib/withAuth.tsx b/saas/app/lib/withAuth.tsx index c16e61a0..5bb90f24 100644 --- a/saas/app/lib/withAuth.tsx +++ b/saas/app/lib/withAuth.tsx @@ -66,8 +66,8 @@ export default function withAuth(Component, { loginRequired = true, logoutRequir } else { // redirectUrl = `/your-settings`; // asUrl = `/your-settings`; - redirectUrl = `/team/${user.defaultTeamSlug}/discussions`; - asUrl = `/team/${user.defaultTeamSlug}/discussions`; + redirectUrl = `/teams/${user.defaultTeamSlug}/discussions`; + asUrl = `/teams/${user.defaultTeamSlug}/discussions`; } } diff --git a/saas/app/pages/_app.tsx b/saas/app/pages/_app.tsx index fdd83327..7176d1d8 100644 --- a/saas/app/pages/_app.tsx +++ b/saas/app/pages/_app.tsx @@ -25,6 +25,7 @@ class MyApp extends App { } if ( + ctx.pathname.includes('/your-settings') || // because of MenuWithLinks inside `Layout` HOC ctx.pathname.includes('/team-settings') || ctx.pathname.includes('/discussion') || ctx.pathname.includes('/billing') @@ -94,6 +95,8 @@ class MyApp extends App { }); } + console.log('App', selectedTeamSlug, team); + return { ...appProps, initialState: { diff --git a/saas/app/pages/_document.tsx b/saas/app/pages/_document.tsx index c4c02df7..e3926de5 100644 --- a/saas/app/pages/_document.tsx +++ b/saas/app/pages/_document.tsx @@ -56,7 +56,14 @@ class MyDocument extends Document { type="font/woff2" /> - +