Time zone support
This commit is contained in:
Ben Grant
parent
ba1697ffc7
commit
76a36ed35f
|
|
@ -3,7 +3,7 @@ const dayjs = require('dayjs');
|
|||
const adjectives = require('../res/adjectives.json');
|
||||
const crabs = require('../res/crabs.json');
|
||||
|
||||
String.prototype.capitalize = () => this.charAt(0).toUpperCase() + this.slice(1);
|
||||
const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
|
||||
|
||||
const generateId = (name) => {
|
||||
const id = name.trim().toLowerCase().replace(/[^A-Za-z0-9 ]/g, '').replace(/\s+/g, '-');
|
||||
|
|
@ -12,7 +12,7 @@ const generateId = (name) => {
|
|||
};
|
||||
|
||||
const generateName = () => {
|
||||
return `${adjectives[Math.floor(Math.random() * adjectives.length)].capitalize()} ${crabs[Math.floor(Math.random() * crabs.length)]} Crab`;
|
||||
return `${capitalize(adjectives[Math.floor(Math.random() * adjectives.length)])} ${crabs[Math.floor(Math.random() * crabs.length)]} Crab`;
|
||||
};
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
|
|
@ -28,9 +28,7 @@ module.exports = async (req, res) => {
|
|||
data: {
|
||||
name: name,
|
||||
created: currentTime,
|
||||
startTime: event.startTime,
|
||||
endTime: event.endTime,
|
||||
dates: event.dates,
|
||||
times: event.times,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -40,9 +38,7 @@ module.exports = async (req, res) => {
|
|||
id: eventId,
|
||||
name: name,
|
||||
created: currentTime,
|
||||
startTime: event.startTime,
|
||||
endTime: event.endTime,
|
||||
dates: event.dates,
|
||||
times: event.times,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@ module.exports = async (req, res) => {
|
|||
let personCount = null;
|
||||
|
||||
try {
|
||||
const query = req.datastore.createQuery(['__Stat_Kind__']);
|
||||
const eventQuery = req.datastore.createQuery(['__Stat_Kind__']).filter('kind_name', 'Event');
|
||||
const personQuery = req.datastore.createQuery(['__Stat_Kind__']).filter('kind_name', 'Person');
|
||||
|
||||
eventCount = (await req.datastore.runQuery(query.filter('kind_name', 'Event')))[0][0].count;
|
||||
personCount = (await req.datastore.runQuery(query.filter('kind_name', 'Person')))[0][0].count;
|
||||
eventCount = (await req.datastore.runQuery(eventQuery))[0][0].count;
|
||||
personCount = (await req.datastore.runQuery(personQuery))[0][0].count;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,7 @@ definitions:
|
|||
type: "string"
|
||||
created:
|
||||
type: "integer"
|
||||
startTime:
|
||||
type: "string"
|
||||
endTime:
|
||||
type: "string"
|
||||
dates:
|
||||
times:
|
||||
type: "array"
|
||||
items:
|
||||
type: "string"
|
||||
|
|
@ -82,11 +78,7 @@ paths:
|
|||
properties:
|
||||
name:
|
||||
type: "string"
|
||||
startTime:
|
||||
type: "integer"
|
||||
endTime:
|
||||
type: "integer"
|
||||
dates:
|
||||
times:
|
||||
type: "array"
|
||||
items:
|
||||
type: "string"
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -7,6 +7,7 @@ import {
|
|||
Wrapper,
|
||||
Container,
|
||||
Date,
|
||||
Times,
|
||||
DateLabel,
|
||||
DayLabel,
|
||||
Spacer,
|
||||
|
|
@ -20,8 +21,9 @@ dayjs.extend(localeData);
|
|||
dayjs.extend(customParseFormat);
|
||||
|
||||
const AvailabilityEditor = ({
|
||||
dates,
|
||||
times,
|
||||
timeLabels,
|
||||
dates,
|
||||
value = [],
|
||||
onChange,
|
||||
...props
|
||||
|
|
@ -45,9 +47,9 @@ const AvailabilityEditor = ({
|
|||
<Wrapper>
|
||||
<Container>
|
||||
<TimeLabels>
|
||||
{!!times.length && times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
|
||||
<TimeSpace key={i} time={time}>
|
||||
{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
|
||||
{!!timeLabels.length && timeLabels.map((label, i) =>
|
||||
<TimeSpace key={i}>
|
||||
{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
|
||||
</TimeSpace>
|
||||
)}
|
||||
</TimeLabels>
|
||||
|
|
@ -56,47 +58,59 @@ const AvailabilityEditor = ({
|
|||
const last = dates.length === x+1 || dayjs(dates[x+1], 'DDMMYYYY').diff(parsedDate, 'day') > 1;
|
||||
return (
|
||||
<Fragment key={x}>
|
||||
<Date className={last ? 'last' : ''}>
|
||||
<Date>
|
||||
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
|
||||
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
|
||||
|
||||
{times.map((time, y) =>
|
||||
<Time
|
||||
key={x+y}
|
||||
time={time}
|
||||
className="time"
|
||||
selected={value.includes(`${time}-${date}`)}
|
||||
selecting={selectingTimes.includes(`${time}-${date}`)}
|
||||
mode={mode}
|
||||
onPointerDown={(e) => {
|
||||
e.preventDefault();
|
||||
startPos.current = {x, y};
|
||||
setMode(value.includes(`${time}-${date}`) ? 'remove' : 'add');
|
||||
setSelectingTimes([`${time}-${date}`]);
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
<Times>
|
||||
{timeLabels.map((timeLabel, y) => {
|
||||
if (!timeLabel.time) return null;
|
||||
if (!times.includes(`${timeLabel.time}-${date}`)) {
|
||||
return (
|
||||
<TimeSpace key={x+y} />
|
||||
);
|
||||
}
|
||||
const time = `${timeLabel.time}-${date}`;
|
||||
|
||||
document.addEventListener('pointerup', () => {
|
||||
if (staticMode.current === 'add') {
|
||||
onChange([...value, ...staticSelectingTimes.current]);
|
||||
} else if (staticMode.current === 'remove') {
|
||||
onChange(value.filter(t => !staticSelectingTimes.current.includes(t)));
|
||||
}
|
||||
setMode(null);
|
||||
}, { once: true });
|
||||
}}
|
||||
onPointerEnter={() => {
|
||||
if (staticMode.current) {
|
||||
let found = [];
|
||||
for (let cy = Math.min(startPos.current.y, y); cy < Math.max(startPos.current.y, y)+1; cy++) {
|
||||
for (let cx = Math.min(startPos.current.x, x); cx < Math.max(startPos.current.x, x)+1; cx++) {
|
||||
found.push({y: cy, x: cx});
|
||||
return (
|
||||
<Time
|
||||
key={x+y}
|
||||
time={time}
|
||||
className="time"
|
||||
selected={value.includes(time)}
|
||||
selecting={selectingTimes.includes(time)}
|
||||
mode={mode}
|
||||
onPointerDown={(e) => {
|
||||
e.preventDefault();
|
||||
startPos.current = {x, y};
|
||||
setMode(value.includes(time) ? 'remove' : 'add');
|
||||
setSelectingTimes([time]);
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
|
||||
document.addEventListener('pointerup', () => {
|
||||
if (staticMode.current === 'add') {
|
||||
onChange([...value, ...staticSelectingTimes.current]);
|
||||
} else if (staticMode.current === 'remove') {
|
||||
onChange(value.filter(t => !staticSelectingTimes.current.includes(t)));
|
||||
}
|
||||
setMode(null);
|
||||
}, { once: true });
|
||||
}}
|
||||
onPointerEnter={() => {
|
||||
if (staticMode.current) {
|
||||
let found = [];
|
||||
for (let cy = Math.min(startPos.current.y, y); cy < Math.max(startPos.current.y, y)+1; cy++) {
|
||||
for (let cx = Math.min(startPos.current.x, x); cx < Math.max(startPos.current.x, x)+1; cx++) {
|
||||
found.push({y: cy, x: cx});
|
||||
}
|
||||
}
|
||||
setSelectingTimes(found.filter(d => timeLabels[d.y].time?.length === 4).map(d => `${timeLabels[d.y].time}-${dates[d.x]}`));
|
||||
}
|
||||
}
|
||||
setSelectingTimes(found.map(d => `${times[d.y]}-${dates[d.x]}`));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Times>
|
||||
</Date>
|
||||
{last && dates.length !== x+1 && (
|
||||
<Spacer />
|
||||
|
|
|
|||
|
|
@ -2,20 +2,23 @@ import styled from '@emotion/styled';
|
|||
|
||||
export const Time = styled.div`
|
||||
height: 10px;
|
||||
border-left: 1px solid ${props => props.theme.primaryDark};
|
||||
margin: 1px;
|
||||
background-color: ${props => props.theme.background};
|
||||
touch-action: none;
|
||||
|
||||
${props => props.time.slice(-2) === '00' && `
|
||||
border-top: 1px solid ${props.theme.primaryDark};
|
||||
${props => props.time.slice(2, 4) !== '00' && `
|
||||
margin-top: -1px;
|
||||
border-top: 2px solid transparent;
|
||||
`}
|
||||
${props => props.time.slice(-2) === '30' && `
|
||||
border-top: 1px dotted ${props.theme.primaryDark};
|
||||
${props => props.time.slice(2, 4) === '30' && `
|
||||
margin-top: -1px;
|
||||
border-top: 2px dotted ${props.theme.text};
|
||||
`}
|
||||
|
||||
${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
|
||||
background-color: ${props.theme.primary};
|
||||
`};
|
||||
${props => props.mode === 'remove' && props.selecting && `
|
||||
background-color: initial;
|
||||
background-color: ${props.theme.background};
|
||||
`};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
Wrapper,
|
||||
Container,
|
||||
Date,
|
||||
Times,
|
||||
DateLabel,
|
||||
DayLabel,
|
||||
Time,
|
||||
|
|
@ -24,8 +25,9 @@ dayjs.extend(localeData);
|
|||
dayjs.extend(customParseFormat);
|
||||
|
||||
const AvailabilityViewer = ({
|
||||
dates,
|
||||
times,
|
||||
timeLabels,
|
||||
dates,
|
||||
people = [],
|
||||
min = 0,
|
||||
max = 0,
|
||||
|
|
@ -37,9 +39,9 @@ const AvailabilityViewer = ({
|
|||
<Wrapper>
|
||||
<Container>
|
||||
<TimeLabels>
|
||||
{!!times.length && times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
|
||||
<TimeSpace key={i} time={time}>
|
||||
{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
|
||||
{!!timeLabels.length && timeLabels.map((label, i) =>
|
||||
<TimeSpace key={i}>
|
||||
{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
|
||||
</TimeSpace>
|
||||
)}
|
||||
</TimeLabels>
|
||||
|
|
@ -48,38 +50,47 @@ const AvailabilityViewer = ({
|
|||
const last = dates.length === i+1 || dayjs(dates[i+1], 'DDMMYYYY').diff(parsedDate, 'day') > 1;
|
||||
return (
|
||||
<Fragment key={i}>
|
||||
<Date className={last ? 'last' : ''}>
|
||||
<Date>
|
||||
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
|
||||
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
|
||||
|
||||
{times.map((time, i) => {
|
||||
const peopleHere = people.filter(person => person.availability.includes(`${time}-${date}`)).map(person => person.name);
|
||||
<Times>
|
||||
{timeLabels.map((timeLabel, i) => {
|
||||
if (!timeLabel.time) return null;
|
||||
if (!times.includes(`${timeLabel.time}-${date}`)) {
|
||||
return (
|
||||
<TimeSpace key={i} />
|
||||
);
|
||||
}
|
||||
const time = `${timeLabel.time}-${date}`;
|
||||
const peopleHere = people.filter(person => person.availability.includes(time)).map(person => person.name);
|
||||
|
||||
return (
|
||||
<Time
|
||||
key={i}
|
||||
time={time}
|
||||
className="time"
|
||||
peopleCount={peopleHere.length}
|
||||
aria-label={peopleHere.join(', ')}
|
||||
maxPeople={max}
|
||||
minPeople={min}
|
||||
onMouseEnter={(e) => {
|
||||
const cellBox = e.currentTarget.getBoundingClientRect();
|
||||
setTooltip({
|
||||
x: Math.round(cellBox.x + cellBox.width/2),
|
||||
y: Math.round(cellBox.y + cellBox.height)+6,
|
||||
available: `${peopleHere.length} / ${people.length} available`,
|
||||
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(-2)).format('h:mma ddd, D MMM YYYY'),
|
||||
people: peopleHere.join(', '),
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setTooltip(null);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<Time
|
||||
key={i}
|
||||
time={time}
|
||||
className="time"
|
||||
peopleCount={peopleHere.length}
|
||||
aria-label={peopleHere.join(', ')}
|
||||
maxPeople={max}
|
||||
minPeople={min}
|
||||
onMouseEnter={(e) => {
|
||||
const cellBox = e.currentTarget.getBoundingClientRect();
|
||||
setTooltip({
|
||||
x: Math.round(cellBox.x + cellBox.width/2),
|
||||
y: Math.round(cellBox.y + cellBox.height)+6,
|
||||
available: `${peopleHere.length} / ${people.length} available`,
|
||||
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format('h:mma ddd, D MMM YYYY'),
|
||||
people: peopleHere.join(', '),
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setTooltip(null);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Times>
|
||||
</Date>
|
||||
{last && dates.length !== i+1 && (
|
||||
<Spacer />
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export const Container = styled.div`
|
|||
box-sizing: border-box;
|
||||
min-width: 100%;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 0 calc(calc(100% - 600px) / 2);
|
||||
|
||||
@media (max-width: 660px) {
|
||||
|
|
@ -24,13 +25,12 @@ export const Date = styled.div`
|
|||
width: 60px;
|
||||
min-width: 60px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
& .time:last-of-type {
|
||||
border-bottom: 1px solid ${props => props.theme.primaryDark};
|
||||
}
|
||||
&.last > .time {
|
||||
border-right: 1px solid ${props => props.theme.primaryDark};
|
||||
}
|
||||
export const Times = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${props => props.theme.text};
|
||||
`;
|
||||
|
||||
export const DateLabel = styled.label`
|
||||
|
|
@ -49,18 +49,22 @@ export const DayLabel = styled.label`
|
|||
|
||||
export const Time = styled.div`
|
||||
height: 10px;
|
||||
border-left: 1px solid ${props => props.theme.primaryDark};
|
||||
margin: 1px;
|
||||
background-color: ${props => props.theme.background};
|
||||
|
||||
${props => props.time.slice(-2) === '00' && `
|
||||
border-top: 1px solid ${props.theme.primaryDark};
|
||||
${props => props.time.slice(2, 4) !== '00' && `
|
||||
margin-top: -1px;
|
||||
border-top: 2px solid transparent;
|
||||
`}
|
||||
${props => props.time.slice(-2) === '30' && `
|
||||
border-top: 1px dotted ${props.theme.primaryDark};
|
||||
${props => props.time.slice(2, 4) === '30' && `
|
||||
margin-top: -1px;
|
||||
border-top: 2px dotted ${props.theme.text};
|
||||
`}
|
||||
|
||||
background-color: ${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`};
|
||||
count: ${props => props.peopleCount};
|
||||
max: ${props => props.maxPeople};
|
||||
background-image: linear-gradient(
|
||||
${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`},
|
||||
${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`}
|
||||
);
|
||||
`;
|
||||
|
||||
export const Spacer = styled.div`
|
||||
|
|
@ -110,13 +114,8 @@ export const TimeLabels = styled.div`
|
|||
export const TimeSpace = styled.div`
|
||||
height: 10px;
|
||||
position: relative;
|
||||
|
||||
${props => props.time.slice(-2) === '00' && `
|
||||
border-top: 1px solid transparent;
|
||||
`}
|
||||
${props => props.time.slice(-2) === '30' && `
|
||||
border-top: 1px dotted transparent;
|
||||
`}
|
||||
border-top: 2px solid transparent;
|
||||
background: ${props => props.theme.background};
|
||||
`;
|
||||
|
||||
export const TimeLabel = styled.label`
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@ export const Date = styled.div`
|
|||
${props => props.isToday && `
|
||||
font-weight: 900;
|
||||
color: ${props.theme.primaryDark};
|
||||
text-decoration: underline;
|
||||
`}
|
||||
${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
|
||||
color: ${props.otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'};
|
||||
|
|
|
|||
|
|
@ -81,12 +81,13 @@ const TimeRangeField = ({
|
|||
id={id}
|
||||
type="hidden"
|
||||
ref={register}
|
||||
value={JSON.stringify(start > end ? {start: end, end: start} : {start, end})}
|
||||
value={JSON.stringify({start, end})}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
<Range ref={rangeRef}>
|
||||
<Selected start={start > end ? end : start} end={start > end ? start : end} />
|
||||
<Selected start={start} end={start > end ? 24 : end} />
|
||||
{start > end && <Selected start={start > end ? 0 : start} end={end} />}
|
||||
<Handle
|
||||
value={start}
|
||||
label={times[start]}
|
||||
|
|
|
|||
|
|
@ -70,4 +70,5 @@ export const Selected = styled.div`
|
|||
right: calc(100% - ${props => props.end * 4.1666666666666666}%);
|
||||
top: 0;
|
||||
background-color: ${props => props.theme.primary};
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import utc from 'dayjs/plugin/utc';
|
||||
import timezone from 'dayjs/plugin/timezone';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
import {
|
||||
Center,
|
||||
|
|
@ -33,6 +38,10 @@ import api from 'services';
|
|||
import logo from 'res/logo.svg';
|
||||
import timezones from 'res/timezones.json';
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const Event = (props) => {
|
||||
const { register, handleSubmit } = useForm();
|
||||
const { id } = props.match.params;
|
||||
|
|
@ -46,37 +55,19 @@ const Event = (props) => {
|
|||
const [event, setEvent] = useState(null);
|
||||
const [people, setPeople] = useState([]);
|
||||
|
||||
const [times, setTimes] = useState([]);
|
||||
const [timeLabels, setTimeLabels] = useState([]);
|
||||
const [dates, setDates] = useState([]);
|
||||
const [min, setMin] = useState(0);
|
||||
const [max, setMax] = useState(0);
|
||||
|
||||
const fetchPeople = useCallback(async () => {
|
||||
try {
|
||||
const response = await api.get(`/event/${id}/people`);
|
||||
setPeople(response.data.people);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvent = async () => {
|
||||
try {
|
||||
const response = await api.get(`/event/${id}`);
|
||||
let times = [];
|
||||
for (let i = response.data.startTime; i < response.data.endTime; i++) {
|
||||
let hour = `${i}`.padStart(2, '0');
|
||||
times.push(
|
||||
`${hour}00`,
|
||||
`${hour}15`,
|
||||
`${hour}30`,
|
||||
`${hour}45`,
|
||||
);
|
||||
}
|
||||
|
||||
setEvent({
|
||||
...response.data,
|
||||
times,
|
||||
});
|
||||
setEvent(response.data);
|
||||
document.title = `${response.data.name} | Crab Fit`;
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -85,28 +76,49 @@ const Event = (props) => {
|
|||
};
|
||||
|
||||
fetchEvent();
|
||||
fetchPeople();
|
||||
}, [fetchPeople, id]);
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPeople = async () => {
|
||||
try {
|
||||
const response = await api.get(`/event/${id}/people`);
|
||||
const adjustedPeople = response.data.people.map(person => ({
|
||||
...person,
|
||||
availability: person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')),
|
||||
}));
|
||||
setPeople(adjustedPeople);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
if (tab === 'group') {
|
||||
fetchPeople();
|
||||
}
|
||||
}, [fetchPeople, tab]);
|
||||
}, [tab, id, timezone]);
|
||||
|
||||
// Convert to timezone and expand minute segments
|
||||
useEffect(() => {
|
||||
if (event) {
|
||||
setTimes(event.times.reduce(
|
||||
(allTimes, time) => {
|
||||
const date = dayjs(time, 'HHmm-DDMMYYYY').utc(true).tz(timezone);
|
||||
return [
|
||||
...allTimes,
|
||||
date.minute(0).format('HHmm-DDMMYYYY'),
|
||||
date.minute(15).format('HHmm-DDMMYYYY'),
|
||||
date.minute(30).format('HHmm-DDMMYYYY'),
|
||||
date.minute(45).format('HHmm-DDMMYYYY'),
|
||||
];
|
||||
},
|
||||
[]
|
||||
).sort((a, b) => dayjs(a, 'HHmm-DDMMYYYY').diff(dayjs(b, 'HHmm-DDMMYYYY'))));
|
||||
}
|
||||
}, [event, timezone]);
|
||||
|
||||
useEffect(() => {
|
||||
if (event && !!people.length) {
|
||||
const datetimes = event.dates.reduce(
|
||||
(dates, date) => {
|
||||
let times = [];
|
||||
event.times.forEach(time => {
|
||||
times.push(`${time}-${date}`);
|
||||
});
|
||||
return [...dates, ...times];
|
||||
}
|
||||
, []
|
||||
);
|
||||
setMin(datetimes.reduce((min, time) => {
|
||||
if (!!times.length && !!people.length) {
|
||||
setMin(times.reduce((min, time) => {
|
||||
let total = people.reduce(
|
||||
(total, person) => person.availability.includes(time) ? total+1 : total,
|
||||
0
|
||||
|
|
@ -115,7 +127,7 @@ const Event = (props) => {
|
|||
},
|
||||
Infinity
|
||||
));
|
||||
setMax(datetimes.reduce((max, time) => {
|
||||
setMax(times.reduce((max, time) => {
|
||||
let total = people.reduce(
|
||||
(total, person) => person.availability.includes(time) ? total+1 : total,
|
||||
0
|
||||
|
|
@ -125,7 +137,63 @@ const Event = (props) => {
|
|||
-Infinity
|
||||
));
|
||||
}
|
||||
}, [event, people]);
|
||||
}, [times, people]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!!times.length) {
|
||||
setTimeLabels(times.reduce((labels, datetime) => {
|
||||
const time = datetime.substring(0, 4);
|
||||
if (labels.includes(time)) return labels;
|
||||
return [...labels, time];
|
||||
}, [])
|
||||
.sort((a, b) => parseInt(a) - parseInt(b))
|
||||
.reduce((labels, time, i, allTimes) => {
|
||||
if (time.substring(2) === '30') return [...labels, { label: '', time }];
|
||||
if (allTimes.length - 1 === i) return [
|
||||
...labels,
|
||||
{ label: '', time },
|
||||
{ label: dayjs(time, 'HHmm').add(1, 'hour').format('h A'), time: null }
|
||||
];
|
||||
if (allTimes.length - 1 > i && parseInt(allTimes[i+1].substring(0, 2))-1 > parseInt(time.substring(0, 2))) return [
|
||||
...labels,
|
||||
{ label: '', time },
|
||||
{ label: dayjs(time, 'HHmm').add(1, 'hour').format('h A'), time: 'space' },
|
||||
{ label: '', time: 'space' },
|
||||
{ label: '', time: 'space' },
|
||||
];
|
||||
if (time.substring(2) !== '00') return [...labels, { label: '', time }];
|
||||
return [...labels, { label: dayjs(time, 'HHmm').format('h A'), time }];
|
||||
}, []));
|
||||
|
||||
setDates(times.reduce((allDates, time) => {
|
||||
if (time.substring(2, 4) !== '00') return allDates;
|
||||
const date = time.substring(5);
|
||||
if (allDates.includes(date)) return allDates;
|
||||
return [...allDates, date];
|
||||
}, []));
|
||||
}
|
||||
}, [times]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
try {
|
||||
const response = await api.post(`/event/${id}/people/${user.name}`, { person: { password } });
|
||||
const adjustedUser = {
|
||||
...response.data,
|
||||
availability: response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')),
|
||||
};
|
||||
setUser(adjustedUser);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
if (user) {
|
||||
console.log('FETCHING', timezone);
|
||||
fetchUser();
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [timezone]);
|
||||
|
||||
const onSubmit = async data => {
|
||||
setIsLoginLoading(true);
|
||||
|
|
@ -137,7 +205,11 @@ const Event = (props) => {
|
|||
},
|
||||
});
|
||||
setPassword(data.password);
|
||||
setUser(response.data);
|
||||
const adjustedUser = {
|
||||
...response.data,
|
||||
availability: response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')),
|
||||
};
|
||||
setUser(adjustedUser);
|
||||
setTab('you');
|
||||
} catch (e) {
|
||||
if (e.status === 401) {
|
||||
|
|
@ -178,10 +250,10 @@ const Event = (props) => {
|
|||
</Link>
|
||||
|
||||
<EventName isLoading={isLoading}>{event?.name}</EventName>
|
||||
<ShareInfo isLoading={isLoading}>{!!event?.name && `https://crab.fit/${id}`}</ShareInfo>
|
||||
<ShareInfo>https://crab.fit/{id}</ShareInfo>
|
||||
<ShareInfo isLoading={isLoading}>
|
||||
{!!event?.name &&
|
||||
<>Copy the link to this page, or share via <a href={`mailto:?subject=${encodeURIComponent(`Scheduling ${event?.name}`)}&body=${encodeURIComponent(`Visit this link to enter your availabilities: https://crab.fit/${id}`)}`}>Email</a>.</>
|
||||
<>Copy the link to this page, or share via <a href={`mailto:?subject=${encodeURIComponent(`Scheduling ${event?.name}`)}&body=${encodeURIComponent(`Visit this link to enter your availabilities: https://crab.fit/${id}`)}`}>email</a>.</>
|
||||
}
|
||||
</ShareInfo>
|
||||
</StyledMain>
|
||||
|
|
@ -230,7 +302,7 @@ const Event = (props) => {
|
|||
id="timezone"
|
||||
inline
|
||||
value={timezone}
|
||||
onChange={value => setTimezone(value)}
|
||||
onChange={event => setTimezone(event.currentTarget.value)}
|
||||
options={timezones}
|
||||
/>
|
||||
</StyledMain>
|
||||
|
|
@ -272,8 +344,9 @@ const Event = (props) => {
|
|||
<Center>Hover or tap the calendar below to see who is available</Center>
|
||||
</StyledMain>
|
||||
<AvailabilityViewer
|
||||
dates={event?.dates ?? []}
|
||||
times={event?.times ?? []}
|
||||
times={times}
|
||||
timeLabels={timeLabels}
|
||||
dates={dates}
|
||||
people={people.filter(p => p.availability.length > 0)}
|
||||
min={min}
|
||||
max={max}
|
||||
|
|
@ -285,20 +358,23 @@ const Event = (props) => {
|
|||
<Center>Click and drag the calendar below to set your availabilities</Center>
|
||||
</StyledMain>
|
||||
<AvailabilityEditor
|
||||
dates={event?.dates ?? []}
|
||||
times={event?.times ?? []}
|
||||
times={times}
|
||||
timeLabels={timeLabels}
|
||||
dates={dates}
|
||||
value={user.availability}
|
||||
onChange={async availability => {
|
||||
const oldAvailability = [...user.availability];
|
||||
const utcAvailability = availability.map(date => dayjs.tz(date, 'HHmm-DDMMYYYY', timezone).utc().format('HHmm-DDMMYYYY'));
|
||||
setUser({ ...user, availability });
|
||||
const response = await api.patch(`/event/${id}/people/${user.name}`, {
|
||||
person: {
|
||||
password,
|
||||
availability,
|
||||
},
|
||||
});
|
||||
if (response.status !== 200) {
|
||||
console.log(response);
|
||||
try {
|
||||
await api.patch(`/event/${id}/people/${user.name}`, {
|
||||
person: {
|
||||
password,
|
||||
availability: utcAvailability,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
setUser({ ...user, oldAvailability });
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export const EventName = styled.h1`
|
|||
content: '';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
background-color: ${props.theme.loading};
|
||||
border-radius: 3px;
|
||||
|
|
@ -83,7 +83,7 @@ export const ShareInfo = styled.p`
|
|||
content: '';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 500px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
background-color: ${props.theme.loading};
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
|
|||
import dayjs from 'dayjs';
|
||||
import utc from 'dayjs/plugin/utc';
|
||||
import timezone from 'dayjs/plugin/timezone';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
import {
|
||||
TextField,
|
||||
|
|
@ -40,6 +41,7 @@ import timezones from 'res/timezones.json';
|
|||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const Home = () => {
|
||||
const { register, handleSubmit } = useForm({
|
||||
|
|
@ -73,18 +75,49 @@ const Home = () => {
|
|||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const times = JSON.parse(data.times);
|
||||
const { start, end } = JSON.parse(data.times);
|
||||
const dates = JSON.parse(data.dates);
|
||||
|
||||
const start = dayjs().tz(data.timezone).hour(times.start);
|
||||
const end = dayjs().tz(data.timezone).hour(times.end);
|
||||
if (dates.length === 0) {
|
||||
return setError(`You haven't selected any dates!`);
|
||||
}
|
||||
if (start === end) {
|
||||
return setError(`The start and end times can't be the same`);
|
||||
}
|
||||
|
||||
let times = dates.reduce((times, date) => {
|
||||
let day = [];
|
||||
for (let i = start; i < (start > end ? 24 : end); i++) {
|
||||
day.push(
|
||||
dayjs.tz(date, 'DDMMYYYY', data.timezone)
|
||||
.hour(i)
|
||||
.minute(0)
|
||||
.utc()
|
||||
.format('HHmm-DDMMYYYY')
|
||||
);
|
||||
}
|
||||
if (start > end) {
|
||||
for (let i = 0; i < end; i++) {
|
||||
day.push(
|
||||
dayjs.tz(date, 'DDMMYYYY', data.timezone)
|
||||
.hour(i)
|
||||
.minute(0)
|
||||
.utc()
|
||||
.format('HHmm-DDMMYYYY')
|
||||
);
|
||||
}
|
||||
}
|
||||
return [...times, ...day];
|
||||
}, []);
|
||||
|
||||
if (times.length === 0) {
|
||||
return setError(`You don't have any time selected`);
|
||||
}
|
||||
|
||||
const response = await api.post('/event', {
|
||||
event: {
|
||||
name: data.name,
|
||||
startTime: start.utc().hour(),
|
||||
endTime: end.utc().hour(),
|
||||
dates: dates,
|
||||
times: times,
|
||||
},
|
||||
});
|
||||
push(`/${response.data.id}`);
|
||||
|
|
@ -164,7 +197,7 @@ const Home = () => {
|
|||
<StatLabel>Events created</StatLabel>
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatNumber>{stats.peopleCount ?? '10+'}</StatNumber>
|
||||
<StatNumber>{stats.personCount ?? '10+'}</StatNumber>
|
||||
<StatLabel>Availabilities entered</StatLabel>
|
||||
</Stat>
|
||||
</Stats>
|
||||
|
|
|
|||
Loading…
Reference in a new issue