discussion page scroll UX, invitation fix

Author: tima101

saas/api/server/google-auth.ts

@@ -11,7 +11,7 @@ function setupGoogle({ server }) {
  return;
  }
 
- const verify = async (accessToken, refreshToken, profile, done) => {
+ const verify = async (req, accessToken, refreshToken, profile, done) => {
  let email;
  let avatarUrl;
 
@@ -32,6 +32,13 @@ function setupGoogle({ server }) {
  avatarUrl,
  });
 
+ if (user && req.session.invitationToken) {
+ await Invitation.addUserToTeam({
+ token: req.session.invitationToken,
+ user,
+ }).catch((err) => console.error(err));
+ }
+
  done(null, user);
  } catch (err) {
  done(err);
@@ -45,6 +52,7 @@ function setupGoogle({ server }) {
  clientID: process.env.GOOGLE_CLIENTID,
  clientSecret: process.env.GOOGLE_CLIENTSECRET,
  callbackURL: `${dev ? process.env.URL_API : process.env.PRODUCTION_URL_API}/oauth2callback`,
+ passReqToCallback: true,
  },
  verify,
  ),
@@ -84,31 +92,10 @@ function setupGoogle({ server }) {
  failureRedirect: '/login',
  }),
  async (req, res) => {
- let teamSlugOfInvitedTeam;
-
- if (req.user && req.session.invitationToken) {
- teamSlugOfInvitedTeam = await Invitation.addUserToTeam({
- token: req.session.invitationToken,
- user: req.user,
- }).catch((err) => console.error(err));
-
- req.session.invitationToken = null;
- }
-
- let redirectUrlAfterLogin;
-
- // console.log(req.user.defaultTeamSlug, teamSlugOfInvitedTeam);
-
- if (req.user && teamSlugOfInvitedTeam) {
- redirectUrlAfterLogin = `/teams/${teamSlugOfInvitedTeam}/discussions`;
- } else if (req.user && !teamSlugOfInvitedTeam && req.user.defaultTeamSlug) {
- redirectUrlAfterLogin = `/teams/${req.user.defaultTeamSlug}/discussions`;
- } else if (req.user && !teamSlugOfInvitedTeam && !req.user.defaultTeamSlug) {
- redirectUrlAfterLogin = `/create-team`;
- }
-
  res.redirect(
- `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}${redirectUrlAfterLogin}`,
+ `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
+ req.user.defaultTeamSlug
+ }/your-settings`,
  );
  },
  );

saas/api/server/passwordless-auth.ts

