-
- );
- }
-}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..85047b5
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+
+import {
+ Activities,
+ Clock,
+ BoardText,
+ Quotes,
+ Ad,
+ Commits,
+} from './components';
+
+import { nextState, useAppDispatch, useAppSelector } from './store';
+import { contentful } from './store/api';
+import { StateMachineState } from './store/state';
+import { resetQuotes } from './store/quotes';
+
+const LOGO = import.meta.env.VITE_LOGO;
+
+export default function App() {
+ return (
+
-
- {this.renderContent()}
-
- 
-
-
+
+ );
+}
+
+export interface StateMachineSlideProps {
+ current: number;
+}
+
+function StateMachine() {
+ const dispatch = useAppDispatch();
+
+ // Preload the quotes and initialise the store with the quote indices
+ useEffect(() => {
+ const result = dispatch(contentful.endpoints.quotes.initiate());
+
+ result.then(({ data: quotes, isSuccess }) => {
+ if (isSuccess) dispatch(resetQuotes(quotes.length));
+ });
+
+ return result.unsubscribe;
+ }, [dispatch]);
+
+ // Create timer that ticks the state machine
+ useEffect(() => {
+ const interval = setInterval(
+ () => {
+ dispatch(nextState);
+ },
+ Number(import.meta.env.VITE_NEXT_INTERVAL),
+ );
+
+ return () => clearInterval(interval);
+ }, [dispatch]);
+
+ // Display the correct component based on state machine's state
+ const state = useAppSelector((state) => state.screen);
+ const quotes = useAppSelector((state) => state.quotes);
+
+ switch (state.current) {
+ case StateMachineState.Activities:
+ return
+
+
+
+
+
-
- );
- }
- return ;
- }
-}
-
-// Explain expected types, for early error detection
-Activities.propTypes = {
- current: PropTypes.number.isRequired,
- onChange: PropTypes.func.isRequired,
-};
diff --git a/src/components/Activities.tsx b/src/components/Activities.tsx
new file mode 100644
index 0000000..56554d8
--- /dev/null
+++ b/src/components/Activities.tsx
@@ -0,0 +1,35 @@
+import Activity from './Activity';
+import Poster from './Poster';
+import { useActivitiesQuery } from '../store/api';
+import { StateMachineSlideProps } from '../App';
+
+export default function Activities({ current }: StateMachineSlideProps) {
+ const { data: activities, isSuccess } = useActivitiesQuery(undefined, {
+ pollingInterval: Number(import.meta.env.VITE_LOAD_INTERVAL),
+ });
+
+ if (!isSuccess) return <>;
+
+ if (activities.length === 0)
+ return (
+ -
- {this.state.activities.map((activity, i) => {
- return (
-
There are no activities, wanbeleid!
+
+
+ );
+}
diff --git a/src/components/Activity.jsx b/src/components/Activity.jsx
deleted file mode 100644
index 56ce743..0000000
--- a/src/components/Activity.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect, useRef } from 'react';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import scrollIntoView from 'scroll-into-view';
-
-function sameDay(d, t) {
- return (
- d.getDate() === t.getDate() && // getDate returns day number in month...
- d.getMonth() === t.getMonth() &&
- d.getYear() === t.getYear()
- );
-}
-
-function createFormat(has_time, date, as = new Date()) {
- const format =
- (!sameDay(date, as) ? 'dddd DD-MM ' : '')
- + (has_time ? 'HH:mm' : '');
- return format || '[]';
-}
-
-const Activity = ({ active, name, start_date, end_date, has_start_time, has_end_time, participant_counter }) => {
- const activityRef = useRef(null);
-
- // Ensure that the current activity is visible
- useEffect(() => {
- if (active && activityRef.current) {
- scrollIntoView(activityRef.current, {
- time: 500,
- });
- }
- }, [active]);
-
- const startDate = moment(start_date)
- .format(createFormat(has_start_time, start_date));
- const endDate = moment(end_date)
- .format(createFormat(has_end_time, end_date, start_date));
- const className = 'activity' + (active ? ' active' : '');
-
- return (
- -
+ {activities.map((activity) => (
+
- {name} - {participant_counter && ` (${participant_counter})`} -
- - {endDate && <> - } -+ {name} + {participant_counter ? ` (${participant_counter})` : ''} +
+ + {endDate && ( + <> + {' '} + - + + )} +
-
- );
-
- if (this.props.current >= this.state.ads.length - 1)
- this.props.onChange(true);
-
- let currentAd = this.state.ads[this.props.current];
- if (currentAd.fullscreen) {
- return (
-
-
- );
- } else {
- return (
-
-
- );
- }
- }
-}
-
-// Explain expected types, for early error detection
-Ad.propTypes = {
- current: PropTypes.number.isRequired,
- onChange: PropTypes.func.isRequired,
-};
\ No newline at end of file
diff --git a/src/components/Ad.tsx b/src/components/Ad.tsx
new file mode 100644
index 0000000..ec9cb66
--- /dev/null
+++ b/src/components/Ad.tsx
@@ -0,0 +1,39 @@
+import Poster from './Poster';
+import { useAdsQuery } from '../store/api';
+import { StateMachineSlideProps } from '../App';
+
+export default function Ad({ current }: StateMachineSlideProps) {
+ const { data: ads, isSuccess } = useAdsQuery();
+
+ if (!isSuccess) return <>;
+
+ // TODO: Maybe this case isnt necessary anymore
+ if (ads.length <= 0)
+ return (
+ -
-
{currentAd.title}
-{currentAd.description}
-
+
+ );
+
+ const currentAd = ads[current];
+
+ if (!currentAd.poster?.fields.file?.url) throw new Error('Ad without poster');
+
+ if (currentAd.fullscreen)
+ return (
+
+
+ );
+
+ return (
+
+
+ );
+}
diff --git a/src/components/BoardText.jsx b/src/components/BoardText.jsx
deleted file mode 100644
index 17522c2..0000000
--- a/src/components/BoardText.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import GetContent from '../helpers/contentful';
-
-let text = [];
-let index = -1;
-
-GetContent('board-message', (entries) => {
- text = entries !== null ? entries.map((entry) => entry.fields.message) : [];
-});
-
-// Get the next message from the array or start over if you have
-// reached the end.
-function getCurrentText() {
- index = index < text.length - 1 ? index + 1 : 0;
-
- return text[index];
-}
-
-export default function BoardText() {
- return (
- -
+
{currentAd.title}
+{currentAd.description}
+{getCurrentText()}
-{message}
+
-
- );
-};
diff --git a/src/components/Commits.tsx b/src/components/Commits.tsx
new file mode 100644
index 0000000..e8ddf8a
--- /dev/null
+++ b/src/components/Commits.tsx
@@ -0,0 +1,33 @@
+import Poster from './Poster';
+import { useAllCommitsQuery } from '../store/api';
+import moment from 'moment';
+
+export default function Commits() {
+ const { data: commits, isSuccess } = useAllCommitsQuery();
+
+ if (!isSuccess) return <>;
+
+ return (
+ Recent commits
--
- {commits?.map((commit) => {
- return (
- <>
-
-
-
- {commit.message.split('\n')[0]} -
-- On {commit.owner}/{commit.repo} by {commit.author} ({formatDate(commit.date)} {formatTime(commit.date)}) -
-
-
- );
- })}
-
+
+ );
+}
diff --git a/src/components/Poster.jsx b/src/components/Poster.jsx
deleted file mode 100644
index 721b759..0000000
--- a/src/components/Poster.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-
-/**
- *
- * @param {Object} props
- * @param {string} props.poster
- * @returns
- */
-export default function Poster(props) {
- return Recent commits
+-
+ {commits.map((commit, index) => (
+
-
+
+ {commit.message.split('\n')[0]} +
++ On{' '} + + {commit.owner}/{commit.repo} + + {' by'} {commit.author} + {commit.date ? ` (${moment(commit.date).format('LLL')})` : ''} +
+
+ ))}
+
"{quote.text}"
+-{quote.person}
+
- {members?.map((member) => {
- return (
- <>
-
-
- 
-
-
- );
- })}
-
- {member.name || member.login}
-
-
+ {members.map((member) => {
+ return (
+ <>
+
+
+
+
+
+ );
+ })}
+ {member.name}
+