feat: add reset button

and refactor components and tweak sizing

Author: serhalp

app/app.vue

@@ -1,3 +1,36 @@
+<script setup lang="ts">
+const runs = ref([]);
+
+const handleRequestFormSubmit = async ({ url }): void => {
+  if (!url.startsWith("http")) {
+    url = `https://${url}`;
+  }
+
+  try {
+    // Destructuring would be confusing, since the response body contains fields named `status` and
+    // `headers` (it's a request about a request...)
+    const responseBody = await $fetch(
+      `/api/inspect-url/${encodeURIComponent(url)}`,
+    );
+
+    runs.value.push({
+      url,
+      status: responseBody.status,
+      cacheHeaders: getCacheHeaders(responseBody.headers),
+      durationInMs: responseBody.durationInMs,
+    });
+  } catch (err) {
+    // TODO(serhalp) Proper error handling. ErrorBoundary?
+    console.error("Error fetching URL", err);
+    return;
+  }
+};
+
+const handleClickClear = (): void => {
+  runs.value = [];
+};
+</script>
+
 <template>
   <NuxtRouteAnnouncer />
 
@@ -10,8 +43,16 @@
   </header>
 
   <main>
-    <RequestForm />
+    <RequestForm @submit="handleRequestFormSubmit" />
+
+    <div class="flex-btwn run-panels">
+      <RunPanel v-for="run in runs" v-bind="run" />
+    </div>
   </main>
+
+  <div class="reset-container">
+    <button v-if="runs.length > 0" @click="handleClickClear()">Clear</button>
+  </div>
 </template>
 
 <style>
@@ -30,6 +71,22 @@ header {
 }
 
 main {
+  /* Override very airy defaults from Netlify Examples style, not great for a utility app */
   margin-top: 3em;
+  padding-bottom: 3em;
+}
+
+.run-panels {
+  flex-wrap: wrap;
+}
+
+.run-panels>* {
+  flex: 1 1 20em;
+}
+
+.reset-container {
+  text-align: center;
+
+  background-color: inherit;
 }
 </style>

app/components/RawCacheHeaders.vue

@@ -17,3 +17,9 @@ onUpdated(highlightJson);
     <code :ref="id" class="hljs language-json">{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
   </pre>
 </template>
+
+<style scoped>
+code {
+  font-size: 0.7em;
+}
+</style>

app/components/RequestForm.vue

@@ -1,49 +1,20 @@
 <script setup lang="ts">
 const inputUrl = ref();
-const runs = ref([]);
 
-const inspectUrl = async (): void => {
-  if (!inputUrl.value.startsWith("http")) {
-    inputUrl.value = `https://${inputUrl.value}`;
-  }
-
-  try {
-    // Destructuring would be confusing, since the response body contains fields named `status` and
-    // `headers` (it's a request about a request...)
-    const responseBody = await $fetch(
-      `/api/inspect-url/${encodeURIComponent(inputUrl.value)}`,
-    );
+const emit = defineEmits(["submit"]);
 
-    runs.value.push({
-      url: inputUrl.value,
-      status: responseBody.status,
-      cacheHeaders: getCacheHeaders(responseBody.headers),
-      durationInMs: responseBody.durationInMs,
-    });
-  } catch (err) {
-    // TODO(serhalp) Proper error handling. ErrorBoundary?
-    console.error("Error fetching URL", err);
-    return;
-  }
+const handleSubmit = () => {
+  emit("submit", { url: inputUrl.value });
 };
 </script>
 
 <template>
   <div class="form">
     <label class="url-input">
       <strong>URL:</strong>
-      <input v-model.trim="inputUrl" @keyup.enter="inspectUrl()" />
+      <input v-model.trim="inputUrl" @keyup.enter="handleSubmit()" />
     </label>
-    <button @click="inspectUrl()">Inspect</button>
-  </div>
-
-  <!-- TODO(serhalp) Move this into another component. Wrong place. -->
-  <div class="flex-btwn">
-    <div v-for="run in runs">
-      <h3>{{ run.url }}</h3>
-      <small>HTTP {{ run.status }} ({{ run.durationInMs }} ms)</small>
-      <RawCacheHeaders :cacheHeaders="run.cacheHeaders" />
-    </div>
+    <button @click="handleSubmit()">Inspect</button>
   </div>
 </template>
 

app/components/RunPanel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+  url: string;
+  status: number;
+  durationInMs: number;
+  cacheHeaders: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <div>
+    <h3>{{ props.url }}</h3>
+
+    <small>HTTP {{ props.status }} ({{ props.durationInMs }} ms)</small>
+
+    <RawCacheHeaders :cacheHeaders="props.cacheHeaders" />
+  </div>
+</template>
+
+<style scoped>
+h3 {
+  font-size: 1em;
+}
+</style>