From f66add8167776c4eedc70efcd260f1a2f6a3058e Mon Sep 17 00:00:00 2001
From: Muhammad Ubaid Raza <mubaidr@gmail.com>
Date: Thu, 17 Oct 2024 16:00:59 +0500
Subject: [PATCH] feat: :necktie: add testimonials using key-value storage

Currently testimonials are hardcoded, moved to the hub key-value storage

https://github.com/SupersaasHQ/lemonrepo/issues/1
---
 app/components/Admin/Header.vue            |  33 ++--
 app/components/Admin/TestimonialsTable.vue |  83 ++++++++++
 app/components/Home/Testimonials.vue       | 105 +-----------
 app/pages/admin/testimonials.vue           | 182 +++++++++++++++++++++
 server/api/admin/testimonials.patch.ts     |  15 ++
 server/api/testimonials.get.ts             |   5 +
 types/testimonial.d.ts                     |  12 ++
 7 files changed, 319 insertions(+), 116 deletions(-)
 create mode 100644 app/components/Admin/TestimonialsTable.vue
 create mode 100644 app/pages/admin/testimonials.vue
 create mode 100644 server/api/admin/testimonials.patch.ts
 create mode 100644 server/api/testimonials.get.ts
 create mode 100644 types/testimonial.d.ts

diff --git a/app/components/Admin/Header.vue b/app/components/Admin/Header.vue
index 07e3d00..1333b3f 100644
--- a/app/components/Admin/Header.vue
+++ b/app/components/Admin/Header.vue
@@ -32,7 +32,10 @@
           class="max-lg:hidden"
           :ui="{ base: 'py-5', active: 'after:bg-black dark:after:bg-white' }"
         />
-        <div aria-hidden="true" class="-ml-4 flex-1" />
+        <div
+          aria-hidden="true"
+          class="-ml-4 flex-1"
+        />
         <div class="flex items-center gap-2">
           <UButton
             icon="i-ph-sign-out-duotone"
@@ -48,11 +51,11 @@
 </template>
 
 <script setup>
-const mobileMenu = ref(false);
+const mobileMenu = ref(false)
 const toggleMobileMenu = () => {
-  document.body.style.overflow = mobileMenu.value ? "auto" : "hidden";
-  mobileMenu.value = !mobileMenu.value;
-};
+  document.body.style.overflow = mobileMenu.value ? "auto" : "hidden"
+  mobileMenu.value = !mobileMenu.value
+}
 
 defineProps({
   storeAvatarUrl: {
@@ -63,7 +66,7 @@ defineProps({
     type: String,
     required: true,
   },
-});
+})
 const menuItems = [
   {
     label: "Orders",
@@ -77,19 +80,25 @@ const menuItems = [
     exact: true,
     exactHash: true,
   },
+  {
+    label: "Testimonials",
+    to: "/admin/testimonials",
+    exact: true,
+    exactHash: true,
+  },
   {
     label: "Settings",
     to: "/admin/settings",
     exact: true,
     exactHash: true,
   },
-];
+]
 
-const { clear, fetch: refreshSession } = useUserSession();
+const { clear, fetch: refreshSession } = useUserSession()
 
 const logout = async () => {
-  await clear();
-  await refreshSession();
-  return navigateTo("/");
-};
+  await clear()
+  await refreshSession()
+  return navigateTo("/")
+}
 </script>
