Merge branch 'main' into 108-スクロールバーのスタイルを変更pc

nitfc-festival-system-team · Oct 24, 2023 · a524f85 · a524f85
2 parents 9744990 + 3194e17
commit a524f85
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 36 deletions.
diff --git a/api/get_notices.js b/api/get_notices.js
@@ -1,6 +1,6 @@
 const { PrismaClient } = require("@prisma/client");
 
-module.exports = async function getData(req, res) {
+module.exports = async function getData(_, res) {
   const prisma = new PrismaClient();
 
   try {

diff --git a/api/get_schedules.js b/api/get_schedules.js
@@ -1,6 +1,6 @@
 const { PrismaClient } = require("@prisma/client");
 
-module.exports = async function getData(req, res) {
+module.exports = async function getData(_, res) {
   const prisma = new PrismaClient();
 
   try {

diff --git a/api/get_stands.js b/api/get_stands.js
@@ -1,6 +1,6 @@
 const { PrismaClient } = require("@prisma/client");
 
-module.exports = async function getData(req, res) {
+module.exports = async function getData(_, res) {
   const prisma = new PrismaClient();
 
   try {

diff --git a/src/components/EventOverlay.tsx b/src/components/EventOverlay.tsx
@@ -1,32 +1,13 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { schedules } from "@/db/schedule";
 
-const now = new Date();
-// const now = new Date(2023, 10, 27, 9, 55);    //デバッグ例
+import { schedules } from "@/db/schedule";
 
 const timeToDisplay = Math.abs(
-  //10分を定義
+  //10分で定義
   new Date(1900, 0, 1, 0, 0).getTime() - new Date(1900, 0, 1, 0, 10).getTime(),
 );
 
-//開催時刻が現在時刻に近い順にソート
-const eventSorted = schedules.sort((a, b) => {
-  const diffA = Math.abs(a.startDate.getTime() - now.getTime());
-  const diffB = Math.abs(b.startDate.getTime() - now.getTime());
-  return diffA - diffB;
-});
-
-const latestEvent = eventSorted[0];
-
-//現在時刻が開催時刻と終了時刻の合間にあるイベントを取得
-const nowHeld = schedules.filter((event) => {
-  const startTime = event.startDate.getTime();
-  const endTime = event.endDate?.getTime();
-
-  return startTime <= now.getTime() && (!endTime || endTime >= now.getTime());
-});
-
 const HeaderWrapper = styled.div`
   position: fixed;
   top: 0;
@@ -83,6 +64,40 @@ const ArrowIcon = styled.span`
 `;
 
 export const EventHeader = () => {
+  const [now, setTime] = useState(new Date());
+  console.log(now);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(new Date());
+    }, 60000);
+    return () => clearInterval(interval);
+  });
+
+  //未開催の内、開催時刻が現在時刻に近い順にソート
+  const eventSorted = schedules
+    .filter((event) => {
+      const startTime = event.startDate.getTime();
+      const endTime = event.endDate?.getTime();
+
+      return startTime > now.getTime() || !endTime || endTime >= now.getTime();
+    })
+    .sort((a, b) => {
+      const diffA = Math.abs(a.startDate.getTime() - now.getTime());
+      const diffB = Math.abs(b.startDate?.getTime() - now.getTime());
+      return diffA - diffB;
+    });
+
+  const upcomingEvent = eventSorted[0];
+
+  //現在時刻が開催時刻と終了時刻の合間にあるイベントを取得
+  const nowHeld = schedules.filter((event) => {
+    const startTime = event.startDate.getTime();
+    const endTime = event.endDate?.getTime();
+
+    return startTime <= now.getTime() && (!endTime || endTime >= now.getTime());
+  });
+
   const [isHidden, setIsHidden] = useState(false);
 
   const toggleHeader = () => {
@@ -95,25 +110,28 @@ export const EventHeader = () => {
         <HeaderContainer>
           <HeaderContent>
             <Header>
-              {!isHidden && (
+              {!isHidden && upcomingEvent ? (
                 <>
-                  <Title>
-                    {/* {現在開催中のイベントがないor次のイベントまで10分を切っていたら
-											次のイベント、それ以外なら現在開催中のイベントを表示} */}
-                    {nowHeld.length === 0 ||
-                    Math.abs(now.getTime() - latestEvent.startDate.getTime()) <=
-                      timeToDisplay
-                      ? latestEvent.title
-                      : nowHeld[0].title}
-                  </Title>
                   <SubTitle>
                     {nowHeld.length !== 0 &&
                     nowHeld[0].startDate.getTime() >
-                      latestEvent.startDate.getTime()
+                      upcomingEvent.startDate.getTime()
                       ? "注目!"
                       : "Next"}
                   </SubTitle>
+                  {/* 現在開催中のイベントがないor次のイベントまで10分を切っていたら
+                  次のイベント、それ以外なら現在開催中のイベントを表示 */}
+                  <Title>
+                    {nowHeld.length === 0 ||
+                    Math.abs(
+                      now.getTime() - upcomingEvent.startDate.getTime(),
+                    ) <= timeToDisplay
+                      ? upcomingEvent.title
+                      : nowHeld[0].title}
+                  </Title>
                 </>
+              ) : (
+                <></>
               )}
             </Header>
           </HeaderContent>