Skip to content

Commit

Permalink
chore: fix eslint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@vilaboim
vilaboim committed Sep 15, 2024
1 parent 3f74b65 commit 25ecbfb
Show file tree
Hide file tree
Showing 15 changed files with 573 additions and 502 deletions.
100 changes: 53 additions & 47 deletions src/components/devfest-triangulo-2023/countdown/countdown-timer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,60 @@
import styles from "./CountdownTimer.module.css";

import React, { useState, useEffect } from 'react';
import React, { useState, useEffect } from "react";
import { changeTimeZone, calcDateDistance } from "helpers/date";

import configValues from "helpers/config";


const DATE_DISTANCE_LABELS: Record<string, string> = {
days: 'dias',
hours: 'horas',
minutes: 'minutos',
seconds: 'segundos',
}
const CountdownTimer: React.FC = ({ }) => {

const [_dateDistance, _setDateDistance] = useState({
distance: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0
} as Record<string, number>);

useEffect(() => {
const _interval = setInterval(function () {
const _result = calcDateDistance(changeTimeZone(configValues.eventDate, 'America/Sao_Paulo'));

if (_result.distance < 0) {
clearInterval(_interval)
return
}

_setDateDistance(_result);
}, 1000);

return () => {
clearInterval(_interval)
}
}, [])

return (<section className={styles.Counter}>
<ul className={styles.CounterList}>
{Object.keys(DATE_DISTANCE_LABELS).map(key => (
<li className={styles.CounterListItem} key={key}>
<span className={`${styles.CounterListItem__time}`}>{_dateDistance[key]}</span>
{DATE_DISTANCE_LABELS[key]}
</li>
))}
</ul>
</section>);
}

export default CountdownTimer;
days: "dias",
hours: "horas",
minutes: "minutos",
seconds: "segundos",
};
const CountdownTimer: React.FC = ({}) => {
const [_dateDistance, _setDateDistance] = useState({
distance: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
} as Record<string, number>);

useEffect(() => {
const _interval = setInterval(function () {
const now = new Date();
const _result = calcDateDistance({
initialDate: now,
endDate: changeTimeZone(configValues.eventDate, "America/Sao_Paulo"),
});

if (_result.distance < 0) {
clearInterval(_interval);
return;
}

_setDateDistance(_result);
}, 1000);

return () => {
clearInterval(_interval);
};
}, []);

return (
<section className={styles.Counter}>
<ul className={styles.CounterList}>
{Object.keys(DATE_DISTANCE_LABELS).map((key) => (
<li className={styles.CounterListItem} key={key}>
<span className={`${styles.CounterListItem__time}`}>
{_dateDistance[key]}
</span>
{DATE_DISTANCE_LABELS[key]}
</li>
))}
</ul>
</section>
);
};

export default CountdownTimer;
179 changes: 89 additions & 90 deletions src/components/devfest-triangulo-2023/schedule-section/schedule-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,109 +8,108 @@ import { Speeches, SpeechesPath } from "models/schedule";
import clsx from "clsx";

type ScheduleCardProps = {
speakers: Array<Speaker>;
speech: Speeches;
}
speakers: Array<Speaker>;
speech: Speeches;
};

const getPillColor = (tech: SpeakerTech) => {
switch (tech) {
case SpeakerTech.Career:
return "primary"
case SpeakerTech.MachineLearning:
return "secondary"
case SpeakerTech.Web:
return "danger"
case SpeakerTech.UI_UX:
return "info"
case SpeakerTech.Infra_Devops:
return "warning"
default:
return "success"
}
}
switch (tech) {
case SpeakerTech.Career:
return "primary";
case SpeakerTech.MachineLearning:
return "secondary";
case SpeakerTech.Web:
return "danger";
case SpeakerTech.UI_UX:
return "info";
case SpeakerTech.Infra_Devops:
return "warning";
default:
return "success";
}
};

const getPathColor = (path: SpeechesPath) => {
switch (path) {
case SpeechesPath.MINAS:
return styles.path_one_color
case SpeechesPath.CURADO:
return styles.path_two_color
case SpeechesPath.CANASTRA:
return styles.path_three_color
case SpeechesPath.COMUNIDADE:
return styles.path_SPEED_color
}
}

