From 30d50b0b0ac5beae638b55b302c2a45757c4f702 Mon Sep 17 00:00:00 2001 From: Benji Grant Date: Fri, 9 Jun 2023 01:58:02 +1000 Subject: [PATCH] Optimise editor component --- frontend/hooks/usePalette.ts | 9 ++- .../AvailabilityEditor/AvailabilityEditor.tsx | 73 ++++++++----------- .../AvailabilityViewer/AvailabilityViewer.tsx | 8 +- frontend/src/utils/calculateTable.ts | 2 +- 4 files changed, 37 insertions(+), 55 deletions(-) diff --git a/frontend/hooks/usePalette.ts b/frontend/hooks/usePalette.ts index 93c7621..54ffc69 100644 --- a/frontend/hooks/usePalette.ts +++ b/frontend/hooks/usePalette.ts @@ -1,13 +1,14 @@ +import { useMemo } from 'react' import { createPalette } from 'hue-map' import { useStore } from '/src/stores' import useSettingsStore from '/src/stores/settingsStore' -export const usePalette = (min: number, max: number) => { +export const usePalette = (steps: number) => { const colormap = useStore(useSettingsStore, state => state.colormap) - return createPalette({ + return useMemo(() => createPalette({ map: (colormap === undefined || colormap === 'crabfit') ? [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]] : colormap, - steps: Math.max((max - min) + 1, 2), - }).format() + steps, + }).format(), [steps]) } diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index 5276a41..d649779 100644 --- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -1,12 +1,12 @@ import { Fragment, useCallback, useMemo, useRef, useState } from 'react' -import { createPalette } from 'hue-map' import Content from '/src/components/Content/Content' import { useTranslation } from '/src/i18n/client' import { useStore } from '/src/stores' import useSettingsStore from '/src/stores/settingsStore' -import { calculateColumns, calculateRows, convertTimesToDates, makeClass, serializeTime } from '/src/utils' +import { calculateTable, makeClass } from '/src/utils' +import { usePalette } from '/hooks/usePalette' import styles from '../AvailabilityViewer/AvailabilityViewer.module.scss' interface AvailabilityEditorProps { @@ -24,14 +24,12 @@ const AvailabilityEditor = ({ }: AvailabilityEditorProps) => { const { t, i18n } = useTranslation('event') - const timeFormat = useStore(useSettingsStore, state => state.timeFormat) - const colormap = useStore(useSettingsStore, state => state.colormap) + const timeFormat = useStore(useSettingsStore, state => state.timeFormat) ?? '12h' - // Calculate rows and columns - const [dates, rows, columns] = useMemo(() => { - const dates = convertTimesToDates(times, timezone) - return [dates, calculateRows(dates), calculateColumns(dates)] - }, [times, timezone]) + // Calculate table + const { rows, columns } = useMemo(() => + calculateTable(times, i18n.language, timeFormat, timezone), + [times, i18n.language, timeFormat, timezone]) // Ref and state required to rerender but also access static version in callbacks const selectingRef = useRef([]) @@ -44,13 +42,8 @@ const AvailabilityEditor = ({ const startPos = useRef({ x: 0, y: 0 }) const mode = useRef<'add' | 'remove'>() - // Is specific dates or just days of the week - const isSpecificDates = useMemo(() => times[0].length === 13, [times]) - - const palette = useMemo(() => createPalette({ - map: colormap !== 'crabfit' ? colormap : [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]], - steps: 2, - }).format(), [colormap]) + // Create the colour palette + const palette = usePalette(2) return <> {t('you.info')} @@ -89,8 +82,8 @@ const AvailabilityEditor = ({
{rows.map((row, i) =>
- {row && row.minute === 0 &&
)} @@ -98,43 +91,39 @@ const AvailabilityEditor = ({ {columns.map((column, x) => {column ?
- {isSpecificDates && } - + {column.header.dateLabel && } +
- {rows.map((row, y) => { - if (y === rows.length - 1) return null + {column.cells.map((cell, y) => { + if (y === column.cells.length - 1) return null - if (!row || rows.at(y + 1) === null || dates.every(d => !d.equals(column.toZonedDateTime({ timeZone: timezone, plainTime: row })))) { - return
('greyed_times')} - /> - } - - const date = column.toZonedDateTime({ timeZone: timezone, plainTime: row }) + if (!cell) return
('greyed_times')} + /> return
{ e.preventDefault() startPos.current = { x, y } - mode.current = value.includes(serializeTime(date, isSpecificDates)) ? 'remove' : 'add' - setSelecting([serializeTime(date, isSpecificDates)]) + mode.current = value.includes(cell.serialized) ? 'remove' : 'add' + setSelecting([cell.serialized]) e.currentTarget.releasePointerCapture(e.pointerId) document.addEventListener('pointerup', () => { @@ -155,13 +144,9 @@ const AvailabilityEditor = ({ } } setSelecting(found.flatMap(d => { - const [time, date] = [rows[d.y], columns[d.x]] - if (time !== null && date !== null) { - const str = serializeTime(date.toZonedDateTime({ timeZone: timezone, plainTime: time }), isSpecificDates) - if (times.includes(str)) { - return [str] - } - return [] + const serialized = columns[d.x]?.cells[d.y]?.serialized + if (serialized && times.includes(serialized)) { + return [serialized] } return [] })) diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index 7a3698e..3a7e5f9 100644 --- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -49,14 +49,11 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps [times, filteredPeople, people]) // Create the colour palette - const palette = usePalette(min, max) - - // Is specific dates or just days of the week - const isSpecificDates = useMemo(() => times[0].length === 13, [times]) + const palette = usePalette(Math.max((max - min) + 1, 2)) const heatmap = useMemo(() => columns.map((column, x) => {column ?
- {isSpecificDates && } + {column.header.dateLabel && }
:
} ), [ availabilities, - isSpecificDates, columns, highlight, max, diff --git a/frontend/src/utils/calculateTable.ts b/frontend/src/utils/calculateTable.ts index 30ed47d..e710330 100644 --- a/frontend/src/utils/calculateTable.ts +++ b/frontend/src/utils/calculateTable.ts @@ -28,7 +28,7 @@ export const calculateTable = ( columns: columns.map(column => column ? { header: { - dateLabel: column.toLocaleString(locale, { month: 'short', day: 'numeric' }), + dateLabel: isSpecificDates ? column.toLocaleString(locale, { month: 'short', day: 'numeric' }) : undefined, weekdayLabel: column.toLocaleString(locale, { weekday: 'short' }), string: column.toString(), },