From 1d96d9b83ea70d756623ff7c2e0fca62b8366783 Mon Sep 17 00:00:00 2001
From: joe-irving <joeirving.jbi@gmail.com>
Date: Tue, 11 Jun 2024 00:43:34 +0100
Subject: [PATCH] add component for counter

---
 components/PetitionPage.vue             |  8 ++++---
 components/PetitionSignatureCounter.vue | 24 +++++++++++++++++++
 composables/useGetNextTarget.ts         | 31 +++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 components/PetitionSignatureCounter.vue
 create mode 100644 composables/useGetNextTarget.ts

diff --git a/components/PetitionPage.vue b/components/PetitionPage.vue
index 723666d..2c50d6e 100644
--- a/components/PetitionPage.vue
+++ b/components/PetitionPage.vue
@@ -12,9 +12,9 @@ const { data: petition } = await $client.petition.getPublic.useQuery({
   id: props.id
 })
 const { data: theme } = petition.value?.petitionCampaign?.styleThemeId ? await $client.styleTheme.get.useQuery(petition.value?.petitionCampaign?.styleThemeId) : { data: undefined }
-// const { data: signatures } = $client.petition.signatureCount.useQuery({
-//   id: props.id
-// })
+const { data: signatures } = $client.petition.signatureCount.useQuery({
+  id: props.id
+})
 const shareUrl = ref(useShareUrl(petition.value?.slug || ''))
 
 const success = ref(false)
@@ -46,6 +46,7 @@ useSeoMeta({
           <n-space vertical>
             <n-image :src="petition?.image?.url" class="hidden sm:block" />
             <Nh1>{{ petition?.title }}</Nh1>
+            <PetitionSignatureCounter :signatures="signatures" />
             <PetitionForm
               class="block sm:hidden mb-8"
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
@@ -65,6 +66,7 @@ useSeoMeta({
         </n-space>
         <div class="hidden sm:flex">
           <n-space class="max-w-xs border-0 sm:border shadow-none sm:shadow-md rounded p-4">
+            <PetitionSignatureCounter :signatures="signatures" />
             <PetitionForm
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
               :pc-endpoint="(petition?.petitionCampaign?.petitionEndpointURL || '') + '/signatures'"
diff --git a/components/PetitionSignatureCounter.vue b/components/PetitionSignatureCounter.vue
new file mode 100644
index 0000000..e7e92ac
--- /dev/null
+++ b/components/PetitionSignatureCounter.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// some comment
+import type { inferRouterOutputs } from '@trpc/server'
+import type { AppRouter } from '~/server/trpc/routers'
+
+type RouterOutput = inferRouterOutputs<AppRouter>;
+type Signatures = RouterOutput['petition']['signatureCount'];
+
+const props = defineProps({
+  signatures: {
+    type: Object as PropType<Signatures>,
+    required: true
+  }
+})
+const count = ref(12323)
+const target = computed(() => useGetNextTarget(count.value))
+</script>
+
+<template>
+  <div>
+    <div>{{ count }} : {{ target }}</div>
+    <div><n-input-number v-model:value="count" /></div>
+  </div>
+</template>
diff --git a/composables/useGetNextTarget.ts b/composables/useGetNextTarget.ts
new file mode 100644
index 0000000..9ac6415
--- /dev/null
+++ b/composables/useGetNextTarget.ts
@@ -0,0 +1,31 @@
+// const targets = [
+//   10,
+//   50,
+//   100,
+//   200,
+//   300,
+//   500,
+//   800,
+//   1000,
+//   1500,
+//   2000,
+//   3500,
+//   4000,
+//   5000,
+//   7000,
+//   10000,
+//   13000,
+//   15000,
+//   20000,
+//   35000,
+//   40000
+// ]
+
+export const useGetNextTarget = (count: number) => {
+  // let startCount = count
+  let mag = Math.floor(Math.log10(count))
+  if (count === 10 ** mag) {
+    mag += 1
+  }
+  return Math.ceil(count / 10 ** mag) * 10 ** mag
+}