Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] 年度別に取得するAPIを使って表示させるように変更 #688

Merged
merged 3 commits into from
Mar 4, 2024
Merged

[feat] 年度別に取得するAPIを使って表示させるように変更 #688

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18c00f6
[feat] 年度別に取得するAPIを使って表示させるように変更
hikahana Feb 27, 2024
1a41197
[fix] useState別名定義の削除、それに伴い、componentの命名を大文字に変更
hikahana Mar 4, 2024
5c08595
formatted by workflow
hikahana Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 43 additions & 23 deletions view/next-project/src/pages/sponsors/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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';
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: Props) => {
const sponsorList: Sponsor[] = props.sponsor;
const [sponsors, setSponsors] = UseState<Sponsor[]>(props.sponsor);

const currentYear = new Date().getFullYear().toString();
const [selectedYear, setSelectedYear] = UseState<string>(currentYear);
const yearPeriods = props.yearPeriods;
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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 (
<MainLayout>
Expand All @@ -50,12 +65,17 @@ const sponsorship: NextPage<Props> = (props: Props) => {
<Title title={'協賛企業一覧'} />
<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'>
Expand Down Expand Up @@ -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'>
Expand All @@ -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>
Expand Down
Loading