Pass query string param of login type on nav button clicks to load login form on right setting

[joelwass]

Currently, if I click "I'm a teacher" within the nav, the login form loads but with the default setting of "i'm a donor" selected in the toggle above the sign in form.

let's pass a query string param ?type=teacher with the navigation with "I'm a teacher" is selected, and then grab it off the query string param in the login page and pass it in as a prop to the loginForm component.

[SahibArora]

Hi @joelwass, I can help on this one.
Thanks,

[SahibArora]

Hi,
I was working on it but I am stuck here:

            <Link href='/signinregister' param={{type:'teacher'}}><a className='black ttu'>I'm a teacher</a></Link>```


How can I access the parameters in signinregister?

[joelwass]

Use this https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

what that means is in the signinregister.js page you'll wrap the page export in withRouter.
then you'll access the router in the constructor of the signinregister.js:
const SignInSignUp = ({ router }) => (
then you'll pass in as a prop to the loginForm component:
type={router.query.type}

then you should access the type in the loginForm just with this.props.type and check if it's equal to 'teacher'

[stripedpajamas]

It might be better to use the built-in getInitialProps in the page component (https://github.com/zeit/next.js/tree/master#fetching-data-and-component-lifecycle).

It would look something like this:

const SignInSignUp = (props) => {
  // markup
  // props.teacher is true if teacher query was passed
}

SignInSignUp.getInitialProps = async ({ query }) => {
  console.log(query) // { type: 'teacher' }
  return { teacher: query.type === 'teacher' }
}

[joelwass]

@SahibArora Definitely go with @stripedpajamas suggestion to avoid use of a HOC when not necessary

after adding the getInitialProps method that @stripedpajamas outlined, you can pass in the type prop to loginForm like i mentioned with type={props.teacher}

[SahibArora]

Thank you for your help @joelwass and @stripedpajamas. I will continue further on it.

[SahibArora]

Hello again,
One good thing, I am very close.

Just one thing,
When I use the getInitialProps()

SignInSignUp.getInitialProps = async ({ query }) => { console.log(query.type) /* It gives me undefined */ return { teacher: query.type === 'teacher' } }

This is how I passed the parameters through Link -

<Link href={{pathname:'/signinregister', query:{type:'teacher'}}}><a className='black ttu'>I'm a teacher</a></Link>

Do you have any suggestions on this one, that why am I receiving the undefined.

[joelwass]

I think you can just pass it into the Link component as follows:

<Link href='/signinregister?type=teacher' />

[stripedpajamas]

@SahibArora Your getInitialProps func looks good. To pass in the query edit nav.js where it says

{ href: '/signinregister', label: 'I\'m a teacher' }
change it to
{ href: '/signinregister?type=teacher', label: 'I\'m a teacher' }

[joelwass]

also if you could pass in type=donor for the donor links, that'd be great. Thanks @SahibArora !

[SahibArora]

I did the type=donor already. Will try your suggestion now.
Thank you, again for your help :)

[SahibArora]

It worked, perfect!
Thank you!
Will create the pull request now.