Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Add Livewire support to the HTTP server #40

Merged
merged 18 commits into from
Feb 9, 2024
Merged

Conversation

Log1x
Copy link
Member

@Log1x Log1x commented Feb 8, 2024

This PR finalizes the ReactPHP HTTP server/routing implementation adding support for Livewire 3.

Usage

Generate an application key:

$ php laracord key:generate

Install Livewire:

$ composer require livewire/livewire

Add the Livewire provider to config/app.php:

/*
|--------------------------------------------------------------------------
| Autoloaded Service Providers
|--------------------------------------------------------------------------
|
| The service providers listed here will be automatically loaded on the
| request to your application. Feel free to add your own services to
| this array to grant expanded functionality to your applications.
|
*/

'providers' => [
    App\Providers\BotServiceProvider::class,
    Livewire\LivewireServiceProvider::class,
],

Afterwards, you should be able to create a Livewire app layout/components and register them inside of routes() in app/Bot.php.

@Log1x
Copy link
Member Author

Log1x commented Feb 8, 2024

Example Component

resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'Laracord' }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
    @livewireStyles
  </head>
  <body>
    {{ $slot }}
    @livewireScripts
  </body>
</html>

app/Livewire/Message.php

<?php

namespace App\Livewire;

use Laracord\HasLaracord;
use Livewire\Component;

class Message extends Component
{
    use HasLaracord;

    /**
     * The selected user.
     *
     * @var string
     */
    public $user;

    /**
     * The message to send.
     *
     * @var string
     */
    public $message;

    /**
     * The members of the server.
     *
     * @var array
     */
    public $members;

    /**
     * Mount the component.
     *
     * @return void
     */
    public function mount()
    {
        $this->members = collect($this->discord()->users->map(fn ($user) => [
            'id' => $user->id,
            'username' => $user->username,
        ]))->keyBy('id');
    }

    /**
     * Render the component.
     *
     * @return \Illuminate\View\View
     */
    public function render()
    {
        return view('livewire.message', [
            'members' => $this->members,
        ]);
    }

    /**
     * Send a message to the selected user.
     *
     * @return void
     */
    public function sendMessage()
    {
        $this->validate([
            'user' => 'required',
            'message' => 'required',
        ]);

        if (! $this->members->has($this->user)) {
            $this->addError('user', 'The selected user does not exist.');

            return;
        }

        $this->message($this->message)->sendTo($this->user);

        $this->reset(['user', 'message']);

        session()->flash('message', 'Message sent!');
    }
}

resources/views/livewire/message.blade.php

<div class="p-8 max-w-5xl mx-auto">
  <h1 class="text-3xl mb-6">Laracord with Livewire</h1>

  <h2 class="mb-2 text-xl">Send a Message</h2>

  <div class="grid gap-8">
    <select wire:model="user" class="border px-3 py-2 max-w-lg">
      <option value="">Select a member...</option>
      @foreach ($members as $member)
        <option value="{{ $member['id'] }}">{{ $member['username'] }}</option>
      @endforeach
    </select>

    @error('user') <span class="text-red-500">{{ $message }}</span> @enderror

    <textarea class="border px-3 py-2" wire:model="message" rows="5" placeholder="Enter a message..."></textarea>

    @error('message') <span class="text-red-500">{{ $message }}</span> @enderror

    <button class="bg-blue-500 text-white px-4 py-2" wire:click="sendMessage">
      Send Message
    </button>

    @session('message')
      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
        <strong class="font-bold">Success!</strong>
        <span class="block sm:inline">{{ session('message') }}</span>
      </div>
    @endsession
  </div>
</div>

app/Bot.php

<?php

namespace App;

use App\Livewire\Message;
use Illuminate\Support\Facades\Route;
use Laracord\Laracord;

class Bot extends Laracord
{
    /**
     * The HTTP routes.
     */
    public function routes(): void
    {
        Route::get('/message', Message::class)->name('message');
    }
}

Screenshots

Screenshot
Screenshot 2

@Log1x Log1x merged commit 2ac305a into main Feb 9, 2024
2 checks passed
@Log1x Log1x deleted the feat/livewire-support branch February 9, 2024 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant