Hero Image
-Event Details
@@ -27,14 +27,15 @@ export const ImageInput = ({ image, handleInput }: ImageInputInterface) => {
- {src && name && (
-
-
diff --git a/src/components/EventEditor/index.tsx b/src/components/EventEditor/index.tsx
index 420dcfb..59b9d24 100644
--- a/src/components/EventEditor/index.tsx
+++ b/src/components/EventEditor/index.tsx
@@ -1,40 +1,44 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { actions } from '../../lib/redux/reducers/eventEditor';
import { imageToDataURL, dataURLtoFile } from '../../lib/utils';
-import { reducer, init } from './reducer';
+import { initDB, putFile, getItem } from '../../lib/utils/indexDB';
import { EditorForm } from './EditorForm';
import { ToolBar } from './ToolBar';
import { DialogModal } from '../Common/DialogModal';
import { EventInterface } from '../../types';
+import { RootState } from '../../lib/redux/reducers';
+
+type State = RootState & { event: EventInterface };
const EventEditor = () => {
- const [eventState, dispatch] = useReducer(reducer, {}, init);
+ const dispatch = useDispatch();
+ const eventState = useSelector((state: State) => state.event);
+ const [isLoaded, setIsLoaded] = useState(false);
// const [createEvent] = useCreateEventMutation({
// onError: (error) => console.log(error),
// });
const [discardWarning, setDiscardWarning] = useState(false);
-
useEffect(() => {
- const initFromLocalStorage = () => {
+ const initFromLocalStorage = async () => {
+ await initDB();
const data = localStorage.getItem('eventState');
if (data) {
const localState: EventInterface = JSON.parse(data);
- const heroImgLocal = localState.heroImg;
- if (heroImgLocal.src && heroImgLocal.name) {
- const heroImgFile = dataURLtoFile(
- heroImgLocal.src,
- heroImgLocal.name
+
+ const heroImgLocalFile: File = await getItem('heroImg');
+ if (heroImgLocalFile) {
+ const heroImgDataURL = await imageToDataURL(
+ heroImgLocalFile
);
- if (heroImgFile) heroImgLocal.file = heroImgFile;
+ localState.heroImg = heroImgDataURL;
}
- const initState = {
- ...localState,
- heroImg: { ...heroImgLocal },
- };
- dispatch({ type: 'init', payload: initState });
+ dispatch(actions.updateEvent(localState));
}
};
initFromLocalStorage();
window.addEventListener('storage', initFromLocalStorage, true);
+ setIsLoaded(true);
return () => {
setDiscardWarning(false);
window.removeEventListener('storage', initFromLocalStorage, true);
@@ -42,7 +46,12 @@ const EventEditor = () => {
}, []);
useEffect(() => {
- localStorage.setItem('eventState', JSON.stringify(eventState));
+ if (isLoaded) {
+ const { heroImg } = eventState;
+ const { dataURL, ...rest } = heroImg;
+ const localState = { ...eventState, heroImg: rest };
+ localStorage.setItem('eventState', JSON.stringify(localState));
+ }
}, [eventState]);
const handleImageInput = async ({
@@ -53,37 +62,49 @@ const EventEditor = () => {
const { files } = target;
if (files) {
try {
- const image = await imageToDataURL(files);
- dispatch({
- type: 'updateHeroImg',
- payload: image,
- });
+ await putFile('heroImg', files[0]);
+ const image = await imageToDataURL(files[0]);
+ dispatch(actions.updateHeroImg(image));
} catch ({ error }) {
- dispatch({
- type: 'updateHeroImg',
- payload: { error },
- });
+ dispatch(actions.updateHeroImg(error));
}
}
};
const handleEventDetailsInput = (value: string) => {
- dispatch({
- type: 'updateEventDetails',
- payload: value,
- });
+ dispatch(actions.updateEventDetails(value));
};
const handleChange = ({ target }: { target: HTMLInputElement }) => {
const { name, value } = target;
- const actionType = `update${name[0].toUpperCase()}${name.substr(1)}`;
- dispatch({ type: actionType, payload: value });
+ switch (name) {
+ case 'name':
+ dispatch(actions.updateName(value));
+ break;
+ case 'address':
+ dispatch(actions.updateAddress(value));
+ break;
+ case 'city':
+ dispatch(actions.updateCity(value));
+ break;
+ case 'state':
+ dispatch(actions.updateState(value));
+ break;
+ case 'date':
+ dispatch(actions.updateDate(value));
+ break;
+ case 'time':
+ dispatch(actions.updateTime(value));
+ break;
+ default:
+ break;
+ }
};
const handleDiscard = (confirm?: boolean) => {
if (confirm === true) {
localStorage.removeItem('eventState');
- dispatch({ type: 'init' });
+ dispatch(actions.init());
setDiscardWarning(false);
} else {
setDiscardWarning(!discardWarning);
@@ -113,7 +134,6 @@ const EventEditor = () => {
{image.name}
-
- 
+ {src ||
+ (dataURL && name && (
+
- )}
+ ))}
);
};
diff --git a/src/components/EventEditor/ToolBar.tsx b/src/components/EventEditor/ToolBar.tsx
index 38ee8eb..c87c7c6 100644
--- a/src/components/EventEditor/ToolBar.tsx
+++ b/src/components/EventEditor/ToolBar.tsx
@@ -25,7 +25,7 @@ export const ToolBar = ({ handleDiscard }: ToolBarProps) => {
-
+
+
- {image.name}
+
+ 
+
@@ -39,5 +45,5 @@ export const PreviewEvent = () => {
+
+ );
+};
+
+interface ToolGroupProps {
+ onClick?: MouseEventHandler;
+ children: React.ReactNode;
+}
+
+const ToolGroup = ({ children, onClick }: ToolGroupProps) => {
+ return (
+
+ dispatch(actions.setSelectActive())}>
+
+ dispatch(actions.setAddMarkerActive())}
+ >
+ dispatch(actions.undoAddMarker())}
+ />
+
+ dispatch(actions.setCreateRouteActive())}
+ >
+ console.log('UNDO ROUTE')}
+ />
+
+
+
+ {children}
+
+ );
+};
+
+interface ToolPrimaryInterface {
+ name: string;
+ onClick?: MouseEventHandler;
+ isActive?: boolean;
+}
+
+export const ToolPrimary = ({
+ isActive,
+ name,
+ onClick,
+}: ToolPrimaryInterface) => {
+ const bgColor = isActive ? 'bg-blue-400' : 'bg-blueGray-400';
+ return (
+
+ );
+};
+
+interface ToolSecondaryInterface {
+ name: string;
+ onClick?: MouseEventHandler;
+ isActive?: boolean;
+}
+
+const ToolSecondary = ({ name, onClick, isActive }: ToolSecondaryInterface) => {
+ const bgColor = isActive ? 'bg-blue-200' : 'bg-blueGray-300';
+ return (
+
+ );
+};
diff --git a/src/components/RaceEditor/MapEditor/Legend.tsx b/src/components/RaceEditor/MapEditor/Legend.tsx
new file mode 100644
index 0000000..9bf1c72
--- /dev/null
+++ b/src/components/RaceEditor/MapEditor/Legend.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export const Legend = () => {
+ return (
+
+
+ );
+};
diff --git a/src/components/RaceEditor/MapEditor/Map.tsx b/src/components/RaceEditor/MapEditor/Map.tsx
new file mode 100644
index 0000000..19ce54a
--- /dev/null
+++ b/src/components/RaceEditor/MapEditor/Map.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import mapboxgl, { EventData, MapMouseEvent } from 'mapbox-gl';
+
+import { coordsToRouteFeature } from '../../../lib/utils';
+import {
+ initMap,
+ setPoints,
+ setRoutePoints,
+ removeMap,
+} from '../../../lib/mapBox/';
+
+import { RaceEditorState } from '../../../types';
+
+mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_KEY || '';
+
+interface MapboxMapProps {
+ clickEventHandler: (event?: MapMouseEvent & EventData) => void;
+}
+
+export const MapboxMap = ({ clickEventHandler }: MapboxMapProps) => {
+ const state = useSelector((state: RaceEditorState) => state.race);
+ const { points, routePoints } = state;
+ const mapContainer = useRefLegend
+
+
+
+ Start / Finish
+
+
+
+ Aid Station Level 1
+
+
+
+ Aid Station Level 2
+
+
+
+ Restroom
+
+
+
+ );
+};
diff --git a/src/components/RaceEditor/MapEditor/MarkerOptions.tsx b/src/components/RaceEditor/MapEditor/MarkerOptions.tsx
new file mode 100644
index 0000000..e43c8cb
--- /dev/null
+++ b/src/components/RaceEditor/MapEditor/MarkerOptions.tsx
@@ -0,0 +1,157 @@
+import React, {
+ ChangeEvent,
+ FormEvent,
+ FormEventHandler,
+ MouseEventHandler,
+ useEffect,
+ useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { actions } from '../../../lib/redux/reducers/raceEditor';
+import { RaceEditorState } from '../../../types';
+
+export const MarkerOptions = () => {
+ const [type, setType] = useState
+
+ );
+};
+
+interface ButtonProps {
+ color?: string;
+ name: string;
+ clickHandler?: MouseEventHandler;
+ type?: 'button' | 'reset' | 'submit';
+}
+
+const Button = ({
+ color = 'bg-gray',
+ name,
+ clickHandler,
+ type = 'button',
+}: ButtonProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/RaceEditor/MapEditor/index.tsx b/src/components/RaceEditor/MapEditor/index.tsx
new file mode 100644
index 0000000..85c0522
--- /dev/null
+++ b/src/components/RaceEditor/MapEditor/index.tsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { actions } from '../../../lib/redux/reducers/raceEditor';
+import mapboxgl, { EventData, MapMouseEvent } from 'mapbox-gl';
+import { Feature, LineString, Position } from 'geojson';
+import axios from 'axios';
+import { createMarker } from '../../../lib/utils';
+
+import { EditorTools } from './EditorTools';
+import { MapboxMap } from './Map';
+import { Legend } from './Legend';
+import { MarkerOptions } from './MarkerOptions';
+import { Marker, RaceEditorState } from '../../../types';
+
+export const MapEditor = () => {
+ const dispatch = useDispatch();
+ const state = useSelector((state: RaceEditorState) => state.race);
+ const [mapClick, setMapClick] = useState
+
+ Marker Options
+ + + +
+
+
+ );
+};
+
+const getMatchRoute = async (
+ lnglat1: number[],
+ lnglat2: number[]
+): Promise