From a92bb3fad943206deca814a9c60ad8ba239b2959 Mon Sep 17 00:00:00 2001 From: Andrew Smithwick Date: Sat, 13 Apr 2024 12:12:14 -0700 Subject: [PATCH 1/3] Andy/complete cancel pickup events (#220) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added complete and cancel buttons to PickupEvent Edit Page Also fixed text wrap issue Also updated Button component to take in class names * Added buttons to admin pickup home page * Moved complete and edit buttons to single pickup event page Updated button styling for pickup event page Updated common Button component styling to auto expand to content Hide the complete/cancel buttons if the event isn't active * Removed unnecessary CSS * Fixed bug with linkedEventUuid not found edge case If you clicked the select a pickup event toggle but didn't select an event, the API call wouldn't work b/c the linkedEventUuid would be '', not null. Fixed the issue by changing value to be null when linkedEventUuid is '' * Made admin pickup events sort by start date * Removed console.log (For last commit) https://stackoverflow.com/questions/54634515/typescript-sorting-object-by-date * Refactored code to eliminate creation of new variable You have to specify the key name like linkedEventUuid: linkedEventUuid || null the shorthand only works if you pass in a single variable that’s used as the key and value like u did for title * Added checks to make weird dates not break code added a popup instead * Use instanceof instead of === for error check * Added function to parse props for complete and cancel functions --- .../AdminPickupEvent/AdminPickupEventForm.tsx | 42 +++++++++++++------ src/pages/admin/store/pickup/index.tsx | 10 +++-- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx b/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx index d53ba189..5fb61cf0 100644 --- a/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx +++ b/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx @@ -25,6 +25,13 @@ interface IProps { upcomingEvents: PublicEvent[]; } +const parseProps = (isoStart: string, isoEnd: string, rawOrderLimit: string) => { + const start = new Date(isoStart).toISOString(); + const end = new Date(isoEnd).toISOString(); + const orderLimit = parseInt(`${rawOrderLimit}`, 10); + return { start, end, orderLimit }; +}; + export const completePickupEvent = async (uuid: UUID, token: string) => { try { await AdminEventManager.completePickupEvent({ @@ -89,18 +96,16 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }: orderLimit: rawOrderLimit, } = formData; - const start = new Date(isoStart).toISOString(); - const end = new Date(isoEnd).toISOString(); - const orderLimit = parseInt(`${rawOrderLimit}`, 10); - try { + const { start, end, orderLimit } = parseProps(isoStart, isoEnd, `${rawOrderLimit}`); + const uuid = await AdminEventManager.createPickupEvent(token, { title, start, end, description, orderLimit, - linkedEventUuid, + linkedEventUuid: linkedEventUuid || null, }); showToast('Pickup Event created successfully!', '', [ { @@ -110,7 +115,11 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }: ]); router.push(`${config.admin.store.pickup}/${uuid}`); } catch (error) { - reportError('Could not create pickup event', error); + if (error instanceof RangeError) { + reportError('Invalid date, could not create pickup event', error); + } else { + reportError('Could not create pickup event', error); + } } finally { setLoading(false); } @@ -128,13 +137,18 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }: orderLimit: rawOrderLimit, } = formData; - const start = new Date(isoStart).toISOString(); - const end = new Date(isoEnd).toISOString(); - const orderLimit = parseInt(`${rawOrderLimit}`, 10); - try { + const { start, end, orderLimit } = parseProps(isoStart, isoEnd, `${rawOrderLimit}`); + await AdminEventManager.editPickupEvent({ - pickupEvent: { title, start, end, description, orderLimit, linkedEventUuid }, + pickupEvent: { + title, + start, + end, + description, + orderLimit, + linkedEventUuid: linkedEventUuid || null, + }, uuid: defaultData.uuid ?? '', token: token, @@ -153,7 +167,11 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }: }, }); } catch (error) { - reportError('Could not save changes', error); + if (error instanceof RangeError) { + reportError("Invalid date, can't save changes", error); + } else { + reportError('Could not save changes', error); + } } finally { setLoading(false); } diff --git a/src/pages/admin/store/pickup/index.tsx b/src/pages/admin/store/pickup/index.tsx index 5e4b898c..881891e4 100644 --- a/src/pages/admin/store/pickup/index.tsx +++ b/src/pages/admin/store/pickup/index.tsx @@ -52,9 +52,13 @@ const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents }: AdminPickupPa
- {displayPickupEvents.map(pickupEvent => ( - - ))} + {displayPickupEvents + .sort((x, y) => { + return Date.parse(x.start) - Date.parse(y.start); + }) + .map(pickupEvent => ( + + ))}
); From 83c9f84445e764b67c1763b4e2de07c7deeca604 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Sat, 13 Apr 2024 13:19:33 -0700 Subject: [PATCH 2/3] Leaderboard: Fix animation, edit styling of buttons (#227) * Fix animation, edit styling of buttons * Fix heights --- .../LeaderboardRow/style.module.scss | 15 ++-------- .../LeaderboardRow/style.module.scss.d.ts | 1 + src/styles/pages/leaderboard.module.scss | 29 ++++++++++++------- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/components/leaderboard/LeaderboardRow/style.module.scss b/src/components/leaderboard/LeaderboardRow/style.module.scss index 66e2e859..3ec8bc53 100644 --- a/src/components/leaderboard/LeaderboardRow/style.module.scss +++ b/src/components/leaderboard/LeaderboardRow/style.module.scss @@ -23,18 +23,8 @@ } &.flash { - animation: flash 2s; - @keyframes flash { - 0%, - 20%, - 40%, - 60% { - background-color: var(--theme-background); - color: var(--theme-text-on-background-1); - } - - 10%, - 30%, + animation: blinker 2s; + @keyframes blinker { 50% { background-color: var(--theme-primary-2); color: var(--theme-background); @@ -78,7 +68,6 @@ } .rank { - color: var(--theme-text-on-surface-1); opacity: 0.5; text-align: center; diff --git a/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts b/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts index 0fde0f5d..2ef7150d 100644 --- a/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts +++ b/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts @@ -1,4 +1,5 @@ export type Styles = { + blinker: string; flash: string; match: string; name: string; diff --git a/src/styles/pages/leaderboard.module.scss b/src/styles/pages/leaderboard.module.scss index b8d91917..50e3fc34 100644 --- a/src/styles/pages/leaderboard.module.scss +++ b/src/styles/pages/leaderboard.module.scss @@ -8,9 +8,8 @@ max-width: 60rem; .header { - align-items: center; display: flex; - gap: 0 2rem; + gap: 1rem 2rem; @media (max-width: vars.$breakpoint-lg) { display: grid; @@ -22,6 +21,7 @@ } .heading { + align-self: center; font-size: 1.5rem; justify-self: start; letter-spacing: 1%; @@ -32,13 +32,13 @@ .myPosition { align-items: center; background-color: var(--theme-primary-2); - border-radius: 1rem; + border: 1px solid var(--theme-elevated-stroke); + border-radius: 2rem; color: var(--theme-background); display: flex; font-size: 1rem; font-weight: bold; gap: 0.5rem; - height: 2rem; justify-self: start; padding: 0 1rem; @@ -52,13 +52,13 @@ background: none; background-color: var(--theme-elevated-background); border: 1px solid var(--theme-elevated-stroke); - border-radius: 1rem; + border-radius: 2rem; color: inherit; - font-size: 14px; - height: 2rem; + font-size: 1rem; max-width: 18rem; - padding-left: 1.5rem; + padding-left: 1rem; padding-right: 0.5rem; + width: 100%; &::placeholder { @@ -66,8 +66,17 @@ } } - .timeDropdown select { - text-align: right; + .timeDropdown { + background-color: var(--theme-elevated-background); + border: 1px solid var(--theme-elevated-stroke); + border-radius: 2rem; + padding: 0.5rem 1rem; + + > select { + font-size: 1rem; + font-weight: normal; + line-height: 1.25rem; + } } } From 18927aa011426d8768a08b47d46bd25d715b9087 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Sat, 13 Apr 2024 13:33:57 -0700 Subject: [PATCH 3/3] Prettier pagination (#213) * Prettier pagination * New pagination --- public/assets/icons/arrow-left.svg | 2 +- public/assets/icons/arrow-right.svg | 2 +- .../common/PaginationControls/index.tsx | 6 +++--- .../PaginationControls/style.module.scss | 21 +++++++++++++------ 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/public/assets/icons/arrow-left.svg b/public/assets/icons/arrow-left.svg index 52dc05c6..f8ff17a2 100644 --- a/public/assets/icons/arrow-left.svg +++ b/public/assets/icons/arrow-left.svg @@ -1,3 +1,3 @@ - + diff --git a/public/assets/icons/arrow-right.svg b/public/assets/icons/arrow-right.svg index b25599ae..820e9c21 100644 --- a/public/assets/icons/arrow-right.svg +++ b/public/assets/icons/arrow-right.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/common/PaginationControls/index.tsx b/src/components/common/PaginationControls/index.tsx index 3e0ca0bf..ea1ffd05 100644 --- a/src/components/common/PaginationControls/index.tsx +++ b/src/components/common/PaginationControls/index.tsx @@ -1,5 +1,5 @@ -import LeftArrowIcon from '@/public/assets/icons/page-left-icon.svg'; -import RightArrowIcon from '@/public/assets/icons/page-right-icon.svg'; +import LeftArrowIcon from '@/public/assets/icons/arrow-left.svg'; +import RightArrowIcon from '@/public/assets/icons/arrow-right.svg'; import { useEffect, useState } from 'react'; import style from './style.module.scss'; @@ -54,7 +54,7 @@ const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) => } }} /> - of + / {pages}