From 18c00f6eca9baa32cc592043d9774edaa03d55f8 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 27 Feb 2024 18:49:04 +0000 Subject: [PATCH 1/3] =?UTF-8?q?[feat]=20=E5=B9=B4=E5=BA=A6=E5=88=A5?= =?UTF-8?q?=E3=81=AB=E5=8F=96=E5=BE=97=E3=81=99=E3=82=8BAPI=E3=82=92?= =?UTF-8?q?=E4=BD=BF=E3=81=A3=E3=81=A6=E8=A1=A8=E7=A4=BA=E3=81=95=E3=81=9B?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../next-project/src/pages/sponsors/index.tsx | 66 ++++++++++++------- 1 file changed, 43 insertions(+), 23 deletions(-) diff --git a/view/next-project/src/pages/sponsors/index.tsx b/view/next-project/src/pages/sponsors/index.tsx index 6ce13c774..b59e2ce0d 100644 --- a/view/next-project/src/pages/sponsors/index.tsx +++ b/view/next-project/src/pages/sponsors/index.tsx @@ -1,42 +1,57 @@ import clsx from 'clsx'; import type { NextPage } from 'next'; import Head from 'next/head'; -import { useState as UseState, useMemo as UseMemo } from 'react'; - +import { useState as UseState, useEffect as UseEffect } from 'react'; import OpenDeleteModalButton from '@/components/sponsors/OpenDeleteModalButton'; import OpenEditModalButton from '@/components/sponsors/OpenEditModalButton'; import { get } from '@/utils/api/api_methods'; import { Card, Title } from '@components/common'; import MainLayout from '@components/layout/MainLayout'; import OpenAddModalButton from '@components/sponsors/OpenAddModalButton'; -import { Sponsor } from '@type/common'; +import { Sponsor, YearPeriod } from '@type/common'; interface Props { sponsor: Sponsor[]; + yearPeriods: YearPeriod[]; } +const date = new Date(); + export const getServerSideProps = async () => { - const getSponsorUrl = process.env.SSR_API_URI + '/sponsors'; - const sponsorRes = await get(getSponsorUrl); + const getPeriodsUrl = process.env.SSR_API_URI + '/years/periods'; + const periodsRes = await get(getPeriodsUrl); + const getSponsorViewUrl = + process.env.SSR_API_URI + + '/sponsors/' + + (periodsRes ? String(periodsRes[periodsRes.length - 1].year) : String(date.getFullYear())); return { props: { - sponsor: sponsorRes, + sponsorView: getSponsorViewUrl, + yearPeriods: periodsRes, }, }; }; const sponsorship: NextPage = (props: Props) => { - const sponsorList: Sponsor[] = props.sponsor; + const [sponsors, setSponsors] = UseState(props.sponsor); - const currentYear = new Date().getFullYear().toString(); - const [selectedYear, setSelectedYear] = UseState(currentYear); + const yearPeriods = props.yearPeriods; + const [selectedYear, setSelectedYear] = UseState( + yearPeriods ? String(yearPeriods[yearPeriods.length - 1].year) : String(date.getFullYear()), + ); + + //年度別のsponsorsを取得 + const getSponsors = async () => { + const getSponsorViewUrlByYear = process.env.CSR_API_URI + '/sponsors/' + selectedYear; + console.log(getSponsorViewUrlByYear); + const getSponsorsByYears = await get(getSponsorViewUrlByYear); + setSponsors(getSponsorsByYears); + }; - const filteredSponsorListViews = UseMemo(() => { - return sponsorList.filter((sponsor) => { - return sponsor.createdAt?.includes(selectedYear); - }); - }, [sponsorList, selectedYear]); + UseEffect(() => { + getSponsors(); + }, [selectedYear]); return ( @@ -50,12 +65,17 @@ const sponsorship: NextPage = (props: Props) => { <select className='w-100' - defaultValue={currentYear} + defaultValue={selectedYear} onChange={(e) => setSelectedYear(e.target.value)} > - <option value='2021'>2021</option> - <option value='2022'>2022</option> - <option value='2023'>2023</option> + {props.yearPeriods && + props.yearPeriods.map((year) => { + return ( + <option value={year.year} key={year.id}> + {year.year}年度 + </option> + ); + })} </select> </div> <div className='hidden justify-end md:flex'> @@ -87,10 +107,10 @@ const sponsorship: NextPage<Props> = (props: Props) => { </tr> </thead> <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'> - {filteredSponsorListViews && - filteredSponsorListViews.map((sponsor, index) => ( + {sponsors && sponsors.length > 0 ? ( + sponsors.map((sponsor, index) => ( <tr - className={clsx(index !== sponsorList.length - 1 && 'border-b')} + className={clsx(index !== sponsors.length - 1 && 'border-b')} key={sponsor.id} > <td className='py-3'> @@ -115,8 +135,8 @@ const sponsorship: NextPage<Props> = (props: Props) => { </div> </td> </tr> - ))} - {!filteredSponsorListViews.length && ( + )) + ) : ( <tr> <td colSpan={6} className='py-3'> <div className='text-center text-black-300'>データがありません</div> From 1a411976cfd60e3b26c5e48041460c2c59ef95a4 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Mon, 4 Mar 2024 01:51:23 +0000 Subject: [PATCH 2/3] =?UTF-8?q?[fix]=20useState=E5=88=A5=E5=90=8D=E5=AE=9A?= =?UTF-8?q?=E7=BE=A9=E3=81=AE=E5=89=8A=E9=99=A4=E3=80=81=E3=81=9D=E3=82=8C?= =?UTF-8?q?=E3=81=AB=E4=BC=B4=E3=81=84=E3=80=81component=E3=81=AE=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E3=82=92=E5=A4=A7=E6=96=87=E5=AD=97=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/next-project/src/pages/sponsors/index.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/view/next-project/src/pages/sponsors/index.tsx b/view/next-project/src/pages/sponsors/index.tsx index b59e2ce0d..8fb8b8d6b 100644 --- a/view/next-project/src/pages/sponsors/index.tsx +++ b/view/next-project/src/pages/sponsors/index.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import type { NextPage } from 'next'; import Head from 'next/head'; -import { useState as UseState, useEffect as UseEffect } from 'react'; +import { useState , useEffect } from 'react'; import OpenDeleteModalButton from '@/components/sponsors/OpenDeleteModalButton'; import OpenEditModalButton from '@/components/sponsors/OpenEditModalButton'; import { get } from '@/utils/api/api_methods'; @@ -33,23 +33,22 @@ export const getServerSideProps = async () => { }; }; -const sponsorship: NextPage<Props> = (props: Props) => { - const [sponsors, setSponsors] = UseState<Sponsor[]>(props.sponsor); +const Sponsorship: NextPage<Props> = (props: Props) => { + const [sponsors, setSponsors] = useState<Sponsor[]>(props.sponsor); const yearPeriods = props.yearPeriods; - const [selectedYear, setSelectedYear] = UseState<string>( + const [selectedYear, setSelectedYear] = useState<string>( yearPeriods ? String(yearPeriods[yearPeriods.length - 1].year) : String(date.getFullYear()), ); //年度別のsponsorsを取得 const getSponsors = async () => { const getSponsorViewUrlByYear = process.env.CSR_API_URI + '/sponsors/' + selectedYear; - console.log(getSponsorViewUrlByYear); const getSponsorsByYears = await get(getSponsorViewUrlByYear); setSponsors(getSponsorsByYears); }; - UseEffect(() => { + useEffect(() => { getSponsors(); }, [selectedYear]); @@ -154,4 +153,4 @@ const sponsorship: NextPage<Props> = (props: Props) => { ); }; -export default sponsorship; +export default Sponsorship; From 5c08595ca67aefaca48609ef9f2056f08c8f4e32 Mon Sep 17 00:00:00 2001 From: hikahana <hikahana@users.noreply.github.com> Date: Mon, 4 Mar 2024 01:52:27 +0000 Subject: [PATCH 3/3] formatted by workflow --- view/next-project/src/pages/sponsors/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view/next-project/src/pages/sponsors/index.tsx b/view/next-project/src/pages/sponsors/index.tsx index 8fb8b8d6b..365f24197 100644 --- a/view/next-project/src/pages/sponsors/index.tsx +++ b/view/next-project/src/pages/sponsors/index.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import type { NextPage } from 'next'; import Head from 'next/head'; -import { useState , useEffect } from 'react'; +import { useState, useEffect } from 'react'; import OpenDeleteModalButton from '@/components/sponsors/OpenDeleteModalButton'; import OpenEditModalButton from '@/components/sponsors/OpenEditModalButton'; import { get } from '@/utils/api/api_methods';