@@ -89,31 +89,21 @@ function setupPasswordless({ server }) {
  }
  },
  async (req, res) => {
- let teamSlugOfInvitedTeam;
 
  if (req.user && req.session.invitationToken) {
- teamSlugOfInvitedTeam = await Invitation.addUserToTeam({
+ await Invitation.addUserToTeam({
  token: req.session.invitationToken,
  user: req.user,
  }).catch((err) => console.error(err));
 
  req.session.invitationToken = null;
  }
 
- let redirectUrlAfterLogin;
-
  // console.log(req.user.defaultTeamSlug, teamSlugOfInvitedTeam);
-
- if (req.user && teamSlugOfInvitedTeam) {
- redirectUrlAfterLogin = `/teams/${teamSlugOfInvitedTeam}/discussions`;
- } else if (req.user && !teamSlugOfInvitedTeam && req.user.defaultTeamSlug) {
- redirectUrlAfterLogin = `/teams/${req.user.defaultTeamSlug}/discussions`;
- } else if (req.user && !teamSlugOfInvitedTeam && !req.user.defaultTeamSlug) {
- redirectUrlAfterLogin = `/create-team`;
- }
-
  res.redirect(
- `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}${redirectUrlAfterLogin}`,
+ `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
+ req.user.defaultTeamSlug
+ }/your-settings`,
  );
  },
  );

saas/app/components/layout/index.tsx

@@ -21,6 +21,7 @@ const styleGrid = {
  height: '100vh',
  maxWidth: '100%',
  padding: '0px 10px',
+ display: 'flex',
  overflow: 'hidden',
 };
 
@@ -29,6 +30,7 @@ const styleGridIsMobile = {
  height: '100vh',
  maxWidth: '100%',
  padding: '0px 0px 0px 10px',
+ display: 'flex',
  overflow: 'hidden',
 };
 
@@ -62,7 +64,8 @@ function LayoutWrapper({
  style={{
  borderRight: '1px #707070 solid',
  justifyContent: 'center',
- height: '100vh',
+ height: '100%',
+ overflow: 'hidden',
  }}
  >
  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -204,7 +207,7 @@ class Layout extends React.Component<Props> {
  item
  sm={10}
  xs={12}
- style={{ padding: '0px 35px', overflow: 'auto', minHeight: '100%' }}
+ style={{ padding: '0px 35px', overflow: 'auto', height: 'auto' }}
  >
  <div style={{ padding: '20px' }}>
  Select existing team or create a new team.
@@ -226,7 +229,7 @@ class Layout extends React.Component<Props> {
  item
  sm={10}
  xs={12}
- style={{ padding: '0px 35px', overflow: 'auto', minHeight: '100%' }}
+ style={{ padding: '0px 35px', overflow: 'auto', height: 'auto' }}
  >
  {children}
  </Grid>
@@ -241,7 +244,7 @@ class Layout extends React.Component<Props> {
  item
  sm={firstGridItem ? 10 : 12}
  xs={12}
- style={{ padding: '0px 35px', overflow: 'auto', minHeight: '100%' }}
+ style={{ padding: '0px 35px', overflowY: 'auto', height: 'auto' }}
  >
  <div>
  {isMobile || store.currentUrl.includes('create-team') ? null : (

saas/app/pages/_document.tsx

@@ -33,6 +33,10 @@ function MyDocument({ __NEXT_DATA__ }: { __NEXT_DATA__: any }) {
 
  <style>
  {`
+ #__next {
+ width: 100%;
+ height: 100%;
+ }
  a {
  font-weight: 400;
  color: #58a6ff;

saas/app/pages/discussion.tsx

@@ -23,6 +23,7 @@ type Props = {
  isServer: boolean;
  isMobile: boolean;
  firstGridItem: boolean;
+ teamRequired: boolean;
 };
 
 function DiscussionPageCompFunctional({
@@ -32,6 +33,7 @@ function DiscussionPageCompFunctional({
  isServer,
  isMobile,
  firstGridItem,
+ teamRequired,
 }: Props) {
  const [selectedPost, setSelectedPost] = useState<Post>(null);
  const [showMarkdownClicked, setShowMarkdownClicked] = useState<boolean>(false);
@@ -213,7 +215,12 @@ function DiscussionPageCompFunctional({
 
  if (!currentTeam || currentTeam.slug !== teamSlug) {
  return (
- <Layout store={store} isMobile={isMobile} firstGridItem={firstGridItem}>
+ <Layout
+ store={store}
+ isMobile={isMobile}
+ firstGridItem={firstGridItem}
+ teamRequired={teamRequired}
+ >
  <Head>
  <title>No Team is found.</title>
  </Head>
@@ -227,7 +234,12 @@ function DiscussionPageCompFunctional({
  if (!discussion) {
  if (currentTeam.isLoadingDiscussions) {
  return (
- <Layout store={store} isMobile={isMobile} firstGridItem={firstGridItem}>
+ <Layout
+ store={store}
+ isMobile={isMobile}
+ firstGridItem={firstGridItem}
+ teamRequired={teamRequired}
+ >
  <Head>
  <title>Loading...</title>
  </Head>
@@ -238,7 +250,12 @@ function DiscussionPageCompFunctional({
  );
  } else {
  return (
- <Layout store={store} isMobile={isMobile} firstGridItem={firstGridItem}>
+ <Layout
+ store={store}
+ isMobile={isMobile}
+ firstGridItem={firstGridItem}
+ teamRequired={teamRequired}
+ >
  <Head>
  <title>No Discussion is found.</title>
  </Head>
@@ -253,11 +270,16 @@ function DiscussionPageCompFunctional({
  const title = discussion ? `${discussion.name} · Discussion` : 'Discussions';
 
  return (
- <Layout store={store} isMobile={isMobile} firstGridItem={firstGridItem}>
+ <Layout
+ store={store}
+ isMobile={isMobile}
+ firstGridItem={firstGridItem}
+ teamRequired={teamRequired}
+ >
  <Head>
  <title>{title}</title>
  </Head>
- <div style={{ padding: isMobile ? '0px' : '0px 30px' }}>
+ <div style={{ padding: isMobile ? '0px' : '0px 30px', height: '100vh' }}>
  <h4>
  <span style={{ fontWeight: 300 }}>Discussion : </span>
  {(discussion && discussion.name) || 'No Discussion is found.'}

saas/app/pages/your-settings.tsx

@@ -142,7 +142,6 @@ function YourSettings({ store, isMobile, firstGridItem, teamRequired }: Props) {
  <div
  style={{
  padding: isMobile ? '0px' : '0px 30px',
- fontSize: '15px',
  height: '100%',
  }}
  >

saas/app/server/server.ts

@@ -77,7 +77,9 @@ app.prepare().then(() => {
  app.render(req, res, '/login');
  });
 
- // token for invitation page
+ server.get('/invitation', (req, res) => {
+ app.render(req, res, '/invitation', { token: req.query.token as string });
+ });
 
  setupSitemapAndRobots({ server });