Merge pull request #32 from mattyg/refactor/composition-api

refactor(ui): use Composition api

ui/src/components/BaseContentHidden.vue

@@ -8,6 +8,7 @@
       </slot>
     </div>
     <button
+      v-if="allowPeeking"
       class="btn btn-ghost btn-xs"
       @click="$emit('show')"
     >
@@ -26,10 +27,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  emits: ['show']
-})
+defineEmits(['show']);
+
+defineProps<{
+  allowPeeking?: boolean
+}>();
 </script>

ui/src/components/BaseEditDeleteButtons.vue

@@ -32,10 +32,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  emits: ['edit', 'delete']
-})
+defineEmits(['edit', 'delete']);
 </script>

ui/src/components/BaseThemeSelect.vue

@@ -35,20 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useThemeStore } from '../stores/theme'
 
-
-export default defineComponent({
-  setup () {
-    const store = useThemeStore();
-
-    return { store };
-  }
-})
-</script>
-
-<style scoped>
-
-</style>
+const store = useThemeStore();
+</script>

ui/src/components/BaseVoteInput.vue

@@ -42,20 +42,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineEmits } from 'vue'
 
-export default defineComponent({
-  props: {
-    votes: {
-      type: Number,
-      default: 0
-    },
-    myVote: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['upvote', 'downvote']
-})
+defineEmits(['upvote', 'downvote']);
+
+withDefaults(defineProps<{
+  votes?: number,
+  myVote?: number
+}>(), {
+  votes: 0,
+  myVote: 0,
+});
 </script>

ui/src/herd/directory/ListingLink.vue

@@ -72,6 +72,8 @@ const fetchListing = async (): Promise<Record> => {
 };
 
 const { data: record } = useRequest(fetchListing, {
+  errorRetryInterval: 1000,
+  errorRetryCount: 5,
   onError: (e: any) => {
     toast.error(`Failed to fetch listing ${e.data.data}`)
   }

ui/src/herd/herds/CreateHerd.vue

@@ -21,7 +21,7 @@
       <div class="form-control my-4 flex flex-row justify-start items-center space-x-4">
         <label class="label cursor-pointer">
           <input
-            v-model="publish"
+            v-model="isPublicHerd"
             type="checkbox"
             class="checkbox checkbox-lg"
           >
@@ -45,142 +45,119 @@
     :text="password"
   />
 </template>
-<script lang="ts">
-import { defineComponent, inject, ComputedRef, ref } from 'vue';
+<script lang="ts" setup>
+import { defineEmits, inject, computed, ref, ComputedRef, watch } from 'vue';
 import { AppAgentClient, ActionHash, encodeHashToBase64, ClonedCell, randomByteArray } from '@holochain/client';
 import { toast } from 'vue3-toastify';
 import HerdPasswordModal from './HerdPasswordModal.vue';
 import { Listing } from '../directory/types';
+import { useRouter } from 'vue-router';
 
-export default defineComponent({
-  components: {
-    HerdPasswordModal
-  },
-  emits: ['listing-created'],
-  setup() {
-    const client = (inject('client') as ComputedRef<AppAgentClient>).value;
-    const checkboxModal = ref(null);
-
-    return {
-      checkboxModal,
-      client,
+defineEmits(['listing-created']);
+const router = useRouter();
+
+const client = (inject('client') as ComputedRef<AppAgentClient>).value;
+
+const title = ref('');
+const description = ref('');
+const isPublicHerd = ref(true);
+const creatingHerd = ref(false);
+const password = ref();
+const showPasswordModal = ref(false);
+
+const isHerdValid = computed(() => title.value.length > 0);
+
+watch(title, (newTitle) => {
+  console.log('watch called');
+  title.value = newTitle.replace(/\W/g, "");
+});
+
+const createHerd = async () => {
+  creatingHerd.value = true;
+  try {
+    // Generate random network seed
+    const entropy = await randomByteArray(128)
+    const network_seed = encodeHashToBase64(entropy);
+
+    // Prepare herd cloned cell
+
+    // Clone herd cell
+    const cloneCell: ClonedCell = await client.createCloneCell({
+      role_name: 'herd',
+      modifiers: {
+        network_seed: network_seed,
+        properties: {
+          title: title.value
+        },
+      },
+    });
+
+    // Publish Listing about cell
+    const listing: Listing = { 
+        title: title.value,
+        description: description.value,
+        network_seed,
+        dna: cloneCell.cell_id[0]
     };
-  },
-  data(): {
-    title: string;
-    description: string;
-    publish: boolean;
-    creatingHerd: boolean;
-    password: string | undefined;
-    showPasswordModal: boolean;
-  } {
-    return { 
-      title: '',
-      description: '',
-      publish: true,
-      creatingHerd: false,
-      password: undefined,
-      showPasswordModal: false,
-    }
-  },
-  computed: {
-    isHerdValid() {
-      return this.title.length > 0
-    },
-  },
-  watch: {
-    title(val) {
-      this.title = val.replace(/\W/g, "");
-    },
-  },
-  methods: {
-    async createHerd() {
-      this.creatingHerd = true;
-      try {
-        // Generate random network seed
-        const entropy = await randomByteArray(128)
-        const network_seed = encodeHashToBase64(entropy);
-
-        // Prepare herd cloned cell
-
-        // Clone herd cell
-        const cloneCell: ClonedCell = await this.client.createCloneCell({
-          role_name: 'herd',
-          modifiers: {
-            network_seed: network_seed,
-            properties: {
-              title: this.title
-            },
-          },
-        });
-
-        // Publish Listing about cell
-        const listing: Listing = { 
-            title: this.title,
-            description: this.description,
-            network_seed,
-            dna: cloneCell.cell_id[0]
-        };
-
-        if(this.publish) {   
-          await this.createListing(listing);
-        } else {
-          await this.createPrivateListing(listing);
-        }
-
-        toast.success(`Cloned cell for herd "${this.title}"`);
-      } catch (e: any) {
-        toast.error(`Error creating the herd: ${e.data.data}`);
-      }
-
-      this.creatingHerd = false;
-    },
-
-  async createListing(listing: Listing) {
-    // Publish listing to public directory 
-    try {
-      const listing_ah: ActionHash = await this.client.callZome({
-          role_name: 'directory',
-          zome_name: 'directory',
-          fn_name: 'create_listing',
-          payload: listing,
-        });
-
-      this.$router.push(`/herds/${encodeHashToBase64(listing_ah)}`);
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error creating listing', e.data.data);
-    }
-  },
-  async createPrivateListing(listing: Listing) {
-    // Publish listing to private entry
-    try {
-      await this.client.callZome({
-        role_name: 'directory',
-        zome_name: 'directory',
-        fn_name: 'create_private_listing_idempotent',
-        payload: listing,
-      });
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error creating private listing', e.data.data);
+
+    if(isPublicHerd.value) {   
+      await createListing(listing);
+    } else {
+      await createPrivateListing(listing);
     }
-    // Encode listing into string to use a secret herd password
-    try {
-      const listing_babble = await this.client.callZome({
+
+    toast.success(`Cloned cell for herd "${title.value}"`);
+  } catch (e: any) {
+    toast.error(`Error creating the herd: ${e.data.data}`);
+  }
+
+  creatingHerd.value = false;
+};
+
+const createListing = async (listing: Listing) => {
+  // Publish listing to public directory 
+  try {
+    const listing_ah: ActionHash = await client.callZome({
         role_name: 'directory',
         zome_name: 'directory',
-        fn_name: 'listing_to_bubble_babble',
+        fn_name: 'create_listing',
         payload: listing,
       });
-      
-      this.password = listing_babble;
-      this.showPasswordModal = true;
-    } catch (e: any) {
-      console.log('error', e);
-      toast.error('Error converting data to mnemonic', e);
-    }
-  },
-  },
-})
+
+    router.push(`/herds/${encodeHashToBase64(listing_ah)}`);
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error creating listing', e.data.data);
+  }
+};
+
+const createPrivateListing = async (listing: Listing) => {
+  // Publish listing to private entry
+  try {
+    await client.callZome({
+      role_name: 'directory',
+      zome_name: 'directory',
+      fn_name: 'create_private_listing_idempotent',
+      payload: listing,
+    });
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error creating private listing', e.data.data);
+  }
+  // Encode listing into string to use a secret herd password
+  try {
+    const listing_babble = await client.callZome({
+      role_name: 'directory',
+      zome_name: 'directory',
+      fn_name: 'listing_to_bubble_babble',
+      payload: listing,
+    });
+    
+    password.value = listing_babble;
+    showPasswordModal.value = true;
+  } catch (e: any) {
+    console.log('error', e);
+    toast.error('Error converting data to mnemonic', e);
+  }
+};
 </script>