Skip to content

Commit

Permalink
(chore): reduce re-render cycles in EndpointContent (#1268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abvthecity
abvthecity authored Aug 8, 2024
1 parent ff8e48d commit 1d30276
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 100 deletions.
36 changes: 21 additions & 15 deletions packages/ui/app/src/api-page/endpoints/Endpoint.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useAtom } from "jotai";
import { memo, useEffect } from "react";
import { FERN_STREAM_ATOM, useResolvedPath } from "../../atoms";
import { useAtomValue } from "jotai";
import { memo } from "react";
import { useCallbackOne } from "use-memo-one";
import { FERN_STREAM_ATOM, SLUG_ATOM, useAtomEffect } from "../../atoms";
import { useShouldLazyRender } from "../../hooks/useShouldLazyRender";
import { ResolvedEndpointDefinition, ResolvedTypeDefinition } from "../../resolver/types";
import { EndpointContent } from "./EndpointContent";
Expand All @@ -24,20 +25,25 @@ const UnmemoizedEndpoint: React.FC<Endpoint.Props> = ({
isLastInApi,
types,
}) => {
const [isStream, setStream] = useAtom(FERN_STREAM_ATOM);
const resolvedPath = useResolvedPath();

const isStream = useAtomValue(FERN_STREAM_ATOM);
const endpointSlug = endpoint.stream != null && isStream ? endpoint.stream.slug : endpoint.slug;

useEffect(() => {
if (endpoint.stream != null) {
if (endpoint.slug === resolvedPath.slug) {
setStream(false);
} else if (endpoint.stream.slug === resolvedPath.slug) {
setStream(true);
}
}
}, [endpoint.slug, endpoint.stream, resolvedPath.slug, setStream]);
// TODO: rewrite this with a reducer pattern
useAtomEffect(
useCallbackOne(
(get, set) => {
const selectedSlug = get(SLUG_ATOM);
if (endpoint.stream != null) {
if (endpoint.slug === selectedSlug) {
set(FERN_STREAM_ATOM, false);
} else if (endpoint.stream.slug === selectedSlug) {
set(FERN_STREAM_ATOM, true);
}
}
},
[endpoint.stream, endpoint.slug],
),
);

// TODO: this is a temporary fix to only SSG the content that is requested by the requested route.
// - webcrawlers will accurately determine the canonical URL (right now every page "returns" the same full-length content)
Expand Down
98 changes: 22 additions & 76 deletions packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,12 @@ import {
store,
useAtomEffect,
} from "../../atoms";
import { useSelectedEnvironmentId } from "../../atoms/environment";
import { Breadcrumbs } from "../../components/Breadcrumbs";
import {
ResolvedEndpointDefinition,
ResolvedError,
ResolvedTypeDefinition,
resolveEnvironment,
} from "../../resolver/types";
import { ApiPageDescription } from "../ApiPageDescription";
import { ResolvedEndpointDefinition, ResolvedError, ResolvedTypeDefinition } from "../../resolver/types";
import { JsonPropertyPath } from "../examples/JsonPropertyPath";
import { CodeExample, generateCodeExamples } from "../examples/code-example";
import { useApiPageCenterElement } from "../useApiPageCenterElement";
import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
import { EndpointContentHeader } from "./EndpointContentHeader";
import { EndpointContentLeft, convertNameToAnchorPart } from "./EndpointContentLeft";
import { EndpointStreamingEnabledToggle } from "./EndpointStreamingEnabledToggle";
import { EndpointUrlWithOverflow } from "./EndpointUrlWithOverflow";

const EndpointContentCodeSnippets = dynamic(
() => import("./EndpointContentCodeSnippets").then((mod) => mod.EndpointContentCodeSnippets),
Expand Down Expand Up @@ -81,7 +71,7 @@ const paddingAtom = atom((get) => (get(MOBILE_SIDEBAR_ENABLED_ATOM) ? 0 : 26));

export const EndpointContent = memo<EndpointContent.Props>((props) => {
const { api, showErrors, endpoint: endpointProp, breadcrumbs, hideBottomSeparator = false, types } = props;
const [isStream, setIsStream] = useAtom(FERN_STREAM_ATOM);
const isStream = useAtomValue(FERN_STREAM_ATOM);
const endpoint = isStream && endpointProp.stream != null ? endpointProp.stream : endpointProp;

const ref = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -110,21 +100,23 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
const [selectedError, setSelectedError] = useState<ResolvedError | undefined>();

useAtomEffect(
useCallbackOne((get) => {
const anchor = get(ANCHOR_ATOM);
const statusCodeOrName = maybeGetErrorStatusCodeOrNameFromAnchor(anchor);
if (statusCodeOrName != null) {
const error = endpoint.errors.find((e) =>
typeof statusCodeOrName === "number"
? e.statusCode === statusCodeOrName
: convertNameToAnchorPart(e.name) === statusCodeOrName,
);
if (error != null) {
setSelectedError(error);
useCallbackOne(
(get) => {
const anchor = get(ANCHOR_ATOM);
const statusCodeOrName = maybeGetErrorStatusCodeOrNameFromAnchor(anchor);
if (statusCodeOrName != null) {
const error = endpoint.errors.find((e) =>
typeof statusCodeOrName === "number"
? e.statusCode === statusCodeOrName
: convertNameToAnchorPart(e.name) === statusCodeOrName,
);
if (error != null) {
setSelectedError(error);
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []),
},
[setSelectedError],
),
);

const examples = useMemo(() => {
Expand Down Expand Up @@ -242,17 +234,8 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
),
);

// Reset the example height (not in view) if the viewport height changes
useEffect(() => {
if (!isInViewport) {
setExampleHeight(initialExampleHeight);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialExampleHeight]);

const selectedEnvironmentId = useSelectedEnvironmentId();
return (
<div
<section
className={"fern-endpoint-content"}
onClick={() => setSelectedError(undefined)}
ref={ref}
Expand All @@ -263,38 +246,7 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
"border-default border-b mb-px pb-12": !hideBottomSeparator,
})}
>
<div className="space-y-1 pb-2 pt-8">
<Breadcrumbs breadcrumbs={breadcrumbs} />
<div className="flex items-center justify-between">
<span>
<h1 className="fern-page-heading">
{/* <AnimatedTitle>{endpoint.title}</AnimatedTitle> */}
{endpoint.title}
</h1>
{endpoint.availability != null && (
<span className="inline-block ml-2 align-text-bottom">
<EndpointAvailabilityTag availability={endpoint.availability} minimal={true} />
</span>
)}
</span>

{endpointProp.stream != null && (
<EndpointStreamingEnabledToggle
value={isStream}
setValue={setIsStream}
endpointProp={endpointProp}
container={ref}
/>
)}
</div>
<EndpointUrlWithOverflow
path={endpoint.path}
method={endpoint.method}
selectedEnvironment={resolveEnvironment(endpoint, selectedEnvironmentId)}
showEnvironment
large
/>
</div>
<EndpointContentHeader endpoint={endpointProp} breadcrumbs={breadcrumbs} container={ref} />
<div className="md:grid md:grid-cols-2 md:gap-8 lg:gap-12">
<div
className="flex min-w-0 max-w-content-width flex-1 flex-col pt-8 md:py-8"
Expand All @@ -303,12 +255,6 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
minHeight: `${minHeight}px`,
}}
>
<ApiPageDescription
className="text-base leading-6 mb-12"
description={endpoint.description}
isMarkdown={true}
/>

<EndpointContentLeft
endpoint={endpoint}
showErrors={showErrors}
Expand Down Expand Up @@ -350,7 +296,7 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
</aside>
</div>
</div>
</div>
</section>
);
});

Expand Down
52 changes: 52 additions & 0 deletions packages/ui/app/src/api-page/endpoints/EndpointContentHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { useAtomValue } from "jotai";
import { memo } from "react";
import { FERN_STREAM_ATOM } from "../../atoms";
import { useSelectedEnvironmentId } from "../../atoms/environment";
import { Breadcrumbs } from "../../components/Breadcrumbs";
import { ResolvedEndpointDefinition, resolveEnvironment } from "../../resolver/types";
import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
import { EndpointStreamingEnabledToggle } from "./EndpointStreamingEnabledToggle";
import { EndpointUrlWithOverflow } from "./EndpointUrlWithOverflow";

interface EndpointContentHeaderProps {
endpoint: ResolvedEndpointDefinition;
breadcrumbs: readonly string[];
container: React.MutableRefObject<HTMLElement | null>;
}

export const EndpointContentHeader = memo<EndpointContentHeaderProps>(({ endpoint, breadcrumbs, container }) => {
const isStream = useAtomValue(FERN_STREAM_ATOM);
const endpointProp = endpoint.stream != null && isStream ? endpoint.stream : endpoint;
const selectedEnvironmentId = useSelectedEnvironmentId();
return (
<header className="space-y-1 pb-2 pt-8">
<Breadcrumbs breadcrumbs={breadcrumbs} />
<div className="flex items-center justify-between">
<span>
<h1 className="fern-page-heading">
{/* <AnimatedTitle>{endpoint.title}</AnimatedTitle> */}
{endpoint.title}
</h1>
{endpoint.availability != null && (
<span className="inline-block ml-2 align-text-bottom">
<EndpointAvailabilityTag availability={endpoint.availability} minimal={true} />
</span>
)}
</span>

{endpointProp.stream != null && (
<EndpointStreamingEnabledToggle endpointProp={endpointProp} container={container} />
)}
</div>
<EndpointUrlWithOverflow
path={endpoint.path}
method={endpoint.method}
selectedEnvironment={resolveEnvironment(endpoint, selectedEnvironmentId)}
showEnvironment
large
/>
</header>
);
});

EndpointContentHeader.displayName = "EndpointContentHeader";
4 changes: 3 additions & 1 deletion packages/ui/app/src/api-page/endpoints/EndpointContentLeft.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
dereferenceObjectProperties,
getParameterDescription,
} from "../../resolver/types";
import { ApiPageDescription } from "../ApiPageDescription";
import { JsonPropertyPath } from "../examples/JsonPropertyPath";
import { TypeComponentSeparator } from "../types/TypeComponentSeparator";
import { EndpointError } from "./EndpointError";
Expand Down Expand Up @@ -114,7 +115,8 @@ const UnmemoizedEndpointContentLeft: React.FC<EndpointContentLeft.Props> = ({
}

return (
<div className="flex max-w-full flex-1 flex-col gap-12">
<div className="flex max-w-full flex-1 flex-col gap-12">
<ApiPageDescription className="text-base leading-6" description={endpoint.description} isMarkdown={true} />
{endpoint.pathParameters.length > 0 && (
<EndpointSection title="Path parameters" anchorIdParts={REQUEST_PATH} route={"/" + endpoint.slug}>
<div>
Expand Down
13 changes: 5 additions & 8 deletions packages/ui/app/src/api-page/endpoints/EndpointStreamingEnabledToggle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
import { useSetAtom } from "jotai";
import { useAtom, useSetAtom } from "jotai";
import { MutableRefObject, ReactElement } from "react";
import { SLUG_ATOM } from "../../atoms";
import { FERN_STREAM_ATOM, SLUG_ATOM } from "../../atoms";
import { ResolvedEndpointDefinition } from "../../resolver/types";
import { StreamingEnabledToggle } from "./StreamingEnabledToggle";

export function EndpointStreamingEnabledToggle({
value,
setValue,
endpointProp,
container,
}: {
value: boolean;
setValue: (enabled: boolean) => void;
endpointProp: ResolvedEndpointDefinition;
container: MutableRefObject<HTMLElement | null>;
}): ReactElement {
const [isStream, setIsStream] = useAtom(FERN_STREAM_ATOM);
const setSlug = useSetAtom(SLUG_ATOM);
return (
<StreamingEnabledToggle
className="ml-2 w-[200px]"
value={value}
value={isStream}
setValue={(value) => {
setValue(value);
setIsStream(value);
const endpoint = value && endpointProp.stream != null ? endpointProp.stream : endpointProp;
setSlug(endpoint.slug);
setTimeout(() => {
Expand Down

0 comments on commit 1d30276

Please sign in to comment.