diff --git a/apps/web/modules/bookings/views/bookings-view.tsx b/apps/web/modules/bookings/views/bookings-view.tsx index 00931e1a27..edc774cc05 100644 --- a/apps/web/modules/bookings/views/bookings-view.tsx +++ b/apps/web/modules/bookings/views/bookings-view.tsx @@ -74,11 +74,9 @@ function useSystemSegments(userId?: number) { export default function Bookings(props: BookingsProps) { const pathname = usePathname(); const systemSegments = useSystemSegments(props.userId); + if (!pathname) return null; return ( - + ); diff --git a/apps/web/modules/insights/insights-call-history-view.tsx b/apps/web/modules/insights/insights-call-history-view.tsx index f9bb12e902..0fbcbe8617 100644 --- a/apps/web/modules/insights/insights-call-history-view.tsx +++ b/apps/web/modules/insights/insights-call-history-view.tsx @@ -1,6 +1,7 @@ "use client"; import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useMemo, useState, useReducer } from "react"; import { @@ -62,8 +63,10 @@ function reducer(state: CallDetailsState, action: CallDetailsAction): CallDetail } function CallHistoryTable(props: CallHistoryProps) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); diff --git a/apps/web/modules/insights/insights-routing-view.tsx b/apps/web/modules/insights/insights-routing-view.tsx index 097eb1b83b..346d0e2b82 100644 --- a/apps/web/modules/insights/insights-routing-view.tsx +++ b/apps/web/modules/insights/insights-routing-view.tsx @@ -1,5 +1,7 @@ "use client"; +import { usePathname } from "next/navigation"; + import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider"; import { useSegments } from "@calcom/features/data-table/hooks/useSegments"; import { @@ -13,9 +15,12 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; export default function InsightsRoutingFormResponsesPage() { const { t } = useLocale(); + const pathname = usePathname(); + + if (!pathname) return null; return ( - +
diff --git a/apps/web/modules/insights/insights-view.tsx b/apps/web/modules/insights/insights-view.tsx index 24a0c007db..1ce5f285b9 100644 --- a/apps/web/modules/insights/insights-view.tsx +++ b/apps/web/modules/insights/insights-view.tsx @@ -1,5 +1,6 @@ "use client"; +import { usePathname } from "next/navigation"; import { useState, useCallback } from "react"; import { @@ -39,8 +40,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; export default function InsightsPage({ timeZone }: { timeZone: string }) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + diff --git a/packages/features/data-table/DataTableProvider.tsx b/packages/features/data-table/DataTableProvider.tsx index 67ab4233dc..e5848ce785 100644 --- a/packages/features/data-table/DataTableProvider.tsx +++ b/packages/features/data-table/DataTableProvider.tsx @@ -1,11 +1,8 @@ "use client"; import type { SortingState, OnChangeFn, VisibilityState, ColumnSizingState } from "@tanstack/react-table"; -// eslint-disable-next-line no-restricted-imports import debounce from "lodash/debounce"; -// eslint-disable-next-line no-restricted-imports import isEqual from "lodash/isEqual"; -import { usePathname } from "next/navigation"; import { useQueryState } from "nuqs"; import { useState, createContext, useCallback, useEffect, useRef, useMemo } from "react"; @@ -79,9 +76,9 @@ export type DataTableContextType = { export const DataTableContext = createContext(null); interface DataTableProviderProps { - useSegments?: UseSegments; - tableIdentifier?: string; + tableIdentifier: string; children: React.ReactNode; + useSegments?: UseSegments; ctaContainerClassName?: string; defaultPageSize?: number; segments?: FilterSegmentOutput[]; @@ -91,7 +88,7 @@ interface DataTableProviderProps { } export function DataTableProvider({ - tableIdentifier: _tableIdentifier, + tableIdentifier, children, useSegments = useSegmentsNoop, defaultPageSize = DEFAULT_PAGE_SIZE, @@ -101,10 +98,8 @@ export function DataTableProvider({ preferredSegmentId, systemSegments, }: DataTableProviderProps) { - const pathname = usePathname() as string | null; - const tableIdentifier = _tableIdentifier ?? pathname ?? undefined; - if (!tableIdentifier) { - throw new Error("tableIdentifier is required"); + if (!tableIdentifier.trim()) { + throw new Error("tableIdentifier is required and cannot be empty"); } const filterToOpen = useRef(undefined); diff --git a/packages/features/data-table/GUIDE.md b/packages/features/data-table/GUIDE.md index c1d28d8324..a8523ae703 100644 --- a/packages/features/data-table/GUIDE.md +++ b/packages/features/data-table/GUIDE.md @@ -145,8 +145,11 @@ function UserTable() { // ... other table options }); + const pathname = usePathname(); + const tableIdentifier = "hard-coded idenfidier" // or pathname; + return ( - + {/* Your table content */} @@ -564,7 +566,6 @@ const systemSegments: SystemFilterSegment[] = [ {/* ... */} @@ -1210,7 +1211,7 @@ function UserTableContainer() { const { data, isPending } = useUsers(filters); return ( - + ); diff --git a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx index b81c9985be..3591fea782 100644 --- a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx +++ b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx @@ -1,5 +1,6 @@ import type { ColumnDef } from "@tanstack/react-table"; import { useReactTable, getCoreRowModel } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useRef, useState } from "react"; import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider"; @@ -18,8 +19,10 @@ interface TeamGroupMapping { } const GroupTeamMappingTable = () => { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); diff --git a/packages/features/ee/organizations/pages/settings/privacy.tsx b/packages/features/ee/organizations/pages/settings/privacy.tsx index f27225ffcb..7cb858621a 100644 --- a/packages/features/ee/organizations/pages/settings/privacy.tsx +++ b/packages/features/ee/organizations/pages/settings/privacy.tsx @@ -1,5 +1,7 @@ "use client"; +import { usePathname } from "next/navigation"; + import { DataTableProvider } from "@calcom/features/data-table"; import { useSegments } from "@calcom/features/data-table/hooks/useSegments"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; @@ -20,14 +22,16 @@ const PrivacyView = ({ canDelete: boolean; }; }) => { + const pathname = usePathname(); const { t } = useLocale(); const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(); const isInviteOpen = !currentOrg?.user.accepted; - const isDisabled = !permissions.canEdit || isInviteOpen; if (!currentOrg) return null; + if (!pathname) return null; + return (
@@ -45,7 +49,7 @@ const PrivacyView = ({

{t("manage_blocked_emails_and_domains")}

- +
diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx index 929eec88af..557d629a7d 100644 --- a/packages/features/ee/teams/components/MemberList.tsx +++ b/packages/features/ee/teams/components/MemberList.tsx @@ -11,6 +11,7 @@ import { import classNames from "classnames"; import { useSession } from "next-auth/react"; import { signIn } from "next-auth/react"; +import { usePathname } from "next/navigation"; import { useQueryState, parseAsBoolean } from "nuqs"; import { useMemo, useReducer, useRef, useState } from "react"; import type { Dispatch, SetStateAction } from "react"; @@ -166,8 +167,10 @@ interface Props { } export default function MemberList(props: Props) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); @@ -668,7 +671,7 @@ function MemberListContent(props: Props) { getFacetedUniqueValues: (_, columnId) => () => { if (facetedTeamValues) { switch (columnId) { - case "role": + case "role": { // Include both traditional roles and PBAC custom roles const allRoles = facetedTeamValues.roles.map((role) => ({ label: role.name, @@ -676,6 +679,7 @@ function MemberListContent(props: Props) { })); return convertFacetedValuesToMap(allRoles); + } default: return new Map(); } @@ -685,7 +689,7 @@ function MemberListContent(props: Props) { getRowId: (row) => `${row.id}`, }); - const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({ + useFetchMoreOnBottomReached({ tableContainerRef, hasNextPage, fetchNextPage, diff --git a/packages/features/ee/workflows/components/VoiceSelectionDialog.tsx b/packages/features/ee/workflows/components/VoiceSelectionDialog.tsx index 1296521b83..01c508a2a0 100644 --- a/packages/features/ee/workflows/components/VoiceSelectionDialog.tsx +++ b/packages/features/ee/workflows/components/VoiceSelectionDialog.tsx @@ -1,4 +1,5 @@ import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useMemo, useState } from "react"; import { DataTableProvider, DataTableWrapper } from "@calcom/features/data-table"; @@ -36,8 +37,10 @@ function VoiceSelectionTable({ selectedVoiceId?: string; onVoiceSelect: (voiceId: string) => void; }) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); diff --git a/packages/features/ee/workflows/pages/call-history.tsx b/packages/features/ee/workflows/pages/call-history.tsx index 108a0402a5..cf225096ad 100644 --- a/packages/features/ee/workflows/pages/call-history.tsx +++ b/packages/features/ee/workflows/pages/call-history.tsx @@ -1,6 +1,7 @@ "use client"; import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useMemo, useState, useReducer } from "react"; import { @@ -64,8 +65,10 @@ function reducer(state: CallDetailsState, action: CallDetailsAction): CallDetail } function CallHistoryTable(props: CallHistoryProps) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); diff --git a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx index 60eb2409af..6b09200e13 100644 --- a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx +++ b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx @@ -7,8 +7,8 @@ import { getFilteredRowModel, useReactTable, } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useEffect, useMemo, useRef, useState } from "react"; -import { useFormState } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import { @@ -65,6 +65,9 @@ interface OutOfOfficeEntry { export default function OutOfOfficeEntriesList() { const { t } = useLocale(); + const pathname = usePathname(); + + if (!pathname) return null; return (
}> - + @@ -341,7 +344,6 @@ function OutOfOfficeEntriesListContent() { onSuccess: () => { showToast(t("success_deleted_entry_out_of_office"), "success"); setDeletedEntry((previousValue) => previousValue + 1); - useFormState; }, onError: () => { showToast(`An error occurred`, "error"); diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx index 23c6dbc5da..e976c55906 100644 --- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx +++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx @@ -3,6 +3,7 @@ import { keepPreviousData } from "@tanstack/react-query"; import type { ColumnDef } from "@tanstack/react-table"; import { getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table"; +import { usePathname } from "next/navigation"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import dayjs from "@calcom/dayjs"; @@ -68,8 +69,10 @@ function UpgradeTeamTip() { } export function AvailabilitySliderTable(props: { isOrg: boolean }) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); @@ -82,10 +85,6 @@ function AvailabilitySliderTableContent(props: { isOrg: boolean }) { const [selectedUser, setSelectedUser] = useState(null); const { searchTerm } = useDataTable(); - const tbStore = createTimezoneBuddyStore({ - browsingDate: browsingDate.toDate(), - }); - const { data, isPending, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery( { limit: 10, diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx index b6356e06c5..1cee724620 100644 --- a/packages/features/users/components/UserTable/UserListTable.tsx +++ b/packages/features/users/components/UserTable/UserListTable.tsx @@ -3,6 +3,7 @@ import { keepPreviousData } from "@tanstack/react-query"; import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table"; import { useSession } from "next-auth/react"; +import { usePathname } from "next/navigation"; import { useQueryState, parseAsBoolean } from "nuqs"; import { useMemo, useReducer, useState } from "react"; import { createPortal } from "react-dom"; @@ -126,8 +127,10 @@ export type UserListTableProps = { }; export function UserListTable(props: UserListTableProps) { + const pathname = usePathname(); + if (!pathname) return null; return ( - + ); @@ -168,8 +171,6 @@ function UserListTableContent({ } ); - // TODO (SEAN): Make Column filters a trpc query param so we can fetch serverside even if the data is not loaded - const totalRowCount = data?.meta?.totalRowCount ?? 0; const adminOrOwner = checkAdminOrOwner(org?.user?.role); //we must flatten the array of arrays from the useInfiniteQuery hook @@ -514,7 +515,7 @@ function UserListTableContent({ value: team.name, })) ); - default: + default: { const attribute = facetedTeamValues.attributes.find((attr) => attr.id === columnId); if (attribute) { return convertFacetedValuesToMap( @@ -525,6 +526,7 @@ function UserListTableContent({ ); } return new Map(); + } } } return new Map();