Merge pull request #219 from GeekGene/feat/confirm-mewmew

Feat/confirm mewmew
GeekGene · Sep 9, 2023 · 2ad9395 · 2ad9395
2 parents bfe47eb + 96ced38
commit 2ad9395
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 55 deletions.
diff --git a/ui/src/components/BaseMewListItem.vue b/ui/src/components/BaseMewListItem.vue
@@ -189,11 +189,7 @@
                   'text-green-400 cursor-default': feedMew.is_mewmewed,
                   'text-base-300 hover:text-neutral': !feedMew.is_mewmewed,
                 }"
-                @click.stop.prevent="
-                  if (!feedMew.is_mewmewed) {
-                    createMewmew();
-                  }
-                "
+                @click.stop.prevent="showCreateMewmewDialog = true"
               >
                 <IconRepeatBold class="w-4 h-4" />
                 <div v-if="feedMew.mewmews_count > 0" class="text-xs">
@@ -293,10 +289,15 @@
       v-model="showToggleLickMewDialog"
       @profile-created="toggleLickMew"
     />
-    <CreateProfileIfNotFoundDialog
-      v-model="showCreateMewmewDialog"
-      @profile-created="createMewmew"
-    />
+    <CreateProfileIfNotFoundDialog v-model="showCreateMewmewDialog">
+      <CreateMewDialog
+        v-model="showCreateMewmewDialog"
+        :mew-type="{ [MewTypeName.Mewmew]: feedMew.action_hash }"
+        :original-mew="feedMew"
+        :original-author="feedMew.original_mew?.author_profile"
+        @mew-created="onCreateMewmew"
+      />
+    </CreateProfileIfNotFoundDialog>
     <BaseConfirmDialog
       v-model="showConfirmDeleteDialog"
       title="Delete Mew"
@@ -495,36 +496,10 @@ const togglePinMew = async () => {
   isUpdatingPin.value = false;
 };
 
