347-refactor: Fsd widget events

src/shared/constants.ts

@@ -3,6 +3,7 @@ export const MOBILE_W = import.meta.env.VITE_MOBILE;
 export const DESKTOP_W = 1280;
 export const IS_DEV = import.meta.env.DEV;
 export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';
+export const RS_FOUNDATION_YEAR = '2013';
 
 export const PAGE_NAMES = {
   SCHOOL: 'school',

src/widgets/events/constants.ts

@@ -0,0 +1,14 @@
+import dayjs from 'dayjs';
+import { RS_FOUNDATION_YEAR } from '@/shared/constants';
+import { getActualData } from '@/shared/helpers/getActualData';
+import { events } from 'data';
+
+export const maxUpcomingEventsQuantity = 2;
+export const actualEvents = getActualData({
+  data: events,
+  staleAfter: 3,
+});
+
+export const nearestEvents = actualEvents.slice(0, maxUpcomingEventsQuantity);
+
+export const rsLifetime = dayjs().diff(RS_FOUNDATION_YEAR, 'year');

src/widgets/events/ui/events.module.scss

@@ -1,49 +1,41 @@
-.events {
-  &.content {
-    display: flex;
-    align-items: start;
-    justify-content: space-between;
-    text-align: left;
+.events-content {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
 
-    .info {
-      width: 460px;
-
-      @include media-laptop-medium {
-        width: 100%;
-      }
-    }
+  .info {
+    width: 460px;
 
-    .title,
-    .subtitle {
-      margin-top: 16px;
+    @include media-laptop-medium {
+      width: 100%;
     }
+  }
 
-    .cards {
-      display: flex;
-      gap: 16px;
-      align-items: center;
-      justify-content: space-between;
-
-      .event-img {
-        width: 500px;
+  .cards {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: space-between;
 
-        @include media-mobile-landscape {
-          width: 100%;
-        }
-      }
+    .event-img {
+      width: 500px;
 
-      @include media-laptop {
-        align-self: center;
+      @include media-mobile-landscape {
+        width: 100%;
       }
+    }
 
-      @include media-tablet {
-        flex-direction: column;
-      }
+    @include media-laptop {
+      align-self: center;
     }
 
-    @include media-laptop-medium {
+    @include media-tablet {
       flex-direction: column;
-      align-items: start;
     }
   }
+
+  @include media-laptop-medium {
+    flex-direction: column;
+    align-items: start;
+  }
 }

src/widgets/events/events.test.tsx → src/widgets/events/ui/events.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { Events } from './ui/events';
+import { Events } from './events';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 
 describe('Events', () => {

src/widgets/events/ui/events.tsx

@@ -1,36 +1,21 @@
-import cn from 'classnames';
 import classNames from 'classnames/bind';
 import dayjs from 'dayjs';
-import { Event, EventCard } from '@/entities/event';
+import { EventCard } from '@/entities/event';
 import photo3 from '@/shared/assets/photo-3.webp';
-import { getActualData } from '@/shared/helpers/getActualData';
 import { Image } from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 import { WidgetTitle } from '@/shared/ui/widget-title';
-import { events } from 'data';
+import { actualEvents, nearestEvents, rsLifetime } from '@/widgets/events/constants';
 
 import styles from './events.module.scss';
 
 const cx = classNames.bind(styles);
 
-const displayedCardsQuantity = 2;
-
-const actualEvents: Event[] = getActualData({
-  data: events,
-  staleAfter: 3,
-});
-
-const nearestEvents = actualEvents.slice(0, displayedCardsQuantity);
-
-const Stub = <Image src={photo3} alt="Community event" className={cx('event-img')} />;
-
 export const Events = () => {
-  const rsLifetime = dayjs().diff('2013', 'year');
-
   return (
-    <article id="events" className={cn(cx('events'), 'container')}>
-      <div className={cn(cx('events', 'content'), 'content')}>
+    <article id="events" className={cx('container')}>
+      <div className={cx('events-content', 'content')}>
         <section className={cx('info')}>
           <SectionLabel>events & meetups</SectionLabel>
           <WidgetTitle mods="asterisk">Meet us at events</WidgetTitle>
@@ -44,16 +29,21 @@ export const Events = () => {
             {' '}
             {rsLifetime}
             {' '}
-            years we have organized 150+ events for developers in different
-            cities and countries.
+            years we have organized 150+ events for developers in different cities and countries.
           </Paragraph>
         </section>
 
         <section className={cx('cards')}>
-          {!actualEvents.length && Stub}
-
-          {(nearestEvents as Event[]).map((i) => (
-            <EventCard key={i.title} {...i} date={dayjs(i.date).format('DD MMM YYYY')} />
+          {!actualEvents.length && (
+            <Image src={photo3} alt="Speaker presenting at an event" className={cx('event-img')} />
+          )}
+
+          {nearestEvents.map((event) => (
+            <EventCard
+              key={event.title}
+              {...event}
+              date={dayjs(event.date).format('DD MMM YYYY')}
+            />
           ))}
         </section>
       </div>