翻訳コンポーネントをホバーじゃなくクリックに #117
Merged
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
|
This PR is linked to issue #113 |
|
### ウォークスルー
この変更は、翻訳コンポーネントのユーザーインターフェースを改善し、クリックイベントに基づく表示ロジックを導入することを目的としています。また、不要なアイコンやテキストの削除、エラーメッセージのスタイル調整、関数のリファクタリングも行われています。
### 変更点
| ファイル | 要約 |
| --- | --- |
| .github/scripts/determine-issue-type.sh | `.github/issue-type-config.json`を使用してIssueタイトルに基づいてラベルを決定するスクリプトを削除。 |
| web/app/routes/reader.$encodedUrl/components/AddAndVoteTranslations.tsx, web/app/routes/reader.$encodedUrl/components/Translation.tsx | 翻訳コンポーネントのホバーからクリックへの変更、アイコン追加、表示状態切り替えロジック実装。 |
| web/app/routes/reader.$encodedUrl/components/AddTranslationForm.tsx | エラーメッセージのテキストにCSSクラス`text-sm`を追加。 |
| web/app/routes/reader.$encodedUrl/components/TranslationItem.tsx | `sanitizeAndParseText`関数のインポートパスを変更。 |
| web/app/routes/reader.$encodedUrl/functions/get-best-translation.client.ts | `getBestTranslation`関数を追加し、最適な翻訳を選択するロジックを実装。 |Uplevel your code reviews with CodeRabbit ProCodeRabbit ProIf you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Comment on lines
+3
to
+18
| export function getBestTranslation( | ||
| translationsWithVotes: TranslationWithVote[], | ||
| ): TranslationWithVote { | ||
| const upvotedTranslations = translationsWithVotes.filter( | ||
| (t) => t.userVote?.isUpvote, | ||
| ); | ||
| if (upvotedTranslations.length > 0) { | ||
| return upvotedTranslations.reduce((prev, current) => { | ||
| const currentUpdatedAt = current.userVote?.updatedAt ?? new Date(0); | ||
| const prevUpdatedAt = prev.userVote?.updatedAt ?? new Date(0); | ||
| return currentUpdatedAt > prevUpdatedAt ? current : prev; | ||
| }); | ||
| } | ||
| return translationsWithVotes.reduce((prev, current) => | ||
| prev.point > current.point ? prev : current, | ||
| ); |
There was a problem hiding this comment.
translationsWithVotesが空の場合に対応するためのエラーハンドリングが不足しています。空配列が渡された場合、関数は未定義を返す可能性があります。
5c5
< ): TranslationWithVote {
<!-- This is an auto-generated comment by OSS CodeRabbit -->
| @@ -33,7 +37,7 @@ export function Translation({ | |||
| userId, | |||
| sourceTextId, | |||
| }: TranslationProps) { | |||
| const [isHovered, setIsHovered] = useState(false); | |||
| const [isExpanded, setIsExpanded] = useState(false); | |||
There was a problem hiding this comment.
isHoveredステートをisExpandedステートに置き換える変更は適切ですが、変数名が一貫していないため、setIsHoveredもsetIsExpandedに変更する必要があります。
- const [isHovered, setIsHovered] = useState(false);
+ const [isExpanded, setIsExpanded] = useState(false);
Comment on lines
+59
to
+76
| <div className="group relative"> | ||
| <div className="w-full notranslate mt-2 pt-2 border-t border-gray-200"> | ||
| {sanitizedAndParsedText} | ||
| <ToggleButton | ||
| isExpanded={isExpanded} | ||
| onClick={() => setIsExpanded(!isExpanded)} | ||
| /> | ||
| </div> | ||
| <div className="absolute top-0 left-0 right-0 z-10 opacity-0 invisible border bg-white dark:bg-gray-900 rounded-xl shadow-xl dark:shadow-white/10 group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-in-out"> | ||
| {isHovered && ( | ||
| {isExpanded && ( | ||
| <div className="absolute top-0 left-0 right-0 z-10 border bg-white dark:bg-gray-900 rounded-xl shadow-xl dark:shadow-white/10 transition-all duration-500 ease-in-out"> | ||
| <AddAndVoteTranslations | ||
| bestTranslationWithVote={bestTranslationWithVote} | ||
| alternativeTranslationsWithVotes={alternativeTranslationsWithVotes} | ||
| userId={userId} | ||
| sourceTextId={sourceTextId} | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
alternativeTranslationsWithVotesが定義されていないため、エラーが発生します。以下のように修正してください。
<div className="absolute top-0 left-0 right-0 z-10 border bg-white dark:bg-gray-900 rounded-xl shadow-xl dark:shadow-white/10 transition-all duration-500 ease-in-out">
<AddAndVoteTranslations
bestTranslationWithVote={bestTranslationWithVote}
- alternativeTranslationsWithVotes={alternativeTranslationsWithVotes}
+ alternativeTranslationsWithVotes={translationsWithVotes.filter(t => t !== bestTranslationWithVote)}
userId={userId}
sourceTextId={sourceTextId}
/>
</div>
Comment on lines
+45
to
46
| Alternative | ||
| </p> |
There was a problem hiding this comment.
Alternativeのテキストが変更されましたが、文脈から判断すると、元のAlternative Translationsの方が意味が明確です。
- Alternative
+ Alternative Translations
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.
Closes #113
Summary by CodeRabbit