diff --git a/.env b/.env
new file mode 100644
index 0000000..bea9575
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+DATE_OF_THE_EXAM=2021-06-22T00:00:00.000Z
\ No newline at end of file
diff --git a/src/features/IndexPage/IndexPage.tsx b/src/features/IndexPage/IndexPage.tsx
index 0a05126..1019cf5 100644
--- a/src/features/IndexPage/IndexPage.tsx
+++ b/src/features/IndexPage/IndexPage.tsx
@@ -10,16 +10,19 @@ import { QUERY_PROFESSIONS } from './queries';
import Layout from 'common/Layout/Layout';
import Header from './components/Header/Header';
+import Timer from './components/Timer/Timer';
interface IndexPageProps {
professions: Profession[];
qualifications: Qualification[];
+ dateOfTheExam: string;
}
-const IndexPage = ({ qualifications }: IndexPageProps) => {
+const IndexPage = ({ qualifications, dateOfTheExam }: IndexPageProps) => {
return (
+
);
};
@@ -37,7 +40,11 @@ const getQualificationsFromProfessions = (
};
export const getStaticProps: GetStaticProps = async () => {
- const pageProps: IndexPageProps = { professions: [], qualifications: [] };
+ const pageProps: IndexPageProps = {
+ professions: [],
+ qualifications: [],
+ dateOfTheExam: new Date(process.env.DATE_OF_THE_EXAM ?? 0).toISOString(),
+ };
const client = createClient();
try {
diff --git a/src/features/IndexPage/components/Section/Section.tsx b/src/features/IndexPage/components/Section/Section.tsx
index b0fc558..c0b7a23 100644
--- a/src/features/IndexPage/components/Section/Section.tsx
+++ b/src/features/IndexPage/components/Section/Section.tsx
@@ -15,14 +15,14 @@ export enum BgColor {
}
export interface SectionProps extends React.HTMLAttributes {
- size: Size;
- bgColor: BgColor;
- className: string;
+ size?: Size;
+ bgColor?: BgColor;
+ className?: string;
}
const Section = ({
- size,
- bgColor,
+ size = Size.Medium,
+ bgColor = BgColor.Primary,
className,
children,
...rest
diff --git a/src/features/IndexPage/components/Timer/Timer.tsx b/src/features/IndexPage/components/Timer/Timer.tsx
new file mode 100644
index 0000000..c22298e
--- /dev/null
+++ b/src/features/IndexPage/components/Timer/Timer.tsx
@@ -0,0 +1,75 @@
+import { polishPlurals } from 'polish-plurals';
+import { useCountdown } from 'libs/hooks';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Container, Typography, Grid } from '@material-ui/core';
+import Section from '../Section/Section';
+
+export interface TimerProps {
+ dateOfTheExam: Date | string;
+}
+
+const Timer = ({ dateOfTheExam }: TimerProps) => {
+ const classes = useStyles();
+ const { days, minutes, hours, seconds } = useCountdown(
+ new Date(dateOfTheExam)
+ );
+
+ return (
+
+
+
+ Do najbliższej sesji egzaminacyjnej pozostało
+
+
+ {[
+ {
+ number: days,
+ text: polishPlurals('dzień', 'dni', 'dni', days),
+ },
+ {
+ number: hours,
+ text: polishPlurals('godzina', 'godziny', 'godzin', hours),
+ },
+ {
+ number: minutes,
+ text: polishPlurals('minuta', 'minuty', 'minut', minutes),
+ },
+ {
+ number: seconds,
+ text: polishPlurals('sekunda', 'sekundy', 'sekund', seconds),
+ },
+ ].map(({ number, text }) => (
+
+
+ {number}
+
+
+ {text}
+
+
+ ))}
+
+
+
+ );
+};
+
+const useStyles = makeStyles(theme => ({
+ textAlignCenter: {
+ textAlign: 'center',
+ },
+ number: {
+ padding: theme.spacing(2),
+ border: `1px solid #fff`,
+ borderRadius: 10,
+ display: 'inline-block',
+ },
+}));
+
+export default Timer;
diff --git a/src/libs/hooks/useCountdown.ts b/src/libs/hooks/useCountdown.ts
index 8fd915b..16ae5cd 100644
--- a/src/libs/hooks/useCountdown.ts
+++ b/src/libs/hooks/useCountdown.ts
@@ -16,8 +16,8 @@ const calculateDifference = (
days: difference > 0 ? Math.floor(difference / (1000 * 60 * 60 * 24)) : 0,
hours:
difference > 0 ? Math.floor((difference / (1000 * 60 * 60)) % 24) : 0,
- minutes: difference ? Math.floor((difference / 1000 / 60) % 60) : 0,
- seconds: difference ? Math.floor((difference / 1000) % 60) : 0,
+ minutes: difference > 0 ? Math.floor((difference / 1000 / 60) % 60) : 0,
+ seconds: difference > 0 ? Math.floor((difference / 1000) % 60) : 0,
};
};