Added a new page, can't get it to load
Hi I am new here so please bear with the newbie question!
I am using the default saas template [option 3 when running wasp new]. In the main.wasp file I have created a new route and page, and also created the tsx file for the page and referenced it's location correctly. However the page is blank when I navigate to it in my browser. Note sure what I am doing wrongly
main.wasp code
ClientPage.tsx in src/client-page/
I am using the default saas template [option 3 when running wasp new]. In the main.wasp file I have created a new route and page, and also created the tsx file for the page and referenced it's location correctly. However the page is blank when I navigate to it in my browser. Note sure what I am doing wrongly
main.wasp code
//#region Client
route ClientRoute { path: "/client", to: ClientPage }
page ClientPage {
authRequired: true,
component: import ClientPage from "@src/client-page/ClientPage"
}
//#endregion
ClientPage.tsx in src/client-page/
import React, { useState } from 'react';
import { useAuth } from 'wasp/client/auth';
function ClientPage() {
const [clientName, setClientName] = useState('');
const [clientDescription, setClientDescription] = useState('');
const { data: user, isLoading, error } = useAuth();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const handleClientSubmit = async (event) => {
event.preventDefault();
// Add your API call to save the client's company name and description here
console.log('Submitting:', { clientName, clientDescription });
};
return (
<div>
<h1>Client Page</h1>
<p>Welcome, {user?.email}</p>
<form onSubmit={handleClientSubmit}>
<label>Company Name:</label>
<input
type="text"
value={clientName}
onChange={(e) => setClientName(e.target.value)}
/>
<br />
<label>Description:</label>
<textarea
value={clientDescription}
onChange={(e) => setClientDescription(e.target.value)}
/>
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default ClientPage;
