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.

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

614-fix: Pre school subtitle #675

Merged
merged 6 commits into from
Dec 6, 2024
Merged

614-fix: Pre school subtitle #675

merged 6 commits into from
Dec 6, 2024

Conversation

YulikK
Copy link
Collaborator

@YulikK YulikK commented Dec 4, 2024

What type of PR is this? (select all that apply)

  • πŸ• Feature
  • πŸ› Bug Fix
  • 🚧 Breaking Change
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ“ Documentation Update

Description

fix subtitle in hero widget pre-school cource

Related Tickets & Documents

Screenshots, Recordings

Please replace this line with any relevant images for UI changes.

Added/updated tests?

  • πŸ‘Œ Yes
  • πŸ™…β€β™‚οΈ No, because they aren't needed
  • πŸ™‹β€β™‚οΈ No, because I need help

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced localized introductory content for courses in English and Russian.
    • Added a subTitle property to course objects, enhancing course detail visibility.
  • Improvements

    • Simplified component props by removing unnecessary type properties, focusing on courseName for localized content retrieval.
    • Enhanced the rendering logic to display subtitles where available, improving content presentation.

These updates streamline user experience and improve content accessibility across the platform.

@YulikK YulikK self-assigned this Dec 4, 2024
@YulikK YulikK added the bug Something isn't working label Dec 4, 2024
@github-actions github-actions bot changed the title fix: 614 - pre school subtitle 614-fix: Pre school subtitle Dec 4, 2024
@ansivgit
Copy link
Collaborator

ansivgit commented Dec 4, 2024

I think we changed it on purpose (in the other direction) - somewhere in other files. @SpaNb4 do you remember this discussion?

@SpaNb4
Copy link
Collaborator

SpaNb4 commented Dec 4, 2024

I think we changed it on purpose (in the other direction) - somewhere in other files. @SpaNb4 do you remember this discussion?

Yeah, you're right #576 (comment)

Copy link

github-actions bot commented Dec 5, 2024

Lighthouse Report:

  • Performance: 95 / 100
  • Accessibility: 99 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link

github-actions bot commented Dec 5, 2024

Lighthouse Report:

  • Performance: 98 / 100
  • Accessibility: 99 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@ansivgit ansivgit marked this pull request as ready for review December 5, 2024 15:42
Copy link
Contributor

coderabbitai bot commented Dec 5, 2024

πŸ“ Walkthrough
πŸ“ Walkthrough

Walkthrough

The pull request introduces several structural changes to course-related data, including the addition of a subTitle property to various course objects and the removal of the type prop from several components. New constants for localized introductory content in English and Russian are added, enhancing the manageability of course information. Additionally, modifications to component props streamline the rendering process, focusing on relevant properties while ensuring that the overall functionality remains intact.

Changes