const formatDate = (str: number) => {
const hours = new Date(str).getHours()
const minutes = new Date(str).getMinutes()

return `${hours}:${minutes.toString().padStart(2, '0')}`
}
switch (path) {
case SpeechesPath.MINAS:
return styles.path_one_color;
case SpeechesPath.CURADO:
return styles.path_two_color;
case SpeechesPath.CANASTRA:
return styles.path_three_color;
case SpeechesPath.COMUNIDADE:
return styles.path_SPEED_color;
}
};

const ScheduleCardChooser = (props: ScheduleCardProps) => {
return props.speakers.length > 0 ? <SpeakerScheduleCard {...props} /> : <RegularScheduleCard {...props} />;
return props.speakers.length > 0 ? (
<SpeakerScheduleCard {...props} />
) : (
<RegularScheduleCard {...props} />
);
};

const SpeakerScheduleCard = ({ speech, speakers }: ScheduleCardProps) => {
const speakerInfo = speakers.find(({ tech }) => tech);
const speakerInfo = speakers.find(({ tech }) => tech);

return (
<article className={clsx(styles.card_container, styles.common_speeches)}>
<div className={clsx(styles.card_content, getPathColor(speech.path))}>
<header className={styles.card_header}>
<h3 className={styles.card_topic}>{speakerInfo?.topic}</h3>
<span className={styles.speeches_infos}>
{speakerInfo?.tech &&
<Badge className={styles.card_badge} color={getPillColor(speakerInfo?.tech)} pill>
{speakerInfo?.tech}
</Badge>
}
<p className={styles.card_duration}>
{speech.start} - {speech.end}
</p>
</span>
</header>
<div>
{speakers.map(({ key, photo, name, title, company }) => (
<div key={key} className={styles.speaker_description}>
<Image
className={styles.card_image}
src={photo}
alt={`Foto ${name}`}
height={40}
width={40}
loading="lazy"
/>
<div className={styles.card_speaker_info_content}>
<h5>{name}</h5>
<Row noGutters>
<p className={styles.speaker_title}>
{title}{' '}{company &&
<strong>@{company} </strong>
}
</p>
</Row>
</div>
</div>
))}
</div>
return (
<article className={clsx(styles.card_container, styles.common_speeches)}>
<div className={clsx(styles.card_content, getPathColor(speech.path))}>
<header className={styles.card_header}>
<h3 className={styles.card_topic}>{speakerInfo?.topic}</h3>
<span className={styles.speeches_infos}>
{speakerInfo?.tech && (
<Badge
className={styles.card_badge}
color={getPillColor(speakerInfo?.tech)}
pill
>
{speakerInfo?.tech}
</Badge>
)}
<p className={styles.card_duration}>
{speech.start} - {speech.end}
</p>
</span>
</header>
<div>
{speakers.map(({ key, photo, name, title, company }) => (
<div key={key} className={styles.speaker_description}>
<Image
className={styles.card_image}
src={photo}
alt={`Foto ${name}`}
height={40}
width={40}
loading="lazy"
/>
<div className={styles.card_speaker_info_content}>
<h5>{name}</h5>
<Row noGutters>
<p className={styles.speaker_title}>
{title} {company && <strong>@{company} </strong>}
</p>
</Row>
</div>
</div>
</article>
)
}
))}
</div>
</div>
</article>
);
};

const RegularScheduleCard = ({ speech }: ScheduleCardProps) => {
return <article
className={clsx(styles.card_container, styles.common_speeches)}
>
<div className={clsx(styles.card_content, getPathColor(speech!.path))}>
<header className={styles.card_header_regular}>
<h3 className={styles.card_topic}>{speech?.topic}</h3>
</header>
</div>
return (
<article className={clsx(styles.card_container, styles.common_speeches)}>
<div className={clsx(styles.card_content, getPathColor(speech!.path))}>
<header className={styles.card_header_regular}>
<h3 className={styles.card_topic}>{speech?.topic}</h3>
</header>
</div>
</article>
}
);
};

export default ScheduleCardChooser;
Loading

0 comments on commit 25ecbfb

Please sign in to comment.