diff --git a/app/components/Admin/TestimonialsTable.vue b/app/components/Admin/TestimonialsTable.vue
new file mode 100644
index 0000000..d2c88ed
--- /dev/null
+++ b/app/components/Admin/TestimonialsTable.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="mt-8">
+    <UTable
+      :rows="testimonials"
+      :columns="columns"
+      :loading="loading"
+    >
+      <template #loading-state>
+        <div class="flex items-center justify-center h-32">
+          <Icon
+            name="i-ph-spinner"
+            class="w-6 h-6 animate-spin"
+          />
+        </div>
+      </template>
+      <template #empty-state>
+        <div class="flex flex-col items-center justify-center py-6 gap-3">
+          <div class="text-sm text-gray-500 dark:text-gray-400">
+            {{ loading ? "Loading testimonials..." : "No testimonials found" }}
+          </div>
+        </div>
+      </template>
+      <template #author.avatar-data="{ row }">
+        <div class="flex flex-col gap-2">
+          <UAvatar
+            :src="row.author.src"
+            alt="Author avatar"
+          />
+        </div>
+      </template>
+      <template #author.name-data="{ row }">
+        <p>
+          {{ row.author.name }}
+        </p>
+      </template>
+      <template #author.description-data="{ row }">
+        <p>
+          {{ row.author.description }}
+        </p>
+      </template>
+      <template #title-data="{ row }">
+        <p>
+          {{ row.title }}
+        </p>
+      </template>
+      <template #quote-data="{ row }">
+        <p>
+          {{ row.quote }}
+        </p>
+      </template>
+      <template #actions-data="{ row }">
+        <UButton
+          color="red"
+          variant="ghost"
+          label="delete"
+          @click="emit('onDelete', row)"
+        />
+      </template>
+    </UTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  testimonials: Testimonial[]
+  loading: boolean
+}>()
+
+const columns = [
+  { key: "author.avatar", label: "Author Avatar" },
+  { key: "author.name", label: "Author Name" },
+  { key: "author.description", label: "Author Description" },
+  { key: "title", label: "Title" },
+  { key: "quote", label: "Quote" },
+  {
+    key: "actions",
+  },
+]
+
+const emit = defineEmits<{
+  (e: "onDelete", value: Testimonial): void
+}>()
+</script>
diff --git a/app/components/Home/Testimonials.vue b/app/components/Home/Testimonials.vue
index 3389619..4f3955a 100644
--- a/app/components/Home/Testimonials.vue
+++ b/app/components/Home/Testimonials.vue
@@ -54,110 +54,7 @@
 </template>
 
 <script setup>
