perf: <StaticVoteButton /> (denoland#517)

I created a component called `StaticVoteButton`. Struggled on the same
but I'm open to suggestions to make it more clear if needed. The `title`
attribute seemed to work well on hover (see attached screenshot).

<img width="1348" alt="Screenshot 2023-09-05 at 9 38 36 PM"
src="https://github.com/denoland/saaskit/assets/1124762/f9fe7326-0a5f-4823-9695-62db395a60da">

Related to denoland#513

---------

Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>

components/ItemSummary.tsx

@@ -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;
 }
 
 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

components/StaticVoteButton.tsx

@@ -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>
+  );
+}

islands/ItemsList.tsx

@@ -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";
@@ -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("");
@@ -77,6 +82,7 @@ export default function ItemsList(props: { endpoint: string }) {
               key={item.id}
               item={item}
               isVoted={itemsAreVotedSig.value[id]}
+              isSignedIn={props.isSignedIn}
             />
           );
         })

routes/index.tsx

@@ -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 (
@@ -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>
     </>
   );

routes/items/[id].tsx

@@ -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} />

routes/users/[login].tsx

@@ -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 (
     <>
@@ -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>
     </>
   );