Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Turbo >

CHAPTER

Turbo Stream for Instant Review Update

Buy Access to Course
Next Chapter

Challenge #1 of 1

Q: 

Following up with my chat message test, I came up with the right stream template to add the new messages to our users chat log.

<turbo-stream action="update" id="new-messages-{{ chat.id }}">
    <template>
        {% for message in chat.newMessages %}
            <div class="message">
                <span class="user">{{ message.from }}</span>:
                {{ message.text }}
            </div>
        {% endfor %}
    </template>
</turbo-stream>

Now, whenever a user submits the form to send a message, I'd like to return an empty form to reset the user's chat and stream the new messages to all chatrooms.

What would the code for this action look like?

a) 
public function chatAction(Request $request, HubInterface $mercureHub): Response
{
    $form = $this->createForm(ChatFormType::class);    
    
    $emptyForm = clone $form;
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // ...
   
        $mercureHub->publish(new Update(
            'new-messages',
            $this->render('_newMessages.html.twig', [ 'chat' => $data ]),
        ));

        $form = $emptyForm;
    }

    return $this->renderForm('_chatForm.html.twig');
}
b) 
public function chatAction(Request $request, HubInterface $mercureHub): Response
{
    $form = $this->createForm(ChatFormType::class);    
    
    $emptyForm = clone $form;
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // ...
   
        $mercureHub->publish(new Update(
            'new-messages',
            $this->renderView('_chatForm.html.twig', [ 'form' => $form ]),
        ));

        $form = $emptyForm;
    }

    return $this->render('_newMessages.html.twig', [ 'chat' => $data ]);
}
c) 
public function chatAction(Request $request, HubInterface $mercureHub): Response
{
    $form = $this->createForm(ChatFormType::class);
    
    $emptyForm = clone $form;
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // ...

        $form = $emptyForm;

        return $this->renderForm($emptyform, [ 'form' => $form ]);
    }

    return $this->render('_newMessages.html.twig', [ 'chat' => $data ]);
}
d) 
public function chatAction(Request $request, HubInterface $mercureHub): Response
{
    $form = $this->createForm(ChatFormType::class);
    $emptyForm = clone $form;
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // ...
   
        $mercureHub->publish(new Update(
            'new-messages',
            $this->renderView('_newMessages.html.twig', [ 'chat' => $data ]),
        ));

        $form = $emptyForm;
    }

    return $this->renderForm('_chatForm.html.twig', [ 'form' => $form ]);
}
Rewatch Video
userVoice