Merge pull request #186 from himanshu-ntml/main

Fix contact update response

packages/api/src/controllers/v1/Contacts.ts

@@ -248,12 +248,17 @@ export class Contacts {
 
 		const { id, email, subscribed, data } = ContactSchemas.manage.parse(req.body);
 
-		const contact = id ? await ContactService.id(id) : await ContactService.email(project.id, email as string);
+		let contact = id ? await ContactService.id(id) : await ContactService.email(project.id, email as string);
 
 		if (!contact || contact.projectId !== project.id) {
 			throw new NotFound("contact");
 		}
 
+		const updateData: Record<string, unknown> = {
+			email,
+			subscribed: subscribed ?? contact.subscribed,
+		};
+
 		if (data) {
 			const givenUserData = Object.entries(data);
 			const dataToUpdate = JSON.parse(contact.data ?? "{}");
@@ -266,18 +271,12 @@ export class Contacts {
 				}
 			});
 
-			await prisma.contact.update({
+			updateData.data = JSON.stringify(dataToUpdate);
-				where: { id: contact.id },
-				data: { data: JSON.stringify(dataToUpdate) },
-			});
 		}
 
-		await prisma.contact.update({
+		contact = await prisma.contact.update({
 			where: { id: contact.id },
-			data: {
+			data: updateData,
-				email,
-				subscribed: subscribed ?? contact.subscribed,
-			},
 		});
 
 		await redis.del(Keys.Project.contacts(project.id));

packages/dashboard/src/pages/contacts/index.tsx

@@ -9,7 +9,7 @@ import React, { useState } from "react";
 import { type FieldError, useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Card, Empty, FullscreenLoader, Modal, Skeleton, Table, Toggle } from "../../components";
+import { Card, Empty, FullscreenLoader, Modal, Skeleton, Table, Toggle, Dropdown } from "../../components";
 import { Dashboard } from "../../layouts";
 import { searchContacts, useContacts } from "../../lib/hooks/contacts";
 import { useActiveProject } from "../../lib/hooks/projects";
@@ -33,6 +33,7 @@ interface ContactValues {
 export default function Index() {
         const [page, setPage] = useState(1);
         const [query, setQuery] = useState<string>();
+        const [statusFilter, setStatusFilter] = useState<string>("all");
 
 	const project = useActiveProject();
 	const { data: user } = useUser();
@@ -126,11 +127,20 @@ export default function Index() {
 		}
 
                if (search && query !== undefined) {
-			if (search.contacts.length > 0) {
+                        const filtered = search.contacts
+                                .filter((c) =>
+                                        statusFilter === "all"
+                                                ? true
+                                                : statusFilter === "subscribed"
+                                                ? c.subscribed
+                                                : !c.subscribed,
+                                );
+
+                        if (filtered.length > 0) {
                                 return (
                                         <>
                                                 <Table
-							values={search.contacts
+                                                        values={filtered
                                                                 .sort((a, b) => {
                                                                         const aTrigger = a.triggers.length > 0 ? a.triggers.sort()[0].createdAt : a.createdAt;
 
@@ -184,11 +194,19 @@ export default function Index() {
 		}
 
                if (contacts) {
-			if (contacts.contacts.length > 0) {
+                        const filtered = contacts.contacts.filter((c) =>
+                                statusFilter === "all"
+                                        ? true
+                                        : statusFilter === "subscribed"
+                                        ? c.subscribed
+                                        : !c.subscribed,
+                        );
+
+                        if (filtered.length > 0) {
                                 return (
                                         <>
                                                 <Table
-							values={contacts.contacts
+                                                        values={filtered
                                                                 .sort((a, b) => {
                                                                         const aTrigger = a.triggers.length > 0 ? a.triggers.sort()[0].createdAt : a.createdAt;
 
@@ -221,7 +239,7 @@ export default function Index() {
                                                         <div className="hidden sm:block">
                                                                 <p className="text-sm text-neutral-700">
                                                                         Showing <span className="font-medium">{(page - 1) * 20}</span> to{" "}
-									<span className="font-medium">{page * 20}</span> of <span className="font-medium">{contacts.count}</span>{" "}
+                                                                        <span className="font-medium">{page * 20}</span> of <span className="font-medium">{filtered.length}</span>{" "}
                                                                         contacts
                                                                 </p>
                                                         </div>
@@ -441,7 +459,7 @@ export default function Index() {
 					title={"Contacts"}
 					description={"View and manage your contacts"}
 					actions={
-						<div className={"grid w-full gap-3 md:w-fit md:grid-cols-2"}>
+                                                <div className={"grid w-full gap-3 md:w-fit md:grid-cols-3"}>
                                                         <input
                                                                 onChange={(e) => setQuery(e.target.value)}
                                                                 autoComplete={"off"}
@@ -452,6 +470,16 @@ export default function Index() {
                                                                 }
                                                         />
 
+                                                        <Dropdown
+                                                                onChange={(v) => setStatusFilter(v)}
+                                                                values={[
+                                                                        { name: "All", value: "all" },
+                                                                        { name: "Subscribed", value: "subscribed" },
+                                                                        { name: "Unsubscribed", value: "unsubscribed" },
+                                                                ]}
+                                                                selectedValue={statusFilter}
+                                                        />
+
                                                         <motion.button
 								onClick={() => setContactModal(true)}
 								whileHover={{ scale: 1.05 }}