From 937c7c91668c442ebceb865437cc3baf5d3d5102 Mon Sep 17 00:00:00 2001 From: Elmo Kankkunen Date: Tue, 13 Sep 2022 16:53:00 +0300 Subject: [PATCH 01/11] Changed language button to an svg image --- src/components/ChangeLanguageButton.tsx | 2 +- src/components/Icon.tsx | 32 +++++++++++++++++++------ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/ChangeLanguageButton.tsx b/src/components/ChangeLanguageButton.tsx index 4a49483..e9ef880 100644 --- a/src/components/ChangeLanguageButton.tsx +++ b/src/components/ChangeLanguageButton.tsx @@ -23,5 +23,5 @@ export default styled(ChangeLanguageButton)` font-size: 4rem; background: none; border: none; - width: fit-content; + width: 2cm; `; diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index cae974b..4e83446 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -70,16 +70,34 @@ const nameToIcon = (name: IconType): JSX.Element | null => { } if (name === IconType.FinlandFlag) { return ( - - 🇫🇮 - - ); + + Menu + {/* eslint-disable-next-line max-len */} + + + + + ); } if (name === IconType.GBFlag) { return ( - - 🇬🇧 - + + Menu + {/* eslint-disable-next-line max-len */} + + + + + + ); } return null; From 11bd5a90a246f0e82c3e9c2aa4a8a9ddb5baf616 Mon Sep 17 00:00:00 2001 From: Elmo Kankkunen Date: Tue, 13 Sep 2022 17:21:42 +0300 Subject: [PATCH 02/11] Fixed indentation --- src/components/Icon.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 4e83446..c0fa5df 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -77,11 +77,11 @@ const nameToIcon = (name: IconType): JSX.Element | null => { > Menu {/* eslint-disable-next-line max-len */} - - - - - ); + + + + + ); } if (name === IconType.GBFlag) { return ( @@ -92,12 +92,12 @@ const nameToIcon = (name: IconType): JSX.Element | null => { > Menu {/* eslint-disable-next-line max-len */} - - - - - - + + + + + + ); } return null; From 0380ee7d6d93f8920643f8147f2456f53a72cedf Mon Sep 17 00:00:00 2001 From: Elmo Kankkunen Date: Tue, 13 Sep 2022 17:29:52 +0300 Subject: [PATCH 03/11] Changed language icons to svg images --- src/components/Icon.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index c0fa5df..4392833 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -75,8 +75,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => { viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" > - Menu - {/* eslint-disable-next-line max-len */} + Finland flag @@ -90,8 +89,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => { viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" > - Menu - {/* eslint-disable-next-line max-len */} + GB flag From c6c5ff33c39be7843860169d290f826f27dd1a02 Mon Sep 17 00:00:00 2001 From: Elmo Kankkunen Date: Thu, 29 Sep 2022 01:03:47 +0300 Subject: [PATCH 04/11] Fixed language icon width --- src/components/Icon.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 4392833..2052546 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -73,6 +73,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => { Finland flag @@ -87,6 +88,7 @@ const nameToIcon = (name: IconType): JSX.Element | null => { GB flag From 88d5e578586bf7fdf7d58295bb7a93ca806d3b17 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Tue, 11 Oct 2022 18:19:52 +0300 Subject: [PATCH 05/11] Added GE healthcare to corporate logos. --- src/views/FrontPage/FrontPageView.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 0a3f3c2..bd60e98 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -24,6 +24,7 @@ const Fingrid = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/fingr const Okmetic = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/okmetic.jpg"; const Nokia = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/nokia.jpg"; const Granlund = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/granlund.jpg"; +const GE = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/GE.png"; interface FrontPageViewProps { events: Event[]; @@ -111,6 +112,9 @@ const FrontPageView: React.FC = ({ events, feed }) => ( + + + Haluatko kuulla lisää yhteistyöstä kanssamme? From 6aa0b3fe1970248a030706f1262c48c858d7d98e Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 11:56:55 +0200 Subject: [PATCH 06/11] Added filter base --- src/pages/admin/events/index.tsx | 140 +++++++++++++++++++++++++------ 1 file changed, 116 insertions(+), 24 deletions(-) diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx index d20cb54..c9461e3 100644 --- a/src/pages/admin/events/index.tsx +++ b/src/pages/admin/events/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { NextPage } from "next"; import useSWR from "swr"; import { formatRelative } from "date-fns"; @@ -21,6 +21,14 @@ const StyledButton = styled(Button) <{ $colorOverride: "red" }>` font-weight: bold; `; +const StyledSelect = styled.select` + padding: 0.25rem; +`; + +const SelectWrapper = styled.div` + padding: 0.25rem; +`; + const confirmDelete = async (event: Event) => { if (window.confirm(`Delete: ${event.id}: ${event.title_fi}/${event.title_en}; Are you sure?`) === true) { try { @@ -37,42 +45,126 @@ const Renderer: React.FC = () => { const api: API = { path: APIPath.EVENTS, authenticated: true }; const { data: events, error } = useSWR(api, fetcher); + const [sort, setSort] = useState("start_time"); + const [order, setOrder] = useState("descending"); + const [filter, setFilter] = useState("all"); + + const [processedEvents, setProcessedEvents] = useState([]); + + useEffect(() => { + console.log("hook call"); + + const eventSort = (a, b) => { + let result = 0; + + console.log(order); + console.log(sort); + + if (order === "ascending") { + if (sort in ["start_time", "end_time"]) { + result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); + } else if (sort === "id") { + result = b[sort] - a[sort]; + } + } else if (order === "descending") { + if (sort in ["start_time", "end_time"]) { + result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); + } else if (sort === "id") { + result = a[sort] - b[sort]; + } + } + + return result; + }; + + const checkDate = (a) => { + let result = true; + + if (filter === "upcoming") { + result = new Date(a.end_time).getTime() > Date.now(); + } else if (filter === "past") { + result = new Date(a.end_time).getTime() < Date.now(); + console.log(`Past ${result}`); + } + return result; + }; + + if (events) { + setProcessedEvents(events.sort(eventSort).filter(checkDate)); + } + }, [sort, order, filter, events]); + + function handleSortChange(e) { + setSort(e.target.value); + } + + function handleOrderChange(e) { + setOrder(e.target.value); + } + + function handleFilterChange(e) { + setFilter(e.target.value); + } + if (error) { console.error(error); return (
- Failed loading events + Failed loading events.
); } + if (!events?.length) { return
No events.
; } return ( - - - - - - - - - - {events.map((event) => ( - - - - - +
+
+ Sort by: + + Order: + + Filter: + +
+
TitleStart timeEnd time
{event.title_fi}{formatRelative(new Date(event.start_time), new Date())}{formatRelative(new Date(event.end_time), new Date())} - confirmDelete(event)}> - Delete - -
+ + + + + - ))} - -
TitleStart timeEnd time
+ + + {processedEvents + .map((event) => ( + + {event.title_fi} + {formatRelative(new Date(event.start_time), new Date())} + {formatRelative(new Date(event.end_time), new Date())} + + confirmDelete(event)}> + Delete + + + + ))} + + + ); }; From 0ad59bfba6bd8fe4cd29c776fb60f789b9bbf1d1 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 12:26:40 +0200 Subject: [PATCH 07/11] dont use python syntax in js --- src/pages/admin/events/index.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx index c9461e3..c509ae3 100644 --- a/src/pages/admin/events/index.tsx +++ b/src/pages/admin/events/index.tsx @@ -52,28 +52,21 @@ const Renderer: React.FC = () => { const [processedEvents, setProcessedEvents] = useState([]); useEffect(() => { - console.log("hook call"); - const eventSort = (a, b) => { let result = 0; - - console.log(order); - console.log(sort); - if (order === "ascending") { - if (sort in ["start_time", "end_time"]) { + if (["start_time", "end_time"].includes(sort)) { result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); } else if (sort === "id") { result = b[sort] - a[sort]; } } else if (order === "descending") { - if (sort in ["start_time", "end_time"]) { + if (["start_time", "end_time"].includes(sort)) { result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); } else if (sort === "id") { result = a[sort] - b[sort]; } } - return result; }; @@ -84,7 +77,6 @@ const Renderer: React.FC = () => { result = new Date(a.end_time).getTime() > Date.now(); } else if (filter === "past") { result = new Date(a.end_time).getTime() < Date.now(); - console.log(`Past ${result}`); } return result; }; @@ -135,8 +127,8 @@ const Renderer: React.FC = () => { Filter: From 59a4f3567e363dc046705f853b784d7069dd4226 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 12:44:37 +0200 Subject: [PATCH 08/11] basic styling, use arrow functions --- src/pages/admin/events/index.tsx | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx index c509ae3..b2fbbbe 100644 --- a/src/pages/admin/events/index.tsx +++ b/src/pages/admin/events/index.tsx @@ -23,10 +23,11 @@ const StyledButton = styled(Button) <{ $colorOverride: "red" }>` const StyledSelect = styled.select` padding: 0.25rem; + margin: 0.5rem; `; const SelectWrapper = styled.div` - padding: 0.25rem; + padding: 0.5rem; `; const confirmDelete = async (event: Event) => { @@ -86,18 +87,6 @@ const Renderer: React.FC = () => { } }, [sort, order, filter, events]); - function handleSortChange(e) { - setSort(e.target.value); - } - - function handleOrderChange(e) { - setOrder(e.target.value); - } - - function handleFilterChange(e) { - setFilter(e.target.value); - } - if (error) { console.error(error); return ( @@ -113,25 +102,25 @@ const Renderer: React.FC = () => { return (
-
+ Sort by: - + Order: - + Filter: - -
+ + From c7a1502a2654d962e97a89acd407a19655ed9ab9 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 12:46:56 +0200 Subject: [PATCH 09/11] correct asc/desc --- src/pages/admin/events/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx index b2fbbbe..80b135f 100644 --- a/src/pages/admin/events/index.tsx +++ b/src/pages/admin/events/index.tsx @@ -55,13 +55,13 @@ const Renderer: React.FC = () => { useEffect(() => { const eventSort = (a, b) => { let result = 0; - if (order === "ascending") { + if (order === "descending") { if (["start_time", "end_time"].includes(sort)) { result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); } else if (sort === "id") { result = b[sort] - a[sort]; } - } else if (order === "descending") { + } else if (order === "ascending") { if (["start_time", "end_time"].includes(sort)) { result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); } else if (sort === "id") { From efacbe9c40f761a183eecd09833874640097cc0e Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 14:05:17 +0200 Subject: [PATCH 10/11] useSWR in admin signups --- src/pages/admin/signups/index.tsx | 97 +++++++++++++++++-------------- 1 file changed, 52 insertions(+), 45 deletions(-) diff --git a/src/pages/admin/signups/index.tsx b/src/pages/admin/signups/index.tsx index 6c4b762..fc4dc96 100644 --- a/src/pages/admin/signups/index.tsx +++ b/src/pages/admin/signups/index.tsx @@ -1,5 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { NextPage } from "next"; +import useSWR from "swr"; import { formatRelative } from "date-fns"; import { toast } from "react-toastify"; import styled from "styled-components"; @@ -8,6 +9,7 @@ import { Button, Link } from "@components/index"; import AddLink from "@components/AddLink"; import { SignupForm } from "@models/Signup"; import SignupApi from "@api/signupApi"; +import { fetcher, APIPath, API } from "@api/backend"; const URL = "/admin/signups"; @@ -31,57 +33,62 @@ const confirmDelete = async (signup: SignupForm) => { } }; -const renderData = (signupForms: SignupForm[]) => { - if (!signupForms || signupForms.length === 0) { +const Renderer: React.FC = () => { + const api: API = { path: APIPath.SIGNUP_FORMS, authenticated: true }; + const { data: signupForms, error } = useSWR(api, fetcher); + + if (error) { + console.error(error); + return ( +
+ Failed loading events. +
+ ); + } + + if (!signupForms?.length) { return
No signup forms.
; } return ( -
- - - - - - - - - - - {signupForms.map((signupForm) => ( - - - - - - - +
+
TitleStart timeEnd timeSign-upsSend email
{signupForm.title_fi}{formatRelative(new Date(signupForm.start_time), new Date())}{formatRelative(new Date(signupForm.end_time), new Date())}ViewSend - confirmDelete(signupForm)}> - Delete - -
+ + + + + + + - ))} - -
TitleStart timeEnd timeSign-upsSend email
+ + + {signupForms.map((signupForm) => ( + + {signupForm.title_fi} + {formatRelative(new Date(signupForm.start_time), new Date())} + {formatRelative(new Date(signupForm.end_time), new Date())} + View + Send + + confirmDelete(signupForm)}> + Delete + + + + ))} + + +
); }; -const AdminSignupPage: NextPage = () => { - const [forms, setForms] = useState(null); - - useEffect(() => { - SignupApi.getForms(true) - .then((res) => setForms(res)); - }, []); - - return ( - -

Sign-up forms

- - {renderData(forms)} - - ); -}; +const AdminSignupPage: NextPage = () => ( + +

Sign-up forms

+ + + +); export default AdminSignupPage; From dd3eded4a1f5e8bc924fa21464f57c9adb892f33 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Sun, 6 Nov 2022 14:25:07 +0200 Subject: [PATCH 11/11] add filter and sort functionality to admin pages --- src/components/Select.tsx | 12 ++++ src/pages/admin/events/index.tsx | 96 +++++++++++++------------------ src/pages/admin/feed/index.tsx | 71 +++++++++++++++-------- src/pages/admin/signups/index.tsx | 60 ++++++++++++++++++- 4 files changed, 159 insertions(+), 80 deletions(-) create mode 100644 src/components/Select.tsx diff --git a/src/components/Select.tsx b/src/components/Select.tsx new file mode 100644 index 0000000..5d5dec1 --- /dev/null +++ b/src/components/Select.tsx @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +const StyledSelect = styled.select` + padding: 0.25rem; + margin: 0.5rem; +`; + +const SelectWrapper = styled.div` + padding: 0.5rem; +`; + +export { StyledSelect, SelectWrapper }; diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx index 80b135f..46e7579 100644 --- a/src/pages/admin/events/index.tsx +++ b/src/pages/admin/events/index.tsx @@ -10,6 +10,7 @@ import AddLink from "@components/AddLink"; import Event from "@models/Event"; import EventApi from "@api/eventApi"; import { fetcher, APIPath, API } from "@api/backend"; +import { StyledSelect, SelectWrapper } from "@components/Select"; const URL = "/admin/events"; @@ -21,15 +22,6 @@ const StyledButton = styled(Button) <{ $colorOverride: "red" }>` font-weight: bold; `; -const StyledSelect = styled.select` - padding: 0.25rem; - margin: 0.5rem; -`; - -const SelectWrapper = styled.div` - padding: 0.5rem; -`; - const confirmDelete = async (event: Event) => { if (window.confirm(`Delete: ${event.id}: ${event.title_fi}/${event.title_en}; Are you sure?`) === true) { try { @@ -50,41 +42,36 @@ const Renderer: React.FC = () => { const [order, setOrder] = useState("descending"); const [filter, setFilter] = useState("all"); - const [processedEvents, setProcessedEvents] = useState([]); + const eventSort = (a, b) => { + let result = 0; + if (order === "descending") { + if (["start_time", "end_time"].includes(sort)) { + result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); + } else if (sort === "id") { + result = b[sort] - a[sort]; + } + } else if (order === "ascending") { + if (["start_time", "end_time"].includes(sort)) { + result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); + } else if (sort === "id") { + result = a[sort] - b[sort]; + } + } + return result; + }; + + const dateFilter = (a) => { + let result = true; + + if (filter === "upcoming") { + result = new Date(a.end_time).getTime() > Date.now(); + } else if (filter === "past") { + result = new Date(a.end_time).getTime() < Date.now(); + } + return result; + }; useEffect(() => { - const eventSort = (a, b) => { - let result = 0; - if (order === "descending") { - if (["start_time", "end_time"].includes(sort)) { - result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); - } else if (sort === "id") { - result = b[sort] - a[sort]; - } - } else if (order === "ascending") { - if (["start_time", "end_time"].includes(sort)) { - result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); - } else if (sort === "id") { - result = a[sort] - b[sort]; - } - } - return result; - }; - - const checkDate = (a) => { - let result = true; - - if (filter === "upcoming") { - result = new Date(a.end_time).getTime() > Date.now(); - } else if (filter === "past") { - result = new Date(a.end_time).getTime() < Date.now(); - } - return result; - }; - - if (events) { - setProcessedEvents(events.sort(eventSort).filter(checkDate)); - } }, [sort, order, filter, events]); if (error) { @@ -130,19 +117,18 @@ const Renderer: React.FC = () => { - {processedEvents - .map((event) => ( - - {event.title_fi} - {formatRelative(new Date(event.start_time), new Date())} - {formatRelative(new Date(event.end_time), new Date())} - - confirmDelete(event)}> - Delete - - - - ))} + {events.sort(eventSort).filter(dateFilter).map((event) => ( + + {event.title_fi} + {formatRelative(new Date(event.start_time), new Date())} + {formatRelative(new Date(event.end_time), new Date())} + + confirmDelete(event)}> + Delete + + + + ))} diff --git a/src/pages/admin/feed/index.tsx b/src/pages/admin/feed/index.tsx index 07bfc8d..140ba28 100644 --- a/src/pages/admin/feed/index.tsx +++ b/src/pages/admin/feed/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { NextPage } from "next"; import useSWR from "swr"; import { formatRelative } from "date-fns"; @@ -10,6 +10,7 @@ import AddLink from "@components/AddLink"; import Post from "@models/Feed"; import PostApi from "@api/feedApi"; import { fetcher, APIPath, API } from "@api/backend"; +import { SelectWrapper, StyledSelect } from "@components/Select"; const URL = "/admin/feed"; @@ -37,6 +38,21 @@ const Renderer: React.FC = () => { const api: API = { path: APIPath.FEED, authenticated: true }; const { data: feed, error } = useSWR(api, fetcher); + const [order, setOrder] = useState("descending"); + + const feedSort = (a, b) => { + let result = 0; + if (order === "descending") { + result = new Date(b.publish_time).getTime() - new Date(a.publish_time).getTime(); + } else if (order === "ascending") { + result = new Date(a.publish_time).getTime() - new Date(b.publish_time).getTime(); + } + return result; + }; + + useEffect(() => { + }, [order, feed]); + if (error) { console.error(error); return ( @@ -52,29 +68,38 @@ const Renderer: React.FC = () => { } return ( - - - - - - - - - - {feed.map((post) => ( - - - - - +
+ + Order: + setOrder(e.target.value)}> + + + + +
TitleDescriptionPublish time
{post.title_fi}{post.description_fi}{formatRelative(new Date(post.publish_time), new Date())} - confirmDelete(post)}> - Delete - -
+ + + + + - ))} - -
TitleDescriptionPublish time
+ + + {feed.sort(feedSort).map((post) => ( + + {post.title_fi} + {post.description_fi} + {formatRelative(new Date(post.publish_time), new Date())} + + confirmDelete(post)}> + Delete + + + + ))} + + + ); }; diff --git a/src/pages/admin/signups/index.tsx b/src/pages/admin/signups/index.tsx index fc4dc96..703610b 100644 --- a/src/pages/admin/signups/index.tsx +++ b/src/pages/admin/signups/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { NextPage } from "next"; import useSWR from "swr"; import { formatRelative } from "date-fns"; @@ -10,6 +10,7 @@ import AddLink from "@components/AddLink"; import { SignupForm } from "@models/Signup"; import SignupApi from "@api/signupApi"; import { fetcher, APIPath, API } from "@api/backend"; +import { SelectWrapper, StyledSelect } from "@components/Select"; const URL = "/admin/signups"; @@ -37,6 +38,42 @@ const Renderer: React.FC = () => { const api: API = { path: APIPath.SIGNUP_FORMS, authenticated: true }; const { data: signupForms, error } = useSWR(api, fetcher); + const [sort, setSort] = useState("start_time"); + const [order, setOrder] = useState("descending"); + const [filter, setFilter] = useState("all"); + + const signupFormSort = (a, b) => { + let result = 0; + if (order === "descending") { + if (["start_time", "end_time"].includes(sort)) { + result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime(); + } else if (sort === "id") { + result = b[sort] - a[sort]; + } + } else if (order === "ascending") { + if (["start_time", "end_time"].includes(sort)) { + result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime(); + } else if (sort === "id") { + result = a[sort] - b[sort]; + } + } + return result; + }; + + const dateFilter = (a) => { + let result = true; + + if (filter === "upcoming") { + result = new Date(a.end_time).getTime() > Date.now(); + } else if (filter === "past") { + result = new Date(a.end_time).getTime() < Date.now(); + } + return result; + }; + + useEffect(() => { + }, [sort, order, filter, signupForms]); + if (error) { console.error(error); return ( @@ -52,6 +89,25 @@ const Renderer: React.FC = () => { return (
+ + Sort by: + setSort(e.target.value)}> + + + + + Order: + setOrder(e.target.value)}> + + + + Filter: + setFilter(e.target.value)}> + + + + + @@ -63,7 +119,7 @@ const Renderer: React.FC = () => { - {signupForms.map((signupForm) => ( + {signupForms.sort(signupFormSort).filter(dateFilter).map((signupForm) => (
{signupForm.title_fi} {formatRelative(new Date(signupForm.start_time), new Date())}