DEMOS / LiveComponent

Up & Down Voting

With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on.
This uses a LiveAction to save everything with Ajax.

Banana ๐ŸŒ Votes: 67
Apple ๐ŸŽ Votes: 25
Hamburger ๐Ÿ” Votes: 77
Watermelon ๐Ÿ‰ Votes: 100
Cheese ๐Ÿง€ Votes: 34
Pizza ๐Ÿ• Votes: 76
Pretzel ๐Ÿฅจ Votes: 12
Donut ๐Ÿฉ Votes: 100
Pineapple ๐Ÿ Votes: 44
Popcorn ๐Ÿฟ Votes: 9
Egg ๐Ÿณ Votes: 41
Taco ๐ŸŒฎ Votes: 40
Ice Cream ๐Ÿฆ Votes: 99
Cookie ๐Ÿช Votes: 19
// ... use statements hidden - click to show
use App\Entity\Food;
use App\Repository\FoodRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveArg;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class FoodVote extends AbstractController
{
    use DefaultActionTrait;

    #[LiveProp]
    public Food $food;

    #[LiveProp]
    public bool $hasVoted = false;

    public function __construct(private FoodRepository $foodRepository)
    {
    }

    #[LiveAction]
    public function vote(#[LiveArg] string $direction)
    {
        if ('up' === $direction) {
            $this->food->upVote();
        } else {
            $this->food->downVote();
        }

        $this->foodRepository->add($this->food, true);
        $this->hasVoted = true;
    }
}
<tr {{ attributes }}>
    <th>{{ food.name }}</th>
    <td>
        Votes: {{ food.votes }}
    </td>
    <td style="width: 250px;">
        {% if hasVoted %}
            <div class="alert alert-success">
                Thanks for voting! <twig:Icon name="circle-check" />
            </div>
        {% else %}
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="up"
            >
                <twig:Icon name="arrow-up" />
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="down"
            >
                <twig:Icon name="arrow-down" />
            </button>
        {% endif %}
    </td>
</tr>