532-refactor: FSD: Widget Course main

src/app/routes.tsx

@@ -1,6 +1,6 @@
 import { RouteObject } from 'react-router-dom';
 import { ROUTES } from '@/app/const';
-import { courseLoader } from '@/widgets/course-main/courseLoader.ts';
+import { loader } from '@/widgets/course-main';
 
 const coursesRoute: RouteObject = {
   path: ROUTES.COURSES,
@@ -15,7 +15,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.NODE_JS,
-      loader: courseLoader,
+      loader,
       async lazy() {
         const { Nodejs } = await import('@/pages/nodejs.tsx');
 
@@ -24,7 +24,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.JS,
-      loader: courseLoader,
+      loader,
       async lazy() {
         const { JavaScriptEn } = await import('@/pages/javascript-en.tsx');
 
@@ -33,7 +33,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.JS_RU,
-      loader: courseLoader,
+      loader,
       async lazy() {
         const { JavaScriptRu } = await import('@/pages/javascript-ru.tsx');
 
@@ -42,7 +42,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.JS_PRESCHOOL_RU,
-      loader: courseLoader,
+      loader,
       async lazy() {
         const { JavaScriptPreSchoolRu } = await import('@/pages/javascript-preschool-ru.tsx');
 
@@ -51,7 +51,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.ANGULAR,
-      loader: courseLoader,
+      loader,
       lazy: async () => {
         const { Angular } = await import('@/pages/angular.tsx');
 
@@ -60,7 +60,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.AWS_DEVELOPER,
-      loader: courseLoader,
+      loader,
       lazy: async () => {
         const { AwsDeveloper } = await import('@/pages/aws-developer.tsx');
 
@@ -69,7 +69,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.AWS_FUNDAMENTALS,
-      loader: courseLoader,
+      loader,
       lazy: async () => {
         const { AwsFundamentals } = await import('@/pages/aws-fundamentals.tsx');
 
@@ -78,7 +78,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.REACT,
-      loader: courseLoader,
+      loader,
       lazy: async () => {
         const { React } = await import('@/pages/react.tsx');
 
@@ -87,7 +87,7 @@ const coursesRoute: RouteObject = {
     },
     {
       path: ROUTES.AWS_DEVOPS,
-      loader: courseLoader,
+      loader,
       lazy: async () => {
         const { AwsDevOps } = await import('@/pages/aws-devops');
 

src/widgets/course-main/courseLoader.ts → src/widgets/course-main/api/loader.ts

@@ -1,5 +1,5 @@
 import { courses } from 'data';
 
-export const courseLoader = async () => {
+export const loader = async () => {
   return courses;
 };

src/widgets/course-main/index.ts

@@ -1 +1,3 @@
-export { CourseMain } from './course-main';
+export type { CourseMainProps } from './ui/course-main';
+export { CourseMain } from './ui/course-main';
+export { loader } from './api/loader';

src/widgets/course-main/course-main.tsx → src/widgets/course-main/ui/course-main.tsx

@@ -1,5 +1,6 @@
+import classNames from 'classnames';
 import { useLoaderData } from 'react-router-dom';
-import { getCourseStatus } from './utils/get-course-status';
+import { getCourseStatus } from '../helpers/get-course-status';
 import { COURSE_STALE_AFTER_DAYS } from '@/app/const';
 import type { Course } from '@/entities/course';
 import { getCourseDate } from '@/shared/helpers/getCourseDate';
@@ -14,11 +15,13 @@ import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import styles from './course-main.module.scss';
 
-interface CourseMainProps {
+const cx = classNames.bind(styles);
+
+export type CourseMainProps = {
   courseName: string;
   lang?: 'ru' | 'en';
   type?: 'Pre-school RU';
-}
+};
 
 const localizedContent = {
   en: { linkLabel: 'Enroll' },
@@ -41,10 +44,10 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
   const date = getCourseDate(startDate, COURSE_STALE_AFTER_DAYS);
 
   return (
-    <main className={`container ${styles.container}`}>
-      <div className={`content ${styles.content}`}>
-        <Image className={styles.icon} src={secondaryIcon} alt={title} lazy={false} />
-        <div className={styles.info}>
+    <main className={cx('container')}>
+      <div className={cx('content')}>
+        <Image className={cx('icon')} src={secondaryIcon} alt={title} lazy={false} />
+        <div className={cx('info')}>
           <SectionLabel>{status}</SectionLabel>
           <WidgetTitle>{`${altTitle || title} Course`}</WidgetTitle>
           {type && (