-const testimonials = [
-  {
-    title: "Super Powerful",
-    quote:
-      "The stack that Supersaas is built upon is super powerful and easy to work with, especially when used with NuxtHub / Cloudflare. Fayaz has been super helpful in making it work and adopting feedback.",
-    author: {
-      name: "Tim Pulver",
-      description: "Freelancer/Software Engineer",
-      avatar: {
-        src: "https://pbs.twimg.com/profile_images/985092522329468928/qcfeEMbF_400x400.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Features i would buy it for",
-    quote:
-      "This is really well made! especially with features like passkey and hooks for everything. These are the features i would buy it for",
-    author: {
-      name: "Rishi Mohan",
-      description: "Founder, Pika.Style",
-      avatar: {
-        src: "https://pbs.twimg.com/profile_images/1792311421994147840/ZO_-Kmol_400x400.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Fantastic",
-    quote: "👆🏻 As a customer I can confirm, it's fantastic 🔥",
-    author: {
-      name: "Thomas Sanlis",
-      description: "Founder, Unned.best",
-      avatar: {
-        src: "https://essentials.supersaas.dev/thomas.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Absolute time saver",
-    quote:
-      "It's an absolute time saver! If you are a freelancer or keep building things, get this! ✨",
-    author: {
-      name: "Mushtaq Ahmed",
-      description: "Senior Product Engineer, Locale.ai",
-      avatar: {
-        src: "https://pbs.twimg.com/profile_images/1823266963553964032/CTnrLhkL_400x400.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Satisfaction 100%",
-    quote: "I’m very satisfied of your boilerplate. Thanks!",
-    author: {
-      name: "Lilian",
-      description: "SoftwareEngineer",
-      avatar: {
-        src: "",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Simple yet awesome",
-    quote:
-      "I was struggling with implementing payment and auth in my side projects when I found http://supersaas.dev . Its super simple, with all the necessary things bundled together with proper documentation and abstractions. I got to launch my project in a days work and didnt have to think about the logistics of wiring everything up and was just able to concentrate on my core product. If that aint super i dont know what is.. the founder support is again amazing. He got on a call to ensure everything was implemented correctl",
-    author: {
-      name: "Sooraj",
-      description: "Backend Engineer",
-      avatar: {
-        src: "https://pbs.twimg.com/profile_images/1823407485002113024/6pxHkYUj_400x400.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Love it!",
-    quote:
-      "Really well made. Great news! Im playing with Supersaas template and its been amazing! Learned a lot. Thinking about starting to build something with it. Love it!",
-    author: {
-      name: "Alexandr Os",
-      description: "Engineer and Foudnder",
-      avatar: {
-        src: "https://pbs.twimg.com/profile_images/1811928265621229568/ejtIodY5_400x400.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-  {
-    title: "Saving me a shit ton of time",
-    quote:
-      "Using these for my side project. This is saving me a shit ton of time and effort. Really happy I purchased this.",
-    author: {
-      name: "Attaullah F",
-      description: "Senior Engineer, Congnizant",
-      avatar: {
-        src: "https://essentials.supersaas.dev/62116.jpg",
-        loading: "lazy",
-      },
-    },
-  },
-];
+const { data: testimonials } = useFetch("/api/testimonials")
 </script>
 
 <style></style>
diff --git a/app/pages/admin/testimonials.vue b/app/pages/admin/testimonials.vue
new file mode 100644
index 0000000..3611561
--- /dev/null
+++ b/app/pages/admin/testimonials.vue
@@ -0,0 +1,182 @@
+<template>
+  <AdminPageContainer title="Testimonials">
+    <template #actions>
+      <div class="flex items-center gap-2 rounded-full py-1.5 px-2.5 text-xs">
+        <UButton @click="isTestimonialModalOpen = true">
+          Add Testimonial
+        </UButton>
+      </div>
+    </template>
+    <AdminTestimonialsTable
+      :testimonials="testimonials || []"
+      :loading="status === 'pending'"
+      @on-delete="onDelete"
+    />
+
+    <UModal v-model="isTestimonialModalOpen">
+      <UCard>
+        <template #header>
+          <div class="flex justify-between">
+            <div>Add Testimonial</div>
+            <div>
+              <UButton
+                @click="onCancel"
+                color="gray"
+                variant="ghost"
+                icon="i-heroicons-x-mark-20-solid"
+              />
+            </div>
+          </div>
+        </template>
+
+        <UForm
+          :schema="schema"
+          :state="state"
+          class="space-y-4"
+          @submit="onSubmit"
+        >
+          <UFormGroup
+            label="Title"
+            name="title"
+          >
+            <UInput v-model="state.title" />
+          </UFormGroup>
+
+          <UFormGroup
+            label="Quote"
+            name="quote"
+          >
+            <UTextarea v-model="state.quote" />
+          </UFormGroup>
+
+          <UFormGroup
+            label="Author Name"
+            name="name"
+          >
+            <UInput v-model="state.author.name" />
+          </UFormGroup>
+
+          <UFormGroup
+            label="Description"
+            name="description"
+          >
+            <UTextarea v-model="state.author.description" />
+          </UFormGroup>
+
+          <UFormGroup
+            label="Avatar URL"
+            name="url"
+          >
+            <UInput v-model="state.author.avatar.src" />
+          </UFormGroup>
+
+          <UButton
+            type="submit"
+            block
+            :loading="testimonialAdding"
+          >
+            Save
+          </UButton>
+        </UForm>
+      </UCard>
+    </UModal>
+  </AdminPageContainer>
+</template>
+
+<script lang="ts" setup>
+import type { FormSubmitEvent } from "#ui/types"
+import { z } from "zod"
+import { toast } from "vue-sonner"
+
+const testimonialAdding = ref(false)
+const testimonialDeleting = ref(false)
+const isTestimonialModalOpen = ref(false)
+
+const schema = z.object({
+  title: z.string().min(3, "Title is required"),
+  quote: z.string().min(3, "Quote is required"),
+  author: z.object({
+    name: z.string().min(3, "Author name is required"),
+    description: z.string().min(3, "Author description is required"),
+    avatar: z.object({
+      src: z.string().url("Invalid URL for avatar"),
+      loading: z.enum(["lazy"]),
+    }),
+  }),
+})
+
+const state = reactive<Testimonial>({
+  title: "",
+  quote: "",
+  author: {
+    name: "",
+    description: "",
+    avatar: {
+      src: "",
+      loading: "lazy",
+    },
+  },
+})
+
+const { data: testimonials, status } = await useFetch<Testimonial[], any>(
+  "/api/testimonials"
+)
+
+async function onDelete(testimonial: Testimonial) {
+  if (!confirm("Delete this testimonial?")) {
+    return
+  }
+
+  testimonials.value = testimonials.value?.filter((t) => {
+    return (
+      t.title !== testimonial.title && t.author.name !== testimonial.author.name
+    )
+  })
+
+  testimonialDeleting.value = true
+  try {
+    await $fetch("/api/admin/testimonials", {
+      method: "PATCH",
+      body: {
+        testimonials: testimonials.value,
+      },
+    })
+
+    isTestimonialModalOpen.value = false
+    toast.success("Testimonial deleted successfully")
+  } catch (error) {
+    toast.error("Failed to delete testimonial")
+  } finally {
+    testimonialDeleting.value = false
+  }
+}
+
+async function onSubmit(event: FormSubmitEvent<any>) {
+  testimonialAdding.value = true
+  try {
+    if (!testimonials.value) {
+      testimonials.value = []
+    }
+
+    testimonials.value = testimonials.value.concat(state)
+
+    await $fetch("/api/admin/testimonials", {
+      method: "PATCH",
+      body: {
+        testimonials: testimonials.value,
+      },
+    })
+
+    isTestimonialModalOpen.value = false
+    toast.success("Testimonial added successfully")
+  } catch (error) {
+    toast.error("Failed to add testimonial")
+  } finally {
+    testimonialAdding.value = false
+  }
+}
+
+async function onCancel() {
+  isTestimonialModalOpen.value = false
+}
+</script>
diff --git a/server/api/admin/testimonials.patch.ts b/server/api/admin/testimonials.patch.ts
new file mode 100644
index 0000000..96f5b2d
--- /dev/null
+++ b/server/api/admin/testimonials.patch.ts
@@ -0,0 +1,15 @@
+export default defineEventHandler(async (event) => {
+  const { user } = await requireUserSession(event);
+  if (!user.admin) {
+    throw createError({
+      statusCode: 403,
+      message: "You are not authorized to perform this action",
+    });
+  }
+  const { testimonials = [] } = await readBody(event);
+
+  await hubKV().setItem("testimonials", testimonials);
+  return {
+    success: true,
+  };
+})
diff --git a/server/api/testimonials.get.ts b/server/api/testimonials.get.ts
new file mode 100644
index 0000000..7107b7e
--- /dev/null
+++ b/server/api/testimonials.get.ts
@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+  return hubKV().getItem<Testimonial[]>("testimonials", {
+    defaultValue: [],
+  });
+})
diff --git a/types/testimonial.d.ts b/types/testimonial.d.ts
new file mode 100644
index 0000000..501e61a
--- /dev/null
+++ b/types/testimonial.d.ts
@@ -0,0 +1,12 @@
+type Testimonial = {
+  title: string
+  quote: string
+  author: {
+    name: string
+    description: string
+    avatar: {
+      src: string
+      loading: "lazy"
+    }
+  }
+}