components/header.js
// rendering, and avoids any flash incorrect content on initial page load.
rendering, and avoids any flash incorrect content on initial page load.
rendering and avoids any flash incorrect content on initial page load .
function Header () {
  const { SET_CURRENT_USER } = types
  const [ session, loading ] = useSession()
  const dispatch = useDispatch()
  useEffect(() => {
    if (session) {
      const user = {
        email : session.user.email,
        name : session.user.name
      }
      dispatch({
        type : SET_CURRENT_USER,
        payload : user
      })
    }
  }, [session])
  return (
    <header>
      <noscript>
        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
      </noscript>
      <div className={styles.signedInStatus}>
        <p className={`nojs-show ${(!session && loading) ? styles.loading : styles.loaded}`}>
          {!session && <>
            <span className={styles.notSignedInText}>You are not signed in</span>
            <a
                href={`/api/auth/signin`}
                className={styles.buttonPrimary}
                onClick={(e) => {
                  e.preventDefault()
                  signIn()
                }}
              >
                Sign in
              </a>
          </>}
          {session && <>
            {session.user.image && <span style={{backgroundImage: `url(${session.user.image})` }} className={styles.avatar}/>}
            <span className={styles.signedInText}>
              <small>Signed in as</small><br/>
              <strong>{session.user.email || session.user.name}</strong>
              </span>
            <a
                href={`/api/auth/signout`}
                className={styles.button}
                onClick={(e) => {
                  e.preventDefault()
                  signOut()
                }}
              >
                Sign out
              </a>
          </>}
        </p>
      </div>
      <nav>
        <ul className={styles.navItems}>
          <li className={styles.navItem}><Link href="/"><a>Home</a></Link></li>
          <li className={styles.navItem}><Link href="/client"><a>Client</a></Link></li>
          <li className={styles.navItem}><Link href="/server"><a>Server</a></Link></li>
          <li className={styles.navItem}><Link href="/protected"><a>Protected</a></Link></li>
          <li className={styles.navItem}><Link href="/api-example"><a>API</a></Link></li>
        </ul>
      </nav>
    </header>
  )
}
function Header ( ) { const { SET_CURRENT_USER } = types const [ session , loading ] = useSession ( ) const dispatch = useDispatch ( ) useEffect ( ( ) => { if ( session ) { const user = { email : session . user . email , name : session . user . name } dispatch ( { type : SET_CURRENT_USER , payload : user } ) } } , [ session ] ) return ( < header > < noscript > < style > { ` ` } < / style > < / noscript > < div className = { styles . signedInStatus } > < p className = { ` ${ ( ! session && loading ) ? styles . loading : styles . loaded } ` } > { ! session && < > < span className = { styles . notSignedInText } > You are not signed in < / span > < a href = { ` ` } className = { styles . buttonPrimary } onClick = { ( e ) => { e . preventDefault ( ) signIn ( ) } } > 
                Sign in
               < / a > < / > } { session && < > { session . user . image && < span style = { { backgroundImage : ` ${ session . user . image } ` } } className = { styles . avatar } / > } < span className = { styles . signedInText } > < small > Signed in as < / small > < br / > < strong > { session . user . email || session . user . name } < / strong > < / span > < a href = { ` ` } className = { styles . button } onClick = { ( e ) => { e . preventDefault ( ) signOut ( ) } } > 
                Sign out
               < / a > < / > } < / p > < / div > < nav > < ul className = { styles . navItems } > < li className = { styles . navItem } > < Link href = "/" > < a > Home < / a > < / Link > < / li > < li className = { styles . navItem } > < Link href = "/client" > < a > Client < / a > < / Link > < / li > < li className = { styles . navItem } > < Link href = "/server" > < a > Server < / a > < / Link > < / li > < li className = { styles . navItem } > < Link href = "/protected" > < a > Protected < / a > < / Link > < / li > < li className = { styles . navItem } > < Link href = "/api-example" > < a > API < / a > < / Link > < / li > < / ul > < / nav > < / header > ) }
rendering, and avoids any flash incorrect content on initial page load.
rendering and avoids any flash incorrect content on initial page load .