fix: improved person fetching (#3161)

2026-02-23 10:09:20 -06:00 · 2024-09-20 10:39:22 +05:30
parent 0b553447e0
commit e4fceb2e5e
8 changed files with 46 additions and 48 deletions
--- a/apps/web/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView.tsx
@@ -1,14 +1,11 @@
 "use client";

-import {
-  getPersonAttributesAction,
-  getPersonsAction,
-} from "@/app/(app)/environments/[environmentId]/(people)/people/actions";
+import { getPersonsAction } from "@/app/(app)/environments/[environmentId]/(people)/people/actions";
 import { PersonTable } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonTable";
 import { useEffect, useState } from "react";
 import React from "react";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TPerson, TPersonTableData } from "@formbricks/types/people";
+import { TPersonWithAttributes } from "@formbricks/types/people";

 interface PersonDataViewProps {
  environment: TEnvironment;
@@ -17,8 +14,7 @@ interface PersonDataViewProps {
 }

 export const PersonDataView = ({ environment, personCount, itemsPerPage }: PersonDataViewProps) => {
-  const [persons, setPersons] = useState<TPerson[]>([]);
-  const [personTableData, setPersonTableData] = useState<TPersonTableData[]>([]);
+  const [persons, setPersons] = useState<TPersonWithAttributes[]>([]);
  const [pageNumber, setPageNumber] = useState<number>(1);
  const [totalPersons, setTotalPersons] = useState<number>(0);
  const [isDataLoaded, setIsDataLoaded] = useState<boolean>(false);
@@ -40,41 +36,13 @@ export const PersonDataView = ({ environment, personCount, itemsPerPage }: Perso
        }
      } catch (error) {
        console.error("Error fetching people data:", error);
-      }
-    };
-
-    fetchData();
-  }, [pageNumber, personCount, itemsPerPage, environment.id]);
-
-  // Fetch additional person attributes and update table data
-  useEffect(() => {
-    const fetchAttributes = async () => {
-      try {
-        const updatedPersonTableData = await Promise.all(
-          persons.map(async (person) => {
-            const attributes = await getPersonAttributesAction({
-              environmentId: environment.id,
-              personId: person.id,
-            });
-            return {
-              createdAt: person.createdAt,
-              personId: person.id,
-              userId: person.userId,
-              email: attributes?.data?.email ?? "",
-              attributes: attributes?.data ?? {},
-            };
-          })
-        );
-        setPersonTableData(updatedPersonTableData);
-      } catch (error) {
-        console.error("Error fetching person attributes:", error);
      } finally {
        setIsDataLoaded(true);
      }
    };

-    fetchAttributes();
-  }, [persons, environment.id]);
+    fetchData();
+  }, [pageNumber, personCount, itemsPerPage, environment.id]);

  const fetchNextPage = async () => {
    if (hasMore && !loadingNextPage) {
@@ -97,6 +65,15 @@ export const PersonDataView = ({ environment, personCount, itemsPerPage }: Perso
    setPersons((prevPersons) => prevPersons.filter((p) => !personIds.includes(p.id)));
  };

+  const personTableData = persons.map((person) => ({
+    id: person.id,
+    userId: person.userId,
+    email: person.attributes.email,
+    createdAt: person.createdAt,
+    attributes: person.attributes,
+    personId: person.id,
+  }));
+
  return (
    <PersonTable
      data={personTableData}
--- a/apps/web/app/(app)/environments/[environmentId]/(people)/people/components/PersonTable.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/(people)/people/components/PersonTable.tsx
@@ -18,6 +18,7 @@ import { cn } from "@formbricks/lib/cn";
 import { TPersonTableData } from "@formbricks/types/people";
 import { Button } from "@formbricks/ui/Button";
 import { DataTableHeader, DataTableSettingsModal, DataTableToolbar } from "@formbricks/ui/DataTable";
+import { getCommonPinningStyles } from "@formbricks/ui/DataTable/lib/utils";
 import { Skeleton } from "@formbricks/ui/Skeleton";
 import { Table, TableBody, TableCell, TableHeader, TableRow } from "@formbricks/ui/Table";

@@ -157,7 +158,7 @@ export const PersonTable = ({
          deleteRows={deletePersons}
          type="person"
        />
-        <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-300">
+        <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-200">
          <div className="w-full overflow-x-auto">
            <Table style={{ width: table.getCenterTotalSize(), tableLayout: "fixed" }}>
              <TableHeader>
@@ -189,8 +190,9 @@ export const PersonTable = ({
                          if (cell.column.id === "select") return;
                          router.push(`/environments/${environmentId}/people/${row.id}`);
                        }}
+                        style={cell.column.id === "select" ? getCommonPinningStyles(cell.column) : {}}
                        className={cn(
-                          "border-slate-300 bg-white shadow-none group-hover:bg-slate-100",
+                          "border-slate-200 bg-white shadow-none group-hover:bg-slate-100",
                          row.getIsSelected() && "bg-slate-100",
                          {
                            "border-r": !cell.column.getIsLastColumn(),
--- a/apps/web/app/(app)/environments/[environmentId]/(people)/people/page.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/(people)/people/page.tsx
@@ -1,6 +1,7 @@
 import { PersonDataView } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView";
 import { PersonSecondaryNavigation } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonSecondaryNavigation";
 import { CircleHelpIcon } from "lucide-react";
+import { ITEMS_PER_PAGE } from "@formbricks/lib/constants";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getPersonCount } from "@formbricks/lib/person/service";
 import { Button } from "@formbricks/ui/Button";
@@ -31,7 +32,7 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
      <PageHeader pageTitle="People" cta={HowToAddPeopleButton}>
        <PersonSecondaryNavigation activeId="people" environmentId={params.environmentId} />
      </PageHeader>
-      <PersonDataView environment={environment} personCount={personCount} itemsPerPage={25} />
+      <PersonDataView environment={environment} personCount={personCount} itemsPerPage={ITEMS_PER_PAGE} />
    </PageContentWrapper>
  );
 };
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable.tsx
@@ -176,7 +176,7 @@ export const ResponseTable = ({
          deleteRows={deleteResponses}
          type="response"
        />
-        <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-300">
+        <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-200">
          <div className="w-full overflow-x-auto">
            <Table
              style={{
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx
@@ -46,7 +46,7 @@ export const ResponseTableCell = ({
    <TableCell
      key={cell.id}
      className={cn(
-        "border-slate-300 bg-white shadow-none group-hover:bg-slate-100",
+        "border-slate-200 bg-white shadow-none group-hover:bg-slate-100",
        row.getIsSelected() && "bg-slate-100",
        {
          "border-r": !cell.column.getIsLastColumn(),
--- a/packages/lib/person/service.ts
+++ b/packages/lib/person/service.ts
@@ -5,7 +5,7 @@ import { prisma } from "@formbricks/database";
 import { ZOptionalNumber, ZString } from "@formbricks/types/common";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { TPerson } from "@formbricks/types/people";
+import { TPerson, TPersonWithAttributes } from "@formbricks/types/people";
 import { cache } from "../cache";
 import { ITEMS_PER_PAGE } from "../constants";
 import { validateInputs } from "../utils/validate";
@@ -17,6 +17,16 @@ export const selectPerson = {
  createdAt: true,
  updatedAt: true,
  environmentId: true,
+  attributes: {
+    select: {
+      value: true,
+      attributeClass: {
+        select: {
+          name: true,
+        },
+      },
+    },
+  },
 };

 type TransformPersonInput = {
@@ -33,7 +43,7 @@ type TransformPersonInput = {
  updatedAt: Date;
 };

-export const transformPrismaPerson = (person: TransformPersonInput): TPerson => {
+export const transformPrismaPerson = (person: TransformPersonInput): TPersonWithAttributes => {
  const attributes = person.attributes.reduce(
    (acc, attr) => {
      acc[attr.attributeClass.name] = attr.value;
@@ -49,7 +59,7 @@ export const transformPrismaPerson = (person: TransformPersonInput): TPerson =>
    environmentId: person.environmentId,
    createdAt: new Date(person.createdAt),
    updatedAt: new Date(person.updatedAt),
-  } as TPerson;
+  } as TPersonWithAttributes;
 };

 export const getPerson = reactCache(
@@ -81,13 +91,13 @@ export const getPerson = reactCache(
 );

 export const getPeople = reactCache(
-  (environmentId: string, page?: number): Promise<TPerson[]> =>
+  (environmentId: string, page?: number): Promise<TPersonWithAttributes[]> =>
    cache(
      async () => {
        validateInputs([environmentId, ZId], [page, ZOptionalNumber]);

        try {
-          return await prisma.person.findMany({
+          const persons = await prisma.person.findMany({
            where: {
              environmentId: environmentId,
            },
@@ -95,6 +105,8 @@ export const getPeople = reactCache(
            take: page ? ITEMS_PER_PAGE : undefined,
            skip: page ? ITEMS_PER_PAGE * (page - 1) : undefined,
          });
+
+          return persons.map((person) => transformPrismaPerson(person));
        } catch (error) {
          if (error instanceof Prisma.PrismaClientKnownRequestError) {
            throw new DatabaseError(error.message);
--- a/packages/types/people.ts
+++ b/packages/types/people.ts
@@ -16,6 +16,12 @@ export const ZPersonTableData = z.object({
  attributes: ZAttributes,
 });

+export const ZPersonWithAttributes = ZPerson.extend({
+  attributes: ZAttributes,
+});
+
+export type TPersonWithAttributes = z.infer<typeof ZPersonWithAttributes>;
+
 export type TPersonTableData = z.infer<typeof ZPersonTableData>;

 export type TPerson = z.infer<typeof ZPerson>;
--- a/packages/ui/DataTable/components/DataTableHeader.tsx
+++ b/packages/ui/DataTable/components/DataTableHeader.tsx
@@ -36,7 +36,7 @@ export const DataTableHeader = <T,>({ header, setIsTableSettingsModalOpen }: Dat
      ref={setNodeRef}
      style={style}
      key={header.id}
-      className={cn("group relative h-10 border-b border-slate-300 bg-white px-4 text-center", {
+      className={cn("group relative h-10 border-b border-slate-200 bg-white px-4 text-center", {
        "border-r": !header.column.getIsLastColumn(),
        "border-l": !header.column.getIsFirstColumn(),
      })}>