From 3fc96ca3d46f84734e94781dd566397cf36fc687 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 30 Jun 2021 10:18:27 -0400 Subject: [PATCH] Add days of week picker and binary encoding --- src/components/NewUI/Event.tsx | 26 ++++---- src/components/NewUI/EventCreator.tsx | 85 ++++++++++++++++++++++++++- src/components/NewUI/bits.ts | 23 ++++++++ src/components/NewUI/colors.ts | 2 + 4 files changed, 122 insertions(+), 14 deletions(-) create mode 100644 src/components/NewUI/bits.ts create mode 100644 src/components/NewUI/colors.ts diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx index b6804cc..e5c632a 100644 --- a/src/components/NewUI/Event.tsx +++ b/src/components/NewUI/Event.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { green, lightgrey } from './colors'; import latlongdist, { R_miles } from './latlongdist'; import UIButton from './UIButton'; import UIPlacesAutocomplete from './UIPlacesAutocomplete'; @@ -8,9 +9,6 @@ import usePlace from './usePlace'; import useThrottle from './useThrottle'; import useToggle from './useToggle'; -const green = '#60f760'; -const lightgrey = '#e0e0e0'; - export type IEvent = { id: number; name: string; @@ -18,6 +16,8 @@ export type IEvent = { formattedAddress: string; startTime: string; endTime: string; + latitude: number; + longitude: number; }; function formatStartAndEndTime( @@ -211,8 +211,8 @@ function People({ event, placeId }: { event: IEvent; placeId: string }) { // eslint-disable-next-line const [people, setPeople] = useState(dummyPeopleData); const placeDetails = usePlace(placeId); - const myLatitude = 10; - const myLongitude = 10; + const locationLongitude = event.latitude; + const locationLatitude = event.longitude; return (
@@ -220,28 +220,28 @@ function People({ event, placeId }: { event: IEvent; placeId: string }) { {people.map(({ name, latitude, longitude, id }) => { let extraDistance = null; if (placeDetails != null) { - const locationLatitude = placeDetails.latitude; - const locationLongitude = placeDetails.longitude; + const myLatitude = placeDetails.latitude; + const myLongitude = placeDetails.longitude; const meToThem = latlongdist( latitude, longitude, - myLatitude, - myLongitude, + locationLongitude, + locationLatitude, R_miles ); const themToLocation = latlongdist( latitude, longitude, - locationLatitude, - locationLongitude, + myLatitude, + myLongitude, R_miles ); const totalWithThem = meToThem + themToLocation; const totalWithoutThem = latlongdist( + locationLongitude, + locationLatitude, myLatitude, myLongitude, - locationLatitude, - locationLongitude, R_miles ); extraDistance = totalWithThem - totalWithoutThem; diff --git a/src/components/NewUI/EventCreator.tsx b/src/components/NewUI/EventCreator.tsx index 6a2f6af..080c6eb 100644 --- a/src/components/NewUI/EventCreator.tsx +++ b/src/components/NewUI/EventCreator.tsx @@ -1,14 +1,81 @@ -import { useCallback, useState } from 'react'; +import { Dispatch, SetStateAction, useCallback, useState } from 'react'; import { post } from './api'; +import { toggleBit } from './bits'; +import { green, lightgrey } from './colors'; import { IGroup } from './Group'; import UIButton from './UIButton'; import UIDatetimeInput from './UIDatetimeInput'; import UIPlacesAutocomplete from './UIPlacesAutocomplete'; import UISecondaryBox from './UISecondaryBox'; import UITextInput from './UITextInput'; +import useToggle from './useToggle'; const noop = () => {}; +const DAY_NAMES = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', +]; + +function DaysOfWeekSelector({ + daysOfWeek, + update, +}: { + daysOfWeek: number; + update: Dispatch>; +}) { + const toggleDayOfWeek = useCallback( + function (idx: 1 | 2 | 3 | 4 | 5 | 6 | 7) { + update((daysOfWeek) => toggleBit(daysOfWeek, idx)); + }, + [update] + ); + + return ( +
+ {DAY_NAMES.map((name, idx) => { + const mask = 0b1000_0000 >> (idx + 1); + const active = (daysOfWeek & mask) !== 0; + return ( +
+ // @ts-ignore + toggleDayOfWeek(idx + 1) + } + > + {name.charAt(0)} +
+ ); + })} +
+ ); +} + export default function EventCreator({ group }: { group: IGroup }) { const [name, setName] = useState(''); const [startTime, setStartTime] = useState(null); @@ -17,6 +84,9 @@ export default function EventCreator({ group }: { group: IGroup }) { const [creating, setCreating] = useState(false); const [createdEventId, setCreatedEventId] = useState(-1); + const [recurring, toggleRecurring] = useToggle(false); + const [daysOfWeek, setDaysOfWeek] = useState(0); + const buttonEnabled = name.length > 0 && startTime != null && @@ -63,6 +133,19 @@ export default function EventCreator({ group }: { group: IGroup }) { setPlaceId(placeId); }} /> + + Recurring event + + {recurring && ( + + )} {createdEventId === -1 ? ( 7 || !isFinite(idx)) { + throw new Error('invalid idx. idx must be from 1 - 7.'); + } + + const mask = 0b1000_0000 >> idx; + + if (active) { + return n | mask; + } else { + return n & ~mask; + } +} + +export function toggleBit(n: number, idx: number) { + if (idx < 1 || idx > 7 || !isFinite(idx)) { + throw new Error('invalid idx. idx must be from 1 - 7.'); + } + + const mask = 0b1000_0000 >> idx; + + return n ^ mask; +} diff --git a/src/components/NewUI/colors.ts b/src/components/NewUI/colors.ts new file mode 100644 index 0000000..c69ddb8 --- /dev/null +++ b/src/components/NewUI/colors.ts @@ -0,0 +1,2 @@ +export const green = '#60f760'; +export const lightgrey = '#e0e0e0';