Merge pull request #530 from true-runes/development

v19.0.0
true-runes · Jun 24, 2022 · da53ab7 · da53ab7
2 parents e1f3615 + ac41973
commit da53ab7
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 80 deletions.
diff --git a/components/check-your-votes/CheckForm.tsx b/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>
+    </>
+  )
+}
diff --git a/components/check-your-votes/Description.tsx b/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>
+    </>
+  )
+}
diff --git a/components/check-your-votes/Main.tsx b/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>
+  )
+}
diff --git a/components/check-your-votes/ResultDescription.tsx b/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>
+    </>
+  )
+}
diff --git a/components/check-your-votes/ResultEachHashtag.tsx b/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>
+          ))}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/components/common/AboutCheckVoteCard.tsx b/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>

diff --git a/components/votes/Divisions.tsx b/components/votes/Divisions.tsx
@@ -1,10 +1,31 @@
 import type { NextPage } from 'next'
+import { useState, useEffect } from 'react'
 import { useLocale } from '@/hooks/useLocale'
 import Link from 'next/link'
 
+import dayjs from 'dayjs'
+import ja from 'dayjs/locale/ja'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+
 export const Divisions: NextPage = () => {
+  dayjs.locale(ja)
+  dayjs.extend(isSameOrAfter)
+
   const { locale } = useLocale()
 
+  const [isDuringVoteTerm, setIsDuringVoteTerm] = useState(false)
+
+  useEffect(() => {
+    const dayjsCurrentDateTime = dayjs(
+      new Date().toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' })
+    )
+    const dayjsVoteStartDateTime = dayjs('2022-06-24 21:00:00')
+
+    setIsDuringVoteTerm(
+      dayjsCurrentDateTime.isSameOrAfter(dayjsVoteStartDateTime)
+    )
+  }, [])
+
   return (
     <div className="bg-white text-black">
       <div className="hero">
@@ -129,33 +150,37 @@ export const Divisions: NextPage = () => {
                 ②協力攻撃部門
               </h2>
 
-              {/* <div className="alert shadow-lg bg-white text-black text-xl">
-                <div>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    className="stroke-info flex-shrink-0 w-6 h-6 mt-1"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
-                  </svg>
+              {isDuringVoteTerm && (
+                <>
+                  <div className="alert shadow-lg bg-white text-black text-xl">
+                    <div>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="stroke-info flex-shrink-0 w-6 h-6 mt-1"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        ></path>
+                      </svg>
 
-                  <span>
-                    <Link href="/vote-to-unite-attacks" passHref>
-                      <span className="px-1 link link-hover underline underline-offset-4 text-blue-500 hover:text-blue-900">
-                        投票ページはこちら
+                      <span>
+                        <Link href="/vote-to-unite-attacks" passHref>
+                          <span className="px-1 link link-hover underline underline-offset-4 text-blue-500 hover:text-blue-900">
+                            投票ページはこちら
+                          </span>
+                        </Link>
                       </span>
-                    </Link>
-                  </span>
-                </div>
-              </div>
+                    </div>
+                  </div>
 
-              <div className="my-4" /> */}
+                  <div className="my-4" />
+                </>
+              )}
 
               <div className="alert shadow-lg bg-white text-black text-xl">
                 <div>

diff --git a/components/votes/HowToVote.tsx b/components/votes/HowToVote.tsx
@@ -1,7 +1,7 @@
 import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
-const HowToVote: NextPage = () => {
+export const HowToVote: NextPage = () => {
   const { t } = useTranslation('votes_how_to_vote')
 
   return (
@@ -84,5 +84,3 @@ const HowToVote: NextPage = () => {
     </div>
   )
 }
-
-export default HowToVote
diff --git a/components/votes/Onegai.tsx b/components/votes/Onegai.tsx
@@ -1,9 +1,7 @@
 import type { NextPage } from 'next'
 import { useLocale } from '@/hooks/useLocale'
-// import useTranslation from 'next-translate/useTranslation'
 
-const Onegai: NextPage = () => {
-  // const { t } = useTranslation('')
+export const Onegai: NextPage = () => {
   const { locale } = useLocale()
 
   return (
@@ -51,5 +49,3 @@ const Onegai: NextPage = () => {
     </div>
   )
 }
-
-export default Onegai
diff --git a/components/votes/VoteExamples.tsx b/components/votes/VoteExamples.tsx
@@ -1,11 +1,9 @@
 import type { NextPage } from 'next'
 import Image from 'next/image'
 import { useLocale } from '@/hooks/useLocale'
-// import useTranslation from 'next-translate/useTranslation'
 
-const VoteExamples: NextPage = () => {
+export const VoteExamples: NextPage = () => {
   const { locale } = useLocale()
-  // const { t } = useTranslation('')
 
   return (
     <div className="bg-white text-black">
@@ -88,5 +86,3 @@ const VoteExamples: NextPage = () => {
     </div>
   )
 }
-
-export default VoteExamples