When I upload some new piece of data to the database from my full page livewire component, and I redirect to the dashboard which is a different livewire component, I have to refresh the page to display the newly added data. Is there anyway to have livewire refresh a component that is on another page without having to manually refresh it?
Livewire version is 2.4.0
This is the upload function from my add page
public function upload()
{
$this->validate();
$this->animal->users_id = $this->user->id;
$this->animal->breeds_id = $this->selectedBreed;
$this->animal->animal_types_id = $this->selectedType;
$this->animal->save();
if ($this->image) {
$fileName = $this->image->store('images/thumbnail', 'public');
Image::create([
'image' => $fileName,
'status' => 1,
'animal_id' => $this->animal->id,
'is_profile_picture' => true,
]);
}
$this->redirectRoute('dashboard.index', ['user' => $this->user]);
}
When they upload a new piece of data they get redirected back to their dashboard.
The dashboard gets all of their data
class Dashboard extends Component
{
public Collection $animal;
public function mount()
{
$this->animal = Animal::with(['images' => static function ($query) {
$query->where('images.is_profile_picture', '=', true);
}])->get();
}
public function render()
{
return view('livewire.dashboard')
->with(['animals' => $this->animal])
->layout('components.layouts.dashboard', ['title' => 'Dashboard']);
}
}
The dashboard view is build like this
<div>
@if ($animals->isEmpty())
<div class="z-30 w-full py-6 text-xl font-bold text-gray-700 uppercase shadow-xl">
<div class="object-cover overflow-hidden">
<img class="w-auto mx-auto max-h-52"
src="https://www.blueskyvineyard.com/wp-content/uploads/2018/10/cat-and-dog-banner.png"
alt="Add your first animal">
</div>
<span class="flex justify-center">Start out by adding your first animal</span>
<div class="flex justify-center pt-4 "><i class="fas fa-chevron-down"></i></div>
</div>
<div class="flex-1 overflow-x-hidden overflow-y-auto bg-white">
<div class="container flex justify-center px-6 py-8 mx-auto">
<a href="{{ route('animal.add', ['user' => Auth::user()]) }}"
class="object-cover max-w-xs col-start-2 mb-24 transition duration-150 ease-in-out rounded-lg shadow-md bg-primary max-h-80 hover:bg-primary-hover">
<svg class="w-48 h-48" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</a>
</div>
</div>
@else
<div class="flex-1 overflow-x-hidden overflow-y-auto bg-white">
<div class="container px-6 py-8 mx-auto">
<a href="{{ route('animal.add', ['user' => Auth::user()]) }}"
class="relative inline-flex items-center h-10 px-5 mb-10 text-white transition-colors duration-150 rounded-lg bg-primary focus:shadow-outline hover:bg-primary-hover">
<span>Add animal</span>
<i class="w-4 h-4 ml-3 fill-current fas fa-plus"></i>
</a>
<div class="grid grid-cols-3 gap-3 antialiased text-gray-900">
@foreach ($animals as $animal)
<div x-data="{tooltip : false}" class="mb-24 ">
<a href="{{ route('animal.profile', ['user' => Auth()->user(), 'animal' => $animal]) }}">
@if ($animal->images->isNotEmpty())
<img id="{{ $animal->id }}" x-on:mouseover="{tooltip = true}"
x-on:mouseout="{tooltip = false}"
src="{{ Storage::url($animal->images[0]->image) }}" alt="Animal image"
class="object-cover rounded-lg shadow-md">
@else
<img id="{{ $animal->id }}" x-on:mouseover="{tooltip = true}"
x-on:mouseout="{tooltip = false}"
src="{{ Storage::url('public/images/placeholder/20200201_Honden_7683-1Klein.jpg') }}"
alt="Animal image"
class="object-cover rounded-lg shadow-md">
@endif
<div x-show.transition="tooltip" class="relative w-auto -mt-8"
x-on:mouseover="{tooltip = true}" x-on:mouseout="{tooltip = false}">
<div class="p-6 pt-8 bg-white rounded-lg shadow-lg">
<h4
class="flex justify-center mt-1 text-xl font-semibold leading-tight uppercase truncate text-primary-dark">
{{ $animal->name }}</h4>
<div class="mt-4">
<div class="absolute flex items-center mt-1 right-3 top-2 ">
<svg class="w-4 h-4 text-yellow-600 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-600 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-600 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-600 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-gray-400 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
</div>
</div>
<div>
Some information about {{ $animal->name }}
<ul class="ml-6 list-disc">
<li>Height</li>
<li>Weight</li>
<li>Other..</li>
</ul>
<span class="flex justify-center pt-4 text-sm text-primary">Click image to view
more
information
</span>
</div>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
@endif
</div>
</div>