Feature/refactor search results no vue

app/controllers/searchables_controller.rb

@@ -1,5 +1,15 @@
 # frozen_string_literal: true
 
+require 'net/http'
+require 'uri'
+require 'json'
+
 class SearchablesController < ApplicationController
-  def index; end
+  def index
+    @per = 50
+    @word = params[:word]
+    @page_number = params[:page].present? ? params[:page].to_i : 1
+    request_params = params.permit(:document_type, :word, :page).to_h.to_query
+    @url = "/api/searchables.json?#{request_params}"
+  end
 end

app/views/searchables/index.html.slim

@@ -1,5 +1,19 @@
-- title "'#{params[:word]}'の検索結果"
-- set_meta_tags description: "'#{params[:word]}'の検索結果一覧ページです。"
+- title "'#{@word}'の検索結果"
+- set_meta_tags description: "'#{@word}'の検索結果一覧ページです。"
+
+javascript:
+  document.addEventListener('DOMContentLoaded', () => {
+    const url = "#{@url}";
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        console.log(data);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+  });
+
 
 header.page-header
   .container
@@ -8,4 +22,29 @@ header.page-header
         h2.page-header__title
           = title
 hr.a-border
-  = react_component('Searchables', word: params[:word].to_s)
+.page-body
+  - if @error
+    div
+      | failed to load
+  - elsif @data.nil?
+    .container.is-md
+      = react_component('LoadingListPlaceholder')
+  - elsif @data.empty?
+    .container
+      .o-empty-message
+        .o-empty-message__icon
+          i.fa-regular.fa-sad-tear
+        p.o-empty-message__text
+          | #{@word}に一致する情報は見つかりませんでした。
+  - elsif @data.present?
+    .container.is-md
+      - if @data['total_pages'] > 1
+        nav.pagination
+          = react_component('Pagination', { sum: @data['total_pages'] * @per, per: @per, neighbours: 2, page: @page_number, setPage: setPage })
+      .card-list.a-card
+        - @data['searchables'].each do |searchable|
+          = render partial: 'searchable', locals: { searchable: searchable, word: @word }
+      - if @data['total_pages'] > 1
+        nav.pagination
+          = react_component('Pagination', { sum: @data['total_pages'] * @per, per: @per, neighbours: 2, page: @page_number, setPage: setPage })
+  = react_component('Searchables', word: @word.to_s)