-const createMewmew = async () => {
-  if (!myProfile.value) {
-    showCreateMewmewDialog.value = true;
-    return;
-  }
+const onCreateMewmew = async (feedMew: FeedMew) => {
   showCreateMewmewDialog.value = false;
-
-  const originalActionHash =
-    MewTypeName.Mewmew in props.feedMew.mew.mew_type
-      ? props.feedMew.mew.mew_type[MewTypeName.Mewmew]
-      : props.feedMew.action_hash;
-
-  const mew: Mew = {
-    mew_type: { [MewTypeName.Mewmew]: originalActionHash },
-    text: "",
-    links: [],
-  };
-
-  try {
-    const feedMew: FeedMew = await client.callZome({
-      role_name: "mewsfeed",
-      zome_name: "mews",
-      fn_name: "create_mew_with_context",
-      payload: mew,
-    });
-    emit("mewmew-created", feedMew);
-    showMessage("Mewmewed");
-  } catch (e) {
-    showError(e);
-  }
+  emit("mewmew-created", feedMew);
+  showMessage("Mewmewed");
 };
 
 const onCreateQuote = async (feedMew: FeedMew) => {

diff --git a/ui/src/components/CreateMewDialog.vue b/ui/src/components/CreateMewDialog.vue
@@ -1,7 +1,11 @@
 <template>
   <BaseDialog
     :model-value="modelValue"
-    :initial-focus-ref="createMewInputRef?.$refs.mewContainerInput"
+    :initial-focus-ref="
+      MewTypeName.Mewmew in mewType
+        ? createMewInputRef?.$refs.createButtonInput
+        : createMewInputRef?.$refs.mewContainerInput
+    "
     @update:model-value="(val: boolean) => emit('update:model-value', val)"
   >
     <profiles-context :store="profilesStore">
@@ -25,7 +29,9 @@
       <div
         v-if="
           mewType !== undefined &&
-          (MewTypeName.Reply in mewType || MewTypeName.Quote in mewType) &&
+          (MewTypeName.Reply in mewType ||
+            MewTypeName.Quote in mewType ||
+            MewTypeName.Mewmew in mewType) &&
           originalMew
         "
         class="bg-base-200 rounded-3xl mb-4 mx-4"

diff --git a/ui/src/components/CreateMewInput.vue b/ui/src/components/CreateMewInput.vue
@@ -20,6 +20,7 @@
 
     <div class="flex-1 px-4 sm:px-8 h-full">
       <div
+        v-if="isMewTypeWithText"
         ref="mewContainer"
         class="h-full w-full flex flex-col justify-between items-start relative"
       >
@@ -146,16 +147,25 @@
     </div>
 
     <button
+      ref="createButtonInput"
       class="btn btn-neutral btn-sm sm:btn-md rounded-full"
-      :class="{ 'btn-disabled': isMewEmpty || isMewOverfull || isMewUnderfull }"
+      :class="{
+        'btn-disabled':
+          (isMewEmpty || isMewOverfull || isMewUnderfull) && isMewTypeWithText,
+      }"
       :loading="saving"
       tabindex="0"
       @click="publishMew()"
       @keydown.enter.prevent="publishMew()"
     >
       <div class="flex justify-start items-center space-x-1 sm:space-x-2">
         <IconArrowForwardOutline class="text-xl" />
-        <div>Send <br class="inline-block sm:hidden" />Mew</div>
+        <div>
+          <template v-if="MewTypeName.Mewmew in props.mewType">Mewmew</template>
+          <template v-else>
+            Send <br class="inline-block sm:hidden" />Mew
+          </template>
+        </div>
       </div>
     </button>
   </div>
@@ -231,6 +241,7 @@ const currentAgentSearch = ref("");
 const agentAutocompletions = ref<Array<[AgentPubKey, Profile]>>([]);
 const autocompleterLoading = ref(false);
 const showCreateProfileDialog = ref(false);
+const createButtonInput = ref();
 
 const isMewEmpty = computed(() => mewContentLength.value === 0);
 const isMewFull = computed(
@@ -263,6 +274,13 @@ const linkTargetValid = computed(() => {
 
   return isRawUrl(linkTarget.value);
 });
+const isMewTypeWithText = computed(() => {
+  return (
+    MewTypeName.Original in props.mewType ||
+    MewTypeName.Reply in props.mewType ||
+    MewTypeName.Quote in props.mewType
+  );
+});
 
 onMounted(async () => {
   focusInputField();
@@ -313,17 +331,21 @@ const publishMew = async (profile: undefined | Profile = undefined) => {
   }
   showCreateProfileDialog.value = false;
 
-  if (!mewContainerInput.value) return;
-
-  // build link array
-  const links = collectLinksWithinElement(mewContainerInput.value);
-
   const mew: Mew = {
-    text: getTrimmedText(),
-    links,
+    text: "",
+    links: [],
     mew_type: props.mewType,
   };
 
+  if (isMewTypeWithText.value && mewContainerInput.value) {
+    // build link array
+    const links = collectLinksWithinElement(mewContainerInput.value);
+    mew.text = getTrimmedText();
+    mew.links = links;
+
+    if (!mewContainerInput.value) return;
+  }
+
   try {
     saving.value = true;
     const feedMew: FeedMew = await client.callZome({
@@ -341,11 +363,14 @@ const publishMew = async (profile: undefined | Profile = undefined) => {
   } finally {
     saving.value = false;
   }
-  mewContainerInput.value.textContent = "";
-  mewContentLength.value = 0;
-  hideAutocompleter();
-  resetLinkTargetInput();
-  focusInputField();
+
+  if (isMewTypeWithText.value && mewContainerInput.value) {
+    mewContainerInput.value.textContent = "";
+    mewContentLength.value = 0;
+    hideAutocompleter();
+    resetLinkTargetInput();
+    focusInputField();
+  }
 };
 
 /**
@@ -579,7 +604,6 @@ const onCaretPositionChange = () => {
       }
       // current word is a URL
     } else if (isLinkTag(currentWord)) {
-
       // find start of tag that the caret is positioned at
       const behind = content.substring(0, selection.anchorOffset - 1);
       let lastCaretIndex = -1;