From a4f4cdf5d8d411991bb3beda00b6664cab47ead5 Mon Sep 17 00:00:00 2001 From: TkymHrt <23.h.takayama.nutfes@gmail.com> Date: Tue, 27 Feb 2024 23:27:50 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[fix]=20=E5=90=84=E5=B9=B4=E5=BA=A6?= =?UTF-8?q?=E3=81=94=E3=81=A8=E3=81=AB=E5=8F=96=E5=BE=97=E3=81=99=E3=82=8B?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/sponsoractivities/index.tsx | 135 +++++++++++++----- 1 file changed, 96 insertions(+), 39 deletions(-) diff --git a/view/next-project/src/pages/sponsoractivities/index.tsx b/view/next-project/src/pages/sponsoractivities/index.tsx index 0d3edb0ba..954ed2634 100644 --- a/view/next-project/src/pages/sponsoractivities/index.tsx +++ b/view/next-project/src/pages/sponsoractivities/index.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import Head from 'next/head'; -import { useState, useMemo } from 'react'; +import { useState, useEffect, useMemo } from 'react'; import { RiExternalLinkLine } from 'react-icons/ri'; import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton'; @@ -21,6 +21,7 @@ import { SponsorStyle, User, ActivityStyle, + YearPeriod, } from '@type/common'; interface Props { @@ -30,11 +31,18 @@ interface Props { sponsors: Sponsor[]; users: User[]; activityStyles: ActivityStyle[]; + yearPeriods: YearPeriod[]; } export async function getServerSideProps() { - const getSponsorActivitiesUrl = process.env.SSR_API_URI + '/activities'; - const getSponsorActivitiesViewUrl = process.env.SSR_API_URI + '/activities/details'; + const getSponsorActivitiesUrl = process.env.SSR_API_URI + '/years/periods'; + const periodsRes = await get(getSponsorActivitiesUrl); + const getSponsorActivitiesViewUrl = + process.env.SSR_API_URI + + '/activities/details/' + + (periodsRes + ? String(periodsRes[periodsRes.length - 1].year) + : String(new Date().getFullYear())); const getSponsorStylesUrl = process.env.SSR_API_URI + '/sponsorstyles'; const getSponsorsUrl = process.env.SSR_API_URI + '/sponsors'; const getUsersUrl = process.env.SSR_API_URI + '/users'; @@ -55,6 +63,7 @@ export async function getServerSideProps() { sponsors: sponsorsRes, users: usersRes, activityStyles: activityStylesRes, + yearPeriods: periodsRes, }, }; } @@ -67,6 +76,9 @@ const formatYYYYMMDD = (date: Date) => { }; export default function SponsorActivities(props: Props) { + const [sponsorActivities, setSponsorActivitiesViews] = useState( + props.sponsorActivitiesView, + ); const [sponsorActivitiesID, setSponsorActivitiesID] = useState(1); const [sponsorActivitiesItem, setSponsorActivitiesViewItem] = useState(); const [isOpen, setIsOpen] = useState(false); @@ -83,23 +95,41 @@ export default function SponsorActivities(props: Props) { return datetime2; }; + const yearPeriods = props.yearPeriods; + const [selectedYear, setSelectedYear] = useState( + yearPeriods + ? String(yearPeriods[yearPeriods.length - 1].year) + : String(new Date().getFullYear()), + ); + + const getSponsorActivities = async () => { + const getSponsorActivitiesViewUrlByYear = + process.env.CSR_API_URI + '/activities/details/' + selectedYear; + const getSponsorActivitiesByYears = await get(getSponsorActivitiesViewUrlByYear); + setSponsorActivitiesViews(getSponsorActivitiesByYears); + console.log(getSponsorActivitiesViewUrlByYear); + }; + const currentYear = new Date().getFullYear().toString(); - const [selectedYear, setSelectedYear] = useState(currentYear); const [selectedIsDone, setSelectedIsDone] = useState('all'); const [selectedSort, setSelectedSort] = useState('default'); const sortedAndFilteredSponsorActivitiesViews = useMemo(() => { - let filteredActivities = props.sponsorActivitiesView.filter((sponsorActivitiesItem) => { - return sponsorActivitiesItem.sponsorActivity.createdAt?.includes(selectedYear); - }); + let filteredActivities = sponsorActivities; switch (selectedIsDone) { case 'false': + if (!Array.isArray(filteredActivities)) { + return []; + } filteredActivities = filteredActivities.filter((sponsorActivitiesItem) => { return !sponsorActivitiesItem.sponsorActivity.isDone; }); break; case 'true': + if (!Array.isArray(filteredActivities)) { + return []; + } filteredActivities = filteredActivities.filter((sponsorActivitiesItem) => { return sponsorActivitiesItem.sponsorActivity.isDone; }); @@ -110,6 +140,9 @@ export default function SponsorActivities(props: Props) { switch (selectedSort) { case 'createDesSort': + if (!Array.isArray(filteredActivities)) { + return []; + } return [...filteredActivities].sort( (firstObject: SponsorActivityView, secondObject: SponsorActivityView) => new Date(firstObject.sponsorActivity.createdAt || 0).getTime() > @@ -118,6 +151,9 @@ export default function SponsorActivities(props: Props) { : 1, ); case 'updateSort': + if (!Array.isArray(filteredActivities)) { + return []; + } return [...filteredActivities].sort( (firstObject: SponsorActivityView, secondObject: SponsorActivityView) => new Date(firstObject.sponsorActivity.updatedAt || 0).getTime() > @@ -126,6 +162,9 @@ export default function SponsorActivities(props: Props) { : -1, ); case 'updateDesSort': + if (!Array.isArray(filteredActivities)) { + return []; + } return [...filteredActivities].sort( (firstObject: SponsorActivityView, secondObject: SponsorActivityView) => new Date(firstObject.sponsorActivity.updatedAt || 0).getTime() > @@ -134,6 +173,9 @@ export default function SponsorActivities(props: Props) { : 1, ); case 'priceSort': + if (!Array.isArray(filteredActivities)) { + return []; + } return [...filteredActivities].sort( (firstObject: SponsorActivityView, secondObject: SponsorActivityView) => firstObject.styleDetail.reduce((sum, style) => sum + style.sponsorStyle.price, 0) > @@ -142,6 +184,9 @@ export default function SponsorActivities(props: Props) { : -1, ); case 'priceDesSort': + if (!Array.isArray(filteredActivities)) { + return []; + } return [...filteredActivities].sort( (firstObject: SponsorActivityView, secondObject: SponsorActivityView) => firstObject.styleDetail.reduce((sum, style) => sum + style.sponsorStyle.price, 0) > @@ -152,7 +197,7 @@ export default function SponsorActivities(props: Props) { default: return filteredActivities; } - }, [props, selectedYear, selectedIsDone, selectedSort]); + }, [props, selectedYear, selectedIsDone, selectedSort, getSponsorActivities]); const TotalTransportationFee = useMemo(() => { let totalFee = 0; @@ -183,6 +228,10 @@ export default function SponsorActivities(props: Props) { return totalFee; }, [sortedAndFilteredSponsorActivitiesViews]); + useEffect(() => { + getSponsorActivities(); + }, [selectedYear]); + return ( @@ -201,9 +250,14 @@ export default function SponsorActivities(props: Props) { defaultValue={currentYear} onChange={(e) => setSelectedYear(e.target.value)} > - - - + {props.yearPeriods && + props.yearPeriods.map((year) => { + return ( + + ); + })}