fix: address lifecycling issue

Signed-off-by: tylerslaton <mtslaton1@gmail.com>

components/Tool.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="tool-container prose">
-        <h1 class="mb-0">{{ props.title }}</h1>
-        <a :href="githubUrl ? `https://${githubUrl}` : ''" target="_blank" class="text-blue-500 underline">{{ githubUrl }}</a>
-        <div v-for="tool in props.tools" :key="tool.id">
+        <h1 class="mb-0">{{ props.repo }}</h1>
+        <a :href="githubUrl" target="_blank" class="text-blue-500 underline">{{ githubUrl }}</a>
+        <div v-for="tool in tools" :key="tool.id">
             <h2>{{ tool.name }}</h2>
             <p class="">{{ tool.description }}</p>
 
@@ -24,18 +24,31 @@
 
 <script setup lang="ts">
 import type { Tool } from '@/lib/types';
+
 const props = defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    githubUrl: {
-        type: String,
-        required: true
-    },
-    tools: {
-        type: Array as () => Tool[],
-        required: true
-    },    
+    owner: String,
+    repo: String,
 });
+
+const tools = ref([] as Tool[])
+const githubUrl = ref('');
+
+githubUrl.value = `https://github.com/${props.owner}/${props.repo}`;
+
+try {
+  const toolResponse = await useFetch(`https://raw.githubusercontent.com/${props.owner}/${props.repo}/main/tool.gpt`);
+  const parserResponse = await fetch(useRuntimeConfig().public.parserUrl as string, {
+    method: 'POST',
+    body: toolResponse.data.value as string,
+    headers: {
+      'Content-Type': 'text/plain',
+    }
+  });
+  const parserResponseBody = await parserResponse.text();
+  const parsedTools = JSON.parse(parserResponseBody) as Tool[];
+  tools.value = parsedTools;
+} catch (error) {
+  console.error(error);
+}
+
 </script>

pages/[...slug].vue

@@ -1,55 +1,28 @@
 <template>
   <div class="flex flex-col mt-16 mx-24">
-    <Tool class="w-3/4" :tools="tools" :title="title" :githubUrl="githubUrl"/>
+    <Tool class="w-3/4" :owner="owner" :repo="repo"/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+// todo: this calls the endpoint twice. the first time fails and the second succeeds.
+//       at the time of writing this comment, I don't know why. This likely has something
+//       to do with the lifecycle of the component since putting this behind onMounted
+//       causes there to be no data at all.
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import type { Tool } from '@/lib/types';
 
-const tools = ref([] as Tool[])
-const githubUrl = ref('');
-const title = ref('')
+const route = useRoute();
+const router = useRouter();
+const owner = ref('');
+const repo = ref('');
 
-onMounted(async () => {
-  loadData();
-});
+const path = route.path.replace(/^\//, '');
+const validRepo = /^(https?:\/\/)?(www\.)?github\.com\/[\w-]+\/[\w-]+$/.test(path);
 
-onBeforeMount(async () => {
-  loadData();
-});
-
-const loadData = async () => {
-  const route = useRoute();
-  const router = useRouter();
-
-  const path = route.path.replace(/^\//, '');
-  const validRepo = /^(https?:\/\/)?(www\.)?github\.com\/[\w-]+\/[\w-]+$/.test(path);
-
-  if (!validRepo) {
-    router.push({ path: '/404', query: { isInvalid: 'true' } });
-  }
-  githubUrl.value = path;
-
-  const [owner, repo] = path.split('/').slice(-2);
-  title.value = repo;
-
-  try {
-    const toolResponse = await useFetch(`https://raw.githubusercontent.com/${owner}/${repo}/main/tool.gpt`);
-    const parserResponse = await fetch(useRuntimeConfig().public.parserUrl as string, {
-      method: 'POST',
-      body: toolResponse.data.value as string,
-      headers: {
-        'Content-Type': 'text/plain',
-      }
-    });
-    const parserResponseBody = await parserResponse.text();
-    const parsedTools = JSON.parse(parserResponseBody) as Tool[];
-    tools.value = parsedTools;
-  } catch (error) {
-    console.error(error);
-  }
+if (!validRepo) {
+  router.push({ path: '/404' });
 }
+
+[owner.value, repo.value] = path.split('/').slice(-2);
 </script>