I’m trying to display to the user menu items ‘Account’ and ‘Log-out’ instead of ‘Log-in’ and ‘Sign-up’ after he loggs in.
I have set up express-session currectly and when the user loggs in I set:
request.session.user = { email: email, name… }
When the user navigate to the site at entry-server.tsx I test if the user is logged in and see the session info currectly (at the console.log…) then I pass the loggedIn boolean to the App component and from there to the Navbar component.
At the entry-client.tsx I don’t pass to App component nothing as the loggedIn parameter is optional.
I expected the server side HTML will be displyed.
What am I missing here, looking for direction don’t understand how to acomplish this
file entry-client.tsx
import './index.css';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.hydrateRoot(
document.getElementById('root') as HTMLElement,
<BrowserRouter>
<App />
</BrowserRouter>
);
file entry-server.tsx
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';
export const render = (request: any) => {
const loggedIn = (request.session?.user !== undefined);
console.log('loggedIn=' + loggedIn + ' session =', request.session?.user);
const html = ReactDOMServer.renderToString(
<StaticRouter location={request.originalUrl}>
<App loggedIn={loggedIn} />
</StaticRouter>
);
return { html };
};
file App.tsx (truncated version)
interface Props {
loggedIn?: boolean;
}
function App({ loggedIn }: Props) {
console.log('loggedIn', loggedIn);
return (
<div>
<div className={`h-screen overflow-y-auto bg-${theme}-colorA px-2 py-4`}>
<div className='flex flex-row justify-center'>
<div className={`w-[1256px]`}>
<div className='flex flex-col'>
<div><Navbar className='' theme={theme} icons={icons} texts={texts} themes={themes} isLoggedIn={(undefined !== loggedIn) ? loggedIn : false} onThemeClick={(name) => setTheme(name)}/></div>
</div>
<Routes>
<Route path={path.Home.href} element={<PageHome />} />
<Route path={path.DocsAndSupport.href} element={<PageDocsAndSupport />} />
<Route path={path.Blogs.href} element={<PageBlogs />} />
<Route path={path.Products.href} element={<PageProducts />} />
<Route path={path.Pricing.href} element={<PagePricing />} />
<Route path={path.Services.href} element={<PageServices />} />
<Route path={path.ContactUs.href} element={<PageContactUs theme={theme} />} />
<Route path={path.ShoppingCart.href} element={<PageShoppingCart />} />
<Route path={path.LogIn.href} element={<PageLogIn theme={theme} />} />
<Route path={path.SignUp.href} element={<PageSignUp theme={theme} />} />
<Route path={path.Account.href} element={<PageAccount theme={theme} />} />
</Routes>
</div>
</div>
</div>
</div>
);
};
export default App;
file Navbar.tsx (truncated version)
const Navbar = ({ isLoggedIn }: Props) => {
console.log('isLoggedIn', isLoggedIn);
return (
<div className={`flex flex-row justify-between ${className}`}>
.
.
.
<ul className={`absolute top-[39px] right-0 w-[180px] bg-${theme}-colorA border-x border-t border-${theme}-colorB`}>
{ isLoggedIn ? (
<>
<a href={path.Account.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.Account.text}</li></a>
<a href={path.LogOut.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.LogOut.text}</li></a>
</>
) : (
<>
<a href={path.LogIn.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.LogIn.text}</li></a>
<a href={path.SignUp.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.SignUp.text}</li></a>
</>
)}
</ul>
.
.
.
</div>
);
};
export default Navbar;