Contestの詳細ページの作成 #51
Contestの詳細ページの作成 #51
Conversation
src/pages/Contest.vue
Outdated
| <section :class="$style.section"> | ||
| <h2 :class="$style.h2">リンク</h2> | ||
| <p :class="$style.content"> | ||
| <a :href="contest.link">{{ contest.link }}</a> | ||
| </p> | ||
| </section> |
There was a problem hiding this comment.
後出しでごめんなんだけど、リンクの部分のデザインを少し調整したのでお願いします。:pray:
src/pages/Contest.vue
Outdated
| import { RouterLink } from 'vue-router' | ||
| import { getDisplayDuration } from '/@/lib/date' | ||
| import useParam from '/@/use/param' | ||
| import useFetcher from '/@/use/fetcher' |
There was a problem hiding this comment.
exportしてる関数名と違って分かりづらいので、useDataFecher のほうがいいかも
src/pages/Contest.vue
Outdated
| import ContestTeamsComponent from '/@/components/Contest/ContestTeams.vue' | ||
|
|
||
| const contestId = useParam('id') | ||
| const { data: contest } = useFetcher<ContestDetail>(contestId, () => |
There was a problem hiding this comment.
こんな感じに書いてもいいかも？ fetcherState 使ってなさそうなので
const contest = ref<ContestDetail>()
watchEffect(async () => {
contest.value = (await apis.getContest(contestId.value)).data
})There was a problem hiding this comment.
fetcherStateを使うことにしました
| @@ -1,39 +1,25 @@ | |||
| import { ref, Ref } from 'vue' | |||
| import { AxiosResponse } from 'axios' | |||
There was a problem hiding this comment.
fetcher.tsは traPortfolio-UIから移植するときにコピーされたもので、Vuexの状態変化にしか使ってなさそうなので、元々のfetcher.tsなくてもいいかも。
userDataFetcher.tsとほとんど同じだから、userDataFetcher.tsの役割をこいつに寄せて大丈夫な感じがする。
Dashboard では、こいつを fetcher という名前で 運用しても悪くない感じがした。
| .header { | ||
| margin: 4rem 0 2rem; | ||
| } |
src/pages/Contest.vue
Outdated
| } | ||
| .h2 { | ||
| font-weight: bold; | ||
| font-size: 20px; |
src/pages/Contest.vue
Outdated
| <contest-teams-component | ||
| v-if="contestTeams !== undefined" | ||
| :class="$style.content" | ||
| :contest-id="contestId" | ||
| :contest-teams="contestTeams" | ||
| @input="searchContestTeams($event)" |
There was a problem hiding this comment.
絞り込んだあとのチームを表示する責任があるのは、ContestTeams.vueだから、ContestTeams.vueに、絞り込む機能を実装したほうがもっとスッキリかけそう。
Contest.vueでは、全チームをpropsを通して ContestTeams.vueに流し込むだけで、 ContestTeams.vueでは、searchQueryを利用していい感じに絞り込むとかかな 🤔
There was a problem hiding this comment.
サーバーで検索機能実装してもらえたら@input時にContest.vueでsearchQueryを使ってContestTeamsをfetchしたいので、それを踏まえてContest.vueに書きました
検索機能をどっちで実装するかportfolioのチャンネルで相談してみます
There was a problem hiding this comment.
そしたら、ContestTeamが検索するたびに表示されるチームが減るので、いい感じに動くようにしてほしい！
There was a problem hiding this comment.
ほんとですね...
サーバーで検索機能ができるまでは上で言われたように、ContestTeams.vue側で検索機能を実装することにしました
| @@ -6,13 +6,14 @@ import BaseButton from '/@/components/UI/BaseButton.vue' | |||
| import AccountItem from '/@/components/UserAccounts/AccountItem.vue' | |||
| import { ref } from 'vue' | |||
| import apis from '/@/lib/apis' | |||
| import useUserDataFetcher from '/@/use/userDataFetcher' | |||
| import { RouterLink } from 'vue-router' | |||
close #9
useFetcherが上手く動かなかったのでuseUserDataFetcherに寄せて修正しました