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

347-refactor: Fsd widget events #573

Merged
merged 20 commits into from
Oct 10, 2024
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1d0c436
refactor: 347 - move tests to ui folder
LinderJK Sep 28, 2024
6ab58d8
refactor: 347 - change info style width
LinderJK Sep 28, 2024
5e9d736
refactor: 347 - delete unused title and subtitle margin
LinderJK Sep 28, 2024
7177037
refactor: 347 - delete unused text align left
LinderJK Sep 28, 2024
e86240b
refactor: 347 - add constants.ts and move constants to it
LinderJK Sep 28, 2024
ba2a19d
refactor: 347 - remove stub constant and add image to JSX
LinderJK Sep 28, 2024
3be22b8
refactor: 347 - change image alt text
LinderJK Sep 28, 2024
1bf3e4d
fix: 347 - merge branch 'main'
LinderJK Sep 30, 2024
275c9f8
feat: 347 - add rs foundation constant
LinderJK Sep 30, 2024
06c522a
refactor: 347 - change imports
LinderJK Sep 30, 2024
480aa29
refactor: 347 - change events info style width
LinderJK Sep 30, 2024
42fb720
refactor: 347 - change constant name and import new constant
LinderJK Sep 30, 2024
499c767
refactor: 347 - change className
LinderJK Sep 30, 2024
1b949cd
refactor: 347 - change import and apply stylelint
LinderJK Sep 30, 2024
d1a253d
refactor: 347 - return old events className
LinderJK Sep 30, 2024
942f08c
refactor: corrected typo on alt image
LinderJK Oct 1, 2024
9989e26
refactor: 347 - rename events constant
LinderJK Oct 2, 2024
80a7314
fix: 347 - merge branch 'fsd widget events'
LinderJK Oct 2, 2024
8ac1bfd
refactor: 347 - change classnames and delete unused cn import
LinderJK Oct 2, 2024
6f1ed2c
refactor: 347 - delete class content and apply stylelint
LinderJK Oct 2, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/shared/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 14 additions & 0 deletions src/widgets/events/constants.ts
Original file line number Diff line number Diff line change
@@ -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');
6 changes: 0 additions & 6 deletions src/widgets/events/ui/events.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
display: flex;
align-items: start;
justify-content: space-between;
text-align: left;

.info {
width: 460px;
Expand All @@ -13,11 +12,6 @@
}
}

.title,
.subtitle {
margin-top: 16px;
}

.cards {
display: flex;
gap: 16px;
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
SpaNb4 marked this conversation as resolved.
Show resolved Hide resolved
import { renderWithRouter } from '@/shared/__tests__/utils';

describe('Events', () => {
Expand Down
35 changes: 13 additions & 22 deletions src/widgets/events/ui/events.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,19 @@
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')}>
KristiBo marked this conversation as resolved.
Show resolved Hide resolved
<div className={cn(cx('events', 'content'), 'content')}>
SpaNb4 marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -44,16 +30,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>
Expand Down
Loading