feat: 🎸 投票チェックのページを実装した

components/check-your-votes/CheckForm.tsx

@@ -0,0 +1,109 @@
+import type { NextPage } from 'next'
+import Image from 'next/image'
+import { useState } from 'react'
+import axios from 'axios'
+
+import { ResultEachHashtag } from '@/components/check-your-votes/ResultEachHashtag'
+import { ResultDescription } from '@/components/check-your-votes/ResultDescription'
+
+export const CheckForm: NextPage = () => {
+  const [isInitialState, setIsInitialState] = useState(true)
+  const [screenName, setScreenName] = useState('')
+  const [screenNameForResult, setScreenNameForResult] = useState('')
+  const [nowLoading, setNowLoading] = useState(false)
+
+  const [gss2022, setGss2022] = useState([])
+  const [uniteAttacks, setUniteAttacks] = useState([])
+
+  const changeScreenName = (e: any) => {
+    setScreenName(e.target.value)
+  }
+
+  const clickCheckButton = () => {
+    const baseUrl =
+      process.env.NEXT_PUBLIC_CHECK_YOUR_VOTE_API ||
+      'https://headquarters.suikoden.info/check_votes_and_bonuses'
+    const apiUrl = `${baseUrl}?screen_name=${screenName}`
+
+    setNowLoading(true)
+
+    axios
+      .get(apiUrl)
+      .then((response) => {
+        setGss2022(response.data.gss2022)
+        setUniteAttacks(response.data.unite_attacks)
+
+        setScreenNameForResult(screenName)
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => {
+        setNowLoading(false)
+        setIsInitialState(false)
+      })
+  }
+
+  return (
+    <>
+      <div className="pb-8">
+        <div className="text-base">
+          <input
+            id="screen_name"
+            type="text"
+            onChange={changeScreenName}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                clickCheckButton()
+              }
+            }}
+            placeholder="gensosenkyo (@は不要です)"
+            className="input input-bordered input-accent w-full max-w-full bg-white text-black"
+            value={screenName}
+          />
+
+          <button
+            id="check_button"
+            type="submit"
+            onClick={clickCheckButton}
+            className="mt-4 w-full btn btn-active btn-accent"
+            disabled={nowLoading}
+          >
+            投票チェックする
+          </button>
+        </div>
+      </div>
+
+      <div className="pb-0">
+        {isInitialState && !nowLoading ? null : (
+          <>
+            {nowLoading ? (
+              <Image
+                src="/images/spinner.gif"
+                alt="幻水総選挙スピナー"
+                width="47"
+                height="47"
+              />
+            ) : (
+              <>
+                <ResultDescription screenName={screenNameForResult} />
+
+                <div className="divider" />
+                <ResultEachHashtag
+                  tweetIds={gss2022}
+                  title={'#幻水総選挙2022'}
+                />
+
+                <div className="divider" />
+                <ResultEachHashtag
+                  tweetIds={uniteAttacks}
+                  title={'#幻水総選挙2022協力攻撃'}
+                />
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  )
+}

components/check-your-votes/Description.tsx

@@ -0,0 +1,18 @@
+import type { NextPage } from 'next'
+
+export const Description: NextPage = () => {
+  return (
+    <>
+      <div className="pb-8">
+        <div className="text-base">
+          <ul className="text-left list-disc pl-6 pr-2">
+            <li className="pb-2">
+              チェックをしたい Twitter の ID
+              を入力して「投票チェック」のボタンを押して下さい。
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}

components/check-your-votes/Main.tsx

@@ -0,0 +1,25 @@
+import type { NextPage } from 'next'
+
+import { Description } from '@/components/check-your-votes/Description'
+import { CheckForm } from '@/components/check-your-votes/CheckForm'
+
+export const Main: NextPage = () => {
+  return (
+    <div className="bg-white text-black">
+      <div className="hero">
+        <div className="hero-content text-center w-full">
+          <div className="pb-0 w-full">
+            <div className="max-w-md">
+              <h1 className="text-2xl font-bold pt-8 pb-8 underline font-zen-old-mincho">
+                投票チェック
+              </h1>
+
+              <Description />
+              <CheckForm />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/check-your-votes/ResultDescription.tsx

@@ -0,0 +1,35 @@
+import type { NextPage } from 'next'
+
+type Props = {
+  screenName: string
+}
+
+export const ResultDescription: NextPage<Props> = ({ screenName }) => {
+  // 文言は https://github.com/true-runes/suikoden-election-2020-frontend/blob/development/src/components/parts/CheckYourVote/NoticeMessageForResults.vue などを参考に。
+
+  return (
+    <>
+      <div className="pb-0">
+        <h2 className="text-xl font-bold pb-4">
+          {screenName} さん の ツイートの検索結果
+        </h2>
+        <div className="text-base">
+          <ul className="text-left list-disc pl-6 pr-2">
+            <li className="pb-2">
+              <span className="text-red-500 pl-1 pr-1">
+                DM による投票はこのページでチェックすることはできません。
+              </span>
+              主催からお送りする投票受付確認の DM をお待ち下さい。
+            </li>
+            <li className="pb-2">
+              ツイートを削除したりアカウントに鍵を付けたりした場合には、チェック結果へ反映されない場合があります。
+            </li>
+            <li className="pb-2">
+              投票のやり直しなど、同内容と思われる投票ツイートがあった際には、集計が重複しないように主催側で対応させて頂きます。
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}

components/check-your-votes/ResultEachHashtag.tsx

@@ -0,0 +1,32 @@
+import type { NextPage } from 'next'
+import { TwitterTweetEmbed } from 'react-twitter-embed'
+
+interface Props {
+  tweetIds: string[]
+  title: string
+}
+
+export const ResultEachHashtag: NextPage<Props> = ({ tweetIds, title }) => {
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">{title}</h2>
+
+      {tweetIds.length < 1 ? (
+        <>
+          <p>ツイートが見つかりませんでした。</p>
+        </>
+      ) : (
+        <>
+          {tweetIds.map((item: string) => (
+            <div key={item}>
+              <TwitterTweetEmbed
+                tweetId={item}
+                options={{ id: 'gensosenkyo', lang: 'ja' }}
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  )
+}

components/common/AboutCheckVoteCard.tsx

@@ -15,10 +15,7 @@ export const AboutCheckVoteCard: NextPage = () => {
 
                 <div>
                   <span>
-                    <Link
-                      href="/events-in-event/result-illustration-applications"
-                      passHref
-                    >
+                    <Link href="/check-your-vote" passHref>
                       <span className="mx-1 link link-hover underline underline-offset-4 text-blue-500 hover:text-blue-900">
                         投票チェックはこちら
                       </span>

pages/check-your-vote.tsx

@@ -0,0 +1,43 @@
+import type { NextPage } from 'next'
+import Link from 'next/link'
+
+import HumbergerNavigation from '@/components/humberger-menu/HumbergerNavigation'
+import { NavBar } from '@/components/common/NavBar'
+import { SiteFooter } from '@/components/common/SiteFooter'
+
+import { Main } from '@/components/check-your-votes/Main'
+
+const CheckYourVote: NextPage = () => {
+  return (
+    <div className="bg-white text-black">
+      <title>投票チェック - 幻水総選挙2022</title>
+      <div className={'right'}>
+        <HumbergerNavigation />
+      </div>
+
+      <main id="page-wrap">
+        <NavBar />
+
+        <div className="text-base bg-gray-700 text-white breadcrumbs pl-6 pb-2 sticky top-16 z-50">
+          <ul>
+            <li>
+              <Link href="/" passHref>
+                ホーム
+              </Link>
+            </li>
+            <li>投票チェック</li>
+          </ul>
+        </div>
+
+        <div className="max-w-lg mx-auto">
+          <Main />
+        </div>
+
+        <div className="divider" />
+        <SiteFooter />
+      </main>
+    </div>
+  )
+}
+
+export default CheckYourVote