✨ Add character count limit for author's message (#212)

* ✨ Add character count limit for author's message

* 🎨 Update components error & hint UI using default props

* ♻️ Refactor char count computed to composables

* 🎨 Rename params

* ♻️ Declare AUTHOR_MESSAGE_LIMIT as a constant

composables/useMessageCharCount.ts

@@ -0,0 +1,29 @@
+import { computed, Ref, ComputedRef } from 'vue'
+
+interface UseMessageCharCountReturn {
+  messageCharCount: ComputedRef<number>;
+  isLimitReached: ComputedRef<boolean>;
+}
+
+function isFullWidthChar (char: string): boolean {
+  return char.charCodeAt(0) > 255
+}
+
+export function useMessageCharCount (memo: Ref<string>, limit: number): UseMessageCharCountReturn {
+  const messageCharCount = computed((): number => {
+    let count = 0
+    for (let i = 0; i < memo.value.length; i++) {
+      count += isFullWidthChar(memo.value[i]) ? 2 : 1
+    }
+    return count
+  })
+
+  const isLimitReached = computed((): boolean => {
+    return messageCharCount.value > limit
+  })
+
+  return {
+    messageCharCount,
+    isLimitReached
+  }
+}

constant/index.ts

@@ -22,3 +22,5 @@ export const AFFILIATION_CHANNELS = [
   { id: '@nowherebooks', name: '飛地書店' },
   { id: '@samkeebook', name: '森記圖書公司' }
 ]
+
+export const AUTHOR_MESSAGE_LIMIT = 98

pages/nft-book-store/collection/send/[collectionId].vue

@@ -88,8 +88,15 @@
         </table>
       </UCard>
 
-      <UFormGroup label="Enter Author's Message" hint="optional">
-        <UTextarea v-model="memo" placeholder="default memo" />
+      <UFormGroup
+        label="Enter Author's Message"
+        :error="isLimitReached"
+        :hint="`${messageCharCount} / ${AUTHOR_MESSAGE_LIMIT}`"
+      >
+        <UTextarea
+          v-model="memo"
+          placeholder="default memo"
+        />
       </UFormGroup>
 
       <UFormGroup
@@ -160,6 +167,8 @@ import { useNftStore } from '~/stores/nft'
 import { useCollectionStore } from '~/stores/collection'
 import { parseImageURLFromMetadata } from '~/utils'
 import { getNFTs, getNFTOwner, signExecNFTSendAuthz, signSendNFTs } from '~/utils/cosmos'
+import { useMessageCharCount } from '~/composables/useMessageCharCount'
+import { AUTHOR_MESSAGE_LIMIT } from '~/constant'
 
 const { LIKE_CO_API, LCD_URL } = useRuntimeConfig().public
 const store = useWalletStore()
@@ -183,6 +192,7 @@ const collectionId = ref(route.params.collectionId as string)
 const paymentId = ref(route.query.payment_id as string)
 const ownerWallet = ref(route.query.owner_wallet as string || wallet.value)
 const memo = ref('')
+const { messageCharCount, isLimitReached } = useMessageCharCount(memo, AUTHOR_MESSAGE_LIMIT)
 
 const nftIds = ref<string[]>([])
 const nftNestedIds = ref<string[][]>([])
@@ -196,7 +206,7 @@ const orderInfo = ref<any>({})
 const nftImages = ref<string[]>([])
 
 const userIsOwner = computed(() => wallet.value && ownerWallet.value === wallet.value)
-const isSendButtonDisabled = computed(() => isEditingNFTId.value || isLoading.value || isVerifyingNFTId.value || isAutoFetchingNFTId.value || !!nftIdError.value)
+const isSendButtonDisabled = computed(() => isEditingNFTId.value || isLoading.value || isVerifyingNFTId.value || isAutoFetchingNFTId.value || !!nftIdError.value || isLimitReached.value)
 
 const collectionName = computed(() => collectionStore.getCollectionById(collectionId.value as string)?.name)
 const classIds = computed(() => collectionStore.getCollectionById(collectionId.value as string)?.classIds)

pages/nft-book-store/send/[classId].vue

@@ -95,8 +95,15 @@
         </table>
       </UCard>
 
-      <UFormGroup label="Enter Author's Message" hint="optional">
-        <UTextarea v-model="memo" placeholder="default memo" />
+      <UFormGroup
+        label="Enter Author's Message"
+        :error="isLimitReached"
+        :hint="`${messageCharCount} / ${AUTHOR_MESSAGE_LIMIT}`"
+      >
+        <UTextarea
+          v-model="memo"
+          placeholder="default memo"
+        />
       </UFormGroup>
 
       <UFormGroup
@@ -164,6 +171,8 @@ import { useWalletStore } from '~/stores/wallet'
 import { useNftStore } from '~/stores/nft'
 import { parseImageURLFromMetadata } from '~/utils'
 import { signExecNFTSendAuthz, signSendNFTs } from '~/utils/cosmos'
+import { useMessageCharCount } from '~/composables/useMessageCharCount'
+import { AUTHOR_MESSAGE_LIMIT } from '~/constant'
 
 const { LIKE_CO_API, LCD_URL } = useRuntimeConfig().public
 
@@ -186,6 +195,7 @@ const classId = ref(route.params.classId as string)
 const paymentId = ref(route.query.payment_id as string)
 const ownerWallet = ref(route.query.owner_wallet as string || wallet.value)
 const memo = ref('')
+const { messageCharCount, isLimitReached } = useMessageCharCount(memo, AUTHOR_MESSAGE_LIMIT)
 
 const nftId = ref('')
 const nftIds = ref([] as string[])
@@ -199,7 +209,7 @@ const orderInfo = ref<any>({})
 const nftImage = ref('')
 
 const userIsOwner = computed(() => wallet.value && ownerWallet.value === wallet.value)
-const isSendButtonDisabled = computed(() => isEditingNFTId.value || isLoading.value || isVerifyingNFTId.value || isAutoFetchingNFTId.value || !!nftIdError.value)
+const isSendButtonDisabled = computed(() => isEditingNFTId.value || isLoading.value || isVerifyingNFTId.value || isAutoFetchingNFTId.value || !!nftIdError.value || isLimitReached.value)
 
 const nftClassName = computed(() => nftStore.getClassMetadataById(classId.value as string)?.name)