File Path Change Summary
dev-data/about-course.data.tsx Added constants enIntro, ruIntro, preSchoolIntro; updated introLocalizedContent to use these constants. Defined functions for course details.
dev-data/courses.data.ts Added subTitle property to course objects, with specific values for the first course and null for others.
src/entities/course/types.ts Added `subTitle: string
src/shared/tests/constants.ts Added subTitle to mockedCourses with specific values.
src/shared/helpers/getActualData.test.ts Added subTitle to coursesMock, initialized to null.
src/views/javascript-preschool-ru.tsx Removed type prop from JavaScriptPreSchoolRu component.
src/views/javascript-ru.tsx Removed type prop from AboutCourse component invocation.
src/widgets/about-course/ui/about-course/about-course.test.tsx Added subTitle to mockedReactCourse; removed type prop from AboutCourse in test case.
src/widgets/about-course/ui/about-course/about-course.tsx Removed type prop; updated logic to use courseName for localized content retrieval.
src/widgets/hero-course/ui/hero-course.test.tsx Added subTitle to mockedCourse.
src/widgets/hero-course/ui/hero-course.tsx Removed type prop; added subTitle to destructured course object.
src/widgets/training-program/ui/training-program.test.tsx Added subTitle to mockedCourseAngular and mockedCourseAws, initialized to null.

Assessment against linked issues

Objective Addressed Explanation
Fix subtitle on Pre school Hero section (#614) βœ…

Possibly related PRs

Suggested reviewers

  • andron13
  • dzmitry-varabei
  • natanchik
  • Quiddlee
  • SpaNb4

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❀️ Share
πŸͺ§ Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (1)
dev-data/courses.data.ts (1)

27-27: Consider using a constant for the subtitle

Instead of hardcoding the subtitle value, consider adding it to the COURSE_TITLES constant to maintain consistency and make future updates easier.

-    subTitle: 'Pre-school RU',
+    subTitle: COURSE_TITLES.JS_PRESCHOOL_RU_SUBTITLE,
πŸ“œ Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 986fdf2 and 23c8b3b.

πŸ“’ Files selected for processing (13)
  • dev-data/about-course.data.tsx (1 hunks)
  • dev-data/courses.data.ts (9 hunks)
  • src/app/courses/javascript-preschool-ru/page.tsx (1 hunks)
  • src/entities/course/types.ts (1 hunks)
  • src/shared/__tests__/constants.ts (6 hunks)
  • src/shared/helpers/getActualData.test.ts (3 hunks)
  • src/views/javascript-preschool-ru.tsx (1 hunks)
  • src/views/javascript-ru.tsx (1 hunks)
  • src/widgets/about-course/ui/about-course/about-course.test.tsx (2 hunks)
  • src/widgets/about-course/ui/about-course/about-course.tsx (1 hunks)
  • src/widgets/hero-course/ui/hero-course.test.tsx (1 hunks)
  • src/widgets/hero-course/ui/hero-course.tsx (2 hunks)
  • src/widgets/training-program/ui/training-program.test.tsx (2 hunks)
πŸ”‡ Additional comments (15)
src/entities/course/types.ts (1)

28-28: LGTM! Verify subtitle values in course data.

The addition of subTitle property is a good approach. Being nullable allows flexibility for courses without subtitles.

βœ… Verification successful

LGTM! Subtitle implementation is consistent across the codebase

The subTitle property is properly used in course data files and components. Found evidence of:

  • Correct type definition in src/entities/course/types.ts
  • Consistent usage in course data (dev-data/courses.data.ts)
  • Proper UI implementation in components (hero-course, communication, etc.)
  • Appropriate handling of null values
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify subtitle values in course data files
rg -l "subTitle.*pre-school" 

Length of output: 30


Script:

#!/bin/bash
# Search for any usage of subTitle in data files
rg -l "subTitle"

# Search for course data files
fd "course.*\.(json|ts|js|tsx|jsx)"

# Check for any existing subtitle or sub-title patterns in course data
rg -i "sub.?title"

Length of output: 15704

src/views/javascript-preschool-ru.tsx (2)

19-19: LGTM! Props simplified.

Removal of the type prop simplifies the component interface, aligning with the new subTitle property in Course type.


22-22: LGTM! Props correctly updated.

HeroCourse and AboutCourse components now receive the correct props without the redundant type prop.

Also applies to: 24-24

src/app/courses/javascript-preschool-ru/page.tsx (1)

16-16: LGTM! Component usage updated.

Component props are correctly updated to match the new interface.

src/widgets/about-course/ui/about-course/about-course.tsx (1)

18-18: LGTM: Simplified prop interface and content access

The removal of the type prop in favor of using courseName directly for content access is a clean improvement.

Let's verify all usages are updated:

Also applies to: 24-26, 30-30

βœ… Verification successful

All usages of AboutCourse component have been updated correctly

All component invocations consistently use only course and courseName props, with no instances of the removed type prop remaining. The type references found are just TypeScript type definitions, not prop usage.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any remaining usages of type prop with AboutCourse
rg "type.*AboutCourse" 

Length of output: 458


Script:

#!/bin/bash
# Search for AboutCourse component usage to verify type prop removal
rg -A 2 "<AboutCourse" 

# Check AboutCourseProps interface usage
ast-grep --pattern 'type AboutCourseProps = {
  $$$
}'

Length of output: 4266

src/views/javascript-ru.tsx (1)

28-28: LGTM: Consistent prop usage

The removal of the type prop aligns with the AboutCourse component changes.

src/widgets/hero-course/ui/hero-course.tsx (2)

21-32: LGTM: Clean prop interface update

Removing the type prop and adding subTitle to the destructured properties streamlines the component interface.


42-42: Verify subtitle display for pre-school course

The implementation looks good, but let's verify it fixes issue #614.

βœ… Verification successful

Subtitle implementation verified successfully

The implementation correctly displays the subtitle for pre-school courses. The component properly handles the subTitle prop from the course data, and the test data confirms the presence of "Pre-school RU" subtitle in both test constants and course data.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the pre-school course has the correct subtitle in the data
rg -A 1 "subTitle.*Pre-school RU" 

Length of output: 304


Script:

#!/bin/bash
# Let's check the implementation of the hero component and how it handles the subtitle
ast-grep --pattern 'const HeroCourse = ({ subTitle, $$ }) => {
  $$$
}'

Length of output: 73


Script:

#!/bin/bash
# Let's check the hero component implementation with a more flexible pattern
ast-grep --pattern 'const HeroCourse'
# Also check the file content directly
cat src/widgets/hero-course/ui/hero-course.tsx

Length of output: 4858

src/widgets/about-course/ui/about-course/about-course.test.tsx (1)

21-21: LGTM! Changes align with PR objectives

The removal of the type prop and addition of subTitle property are consistent with the goal of fixing the pre-school subtitle issue.

Also applies to: 80-80

src/shared/helpers/getActualData.test.ts (1)

23-23: LGTM! Type changes properly reflected in test data

The addition of the subTitle property to all course mock objects maintains consistency with the updated Course type.

Also applies to: 54-54, 86-86

src/shared/__tests__/constants.ts (1)

28-28: LGTM! Test data structure updated correctly

The addition of the subTitle property across all mock courses maintains consistency with the production data structure.

Also applies to: 48-48, 68-68, 88-88, 108-108, 128-128

src/widgets/training-program/ui/training-program.test.tsx (1)

14-14: LGTM! Test objects updated correctly

The addition of the subTitle property to mock course objects maintains consistency with the production data structure.

Also applies to: 41-41

dev-data/courses.data.ts (1)

27-27: LGTM! Production data structure updated correctly

The addition of the subTitle property across all courses is consistent.

Also applies to: 47-47, 67-67, 87-87, 106-106, 125-125, 144-144, 164-164, 183-183

dev-data/about-course.data.tsx (2)

17-32: LGTM: Well-structured localization constants

The new intro constants provide a clean separation of localized content with consistent structure.


35-42: Verify course title mappings

The mappings look correct, but let's verify all course titles are properly mapped.

βœ… Verification successful

Let me verify the COURSE_TITLES enum values to ensure we have complete coverage.


Course title mappings are correctly implemented

All course titles defined in COURSE_TITLES (JS_PRESCHOOL_RU, JS_EN, JS_RU, REACT, ANGULAR, NODE, AWS_FUNDAMENTALS, AWS_CLOUD_DEVELOPER, AWS_DEVOPS) are properly mapped in the introLocalizedContent object with appropriate intro content (preSchoolIntro, enIntro, ruIntro).

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all COURSE_TITLES are mapped in introLocalizedContent

# Find all COURSE_TITLES enum values
rg "COURSE_TITLES\." --type ts | grep -v "introLocalizedContent" > titles.txt

# Compare with mappings in introLocalizedContent
rg "\[COURSE_TITLES\." --type ts | grep "introLocalizedContent" > mappings.txt

# Show any titles that might be missing from mappings
diff titles.txt mappings.txt || true

rm titles.txt mappings.txt

Length of output: 7606


Script:

#!/bin/bash
# Find the COURSE_TITLES enum definition
ast-grep --pattern 'enum COURSE_TITLES {
  $$$
}'

Length of output: 51


Script:

#!/bin/bash
# Let's try to find the COURSE_TITLES type definition using ripgrep
rg "type COURSE_TITLES|enum COURSE_TITLES|const COURSE_TITLES" -A 15

Length of output: 1144

Copy link

github-actions bot commented Dec 5, 2024

Lighthouse Report:

  • Performance: 83 / 100
  • Accessibility: 99 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
src/widgets/hero-course/ui/hero-course.test.tsx (1)

14-14: Update test data to match actual use case

Consider using 'Pre-school RU' as the test subtitle to match the actual use case from the PR objectives.

-  subTitle: 'Test Subtitle',
+  subTitle: 'Pre-school RU',
πŸ“œ Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 28e0252 and 643cd59.

πŸ“’ Files selected for processing (1)
  • src/widgets/hero-course/ui/hero-course.test.tsx (2 hunks)
πŸ”‡ Additional comments (2)
src/widgets/hero-course/ui/hero-course.test.tsx (2)

32-57: Well-structured test organization

Good job organizing tests into logical groups, improving readability and maintainability.


60-74: Comprehensive subtitle test cases implemented

The test cases effectively verify subtitle rendering behavior for both positive and negative scenarios.

Copy link

github-actions bot commented Dec 6, 2024

Lighthouse Report:

  • Performance: 97 / 100
  • Accessibility: 99 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)
src/widgets/hero-course/ui/hero-course.test.tsx (2)

14-29: Consider using realistic test data

The mock subtitle "Test Subtitle" could be replaced with "Pre-school RU" to better align with the actual use case from the PR objectives.

-  subTitle: 'Test Subtitle',
+  subTitle: 'Pre-school RU',

Line range hint 30-50: Reduce mock data duplication

Consider creating a base mock object and extending it for specific test cases to improve maintainability.

+const baseMockedCourse: Omit<Course, 'subTitle'> = {
+  id: '6',
+  title: COURSE_TITLES.NODE,
+  // ... other shared properties
+};

-const mockedCourse: Course = {
+const mockedCourse: Course = { 
+  ...baseMockedCourse,
   subTitle: 'Pre-school RU',
-  // ... duplicated properties
};

-const mockedCourseNoSubtitle: Course = {
+const mockedCourseNoSubtitle: Course = {
+  ...baseMockedCourse,
   subTitle: null,
-  // ... duplicated properties
};
πŸ“œ Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 643cd59 and b197aa7.

πŸ“’ Files selected for processing (1)
  • src/widgets/hero-course/ui/hero-course.test.tsx (2 hunks)
πŸ”‡ Additional comments (2)
src/widgets/hero-course/ui/hero-course.test.tsx (2)

81-87: LGTM!

Good use of queryByText for checking non-existence of elements.


51-78: Verify test isolation

Based on previous comments, there might be a test order dependency. Each test should be independent and not rely on the order of execution.

βœ… Verification successful

After analyzing the test structure in the codebase, I can see that the tests in hero-course.test.tsx follow a proper isolation pattern. The beforeEach block only sets up the component render, and each test case independently verifies different aspects of the component without relying on state from other tests. The assertions are also independent and don't depend on the order of execution.

No test isolation issues found

The tests are properly isolated:

  • Each test has its own assertions
  • No shared mutable state between tests
  • beforeEach only handles component setup
  • Tests verify independent aspects of the component
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for potential test dependencies
ast-grep --pattern 'beforeEach($$$)' 
rg -A 5 'beforeEach|afterEach'

Length of output: 36685

Copy link

github-actions bot commented Dec 6, 2024

Lighthouse Report:

  • Performance: 99 / 100
  • Accessibility: 99 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@YulikK YulikK merged commit 705c29e into main Dec 6, 2024
3 checks passed
@YulikK YulikK deleted the fix/614-pre-school-subtitle branch December 6, 2024 11:35
@coderabbitai coderabbitai bot mentioned this pull request Dec 14, 2024
8 tasks
@coderabbitai coderabbitai bot mentioned this pull request Jan 3, 2025
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working preview
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Fix Pre school subtitle on Pre school Hero section
4 participants