F
Filament•2y ago
Andrew Wallo

Emit Livewire Event from one component to a Custom Dropdown Menu to refresh nav data on save?

I have the following Component that is used for a custom dropdown navigation. 
<?php

namespace Wallo\FilamentCompanies\Http\Livewire;

use Illuminate\Contracts\View\View;
use Livewire\Component;

class NavigationMenu extends Component
{
    /**
     * The component's listeners.
     *
     * @var array<string, string>
     */
    protected $listeners = [
        'refresh-navigation-menu' => '$refresh',
    ];

    /**
     * Render the component.
     */
    public function render(): View
    {
        return view('filament-companies::dropdown.navigation-menu');
    }
}
<?php

namespace Wallo\FilamentCompanies\Http\Livewire;

use Illuminate\Contracts\View\View;
use Livewire\Component;

class NavigationMenu extends Component
{
    /**
     * The component's listeners.
     *
     * @var array<string, string>
     */
    protected $listeners = [
        'refresh-navigation-menu' => '$refresh',
    ];

    /**
     * Render the component.
     */
    public function render(): View
    {
        return view('filament-companies::dropdown.navigation-menu');
    }
}
It it registered to this hook in boot: 
Filament::registerRenderHook(
                'global-search.start',
                static fn (): View => view('filament-companies::components.dropdown.navigation-menu'),
            );
Filament::registerRenderHook(
                'global-search.start',
                static fn (): View => view('filament-companies::components.dropdown.navigation-menu'),
            );
It is used, for example, when someone updates their company name in a separate component in a form: 
/**
     * Update the company's name.
     */
    public function updateCompanyName(UpdatesCompanyNames $updater): void
    {
        $this->resetErrorBag();

        $updater->update($this->user, $this->company, $this->state);

        Notification::make()
        ->title(__('filament-companies::default.notifications.company_name_updated.title'))
        ->success()
        ->body(__('filament-companies::default.notifications.company_name_updated.body', ['name' => $this->state['name']]))
        ->send();

        $this->emit('refresh-navigation-menu');
    }
/**
     * Update the company's name.
     */
    public function updateCompanyName(UpdatesCompanyNames $updater): void
    {
        $this->resetErrorBag();

        $updater->update($this->user, $this->company, $this->state);

        Notification::make()
        ->title(__('filament-companies::default.notifications.company_name_updated.title'))
        ->success()
        ->body(__('filament-companies::default.notifications.company_name_updated.body', ['name' => $this->state['name']]))
        ->send();

        $this->emit('refresh-navigation-menu');
    }
The following works for Jetstream, but not Filament. It isn't completely necessary but would be nice for it to update instantly after a form is saved, but as always they can refresh the browser...
11 Replies
LeandroFerreira
LeandroFerreira•2y ago
You can render the livewire component: 
use Illuminate\Support\Facades\Blade;
fn (): string => Blade::render('@livewire(\'my-component\')'),
use Illuminate\Support\Facades\Blade;
fn (): string => Blade::render('@livewire(\'my-component\')'),
Andrew Wallo
Andrew WalloOP•2y ago
Are you saying to use this instead of $this->emit('refresh-navigation-menu'); ? Or in the render hook in the service provider? The way the Hook is rendered is correct. The problem is that it is not updating right after a form is saved, people have to refresh the page for it to show in the dropdown navigation menu that it is updated, in the form it is updated right after but not the dropdown.. so I'm still curious as to what you mean...
Tin
Tin•2y ago
Did you try to debug and see if that component is actually catching an event? Also, you are rendering only the blade file, without having any data in component, is that ok?
Andrew Wallo
Andrew WalloOP•2y ago
I will try to debug, but what do you mean? It is a navigation Menu. This is the blade file. Everything is working correct it just doesn't update when I want it to.
Tin
Tin•2y ago
All right, sorry I was not aware of the file contents. So I would: - debug to see if the components reacts to event - Check if the collections for Companies are cached in any way Also, can you put something like wire:key="{{Str::random() }}" On any div that is holding your data that needs to change check if that changes it
Andrew Wallo
Andrew WalloOP•2y ago
Where {{ Auth::user()->currentCompany->name }} is? So like the button? Oh I think I know what might be going on.. Nevermind Idk Maybe something to do with the events being connected to Livewire while the Filament Dropdown components being connected to Filament specifically, but idk But thank you for trying to help
LeandroFerreira
LeandroFerreira•2y ago
In the render hook in the service provider. Try to change it.
Andrew Wallo
Andrew WalloOP•2y ago
I did it didn’t do anything, actually just slowed down the request *it still worked but slowed down request time after form submitted for some reason, problem is still present tho
LeandroFerreira
LeandroFerreira•2y ago
Hum. Understood
Andrew Wallo
Andrew WalloOP•2y ago
Andrew Wallo
Andrew WalloOP•2y ago
This is the update company name blade file though if it helps anyone who comes across this and wants to help, maybe I am doing something wrong here Although I’ve always had problems with emitting events specifically in Filament, not dispatching a browser event tho If I do wire:click the event name from the button on submitting it doesn’t submit or anything Thank you again for trying to help!
Want results from more Discord servers?
Add your server