Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: <StaticVoteButton /> #517

Merged
merged 4 commits into from
Sep 8, 2023
Merged

perf: <StaticVoteButton /> #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
29d71eb
Create static version of vote button
ryanponce Sep 6, 2023
336bff0
Fix broken ci check
ryanponce Sep 6, 2023
1baf158
Update routes/users/[login].tsx
iuioiua Sep 6, 2023
7065e0a
Merge branch 'main' into perf-create-static-vote-button
iuioiua Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions components/ItemSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,26 @@
import VoteButton from "@/islands/VoteButton.tsx";
import type { Item } from "@/utils/db.ts";
import UserPostedAt from "./UserPostedAt.tsx";
import StaticVoteButton from "./StaticVoteButton.tsx";
import { decodeTime } from "std/ulid/mod.ts";

export interface ItemSummaryProps {
item: Item;
isVoted: boolean;
isSignedIn: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I wonder if having isVoted?: boolean might be simpler, where it's undefined if the user is not signed in. WDYT?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I like that suggestion if reusing the isVoted prop. What do you think about isVoted: boolean | undefined instead since we probably want that prop to be required?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isVoted?: boolean is the same as isVoted: boolean | undefined (reference). Having isVoted?: boolean would mean it is optional. Btw, if, for whatever reason, it's not simpler, let's stick to using isSignedIn: boolean.

}

export default function ItemSummary(props: ItemSummaryProps) {
return (
<div class="py-2 flex gap-4">
<VoteButton
item={props.item}
isVoted={props.isVoted}
/>
{props.isSignedIn
? (
<VoteButton
item={props.item}
isVoted={props.isVoted}
/>
)
: <StaticVoteButton score={props.item.score} />}
<div class="space-y-1">
<p>
<a
Expand Down
18 changes: 18 additions & 0 deletions components/StaticVoteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
export interface StaticVoteButton {
score: number;
}

export default function StaticVoteButton(props: StaticVoteButton) {
return (
<a
class="text-inherit pr-2 text-center"
title="Sign in to vote"
href="/signin"
>
▲
<br />
{props.score}
</a>
);
}
10 changes: 8 additions & 2 deletions islands/ItemsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import type { Item } from "@/utils/db.ts";
import type { Item, User } from "@/utils/db.ts";
import { LINK_STYLES } from "@/utils/constants.ts";
import IconInfo from "tabler_icons_tsx/info-circle.tsx";
import ItemSummary from "@/components/ItemSummary.tsx";
Expand Down Expand Up @@ -34,7 +34,12 @@ function EmptyItemsList() {
);
}

export default function ItemsList(props: { endpoint: string }) {
interface ItemListProps {
endpoint: string;
isSignedIn: boolean;
}

export default function ItemsList(props: ItemListProps) {
const itemsSig = useSignal<Item[]>([]);
const votedItemsIdsSig = useSignal<string[]>([]);
const cursorSig = useSignal("");
Expand Down Expand Up @@ -77,6 +82,7 @@ export default function ItemsList(props: { endpoint: string }) {
key={item.id}
item={item}
isVoted={itemsAreVotedSig.value[id]}
isSignedIn={props.isSignedIn}
/>
);
})
Expand Down
6 changes: 5 additions & 1 deletion routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default async function HomePage(
_req: Request,
ctx: RouteContext<undefined, State>,
) {
const isSignedIn = ctx.state.sessionUser !== undefined;
const endpoint = "/api/items";

return (
Expand All @@ -59,7 +60,10 @@ export default async function HomePage(
</Head>
<main class="flex-1 p-4">
{NEEDS_SETUP && <SetupInstruction />}
<ItemsList endpoint={endpoint} />
<ItemsList
endpoint={endpoint}
isSignedIn={isSignedIn}
/>
</main>
</>
);
Expand Down
1 change: 1 addition & 0 deletions routes/items/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export default async function ItemsItemPage(
<ItemSummary
item={item}
isVoted={isVoted}
isSignedIn={isSignedIn}
/>
<CommentInput isSignedIn={isSignedIn} itemId={ctx.params.id} />
<CommentsList endpoint={endpoint} />
Expand Down
6 changes: 5 additions & 1 deletion routes/users/[login].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default async function UsersUserPage(
const { login } = ctx.params;
const user = await getUser(login);
if (user === null) return await ctx.renderNotFound();
const isSignedIn = ctx.state.sessionUser !== undefined;

return (
<>
Expand All @@ -61,7 +62,10 @@ export default async function UsersUserPage(
isSubscribed={user.isSubscribed}
login={user.login}
/>
<ItemsList endpoint={`/api/users/${login}/items`} />
<ItemsList
endpoint={`/api/users/${login}/items`}
isSignedIn={isSignedIn}
/>
</main>
</>
);
Expand Down