Skip to content

Commit 67bfb9b

Browse files
RoyalIcingRoyalIcing
committed
Migrate to to_form()
1 parent f8155da commit 67bfb9b

File tree

1 file changed

+110
-42
lines changed

1 file changed

+110
-42
lines changed

‎lib/components_guide_web/live/latency_comparison.ex‎

Lines changed: 110 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
2121
}
2222
end
2323

24-
def set_form_values(%__MODULE__{} = state, form_values = %{}) do
25-
%__MODULE__{
26-
state
27-
| form_values: form_values
28-
}
29-
end
30-
3124
def get_fastest_slowest_responses(%__MODULE__{responses: nil}), do: nil
3225

3326
def get_fastest_slowest_responses(%__MODULE__{responses: responses}) do
@@ -38,26 +31,35 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
3831
h = response.headers
3932
location = Enum.find(h, fn {key, _} -> String.downcase(key) == "location" end)
4033
content_length = Enum.find(h, fn {key, _} -> String.downcase(key) == "content-length" end)
41-
content_encoding = Enum.find(h, fn {key, _} -> String.downcase(key) == "content_encoding" end)
42-
transfer_encoding = Enum.find(h, fn {key, _} -> String.downcase(key) == "transfer-encoding" end)
34+
35+
content_encoding =
36+
Enum.find(h, fn {key, _} -> String.downcase(key) == "content_encoding" end)
37+
38+
transfer_encoding =
39+
Enum.find(h, fn {key, _} -> String.downcase(key) == "transfer-encoding" end)
40+
4341
cache_control = Enum.find(h, fn {key, _} -> String.downcase(key) == "cache-control" end)
4442
server = Enum.find(h, fn {key, _} -> String.downcase(key) == "server" end)
4543
cf_ray = Enum.find(h, fn {key, _} -> String.downcase(key) == "cf-ray" end)
4644
cf_cache_status = Enum.find(h, fn {key, _} -> String.downcase(key) == "cf-cache-status" end)
4745
x_vercel_cache = Enum.find(h, fn {key, _} -> String.downcase(key) == "x-vercel-cache" end)
4846
x_vercel_id = Enum.find(h, fn {key, _} -> String.downcase(key) == "x-vercel-id" end)
49-
inspect([
50-
location,
51-
content_length,
52-
content_encoding,
53-
transfer_encoding,
54-
cache_control,
55-
server,
56-
cf_ray,
57-
cf_cache_status,
58-
x_vercel_cache,
59-
x_vercel_id
60-
] |> Enum.filter(fn v -> v != nil end))
47+
48+
inspect(
49+
[
50+
location,
51+
content_length,
52+
content_encoding,
53+
transfer_encoding,
54+
cache_control,
55+
server,
56+
cf_ray,
57+
cf_cache_status,
58+
x_vercel_cache,
59+
x_vercel_id
60+
]
61+
|> Enum.filter(fn v -> v != nil end)
62+
)
6163
end
6264
end
6365

