diff --git a/packages/ilmomasiina-frontend/src/locales/en.json b/packages/ilmomasiina-frontend/src/locales/en.json index fa4e4767..b1cfc8c3 100644 --- a/packages/ilmomasiina-frontend/src/locales/en.json +++ b/packages/ilmomasiina-frontend/src/locales/en.json @@ -17,10 +17,15 @@ "login.errors.401.description": "Wrong username or password", "login.errors.default.description": "Login failed", "adminEvents.title": "Manage events", + "adminEvents.title.past": "Past events", "adminEvents.loadError.default.description": "Failed to load events. $t(errors.contactAdmin)", "adminEvents.nav.users": "Users", "adminEvents.nav.auditLog": "Audit log", "adminEvents.nav.newEvent": "+ New Event", + "adminEvents.nav.past": "Past events", + "adminEvents.nav.upcoming": "Upcoming events", + "adminEvents.noEvents.past": "No past events to show. Would you like to <1>view upcoming events1> or <3>create a new event3>?", + "adminEvents.noEvents.upcoming": "No upcoming events to show. Would you like to <1>view past events1> or <3>create a new event3>?", "adminEvents.column.name": "Name", "adminEvents.column.date": "Date", "adminEvents.column.status": "Status", diff --git a/packages/ilmomasiina-frontend/src/locales/fi.json b/packages/ilmomasiina-frontend/src/locales/fi.json index 61b9d5cf..5a3a95fa 100644 --- a/packages/ilmomasiina-frontend/src/locales/fi.json +++ b/packages/ilmomasiina-frontend/src/locales/fi.json @@ -17,10 +17,15 @@ "login.errors.401.description": "Väärä käyttäjänimi tai salasana", "login.errors.default.description": "Kirjautuminen epäonnistui", "adminEvents.title": "Hallinta", + "adminEvents.title.past": "Menneet tapahtumat", "adminEvents.loadError.default.description": "Tapahtumien lataaminen epäonnistui. $t(errors.contactAdmin)", "adminEvents.nav.users": "Käyttäjät", "adminEvents.nav.auditLog": "Toimintoloki", "adminEvents.nav.newEvent": "+ Uusi tapahtuma", + "adminEvents.nav.past": "Menneet tapahtumat", + "adminEvents.nav.upcoming": "Tulevat tapahtumat", + "adminEvents.noEvents.past": "Ei menneitä tapahtumia. Haluatko <1>katsella tulevia tapahtumia1> tai <3>luoda uuden tapahtuman3>?", + "adminEvents.noEvents.upcoming": "Ei tulevia tapahtumia. Haluatko <1>katsella menneitä tapahtumia1> tai <3>luoda uuden tapahtuman3>?", "adminEvents.column.name": "Nimi", "adminEvents.column.date": "Ajankohta", "adminEvents.column.status": "Tila", diff --git a/packages/ilmomasiina-frontend/src/routes/AdminEvents/AdminEventListItem.tsx b/packages/ilmomasiina-frontend/src/routes/AdminEvents/AdminEventListItem.tsx index dc379e0b..8ae65dca 100644 --- a/packages/ilmomasiina-frontend/src/routes/AdminEvents/AdminEventListItem.tsx +++ b/packages/ilmomasiina-frontend/src/routes/AdminEvents/AdminEventListItem.tsx @@ -12,7 +12,7 @@ import type { AdminEventListItem as AdminEventListItemSchema } from "@tietokilta import { deleteEvent, getAdminEvents } from "../../modules/adminEvents/actions"; import appPaths from "../../paths"; import { useTypedDispatch } from "../../store/reducers"; -import { isEventInPast } from "../../utils/eventState"; +import { isEventHiddenFromUsersDueToAge } from "../../utils/eventState"; type Props = { event: AdminEventListItemSchema; @@ -46,10 +46,10 @@ const AdminEventListItem = ({ event }: Props) => { let status; if (draft) { status = t("adminEvents.status.draft"); - } else if (isEventInPast(event)) { + } else if (isEventHiddenFromUsersDueToAge(event)) { status = date === null ? t("adminEvents.status.closed") : t("adminEvents.status.ended"); } else if (!listed) { - status = t("adminEvents.status.hidden"); + status = {t("adminEvents.status.hidden")}; } else { status = {t("adminEvents.status.published")}; } diff --git a/packages/ilmomasiina-frontend/src/routes/AdminEvents/index.tsx b/packages/ilmomasiina-frontend/src/routes/AdminEvents/index.tsx index edfea0da..edd666d5 100644 --- a/packages/ilmomasiina-frontend/src/routes/AdminEvents/index.tsx +++ b/packages/ilmomasiina-frontend/src/routes/AdminEvents/index.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from "react"; +import React, { BaseSyntheticEvent, useCallback, useEffect, useMemo, useState } from "react"; import { Button, Spinner } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { shallowEqual } from "react-redux"; import { Link } from "react-router-dom"; @@ -10,13 +10,20 @@ import requireAuth from "../../containers/requireAuth"; import { getAdminEvents, resetState } from "../../modules/adminEvents/actions"; import appPaths from "../../paths"; import { useTypedDispatch, useTypedSelector } from "../../store/reducers"; +import { isEventInPast } from "../../utils/eventState"; import AdminEventListItem from "./AdminEventListItem"; const AdminEventsList = () => { const dispatch = useTypedDispatch(); const { events, loadError } = useTypedSelector((state) => state.adminEvents, shallowEqual); + const [showPast, setShowPast] = useState(false); const { t } = useTranslation(); + const togglePast = useCallback((evt: BaseSyntheticEvent) => { + evt.preventDefault(); + setShowPast((prev) => !prev); + }, []); + useEffect(() => { dispatch(getAdminEvents()); return () => { @@ -24,6 +31,12 @@ const AdminEventsList = () => { }; }, [dispatch]); + const shownEvents = useMemo(() => { + const filtered = events?.filter((event) => isEventInPast(event) === showPast); + // Additionally, reverse events when viewing past events, so the newest event comes first. + return showPast ? filtered?.reverse() : filtered; + }, [events, showPast]); + if (loadError) { return ( <> @@ -33,7 +46,7 @@ const AdminEventsList = () => { ); } - if (!events) { + if (!shownEvents) { return ( <>