Hi I stuck in Vaadin Hilla tutorial - please for your help

Hilla
1

There is a sentence in this tutorial https://vaadin.com/docs/latest/getting-started/tutorial/hilla/first-view

“You should now see the channel view again, and the name of the channel should be visible on the browser tab.”

I did everything according to the tutorial and have no idea why it does not work.
Once I choose some link from logs e.g . http://localhost:8080/channel/ba6d5af9-da5b-4e8d-836b-9c00971fda75
I got just this:

image
image829×353 28.6 KB

I cannot see any helpful logs what’s going on.

2

Did it work in the previous step before you changed the view to fetch channel information?

3 
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageInput } from '@vaadin/react-components/MessageInput';
import { MessageList } from '@vaadin/react-components/MessageList';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
import Channel from 'Frontend/generated/com/example/application/chat/Channel';
import { ChatService } from 'Frontend/generated/endpoints';

export default function ChannelView() {
    const { channelId } = useParams();
    const channel = useSignal<Channel | undefined>(undefined);
    const navigate = useNavigate();
 
    return (
        <VerticalLayout theme="padding spacing" className="h-full">
            <MessageList className="h-full w-full border" />
            <MessageInput className="w-full" />
        </VerticalLayout>
    );
}

This is my code now. App acts in the same way now and when I add the code from " Fetch Channel Information" chapter: when I click the link /channel/1000 I can see chat view, but when I go to some url with generated ID I got this screenshot which I attached before.

4

What’s the name and path (views/channel/....) of the file where you have defined ChannelView?

5

index.tsx is inside this dir:
views/channel/1000

6

That’s the reason then. You have mapped the channel view to the exact string 1000. You want the file name to be views/channel/{channelId}.tsx to capture the channel id into the parameter you read with useParams()

7

Many thanks! - that was my mistake that I put ‘1000’ as the dir name. But I think this

image
image1625×962 106 KB

suggests, that the path should be views/channel/{channelId}/@index.tsx
or maybe I do not understand this syntax.

8

That should work the same, yes.

1 Like