router-linkのto属性でオブジェクトを使用するように

[ogu-kazemiya]

User description

close #172

---

PR Type

enhancement

---

Description

• router-linkのto属性を文字列からオブジェクト形式に変更し、各コンポーネントで適切なparamsを設定。
• paramsのキーをIdに統一。

---

Changes walkthrough 📝

Relevant files

Enhancement

14 files ContestTeamListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Contest/ContestTeamListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにcontestIdとteamIdを設定 +4/-1      MemberListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/ContestTeam/MemberListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      ContestListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Contests/ContestListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにcontestIdを設定 +4/-1      HostnameListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Event/HostnameListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      EventListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Events/EventListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにeventIdを設定 +4/-1      AdminListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Group/AdminListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      MemberListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Group/MemberListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      GroupListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Groups/GroupListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにgroupIdを設定 +4/-1      GroupList.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Index/GroupList.vue router-linkのto属性をオブジェクト形式に変更 paramsにgroupIdを設定 +1/-1      PageHeader.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Layout/PageHeader.vue router-linkのto属性をオブジェクト形式に変更 nameにIndexを設定 +1/-1      MemberListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Project/MemberListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      ProjectListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Projects/ProjectListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにprojectIdを設定 +4/-1      UserListItem.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/Search/UserListItem.vue router-linkのto属性をオブジェクト形式に変更 paramsにuserIdを設定 +4/-1      ContestsContainer.vue `router-link`の`to`属性をオブジェクト形式に変更                                                  src/components/User/ContestsContainer.vue router-linkのto属性をオブジェクト形式に変更 paramsにcontestIdを設定 +4/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review パラメータの統一性: paramsのキーがIdに統一されているかどうかを確認する必要があります。例えば、userIdやcontestIdなどが正しく設定されているかレビューすることが重要です。 リンクの動作確認: router-linkのto属性がオブジェクト形式に変更されたため、これらのリンクが正しく機能するかどうかを確認する必要があります。特に、新しいパラメータ形式が適切にルーティングされているかテストすることが推奨されます。

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	存在しないイベントIDを参照するリスクを避けるために条件付きレンダリングを使用する。 :to属性のオブジェクトでeventIdを使用していますが、このIDが実際に存在するかどうかの検証が必要です。存在しないIDを参照すると、ユーザーがエラーページにリダイレクトされる可能性があります。 src/components/Events/EventListItem.vue [19] -:to="{ name: 'Event', params: { eventId: event.id } }" +:to="event.id ? { name: 'Event', params: { eventId: event.id } } : { name: 'NotFound' }" Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential bug by ensuring that the code does not attempt to navigate to a non-existent event, which would improve user experience and prevent errors.	9
Possible issue	teamIdの値がundefinedになる可能性があるため、オプショナルチェイニングを使用して安全にアクセスする。 :to属性のオブジェクトでcontestIdとteamIdを使用していますが、teamIdの値がcontestTeam.idとして正しく設定されているか確認してください。もしcontestTeamが未定義の場合やidプロパティが存在しない場合、リンクが正しく機能しない可能性があります。 src/components/Contest/ContestTeamListItem.vue [16-17] :to="{ name: 'ContestTeam', - params: { contestId: contestId, teamId: contestTeam.id } + params: { contestId: contestId, teamId: contestTeam?.id } }" Suggestion importance[1-10]: 8 Why: This suggestion improves the robustness of the code by using optional chaining to prevent potential errors if contestTeam or its id property is undefined. This is a significant improvement for preventing runtime errors.	8
Enhancement	ユーザーIDとして名前ではなく、一意の識別子を使用する。 :to属性でuserIdをmember.nameに設定していますが、ユーザーIDとして名前を使用することは一般的ではありません。通常、ユーザーIDは数値または一意の識別子であるべきです。適切なユーザーIDフィールドを使用してください。 src/components/ContestTeam/MemberListItem.vue [14] -:to="{ name: 'User', params: { userId: member.name } }" +:to="{ name: 'User', params: { userId: member.id } }" Suggestion importance[1-10]: 7 Why: Using a unique identifier instead of a name for user IDs is a good practice for ensuring data integrity and avoiding potential conflicts. This suggestion enhances the code quality and maintainability.	7
Best practice	ユーザー識別には名前ではなく、一意のIDを使用することを推奨します。 :to属性でuserIdをmember.nameに設定していますが、このフィールドがユーザーの一意の識別子であるか確認してください。もしmemberオブジェクトにidプロパティがある場合は、それを使用することをお勧めします。 src/components/Group/MemberListItem.vue [15] -:to="{ name: 'User', params: { userId: member.name } }" +:to="{ name: 'User', params: { userId: member.id || member.name } }" Suggestion importance[1-10]: 7 Why: This suggestion promotes best practices by recommending the use of a unique identifier for user IDs, which enhances the reliability and clarity of the code.	7

[Pugma]

@ogu-kazemiya パンくずリストのPropsについても部分的に編集してあるので、残りの部分をお願いします！

[Pugma]

いくつか修正が必要な箇所を挙げているので対応をお願いします:pray:

あと、コンテストの詳細ページ -> コンテスト一覧 (コンポーネントでいうと ProjectsPage -> ProjectPage) の遷移時に正常に進行できなくなる不具合を発見したんだけど、これに関しては一旦↓のように書いておくと応急処置ができるのでこれも同時にやっておいてほしいです

<contest-team-list
    :contest-teams="contestDetail.teams"
    :contest-id="contestId ?? 'undefined'"
/>

traPortfolio-UI/src/pages/ContestPage.vue

Lines 44 to 47 in 86a8a63

	<contest-team-list
	:contest-teams="contestDetail.teams"
	:contest-id="contestId"
	/>

[Pugma]

返信遅れた & 再度の修正依頼で超絶申し訳ないんですが、

traPortfolio-UI/src/lib/param.ts

Lines 10 to 14 in 25d82c0

	const useParam = (paramName: string): ComputedRef<string> => {
	const route = useRoute()
	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
	return computed(() => toStringIfArray(route.params[paramName])!)
	}

の部分を

const useParam = (paramName: string): ComputedRef<string> => {
  const route = useRoute()
  return computed(() => toStringIfArray(route.params[paramName]) ?? 'undefined')
}

みたいな感じで ?? 'undefined' をつけておくと、前回つけた ?? 'undefined' の部分を消しても問題なく動く、かつ他の僕が見落としていた箇所も動くようになっていそうです