EventDates, Info cleanup, stability (fb6fbea7) · Commits · FQQD / Canvas

package-lock.json

+13 −1

Original line number	Diff line number	Diff line
		@@ -11112,6 +11112,15 @@
		"url": "https://github.com/sponsors/ljharb"
		}
		},
		"node_modules/date-fns": {
		"version": "4.1.0",
		"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
		"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
		"funding": {
		"type": "github",
		"url": "https://github.com/sponsors/kossnocorp"
		}
		},
		"node_modules/debug": {
		"version": "2.6.9",
		"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
		@@ -12734,7 +12743,8 @@
		"node_modules/eventemitter3": {
		"version": "5.0.1",
		"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
		"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
		"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
		"license": "MIT"
		},
		"node_modules/execa": {
		"version": "5.1.1",
		@@ -19888,6 +19898,7 @@
		"@sc07-canvas/lib": "^1.0.0",
		"@theme-toggles/react": "^4.1.0",
		"altcha-lib": "^1.2.0",
		"date-fns": "^4.1.0",
		"eventemitter3": "^5.0.1",
		"framer-motion": "^11.3.2",
		"lodash.throttle": "^4.1.1",
		@@ -19969,6 +19980,7 @@
		"bullmq": "^5.40.2",
		"connect-redis": "^8.0.1",
		"cors": "^2.8.5",
		"eventemitter3": "^5.0.1",
		"express": "^4.21.2",
		"express-rate-limit": "^7.5.0",
		"express-session": "^1.18.1",

packages/client/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@
		"@sc07-canvas/lib": "^1.0.0",
		"@theme-toggles/react": "^4.1.0",
		"altcha-lib": "^1.2.0",
		"date-fns": "^4.1.0",
		"eventemitter3": "^5.0.1",
		"framer-motion": "^11.3.2",
		"lodash.throttle": "^4.1.1",

packages/client/src/components/App.tsx

+10 −7

Original line number	Diff line number	Diff line
		@@ -20,6 +20,7 @@ import { InfoSidebar } from "./Info/InfoSidebar";
		import { DynamicModals } from "./DynamicModals";
		import { ToastWrapper } from "./ToastWrapper";
		import { Moderator, ModeratorContext } from "../Moderator/Moderator";
		import { DialogContext } from "../contexts/DialogContext";

		// const Chat = lazy(() => import("./Chat/Chat"));

		@@ -168,6 +169,7 @@ const App = () => {
		}}
		>
		<AppContext>
		<DialogContext>
		<ModeratorContext>
		<ChatContext>
		<TemplateContext>
		@@ -175,6 +177,7 @@ const App = () => {
		</TemplateContext>
		</ChatContext>
		</ModeratorContext>
		</DialogContext>
		</AppContext>
		</SWRConfig>
		);

packages/client/src/components/EventDates/EventDatesCard.tsx

0 → 100644

+73 −0

Original line number	Diff line number	Diff line
		import { Card, CardBody } from "@nextui-org/react";
		import { formatDate } from "date-fns";
		import { useCountdown } from "../../hooks/useCountdown";
		import { useEventDates } from "./useEventDates";
		import { EVENT_NAME } from ".";

		export const EventDatesCard = () => {
		const { state, start, end } = useEventDates();

		if (state === "UNKNOWN")
		return <>{import.meta.env.DEV && "Dev: event.dates is not set"}</>;

		switch (state) {
		case "BEFORE":
		return <BeforeEvent start={start!} />;
		case "DURING":
		return <DuringEvent end={end!} />;
		case "AFTER":
		return <AfterEvent start={start!} end={end!} />;
		}

		return (
		<Card>
		<CardBody>{state}</CardBody>
		</Card>
		);
		};

		const BeforeEvent = ({ start }: { start: number }) => {
		const { timeLeft } = useCountdown(start);

		return (
		<Card>
		<CardBody>
		<h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
		<h3 className="text-large text-center w-full">
		Starts in <span className="font-semibold">{timeLeft}</span>
		</h3>
		</CardBody>
		</Card>
		);
		};

		const DuringEvent = ({ end }: { end: number }) => {
		const { timeLeft } = useCountdown(end);

		return (
		<Card>
		<CardBody>
		<h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
		<h3 className="text-large text-center w-full">
		Ends in <span className="font-semibold">{timeLeft}</span>
		</h3>
		</CardBody>
		</Card>
		);
		};

		const AfterEvent = ({ start, end }: { start: number; end: number }) => {
		return (
		<Card>
		<CardBody>
		<h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
		<h3 className="text-large text-center w-full">
		<strong>
		{formatDate(start, "MMM do @ h:mm a")} -{" "}
		{formatDate(end, "MMM do @ h:mm a")}
		</strong>
		</h3>
		</CardBody>
		</Card>
		);
		};

packages/client/src/components/EventDates/EventDatesHeader.tsx

0 → 100644

+50 −0

Original line number	Diff line number	Diff line
		import { Card, CardBody } from "@nextui-org/react";
		import { formatDate } from "date-fns";
		import { useCountdown } from "../../hooks/useCountdown";
		import { useEventDates } from "./useEventDates";
		import { EVENT_NAME } from ".";

		export const EventDatesHeader = () => {
		const { state, start, end } = useEventDates();

		if (state === "UNKNOWN")
		return <>{import.meta.env.DEV && "Dev: event.dates is not set"}</>;

		switch (state) {
		case "BEFORE":
		return <BeforeEvent start={start!} />;
		case "AFTER":
		return <AfterEvent start={start!} end={end!} />;
		}
		};

		const BeforeEvent = ({ start }: { start: number }) => {
		const { timeLeft } = useCountdown(start);

		return (
		<Card>
		<CardBody>
		<h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
		<h3 className="text-large text-center w-full">
		Starts in <span className="font-semibold">{timeLeft}</span>
		</h3>
		</CardBody>
		</Card>
		);
		};

		const AfterEvent = ({ start, end }: { start: number; end: number }) => {
		return (
		<Card>
		<CardBody>
		<h2 className="text-2xl font-bold text-center w-full">{EVENT_NAME}</h2>
		<h3 className="text-large text-center w-full">
		<strong>
		{formatDate(start, "MMM do @ h:mm a")} -{" "}
		{formatDate(end, "MMM do @ h:mm a")}
		</strong>
		</h3>
		</CardBody>
		</Card>
		);
		};