separate entity code into its own composable function

ui/src/lib/entity.ts

@@ -0,0 +1,41 @@
+import { IEntry, ListingResult } from "@/types/base";
+import { fetcher } from "@/utils";
+import useSWRV from "swrv";
+import { computed } from "vue";
+
+
+export function useEntity(address: string) {
+    const { data, error, mutate } = useSWRV<ListingResult, unknown>(
+        () => `/api/obj/${address}`,
+        fetcher
+    );
+
+    const entries = computed(() => {
+        if (data?.value) {
+            const entries = Object.entries(data.value) as [string, IEntry][];
+            return entries
+                .sort(([_, a], [__, b]) => String(a.value.c).localeCompare(b.value.c))
+                .sort(([_, a], [__, b]) => String(a.value.t).localeCompare(b.value.t))
+                .sort(([_, a], [__, b]) => a.attribute.localeCompare(b.attribute));
+        } else {
+            return [];
+        }
+    });
+
+    const attributes = computed(() => {
+        return entries.value.filter(([_, e]) => e.entity === address);
+    });
+
+    const backlinks = computed(() => {
+        return entries.value.filter(([_, e]) => e.entity !== address);
+    });
+
+    return {
+        entries,
+        attributes,
+        backlinks,
+        data,
+        error,
+        mutate
+    }
+}

ui/src/views/Inspect.vue

@@ -70,11 +70,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import useSWRV from "swrv";
-import { fetcher } from "@/utils";
-import { IEntry, ListingResult } from "@/types/base";
 import Address from "@/components/Address.vue";
+import { useEntity } from "@/lib/entity";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "Inspect",
@@ -93,25 +91,6 @@ export default defineComponent({
       newEntryValue: "",
     };
   },
-  computed: {
-    objectEntries(): [string, IEntry][] {
-      if (this.data) {
-        const entries = Object.entries(this.data) as [string, IEntry][];
-        return entries
-          .sort(([_, a], [__, b]) => String(a.value.c).localeCompare(b.value.c))
-          .sort(([_, a], [__, b]) => String(a.value.t).localeCompare(b.value.t))
-          .sort(([_, a], [__, b]) => a.attribute.localeCompare(b.attribute));
-      } else {
-        return [];
-      }
-    },
-    attributes(): [string, IEntry][] {
-      return this.objectEntries.filter(([_, e]) => e.entity === this.address);
-    },
-    backlinks(): [string, IEntry][] {
-      return this.objectEntries.filter(([_, e]) => e.entity !== this.address);
-    },
-  },
   methods: {
     async removeEntry(id: string) {
       if (confirm("Are you sure you want to remove the attribute?")) {
@@ -140,13 +119,11 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { data, error, mutate } = useSWRV<ListingResult, unknown>(
-      () => `/api/obj/${props.address}`,
-      fetcher
-    );
+    const { error, mutate, attributes, backlinks } = useEntity(props.address);
 
     return {
-      data,
+      attributes,
+      backlinks,
       error,
       mutate,
     };