532-refactor: FSD: Widget Course main #543
Conversation
SkarabeyDM
added this to the 🛸 Migration to Feature Sliced Design Architecture milestone
SkarabeyDM
changed the title
CourseMain to FSD and cxCourseMain to FSD and cx
SkarabeyDM
changed the title
CourseMain to FSD and cx
|
Lighthouse Report:
|
SkarabeyDM
changed the title
|
Lighthouse Report:
|
Co-authored-by: Kristina <[email protected]>
|
Lighthouse Report:
|
|
Lighthouse Report:
|
📝 WalkthroughWalkthroughThe pull request introduces several changes, including the addition of a new constant Changes
Assessment against linked issues
Possibly related issues
Possibly related PRs
Suggested reviewers
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (8)
dev-data/hero-course.data.ts (1)
1-4: LGTM. Consider future scalability.The constant is well-structured and uses
as constappropriately. For future scalability, consider using a separate localization library if the number of strings grows significantly.src/widgets/hero-course/ui/hero-course.module.scss (1)
23-24: Good responsive design adjustment.Consider using CSS variables for consistent padding values across breakpoints.
src/shared/ui/main-title/main-title.tsx (2)
11-19: LGTM with a minor suggestion.The
mainTitleVariantsconstant now supports size variants, enhancing flexibility. Consider adding alargesize for future-proofing.const mainTitleVariants = cva(cx('main-title'), { variants: { size: { small: cx('small'), medium: '', + large: cx('large'), }, }, defaultVariants: { size: 'medium' }, });
21-29: Looks good. Consider type refinement.The
MainTitlecomponent now correctly uses thesizeprop. For better type safety, consider explicitly defining thesizeprop type.-export const MainTitle = ({ children, className, size }: MainTitleProps) => { +export const MainTitle = ({ children, className, size }: MainTitleProps & { size?: 'small' | 'medium' }) => {dev-data/index.ts (1)
24-24: LGTM. Consider alphabetical ordering.The new export fits well. For consistency, consider placing it alphabetically.
src/widgets/hero-course/ui/hero-course.test.tsx (3)
17-40: Test data setup is comprehensive.The mock course objects cover different scenarios effectively. Consider extracting the common properties of the mock courses into a separate object to reduce duplication.
const baseMockedCourse = { language: ['English'], type: 'Mentoring Program', mode: 'online', secondaryIcon: MOCKED_IMAGE_PATH, }; const mockedCourse = { ...baseMockedCourse, title: 'Node.js', enroll: 'https://wearecommunity.io/events/nodejs-rs-2024q1', startDate: dayJS().subtract(2, 'month').format('D MMM, YYYY'), }; // Use baseMockedCourse for other mocked courses as well
42-72: Component rendering tests are well-structured.The tests cover the main aspects of the component. Consider adding a test for the course type rendering:
it('renders the course type correctly', async () => { const typeElement = await screen.findByText('Mentoring Program'); expect(typeElement).toBeVisible(); });
74-86: Course label tests are appropriate.The tests cover "available" and "upcoming" states. Add a test for the "planned" state:
it('renders the section with correct label "PLANNED"', () => { renderWithRouter(<HeroCourse courseName="Node.js" />); expect(screen.getByText('planned')).toBeVisible(); });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (22)
- dev-data/hero-course.data.ts (1 hunks)
- dev-data/index.ts (1 hunks)
- src/app/routes.tsx (10 hunks)
- src/entities/course/api/loader.ts (1 hunks)
- src/entities/course/index.ts (1 hunks)
- src/pages/angular.tsx (2 hunks)
- src/pages/aws-developer.tsx (2 hunks)
- src/pages/aws-devops.tsx (2 hunks)
- src/pages/aws-fundamentals.tsx (2 hunks)
- src/pages/javascript-en.tsx (2 hunks)
- src/pages/javascript-preschool-ru.tsx (2 hunks)
- src/pages/javascript-ru.tsx (2 hunks)
- src/pages/nodejs.tsx (2 hunks)
- src/pages/react.tsx (2 hunks)
- src/shared/ui/main-title/main-title.module.scss (1 hunks)
- src/shared/ui/main-title/main-title.tsx (1 hunks)
- src/widgets/course-main/course-main.test.tsx (0 hunks)
- src/widgets/course-main/index.ts (0 hunks)
- src/widgets/hero-course/index.ts (1 hunks)
- src/widgets/hero-course/ui/hero-course.module.scss (1 hunks)
- src/widgets/hero-course/ui/hero-course.test.tsx (1 hunks)
- src/widgets/hero-course/ui/hero-course.tsx (3 hunks)
💤 Files with no reviewable changes (2)
- src/widgets/course-main/course-main.test.tsx
- src/widgets/course-main/index.ts
✅ Files skipped from review due to trivial changes (1)
- src/widgets/hero-course/index.ts
🧰 Additional context used
📓 Learnings (1)
src/pages/react.tsx (1)
Learnt from: Quiddlee PR: rolling-scopes/site#572 File: src/pages/home.tsx:25-25 Timestamp: 2024-09-30T12:07:39.137Z Learning: The `Courses` component in `src/widgets/courses/other-courses.test.tsx`, `src/pages/courses.tsx`, and `dev-data/courses-path.data.ts` is a different component from the one replaced in `src/pages/home.tsx`.
🔇 Additional comments (29)
src/entities/course/api/loader.ts (1)
3-5: Approved: Function renamed as per refactoring objectives.The change from
courseLoadertoloaderis in line with the PR goals.Let's check for any lingering references to the old name:
✅ Verification successful
Action Required: Update search command to include 'tsx' files
The previous search command did not recognize
tsxfiles. Let's update the script to include both.tsand.tsxfile types correctly:
Verified: No remaining references to 'courseLoader' found.
The function has been successfully renamed without impacting other parts of the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining references to 'courseLoader' rg 'courseLoader' --type ts --type tsxLength of output: 66
Script:
#!/bin/bash # Search for any remaining references to 'courseLoader' in .ts and .tsx files rg 'courseLoader' --type-add 'tsx:*.tsx' --type ts --type tsxLength of output: 61
src/entities/course/index.ts (1)
4-4: Loader export added correctly.The new export statement for the
loaderfunction is in line with the PR objectives.✅ Verification successful
Loader implementation verified successfully.
The loader function is correctly implemented and aligns with the project requirements.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify the loader implementation ast-grep --lang typescript --pattern 'export const loader = $_' src/entities/course/api/loader.tsLength of output: 264
src/widgets/hero-course/ui/hero-course.module.scss (1)
6-12: Good use of flexbox and gap.The layout implementation is clean and follows modern CSS practices.
src/shared/ui/main-title/main-title.module.scss (2)
9-16: Good use of SCSS nesting and variables.The
.smallclass is well-structured and uses appropriate properties for a smaller title variant. The use of SCSS variables ensures consistency across the stylesheet.
17-22: Responsive design implemented correctly.The media query for tablets is well-placed and makes appropriate adjustments for smaller screens. This ensures good readability across different devices.
src/pages/react.tsx (3)
5-5: Import updated to reflect component rename.The import statement has been correctly updated to use
HeroCourseinstead ofCourseMain.
15-15: Component usage updated consistently.The
HeroCoursecomponent is now used in place ofCourseMain, maintaining consistency with the import change.
Line range hint
1-24: Overall structure remains intact.The rest of the file, including other component imports and usage, remains unchanged. This is consistent with the focused nature of the refactoring described in the PR objectives.
src/pages/aws-devops.tsx (2)
5-5: Import statement updated correctly.The
HeroCoursecomponent is now imported from the correct location.
16-16: Component usage updated correctly.The
HeroCoursecomponent is now used instead ofCourseMain, maintaining thecourseNameprop.Let's verify if this change is consistent across the project:
src/pages/nodejs.tsx (2)
6-6: Import statement updated correctly.The import statement has been updated to reflect the new component name and path.
17-17: Component usage updated correctly.The
CourseMaincomponent has been replaced withHeroCourse, maintaining the same prop.Verify the consistency of the changes:
✅ Verification successful
Please execute the following scripts to verify references and usage:
Component usage correctly updated.
All references to
CourseMainhave been removed, andHeroCourseis used consistently across the codebase.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for any remaining references to CourseMain rg --type typescript 'CourseMain' # Check for correct usage of HeroCourse rg --type typescript 'HeroCourse'Length of output: 137
Script:
#!/bin/bash # Check for any remaining references to CourseMain in .ts and .tsx files rg 'CourseMain' --glob '*.ts' --glob '*.tsx' # Check for correct usage of HeroCourse in .ts and .tsx files rg 'HeroCourse' --glob '*.ts' --glob '*.tsx'Length of output: 2288
src/pages/aws-developer.tsx (2)
5-5: Import statement updated correctly.The
HeroCoursecomponent is now imported from the correct path.
17-17: Component usage updated consistently.
HeroCoursereplacesCourseMainwith the same prop.src/pages/aws-fundamentals.tsx (2)
5-5: Import statement updated correctly.The import has been changed from
CourseMaintoHeroCourse, aligning with the refactoring objectives.
16-16: Component usage updated correctly.The
CourseMaincomponent has been replaced withHeroCourseas intended. ThecourseNameprop is still being passed correctly.Verify that the
HeroCoursecomponent's interface matches the previousCourseMaincomponent:✅ Verification successful
Unable to verify prop types of
CourseMainandHeroCoursebased on current script results.
Unable to verify prop types of
CourseMainandHeroCoursebased on current script results.
Unable to verify prop types of
CourseMainandHeroCoursebased on current script results.
Component usage updated correctly.
The
CourseMaincomponent has been replaced withHeroCourse. ThecourseNameprop is still being passed correctly, and the newHeroCoursecomponent includes additional props (lang,type) as expected.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Compare the prop types of CourseMain and HeroCourse components # Search for CourseMain component definition echo "CourseMain component:" ast-grep --lang typescript --pattern 'type CourseMainProps = { $$$1 }' || ast-grep --lang typescript --pattern 'interface CourseMainProps { $$$1 }' # Search for HeroCourse component definition echo "HeroCourse component:" ast-grep --lang typescript --pattern 'type HeroCourseProps = { $$$1 }' || ast-grep --lang typescript --pattern 'interface HeroCourseProps { $$$1 }'Length of output: 251
Script:
#!/bin/bash # Description: Extract prop definitions from CourseMain and HeroCourse components # Find prop definitions in CourseMain echo "CourseMain props:" ast-grep --lang typescript --pattern 'const CourseMain = ($_props) =>' || ast-grep --lang typescript --pattern 'function CourseMain($_props)' # Find prop definitions in HeroCourse echo "HeroCourse props:" ast-grep --lang typescript --pattern 'const HeroCourse = ($_props) =>' || ast-grep --lang typescript --pattern 'function HeroCourse($_props)'Length of output: 925
Script:
#!/bin/bash # Description: Extract prop type definitions using ripgrep # Search for CourseMainProps type or interface echo "CourseMainProps definition:" rg -A 5 "type\s+CourseMainProps\s+=\s+{|interface\s+CourseMainProps\s+{" src/ # Search for HeroCourseProps type or interface echo "HeroCourseProps definition:" rg -A 5 "type\s+HeroCourseProps\s+=\s+{|interface\s+HeroCourseProps\s+{" src/Length of output: 639
Script:
#!/bin/bash # Description: Extract prop type definitions using ripgrep with corrected regex # Search for CourseMainProps type or interface echo "CourseMainProps definition:" rg -A 5 "(type\s+CourseMainProps\s+=\s+\{|interface\s+CourseMainProps\s+\{)" src/ # Search for HeroCourseProps type or interface echo "HeroCourseProps definition:" rg -A 5 "(type\s+HeroCourseProps\s+=\s+\{|interface\s+HeroCourseProps\s+\{)" src/Length of output: 654
src/pages/javascript-en.tsx (2)
6-6: Import statement updated correctly.The import statement has been updated to reflect the new component name and path.
18-18: Component usage updated correctly.The
HeroCoursecomponent is now used with thecourseNameprop. This change aligns with the refactoring objectives.src/pages/javascript-preschool-ru.tsx (2)
6-6: Import statement updated.The
HeroCoursecomponent is now imported from@/widgets/hero-course.
20-20:CourseMainreplaced withHeroCourse.The
CourseMaincomponent has been replaced withHeroCourse, maintaining the same props.✅ Verification successful
HeroCourse Component Replacement Verified
The replacement of
CourseMainwithHeroCoursehas been successfully verified across the codebase with consistent usage observed.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify the usage of HeroCourse component across the codebase rg --type typescript --type tsx "HeroCourse" -g '!src/pages/javascript-preschool-ru.tsx'Length of output: 123
Script:
#!/bin/bash # Verify the usage of HeroCourse component across the codebase rg --type tsx "HeroCourse" -g '!src/pages/javascript-preschool-ru.tsx'Length of output: 98
Script:
#!/bin/bash # Verify the usage of HeroCourse component across the codebase rg "HeroCourse" --glob "*.tsx" --glob "!src/pages/javascript-preschool-ru.tsx"Length of output: 1999
src/pages/angular.tsx (2)
6-6: Import statement added for HeroCourse.The import is correctly formatted and aligns with the component usage.
19-19: CourseMain replaced with HeroCourse.The component replacement is correct and maintains the existing prop usage.
Verify the component usage:
✅ Verification successful
Component Replacement Verified
<CourseMain>has been successfully replaced with<HeroCourse>, and no remaining instances of<CourseMain>were found.<HeroCourse>is correctly used throughout the codebase.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for any remaining usage of CourseMain rg --type typescript --type tsx 'CourseMain' # Verify HeroCourse usage rg --type typescript --type tsx 'HeroCourse'Length of output: 159
Script:
#!/bin/bash # Check for any remaining usage of CourseMain rg --type ts --type tsx 'CourseMain' # Verify HeroCourse usage rg --type ts --type tsx 'HeroCourse'Length of output: 129
Script:
#!/bin/bash # Check for any remaining usage of CourseMain in .ts and .tsx files rg 'CourseMain' --glob '*.ts' --glob '*.tsx' # Verify HeroCourse usage in .ts and .tsx files rg 'HeroCourse' --glob '*.ts' --glob '*.tsx'Length of output: 2288
src/pages/javascript-ru.tsx (2)
6-6: Import change approved.The
HeroCoursecomponent is correctly imported from the new location.
20-20: Component replacement approved. Verify prop types.The
CourseMaincomponent has been correctly replaced withHeroCourse. The same props are passed, which is good.Ensure that the
HeroCoursecomponent accepts the same prop types asCourseMain:src/widgets/hero-course/ui/hero-course.test.tsx (1)
1-15: Imports and mocks are well-structured.The necessary dependencies are imported, and the mocks for
use-course-by-titleandreact-router-domare correctly set up.src/app/routes.tsx (3)
3-3: Updated import for loaderThe import has been changed from a specific
courseLoaderto a genericloader. This change aligns with the PR objectives.
18-18: Consistent use of generic loaderThe
loaderis now used consistently across all course routes. This change improves code consistency and maintainability.Also applies to: 27-27, 36-36, 45-45, 54-54, 63-63, 72-72, 81-81, 90-90
3-3: Verify loader functionalityEnsure the new generic
loadermaintains the same functionality as the previouscourseLoaderfor all affected routes.Also applies to: 18-18, 27-27, 36-36, 45-45, 54-54, 63-63, 72-72, 81-81, 90-90
✅ Verification successful
Loader functionality verified successfully
The new generic
loaderis correctly implemented and exported in the codebase, maintaining the intended functionality.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of the new loader function # Test: Check the implementation of the new loader ast-grep --lang typescript --pattern 'export const loader = $_' # Test: Verify that the loader is exported correctly rg --type typescript 'export.*loader' src/entities/course/index.tsLength of output: 334
Script:
#!/bin/bash # Description: Verify the implementation of the new loader function with corrected ripgrep usage # Test: Check the implementation of the new loader ast-grep --lang typescript --pattern 'export const loader = $_' # Test: Verify that the loader is exported correctly using file extensions rg --ext ts --ext tsx 'export.*loader' src/entities/course/index.tsLength of output: 730
Script:
#!/bin/bash # Description: Verify the implementation of the new loader function with corrected ripgrep usage # Test: Check the implementation of the new loader ast-grep --lang typescript --pattern 'export const loader = $_' # Test: Verify that the loader is exported correctly using file extensions rg -g '*.ts' -g '*.tsx' 'export.*loader' src/entities/course/index.tsLength of output: 341
src/widgets/hero-course/ui/hero-course.tsx (1)
Line range hint
27-62: Component refactoring aligns with objectivesThe renaming and restructuring of the component to
HeroCourseis consistent with the refactoring goals. The use ofcxfor class name binding enhances styling management.
|
Lighthouse Report:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/widgets/hero-course/ui/hero-course.tsx (1)
14-14: Consider using an absolute import path.The import for
heroCourseLocalizedmight benefit from using an absolute path for consistency.- import { heroCourseLocalized } from 'data'; + import { heroCourseLocalized } from '@/data';src/widgets/hero-course/ui/hero-course.module.scss (1)
13-16: Review necessity of bothwidthandmin-widthSince
widthandmin-widthare set to fixed pixel values, setting both may be unnecessary. Consider retaining onlywidthfor clarity.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- src/widgets/hero-course/ui/hero-course.module.scss (1 hunks)
- src/widgets/hero-course/ui/hero-course.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (5)
src/widgets/hero-course/ui/hero-course.tsx (5)
16-18: LGTM!The style import update and classNames initialization improve styling management.
26-26: LGTM!The component renaming and props type update align with the refactoring objectives.
42-45: LGTM!The structural changes improve semantics and styling consistency.
47-47: LGTM!The MainTitle usage with size prop improves component flexibility.
55-57: LGTM!The localized link label and fixed HTML structure improve the component.
|
Lighthouse Report:
|
|
Lighthouse Report:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/widgets/hero-course/helpers/has-day.ts (1)
1-2: Consider adding input validation.The function assumes a specific date format. Add checks for empty strings or inputs without commas.
export function hasDayInDate(date: string) { + if (!date || !date.includes(',')) return false; const dateWithoutDay = date.split(',')[0];src/widgets/hero-course/helpers/has-day.test.ts (1)
9-16: Test suite is well-structured and covers all scenarios.Minor suggestion: Consider making the test description more specific, e.g., "should return true for dates with day and false for dates without day or empty strings".
src/widgets/hero-course/helpers/get-course-status.ts (2)
3-3: Good use of constants for configurability.Importing constants improves maintainability. Consider grouping related imports.
import { COURSE_STALE_AFTER_DAYS, COURSE_UPCOMING_PERIOD_MONTHS } from '@/app/const'; import type { CourseStatus } from '@/entities/course'; -import { courseStatus } from 'data'; +import { courseStatus } from '@/data';Also applies to: 5-5
21-21: Improved status assignment usingcourseStatusobject.Good use of
courseStatusfor consistency. Consider simplifying the function:- let label: CourseStatus = courseStatus.planned; - if (isAvailable) { return courseStatus.available; } @@ -26,7 +24,5 @@ export function getCourseStatus(courseStartDate: string): CourseStatus { if (isUpcoming) { return courseStatus.upcoming; } - - return label; + return courseStatus.planned; }Also applies to: 24-24, 28-28
src/widgets/hero-course/ui/hero-course.tsx (1)
20-24: Consider making thetypeproperty more flexible.The
typeproperty is currently restricted to 'Pre-school RU'. If there's a possibility of more course types in the future, consider using a union type or making it a string.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (9)
- dev-data/hero-course.data.ts (1 hunks)
- dev-data/index.ts (1 hunks)
- src/app/const/index.ts (1 hunks)
- src/widgets/hero-course/helpers/get-course-status.test.ts (1 hunks)
- src/widgets/hero-course/helpers/get-course-status.ts (2 hunks)
- src/widgets/hero-course/helpers/has-day.test.ts (1 hunks)
- src/widgets/hero-course/helpers/has-day.ts (1 hunks)
- src/widgets/hero-course/ui/hero-course.test.tsx (3 hunks)
- src/widgets/hero-course/ui/hero-course.tsx (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- dev-data/hero-course.data.ts
- dev-data/index.ts
🧰 Additional context used
📓 Learnings (1)
src/widgets/hero-course/ui/hero-course.tsx (1)
Learnt from: Quiddlee PR: rolling-scopes/site#543 File: src/widgets/hero-course/ui/hero-course.tsx:14-14 Timestamp: 2024-10-16T18:09:58.731Z Learning: In this TypeScript project, `'data'` is a valid import path for module imports due to TypeScript path aliases configuration.
🔇 Additional comments (22)
src/widgets/hero-course/helpers/has-day.ts (2)
1-5: Function implementation looks good.The function is concise and focused on its task of checking for digits in the date string before the comma.
4-4: Efficient use of regular expression.The regex
/\d/efficiently checks for any digit in the string.src/widgets/hero-course/helpers/has-day.test.ts (2)
1-1: Import looks good.
3-7: Test data is well-structured and covers various scenarios.src/app/const/index.ts (1)
5-7: New constants added for course timing.The new constants COURSE_STALE_AFTER_DAYS and COURSE_UPCOMING_PERIOD_MONTHS are consistent with the existing structure.
Please confirm that 14 days and 3 months are the correct values for these constants.
src/widgets/hero-course/helpers/get-course-status.ts (2)
14-14: Improved configurability for 'Available' status.Using
COURSE_STALE_AFTER_DAYSenhances flexibility and readability.
17-18: Enhanced 'Upcoming' status logic.Good use of
COURSE_UPCOMING_PERIOD_MONTHSand ensuring mutual exclusivity with 'Available' status.src/widgets/hero-course/helpers/get-course-status.test.ts (4)
1-3: Imports look good.Necessary dependencies and types are correctly imported.
5-16: Well-structured test data.Test data covers various scenarios, including dates with and without day information.
18-26: Effective parameterized testing.The test case efficiently checks course status for various dates using
it.each.
28-36: Comprehensive test coverage.This test case complements the first by checking dates without day information.
src/widgets/hero-course/ui/hero-course.tsx (6)
1-1: Import changes look good.The new imports and path updates align with the refactoring objectives.
Also applies to: 3-3, 12-12, 14-14
16-18: Style setup is appropriate.The style import update and
classNamessetup are consistent with the component renaming.
26-26: Component renaming is consistent.The component renaming and props type update align with the PR objectives.
42-47: Component structure improvements are good.The changes to semantic HTML, class naming, and title component usage are appropriate.
49-51: Hero subtitle rendering is well-implemented.The conditional rendering and consistent class naming for the subtitle are good additions.
55-55: Localized link label is a good improvement.Using
heroCourseLocalizedfor the link label supports better internationalization.src/widgets/hero-course/ui/hero-course.test.tsx (5)
2-4: Import statements updated correctly.The changes align with the refactoring objectives.
23-37: Mocked course object expanded appropriately.The changes address the previous feedback about including all properties in the mocked object.
40-50: Additional mocked course objects improve test coverage.The mockedCourseAvailable and mockedCourseUpcoming objects enhance the test suite.
52-54: Test suite structure updated correctly.The changes reflect the component renaming from CourseMain to HeroCourse.
Line range hint
57-81: Test cases updated to match new component structure.The changes align with the new HeroCourse component. Consider adding tests for edge cases and error handling as suggested in the previous review.
What type of PR is this? (select all that apply)
Description
@/widgets/course-maincourse-main.test.tsx,course-main.tsx,course-main.module.scsstouifolderinterfacewithtypeJSXclasses declaration to usecx(example inentitiesfolder components)utilsfolder tohelperscourseLoadertoentities/course/api.courseLoader->loaderincluding file nameloaderin theentities/course/index.tsfileRelated Tickets & Documents
Screenshots, Recordings
Added/updated tests?
[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
HeroCoursecomponent, replacing the previousCourseMaincomponent across various course pages.Improvements
MainTitlecomponent with additional size variants for better styling options.Refactor
Chores
CourseMaincomponent directory and its associated tests, streamlining the codebase.HeroCoursecomponent and its functionalities.