@@ -66,21 +68,36 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
6668
~H"""
6769
<nav class="pt-8 pb-8">
6870
<ul class="list-none flex justify-center gap-4">
69-
<li><.link href="/latency-comparison/cdns">CDNs</.link></li>
70-
<li><.link href="/latency-comparison/dev-blogs">Dev Blogs</.link></li>
71-
<li><.link href="/latency-comparison/robots.txt">Robots.txt</.link></li>
72-
<li><.link href="/latency-comparison/edge">Edge</.link></li>
71+
<li>
72+
<.link href="/latency-comparison/cdns">CDNs</.link>
73+
</li>
74+
<li>
75+
<.link href="/latency-comparison/dev-blogs">Dev Blogs</.link>
76+
</li>
77+
<li>
78+
<.link href="/latency-comparison/robots.txt">Robots.txt</.link>
79+
</li>
80+
<li>
81+
<.link href="/latency-comparison/edge">Edge</.link>
82+
</li>
7383
</ul>
7484
</nav>
7585
<.form
76-
for={:editor}
86+
for={@form}
7787
id="latency_comparison_form"
7888
phx-submit="submitted"
7989
class="max-w-2xl mx-auto space-y-2"
8090
>
8191
<div class="flex flex-col items-center gap-4">
82-
<button type="submit" class="px-3 py-1 text-xl text-blue-900 bg-blue-200 rounded" autofocus>Load</button>
83-
<input type="url" id="user_url" name="user_url" value={@state.form_values["user_url"]} class="w-80 text-sm text-white bg-black border border-gray-700 rounded" placeholder="Compare your URL (optional)" aria-label="">
92+
<button type="submit" class="px-3 py-1 text-xl text-blue-900 bg-blue-200 rounded" autofocus>
93+
Load
94+
</button>
95+
<.input
96+
field={@form[:user_url]}
97+
type="url"
98+
label="URL"
99+
placeholder="Compare your URL (optional)"
100+
/>
84101
</div>
85102
</.form>
86103
@@ -89,23 +106,71 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
89106
<div class="p-4 text-white bg-black font-mono">
90107
<pre class="bg-transparent" title={State.get_headers_of_interest(response)}><%= response.url %></pre>
91108
<div class="my-1 flex justify-center">
92-
<div class="h-1 bg-yellow-200" style={"width: #{System.convert_time_unit(response.timings.connected, :native, :millisecond)}px"}></div>
93-
<div class="h-1 bg-green-500" style={"width: #{System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond)}px"}></div>
94-
<div class="h-1 bg-purple-200" style={"width: #{System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond)}px"}></div>
109+
<div
110+
class="h-1 bg-yellow-200"
111+
style={"width: #{System.convert_time_unit(response.timings.connected, :native, :millisecond)}px"}
112+
>
113+
</div>
114+
<div
115+
class="h-1 bg-green-500"
116+
style={"width: #{System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond)}px"}
117+
>
118+
</div>
119+
<div
120+
class="h-1 bg-purple-200"
121+
style={"width: #{System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond)}px"}
122+
>
123+
</div>
95124
</div>
96125
<p class="flex justify-center items-center gap-3 text-lg">
97-
<data class="text-yellow-200"><%= System.convert_time_unit(response.timings.connected, :native, :millisecond) %>ms</data> <span>🤝</span>
98-
<span class="text-blue-200/75">+</span> <data class="text-green-200"><%= System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond) %>ms</data> <span class="px-1 text-sm text-green-900 bg-green-100 border border-green-200 rounded-full"><%= response.status %></span>
99-
<span class="text-blue-200/75">+</span> <data class="text-purple-200"><%= System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond) %>ms</data> <span class="px-1 text-sm text-purple-900 bg-purple-100 border border-purple-200 rounded-full"><%= Format.humanize_bytes(byte_size(response.body)) %></span>
100-
<span class="text-blue-200/75">=</span> <data class="text-blue-200"><%= System.convert_time_unit(response.timings.duration, :native, :millisecond) %>ms</data>
126+
<data class="text-yellow-200">
127+
<%= System.convert_time_unit(response.timings.connected, :native, :millisecond) %>ms
128+
</data>
129+
<span>🤝</span>
130+
<span class="text-blue-200/75">+</span>
131+
<data class="text-green-200">
132+
<%= System.convert_time_unit(
133+
response.timings.received_status - response.timings.connected,
134+
:native,
135+
:millisecond
136+
) %>ms
137+
</data>
138+
<span class="px-1 text-sm text-green-900 bg-green-100 border border-green-200 rounded-full">
139+
<%= response.status %>
140+
</span>
141+
<span class="text-blue-200/75">+</span>
142+
<data class="text-purple-200">
143+
<%= System.convert_time_unit(
144+
response.timings.duration - response.timings.received_status,
145+
:native,
146+
:millisecond
147+
) %>ms
148+
</data>
149+
<span class="px-1 text-sm text-purple-900 bg-purple-100 border border-purple-200 rounded-full">
150+
<%= Format.humanize_bytes(byte_size(response.body)) %>
151+
</span>
152+
<span class="text-blue-200/75">=</span>
153+
<data class="text-blue-200">
154+
<%= System.convert_time_unit(response.timings.duration, :native, :millisecond) %>ms
155+
</data>
101156
</p>
102157
</div>
103158
<% end %>
104159
<%= if tuple = State.get_fastest_slowest_responses(@state) do %>
105160
<% {fastest, slowest} = tuple %>
106161
<ul class="list-none">
107-
<li>Fastest is <%= fastest.url %> in <data><%= System.convert_time_unit(fastest.timings.duration, :native, :millisecond) %>ms</data></li>
108-
<li>Slowest is <%= slowest.url %> in <data><%= System.convert_time_unit(slowest.timings.duration, :native, :millisecond) %>ms</data></li>
162+
<li>
163+
Fastest is <%= fastest.url %> in
164+
<data>
165+
<%= System.convert_time_unit(fastest.timings.duration, :native, :millisecond) %>ms
166+
</data>
167+
</li>
168+
<li>
169+
Slowest is <%= slowest.url %> in
170+
<data>
171+
<%= System.convert_time_unit(slowest.timings.duration, :native, :millisecond) %>ms
172+
</data>
173+
</li>
109174
</ul>
110175
<% end %>
111176
</output>
@@ -127,7 +192,7 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
127192
socket
128193
|> assign_state(state)
129194
|> assign(:default_urls, default_urls)
130-
|> assign(form: to_form(%{}, as: :editor))
195+
|> assign(form: to_form(%{}))
131196

132197
{:ok, socket}
133198
end
@@ -151,9 +216,12 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
151216
state =
152217
socket.assigns.state
153218
|> State.add_responses(responses)
154-
|> State.set_form_values(form_values)
155219

156-
socket = socket |> assign_state(state)
220+
socket =
221+
socket
222+
|> assign_state(state)
223+
|> assign(form: to_form(form_values))
224+
157225
{:noreply, socket}
158226
end
159227

@@ -222,7 +290,7 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
222290
"https://components-guide.deno.dev/cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-esm-min.js",
223291
"https://unpkg.com/underscore@1.13.6/underscore-esm-min.js",
224292
"https://components-guide.collected.workers.dev/unpkg.com/underscore@1.13.6/underscore-esm-min.js",
225-
"https://components-guide.deno.dev/unpkg.com/underscore@1.13.6/underscore-esm-min.js",
293+
"https://components-guide.deno.dev/unpkg.com/underscore@1.13.6/underscore-esm-min.js"
226294
]
227295
end
228296

@@ -233,7 +301,7 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
233301
"https://unpkg.com/robots.txt",
234302
"https://api.npmjs.org/downloads/point/last-month/react",
235303
"https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-esm-min.js",
236-
"https://unpkg.com/underscore@1.13.6/underscore-esm-min.js",
304+
"https://unpkg.com/underscore@1.13.6/underscore-esm-min.js"
237305
]
238306
end
239307
end

0 commit comments

Comments
 (0)