codesnips

505 code snips · on codesnips 27 days
javascript
import { Controller } from "@hotwired/stimulus"
import { NotificationsApi } from "notifications_api"

export default class extends Controller {
  static targets = ["notification"]
  static values = {

Stimulus: intersection observer for “mark as read”

rails stimulus hotwire
by codesnips 3 tabs
ruby
class ApplicationController < ActionController::Base
  before_action :authenticate_user!

  rescue_from ActionController::InvalidAuthenticityToken do
    handle_unauthenticated(reason: :csrf)
  end

Turbo Streams: partial page auth failure handling

rails turbo hotwire
by codesnips 3 tabs
javascript
import { Turbo } from "@hotwired/turbo-rails"

Turbo.StreamActions.redirect = function () {
  const url = this.getAttribute("url")
  if (!url) return

Turbo Streams: server-driven redirect (Turbo Native friendly)

rails hotwire turbo-streams
by codesnips 4 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { keymap: Object }

  connect() {

Stimulus: keyboard shortcuts that work with Turbo navigation

rails stimulus hotwire
by codesnips 3 tabs
ruby
class ReportsController < ApplicationController
  def create
    @report = current_user.reports.create!(
      title: report_params[:title],
      status: :pending,
      progress: 0

Turbo Streams: broadcast from a job for long operations

rails turbo hotwire
by codesnips 3 tabs
erb
<div class="layout">
  <ul class="product-list">
    <% @products.each do |product| %>
      <li class="product-row">
        <%= link_to product.name,
              product_path(product),

Turbo Frames: “details” panel that lazy-loads on click

rails turbo hotwire
by codesnips 4 tabs
ruby
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = @post.likes.find_or_create_by(user: current_user)

Turbo Streams: optimistic UI for likes with disable-on-submit

rails turbo stimulus
by codesnips 3 tabs
javascript
let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

rails turbo hotwire
by codesnips 3 tabs
ruby
class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire
by codesnips 4 tabs
erb
<%# private stream: turbo signs the serialized record name %>
<%= turbo_stream_from current_user %>

<section class="notifications">
  <h1>Notifications</h1>

Turbo Streams + authorization: signed per-user stream name

rails turbo hotwire
by codesnips 3 tabs
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.flash = function () {
  const container = document.getElementById("flashes")
  if (!container) return

Turbo Streams: custom action for flash messages

rails turbo hotwire
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field"]

  connect() {

Stimulus: autofocus the first invalid field after Turbo update

rails stimulus hotwire
by codesnips 3 tabs