マイリストのツイートボタン (#1264)

otomadb · Dec 19, 2023 · bf3dce0 · bf3dce0
1 parent 05f1c50
commit bf3dce0
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 46 deletions.
diff --git a/app/(v2)/mads/[serial]/layout.tsx b/app/(v2)/mads/[serial]/layout.tsx
@@ -10,10 +10,10 @@ import {
   ExternalLinkPictogram,
   NicovideoPictogram,
   SoundcloudPictogram,
-  TwitterXPictogram,
   YoutubePictogram,
 } from "~/components/Pictogram";
 import { TagType } from "~/components/TagType";
+import TwitterShareButton from "~/components/TwitterShareButton";
 import { VideoThumbnail } from "~/components/VideoThumbnail";
 import { graphql } from "~/gql";
 import { makeGraphQLClient2 } from "~/gql/fetch";
@@ -143,29 +143,18 @@ export default async function Layout({
               fragment={video}
               className={clsx("col-span-full @[1024px]/layout:max-w-none")}
             />
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={(() => {
-                const url = new URL("https://twitter.com/intent/tweet");
-                url.searchParams.set(
-                  "url",
-                  `https://www.otomadb.com/mads/${video.serial}`
-                );
-                url.searchParams.set("text", video.title);
-                url.searchParams.set("hashtags", "OtoMADB");
-                return url.toString();
-              })()}
-              className={clsx(
-                "flex items-center justify-center",
-                "col-span-1 gap-x-2 rounded border border-[#222] bg-twitter-x-primary px-4 py-2 text-sm text-white @[1024px]/layout:h-8"
-              )}
+            <TwitterShareButton
+              size="medium"
+              payload={{
+                url: `https://www.otomadb.com/mads/${video.serial}`,
+                text: video.title,
+              }}
+              className={clsx("col-span-1 @[1024px]/layout:h-12")}
             >
-              <TwitterXPictogram className={clsx("w-4")} />
-              <div className={clsx("hidden @[1024px]/layout:block")}>
+              <span className={clsx("hidden @[1024px]/layout:block")}>
                 ポスト
-              </div>
-            </a>
+              </span>
+            </TwitterShareButton>
           </div>
           <LinkVideoEvents
             fragment={video}

diff --git a/app/(v2)/me/likes/page.tsx b/app/(v2)/me/likes/page.tsx
@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 import * as z from "zod";
 
 import MylistRegistrations from "~/app/(v2)/users/[name]/mylists/[slug]/MylistRegistrations";
+import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
 
@@ -39,6 +40,7 @@ export default withPageAuthRequired(
             displayName
             likes {
               id
+              range
               registrationsByOffset(input: { offset: $offset, take: $take }) {
                 ...UserPage_MylistRegistrations
                 totalCount
@@ -68,6 +70,22 @@ export default withPageAuthRequired(
           "grow border border-obsidian-primary bg-obsidian-darker p-4 @container/page"
         )}
       >
+        <div className={clsx("flex w-full items-center px-4 py-2")}>
+          <h1 className={clsx("flex grow text-xl font-bold text-snow-primary")}>
+            あなたがいいねした音MAD
+          </h1>
+          <div className={clsx("flex h-8 shrink-0 items-center gap-x-2")}>
+            {viewer.likes.range && (
+              <TwitterShareButton
+                size="small"
+                payload={{
+                  url: `https://www.otomadb.com/users/${viewer.name}/likes`,
+                  text: `${viewer.displayName}が良いと思った音MAD`,
+                }}
+              />
+            )}
+          </div>
+        </div>
         <MylistRegistrations
           title="あなたがいいねした音MAD"
           noc="あなたがいいねした音MADはありませんでした。"

diff --git a/app/(v2)/me/mylists/[slug]/page.tsx b/app/(v2)/me/mylists/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 import * as z from "zod";
 
 import MylistRegistrations from "~/app/(v2)/users/[name]/mylists/[slug]/MylistRegistrations";
+import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient2 } from "~/gql/fetch";
 
@@ -40,6 +41,7 @@ export default withPageAuthRequired(
               ...EditMylist
               slug
               title
+              range
               registrationsByOffset(input: { offset: $offset, take: $take }) {
                 ...UserPage_MylistRegistrations
                 totalCount
@@ -59,10 +61,11 @@ export default withPageAuthRequired(
     );
 
     const { viewer } = result;
-    if (!viewer?.mylist) notFound();
+    const mylist = viewer?.mylist;
+    if (!mylist) notFound();
 
     const pageMax = Math.ceil(
-      viewer.mylist.registrationsByOffset.totalCount / PER_PAGE
+      mylist.registrationsByOffset.totalCount / PER_PAGE
     );
 
     return (
@@ -73,19 +76,28 @@ export default withPageAuthRequired(
       >
         <div className={clsx("flex w-full items-center px-4 py-2")}>
           <h1 className={clsx("flex grow text-xl font-bold text-snow-primary")}>
-            {viewer.mylist.title}
+            {mylist.title}
           </h1>
-          <div className={clsx("flex shrink-0")}>
-            <EditButton fragment={viewer.mylist} color="blue" size="small" />
+          <div className={clsx("flex h-8 shrink-0 items-center gap-x-2")}>
+            {mylist.range && (
+              <TwitterShareButton
+                size="small"
+                payload={{
+                  url: `https://www.otomadb.com/users/${viewer.name}/mylists/${mylist.slug}`,
+                  text: mylist.title,
+                }}
+              />
+            )}
+            <EditButton fragment={mylist} color="blue" size="small" />
           </div>
         </div>
         <MylistRegistrations
           currentPage={page}
           pageMax={pageMax}
-          pathname={`/me/mylists/${viewer.mylist.slug}`}
-          title={viewer.mylist.title}
+          pathname={`/me/mylists/${mylist.slug}`}
+          title={mylist.title}
           noc="このマイリストにはまだ何も登録されていません"
-          fragment={viewer.mylist.registrationsByOffset}
+          fragment={mylist.registrationsByOffset}
         />
       </main>
     );

diff --git a/app/(v2)/users/[name]/likes/page.tsx b/app/(v2)/users/[name]/likes/page.tsx
@@ -1,5 +1,7 @@
+import clsx from "clsx";
 import { notFound } from "next/navigation";
 
+import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
 
@@ -24,6 +26,7 @@ export default async function Page({
           displayName
           publicLikes {
             id
+            range
             registrationsByOffset(input: { offset: $offset, take: $take }) {
               ...UserPage_MylistRegistrations
               totalCount
@@ -50,13 +53,31 @@ export default async function Page({
   );
 
   return (
-    <MylistRegistrations
-      currentPage={page}
-      pageMax={pageMax}
-      pathname={`/users/${findUser.name}/likes`}
-      title={`${findUser.displayName}が良いと思った音MAD`}
-      noc="このユーザーはまだ何も良いと思った音MADがありません。"
-      fragment={findUser.publicLikes.registrationsByOffset}
-    />
+    <main>
+      <div className={clsx("flex w-full items-center px-4 py-2")}>
+        <h1 className={clsx("flex grow text-xl font-bold text-snow-primary")}>
+          {`${findUser.displayName}が良いと思った音MAD`}
+        </h1>
+        <div className={clsx("flex h-8 shrink-0 items-center gap-x-2")}>
+          {findUser.publicLikes.range && (
+            <TwitterShareButton
+              size="small"
+              payload={{
+                url: `https://www.otomadb.com/users/${findUser.name}/likes`,
+                text: `${findUser.displayName}が良いと思った音MAD`,
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <MylistRegistrations
+        currentPage={page}
+        pageMax={pageMax}
+        pathname={`/users/${findUser.name}/likes`}
+        title={`${findUser.displayName}が良いと思った音MAD`}
+        noc="このユーザーはまだ何も良いと思った音MADがありません。"
+        fragment={findUser.publicLikes.registrationsByOffset}
+      />
+    </main>
   );
 }
diff --git a/app/(v2)/users/[name]/mylists/[slug]/page.tsx b/app/(v2)/users/[name]/mylists/[slug]/page.tsx
@@ -1,6 +1,8 @@
+import clsx from "clsx";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
 
+import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
 
@@ -81,6 +83,7 @@ export default async function Page({
           publicMylist(slug: $slug) {
             slug
             title
+            range
             registrationsByOffset(input: { offset: $offset, take: $take }) {
               ...UserPage_MylistRegistrations
               totalCount
@@ -114,13 +117,31 @@ export default async function Page({
   );
 
   return (
-    <MylistRegistrations
-      currentPage={page}
-      pageMax={pageMax}
-      pathname={`/users/${findUser.name}/mylists/${findUser.publicMylist.slug}`}
-      title={findUser.publicMylist.title}
-      noc="このマイリストにはまだ何も登録されていません"
-      fragment={findUser.publicMylist.registrationsByOffset}
-    />
+    <main>
+      <div className={clsx("flex w-full items-center px-4 py-2")}>
+        <h1 className={clsx("flex grow text-xl font-bold text-snow-primary")}>
+          {findUser.publicMylist.title}
+        </h1>
+        <div className={clsx("flex h-8 shrink-0 items-center gap-x-2")}>
+          {findUser.publicMylist.range && (
+            <TwitterShareButton
+              size="small"
+              payload={{
+                url: `https://www.otomadb.com/users/${findUser.name}/mylists/${findUser.publicMylist.slug}`,
+                text: findUser.publicMylist.title,
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <MylistRegistrations
+        currentPage={page}
+        pageMax={pageMax}
+        pathname={`/users/${findUser.name}/mylists/${findUser.publicMylist.slug}`}
+        title={findUser.publicMylist.title}
+        noc="このマイリストにはまだ何も登録されていません"
+        fragment={findUser.publicMylist.registrationsByOffset}
+      />
+    </main>
   );
 }
diff --git a/components/TwitterShareButton/index.tsx b/components/TwitterShareButton/index.tsx
@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+import { TwitterXPictogram } from "~/components/Pictogram";
+import mkTwitterLink from "~/utils/mkTwitterLink";
+
+const TwitterShareButton = ({
+  className,
+  payload,
+  size,
+  children,
+}: {
+  className?: string;
+  payload: Parameters<typeof mkTwitterLink>[0];
+  size: "small" | "medium";
+  children?: ReactNode;
+}) => {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={mkTwitterLink(payload)}
+      className={clsx(
+        className,
+        "flex h-full items-center justify-center",
+        "rounded border border-[#222] bg-twitter-x-primary text-sm text-white",
+        { small: "px-4 gap-x-1", medium: "px-6 gap-x-2" }[size]
+      )}
+    >
+      <TwitterXPictogram
+        className={clsx({ small: "w-4 h-4", medium: "w-6 w-6" }[size])}
+      />
+      {children && (
+        <div className={clsx({ small: "text-sm", medium: "text-base" }[size])}>
+          {children}
+        </div>
+      )}
+    </a>
+  );
+};
+export default TwitterShareButton;
diff --git a/utils/mkTwitterLink.ts b/utils/mkTwitterLink.ts
@@ -0,0 +1,9 @@
+const mkTwitterLink = ({ url, text }: { url: string; text?: string }) => {
+  const burl = new URL("https://twitter.com/intent/tweet");
+  burl.searchParams.set("url", url);
+  if (text) burl.searchParams.set("text", text);
+  burl.searchParams.set("hashtags", "OtoMADB");
+  return burl.toString();
+};
+
+export default mkTwitterLink;