Merge pull request #143 from kento-yoshidu/develop

⚡ Update
kento-yoshidu · Mar 28, 2024 · 04f721a · 04f721a
2 parents d0268af + bf10b2f
commit 04f721a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 83 deletions.
diff --git a/pages/api/ac.ts b/pages/api/ac.ts
@@ -1,25 +1,38 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+/*
 type Data = {
-  data: any
+  result: any
   errorStatus?: "id" | "pass"
 }
+*/
 
 export default async function handler(
   _req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<any>
 ) {
   try {
-    const time = new Date()
-    const unix = Math.floor(time.getTime() / 1000) - (31536000 / 4)
-    console.log("time=", unix)
+    const today = new Date()
+    const unix = Math.floor(today.getTime() / 1000) - (31536000 / 4)
 
     const response = await fetch(`${process.env.ATCODER_PROBLEMS_API}&from_second=${unix}`);
 
     const data = await response.json()
 
     const map = new Map<string, number>()
 
+    // 4か月前の日付を計算
+    const fourMonthsAgo = new Date();
+    fourMonthsAgo.setMonth(today.getMonth() - 4);
+
+    // 日付の範囲をループしてMapに追加
+    const currentDate = new Date(fourMonthsAgo);
+    while (currentDate <= today) {
+      const dateString = currentDate.toISOString().slice(0, 10); // 日付を"YYYY-MM-DD"形式に変換
+      map.set(dateString, 0); // キー: 日付, 値: 0
+      currentDate.setDate(currentDate.getDate() + 1); // 次の日付へ
+    }
+
     for (const d of data) {
       if (d.result === "AC") {
         const date = new Date(d.epoch_second * 1000); // タイムスタンプをミリ秒に変換
@@ -29,18 +42,12 @@ export default async function handler(
 
         const key = `${year}-${month}-${day}`
 
-        if (map.has(key)) {
-          const currentValue = map.get(key);
-          map.set(key, currentValue! + 1);
-        } else {
-          map.set(key, 1);
-        }
+        const currentValue = map.get(key);
+        map.set(key, currentValue! + 1);
       }
     }
 
-    console.log("data = ", map);
-
-    return res.status(200).json({ data })
+    return res.status(200).json(Object.fromEntries(map))
   } catch (e) {
     return res.status(500)
   }

diff --git a/pages/components/ac.tsx b/pages/components/ac.tsx
@@ -1,84 +1,59 @@
 import { useState } from "react"
 import Container from "./container"
 
+import Styles from "../styles/contributions.module.css"
+
 const Ac = () => {
-  const [data, setData] = useState(null);
-  const [box, setBox] = useState<any>(null);
+  const [data, setData] = useState<Map<string, number> | null>(null);
 
   const handleClick = async () => {
     const res = await fetch("/api/ac");
 
-    const  { data } = await res.json();
-
-    formatData(data)
+    setData(await res.json())
   }
 
-  const formatData = (data: any) => {
-    const today = new Date()
+  const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 
-    const firstDate = today.getFullYear()-1
+  // 7個ごとに分割して格納する配列
+  const dividedArray = [];
 
-    // console.log(today.toLocaleDateString(), firstDate.toLocaleString())
-
-    setData(data)
+  // 7個ごとに分割して格納
+  for (let i = 0; i < myArray.length; i += 7) {
+      const chunk = myArray.slice(i, i + 7);
+      dividedArray.push(chunk);
   }
 
-  /*
-  // 1年前から今日までの日付
-  function displayDates(startDate: any) {
-    const currentDate = new Date("2023-04-01");
-    const today = new Date();
-
-    const tmp = [];
+  // 各要素を <div> 要素に格納
+  const result = dividedArray.map((chunk, index) => {
+      const innerDivs = chunk.map((item) => `<div>${item}</div>`).join('');
+      return `<div class="outer-div">${innerDivs}</div>`;
+  });
 
-    while (currentDate <= today) {
-      const obj = {
-        date: currentDate.toLocaleDateString(),
-        status: "none"
-      }
+  // console.log(result)
 
-      tmp.push(obj);
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
+  return (
+    <>
+      <p className={Styles.count}>過去4ヵ月間のAtCoderのAC数を表示します ※工事中👷‍♂️</p>
 
-    setBox(tmp)
-  }
-  */
+      <div className={Styles.wrapper}>
 
-  return (
-    <Container>
-      <h1>AC Test</h1>
+        <button
+          onClick={handleClick}
+        >
+          click me
+        </button>
 
-      <button
-        onClick={handleClick}
-      >
-        click me
-      </button>
+        {data && Object.entries(data).map(([k, v]) => {
+          return (
+            <p key="k">{k}: {v}</p>
+          )
+        })}
 
-      <div>
         {data && (
-          <ul>
-            {/* @ts-ignore */}
-            {data.map((d: any) => (
-              <li key={d.id}>{new Date(d.epoch_second * 1000).toLocaleDateString()}</li>
-            ))}
-          </ul>
+          <button onClick={() => setData(null)}>閉じる</button>
         )}
       </div>
-
-      {/*box && (
-        <>
-          {box.map((b: any) => {
-            return (
-              <>
-                <p key={`date=${b}`}>{b.date}</p>
-              </>
-            )
-          }
-          )}
-        </>
-        )*/}
-    </Container>
+    </>
   )
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -35,8 +35,6 @@ const Home = () => {
 
       <Header />
 
-      <Ac />
-
       <section
         className={`${Styles.section} ${Styles.sec1} inter`}
         id="sec1"
@@ -83,15 +81,6 @@ const Home = () => {
           technologies={["Next.js", "TypeScript", "Tailwind CSS", "Zustand", "Prisma", "Supabase", "Vercel", "Google Books API"]}
         />
 
-        {/*
-        <AppsAndSites
-          url="https://tennis-chart.toriwatari.work"
-          title="Tennis Chart(仮)"
-          text="BIG4と呼ばれる存在がいかに男子テニス界を支配していたか、チャートを用いて振り返ります。バックエンドはRustです。"
-          technologies={["Next.js", "TypeScript", "React Query", "Recharts", "Rust", "Actix Web", "PostgreSQL"]}
-        />
-        */}
-
         <AppsAndSites
           url="https://github.com/kento-yoshidu/Rust_algorithm"
           title="Rust_algorithm(GitHub)"
@@ -120,6 +109,12 @@ const Home = () => {
         </div>
       </section>
 
+      <section className={`${Styles.section} ${Styles.sec3} inter`}>
+        <h2 className={Styles.sectionTitle}>AtCoder Heatmap</h2>
+
+        <Ac />
+      </section>
+
       <section
         className={`${Styles.section} ${Styles.sec4}`}
       >