infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

feat(dashboard): add status filter for contacts

Browse Source
This commit is contained in:
Himanshu Ahuja
2025-06-03 18:48:27 -04:00
parent f877153e58
commit 45697cf6b1
1 changed files with 106 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/dashboard/src/pages/contacts/index.tsx
+35 -7
View File
@@ -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 }}