vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.2k Packages Projects Releases Wiki Activity

perf: reduce number of api calls in event types (#10381)

Browse Source 
* perf: reduce number of api calls in event types

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* perf: use staleTime and cacheTime

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Udit Takkar
2023-07-28 17:27:44 +01:00
committed by GitHub
co-authored by Peer Richelsen
parent e6ae69a20f
commit 0f84102f1e
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/event-types/[type]/index.tsx
+1
View File
@@ -526,6 +526,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
const EventTypePageWrapper = (props: inferSSRProps<typeof getServerSideProps>) => {
const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });
if (!data) return null;
return <EventTypePage {...(data as EventTypeSetupProps)} />;
};
apps/web/pages/event-types/index.tsx
+28 -16
View File
@@ -75,6 +75,7 @@ import SkeletonLoader from "@components/eventtype/SkeletonLoader";
type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
type GetByViewerResponse = RouterOutputs["viewer"]["eventTypes"]["getByViewer"] | undefined;
interface EventTypeListHeadingProps {
profile: EventTypeGroupProfile;
@@ -769,14 +770,12 @@ const CreateFirstEventTypeView = () => {
);
};
const CTA = () => {
const CTA = ({ data }: { data: GetByViewerResponse }) => {
const { t } = useLocale();
const query = trpc.viewer.eventTypes.getByViewer.useQuery();
if (!data) return null;
if (!query.data) return null;
const profileOptions = query.data.profiles
const profileOptions = data.profiles
.filter((profile) => !profile.readOnly)
.map((profile) => {
return {
@@ -834,25 +833,30 @@ const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => {
);
};
const Main = () => {
const Main = ({
status,
error,
data,
filters,
}: {
status: string;
data: GetByViewerResponse;
error: any;
filters: ReturnType<typeof getTeamsFiltersFromQuery>;
}) => {
const isMobile = useMediaQuery("(max-width: 768px)");
const router = useRouter();
const filters = getTeamsFiltersFromQuery(router.query);
const orgBranding = useOrgBranding();
// TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
const res = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters });
if (res.status === "loading") {
if (!data || status === "loading") {
return <SkeletonLoader />;
}
if (res.status === "error") {
return <Alert severity="error" title="Something went wrong" message={res.error.message} />;
if (status === "error") {
return <Alert severity="error" title="Something went wrong" message={error.message} />;
}
const data = res.data;
const isFilteredByOnlyOneItem =
(filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) && data.eventTypeGroups.length === 1;
return (
@@ -906,6 +910,14 @@ const EventTypesPage = () => {
const { data: user } = useMeQuery();
const [showProfileBanner, setShowProfileBanner] = useState(false);
const orgBranding = useOrgBranding();
const filters = getTeamsFiltersFromQuery(router.query);
// TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
const { data, status, error } = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters }, {
refetchOnWindowFocus: false,
cacheTime: 1 * 60 * 60 * 1000,
staleTime: 1 * 60 * 60 * 1000,
});
function closeBanner() {
setShowProfileBanner(false);
@@ -936,8 +948,8 @@ const EventTypesPage = () => {
subtitle={t("event_types_page_subtitle")}
afterHeading={showProfileBanner && <SetupProfileBanner closeAction={closeBanner} />}
beforeCTAactions={<Actions />}
CTA={<CTA />}>
<Main />
CTA={<CTA data={data} />}>
<Main data={data} status={status} error={error} filters={filters} />
</Shell>
</div>
);