swrとorval導入 #902
Open
swrとorval導入 #902
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
マージ先feat/kubosaka/create-budgets-openapiなのは意図ありです？ |
hikahana
reviewed
Dec 27, 2024
There was a problem hiding this comment.
同じyamlファイルですし、backとfrontでmake分けるコマンド分ける必要ない気がするので
make genとかで一括に実行させて良さそう
There was a problem hiding this comment.
.eslintrc.json
"ignorePatterns": ["orval.config.js", "src/generated/"]
There was a problem hiding this comment.
これでyearPeriodsと型の修正。全コード貼り付け
微修正はよろしくお願いします。
import clsx from 'clsx';
import type { NextPage } from 'next';
import Head from 'next/head';
import { useState } from 'react';
import OpenDeleteModalButton from '@/components/sponsors/OpenDeleteModalButton';
import OpenEditModalButton from '@/components/sponsors/OpenEditModalButton';
import { useGetSponsorsPeriodsYear, useGetYearsPeriods } from '@/generated/hooks';
import { Card, Loading, Title } from '@components/common';
import MainLayout from '@components/layout/MainLayout';
import OpenAddModalButton from '@components/sponsors/OpenAddModalButton';
const date = new Date();
const Sponsorship: NextPage = () => {
const { data: getYearPeriods } = useGetYearsPeriods();
const yearPeriods = getYearPeriods?.data;
const [selectedYear, setSelectedYear] = useState<string>(
yearPeriods ? String(yearPeriods[yearPeriods.length - 1].year) : String(date.getFullYear()),
);
const { data, isLoading, error } = useGetSponsorsPeriodsYear(Number(selectedYear));
const sponsors = data?.data;
if (isLoading) return <Loading />;
if (error) return <div>error...</div>;
return (
<MainLayout>
<Head>
<title>協賛企業一覧</title>
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<Card w='w-1/1'>
<div className='mx-5 mt-10'>
<div className='flex'>
<Title title={'協賛企業一覧'} />
<select
className='w-100'
defaultValue={selectedYear}
onChange={(e) => setSelectedYear(e.target.value)}
>
{yearPeriods &&
yearPeriods.map((year, index) => {
return (
<option value={year.year} key={index}>
{year.year}年度
</option>
);
})}
</select>
</div>
<div className='hidden justify-end md:flex'>
<OpenAddModalButton>協賛企業登録</OpenAddModalButton>
</div>
</div>
<div className='mb-2 overflow-scroll p-5'>
<table className='mb-5 w-max table-auto border-collapse md:w-full md:table-fixed'>
<thead>
<tr className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
<th className='w-1/8 border-b-primary-1 pb-2'>
<div className='mr-1 text-center text-sm text-black-600'>企業名</div>
</th>
<th className='w-1/8 border-b-primary-1 pb-2'>
<div className='text-center text-sm text-black-600'>電話番号</div>
</th>
<th className='w-1/6 border-b-primary-1 pb-2'>
<div className='text-center text-sm text-black-600'>メール</div>
</th>
<th className='w-1/6 border-b-primary-1 pb-2'>
<div className='text-center'>住所</div>
</th>
<th className='w-1/8 border-b-primary-1 pb-2'>
<div className='text-center text-black-600'>代表者</div>
</th>
<th className='w-1/12 border-b-primary-1 pb-2'>
<div className='text-center text-black-600'></div>
</th>
</tr>
</thead>
<tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
{sponsors && sponsors.length > 0 ? (
sponsors.map((sponsor, index) => (
<tr
className={clsx(index !== sponsors.length - 1 && 'border-b')}
key={sponsor.id}
>
<td className='py-3'>
<div className='text-center text-black-300'>{sponsor.name}</div>
</td>
<td>
<div className='text-center text-black-300'>{sponsor.tel}</div>
</td>
<td>
<div className='text-center text-black-300'>{sponsor.email}</div>
</td>
<td>
<div className='text-center text-black-300'>{sponsor.address}</div>
</td>
<td>
<div className='text-center text-black-300'>{sponsor.representative}</div>
</td>
<td>
<div className='flex gap-3'>
<OpenEditModalButton sponsor={sponsor} />
<OpenDeleteModalButton id={sponsor.id || 0} />
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan={6} className='py-3'>
<div className='text-center text-black-300'>データがありません</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</Card>
<div className='fixed bottom-4 right-4 md:hidden'>
<OpenAddModalButton />
</div>
</MainLayout>
);
};
export default Sponsorship;
There was a problem hiding this comment.
getのcontentに型付けました。
components/sponsorにid追加しました。
There was a problem hiding this comment.
teacherのコメントアウトは何も弄ってません
|
あとtsconfig.paths.jsonにこれも追加してもいいかも！ |
Base automatically changed from
feat/kubosaka/create-budgets-openapi
to
develop
December 30, 2024 05:47
|
openapiの定義からブランチ切ったためですね |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
概要
make gen-front-apiでhooksとTypeを自動生成しますapiクライアントにはswr＋fetchを使用しました。
swrはvercelが提供しており、軽量でシンプルなので採用しました。
画面スクリーンショット等
URLスクリーンショット
テスト項目
備考