Destroy button

The button destroy the centralized counter
this will generate an error to other clients
in order to show that even crashing some component
inside the server the entire system cotinues operating
and actually the component will recover itself

fullstack/lib/fullstack/services/counters.ex

@@ -16,7 +16,7 @@ defmodule Fullstack.Services.Counters do
         :ets.insert_new(@table_name, {counter_name, 0})
         0
 
-      [{counter_name, value} | _] when is_integer(value) ->
+      [{_counter_name, value} | _] when is_integer(value) ->
         value
     end
   end
@@ -35,6 +35,12 @@ defmodule Fullstack.Services.Counters do
     updated_counter
   end
 
+  def destroy() do
+    :ets.delete(:counters, :centralized)
+
+    #    FullstackWeb.Endpoint.broadcast("centralized_counter", "updated_counter", {:centralized, 0})
+  end
+
   def start_link(args) do
     GenServer.start_link(__MODULE__, %{table_name: Keyword.get(args, :table_name, @table_name)},
       name: __MODULE__

fullstack/lib/fullstack_web/live/home_live/index.ex

@@ -43,6 +43,12 @@ defmodule FullstackWeb.HomeLive.Index do
     {:noreply, assign(socket, String.to_atom(counter_id), value)}
   end
 
+  @impl true
+  def handle_event("destroy", _, socket) do
+    Counters.destroy()
+    {:noreply, put_flash(socket, :error, "Centralized counter was destroyed :(")}
+  end
+
   @impl true
   def handle_info({:set_identified_counter, tmp_id}, socket) do
     {:noreply, assign(socket, :identified, init_counter(:identified, String.to_atom(tmp_id)))}

fullstack/lib/fullstack_web/live/home_live/index.html.heex

@@ -179,12 +179,15 @@
         <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
           <button
             phx-click="crash"
-            class="inline-flex items-center text-white bg-red-500 justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full sm:w-auto"
+            class="inline-flex items-center text-white bg-orange-500 justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full sm:w-auto"
           >
             Crash the Browser!
           </button>
-          <button class="inline-flex hover:ring-gray-400 hover:bg-gray-100 items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto">
-            Request access
+          <button
+            phx-click="destroy"
+            class="inline-flex text-white hover:ring-red-900 bg-red-700 hover:bg-red-600 items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto"
+          >
+            Destroy Centralized!
           </button>
         </div>
         <div class="mt-12 flex justify-center space-x-3">

fullstack/lib/fullstack_web/router.ex

@@ -22,7 +22,6 @@ defmodule FullstackWeb.Router do
 
     ## get "/", PageController, :home
     live "/chat", ChatLive
-    live "/home/:arcade", HomeLive.Index, :index
     live "/", HomeLive.Index, :index
 
     live "/devices", DeviceLive.Index, :index

fullstack/mix.lock

@@ -24,6 +24,7 @@
   "floki": {:hex, :floki, "0.36.2", "a7da0193538c93f937714a6704369711998a51a6164a222d710ebd54020aa7a3", [:mix], [], "hexpm", "a8766c0bc92f074e5cb36c4f9961982eda84c5d2b8e979ca67f5c268ec8ed580"},
   "gettext": {:hex, :gettext, "0.25.0", "98a95a862a94e2d55d24520dd79256a15c87ea75b49673a2e2f206e6ebc42e5d", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "38e5d754e66af37980a94fb93bb20dcde1d2361f664b0a19f01e87296634051f"},
   "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "88ab3a0d790e6a47404cba02800a6b25d2afae50", [tag: "v2.1.1", sparse: "optimized"]},
+  "heroicons_liveview": {:hex, :heroicons_liveview, "0.3.0", "b8cc48141b53b41ea705aa5040c3fd952dff58b336fa790d6696c03c76b202ab", [:mix], [{:phoenix_live_view, ">= 0.16.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "f0af5ff8ab101423eccfc88e38539f890341be92e80bdc1adb1016ec71661203"},
   "hpax": {:hex, :hpax, "1.0.0", "28dcf54509fe2152a3d040e4e3df5b265dcb6cb532029ecbacf4ce52caea3fd2", [:mix], [], "hexpm", "7f1314731d711e2ca5fdc7fd361296593fc2542570b3105595bb0bc6d0fad601"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
   "jumper": {:hex, :jumper, "1.0.2", "68cdcd84472a00ac596b4e6459a41b3062d4427cbd4f1e8c8793c5b54f1406a7", [:mix], [], "hexpm", "9b7782409021e01ab3c08270e26f36eb62976a38c1aa64b2eaf6348422f165e1"},

fullstack/priv/static/assets/app.css

@@ -1388,6 +1388,16 @@ select {
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .fill-cyan-900 {
   fill: #164e63;
 }
@@ -1445,11 +1455,6 @@ select {
   padding-right: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1810,6 +1815,21 @@ select {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
 .hover\:text-zinc-700:hover {
   --tw-text-opacity: 1;
   color: rgb(63 63 70 / var(--tw-text-opacity));
@@ -1828,6 +1848,21 @@ select {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
+.hover\:ring-red-400:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+}
+
+.hover\:ring-red-600:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
+}
+
+.hover\:ring-red-900:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
+}
+
 .focus\:border-rose-400:focus {
   --tw-border-opacity: 1;
   border-color: rgb(251 113 133 / var(--tw-border-opacity));