Skip to content

Update to React 18 #3852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ndittren wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update to React 18 #3852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions media/src/activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { ActivityMap } from './activity/activity-map';

ReactDOM.render(
<React.StrictMode>
const container = document.getElementById('activity-map-container');
if (container) {
const root = createRoot(container);
root.render(
<ActivityMap />
</React.StrictMode>,
document.getElementById('activity-map-container')
);
);
}
55 changes: 34 additions & 21 deletions media/src/activity/activity-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
_MapContext as MapContext, StaticMap, NavigationControl, Popup, MapRef
} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// Deck.gl
import DeckGL, { Controller, FlyToInterpolator } from 'deck.gl';
import DeckGL, { FlyToInterpolator } from 'deck.gl';
import { BitmapLayer, IconLayer, IconLayerProps } from '@deck.gl/layers';
import { TileLayer } from '@deck.gl/geo-layers';
import { Position } from '@deck.gl/core/utils/positions';
import { PickInfo } from '@deck.gl/core/lib/deck';
// import { PickInfo } from 'deck.gl';
type Position = [number, number] | [number, number, number];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type PickInfo<D> = any;

import { ActivityMapPane } from './activity-map-pane';
import { LoadingModal } from '../project-activity-components/loading-modal';
Expand Down Expand Up @@ -59,7 +66,7 @@ export const ActivityMap: React.FC = () => {
const [projectData, setProjectData] = useState<ProjectData | null>(null);
const [responseData, setResponseData] = useState<ResponseData[]>([]);

const deckglMap = useRef<DeckGL>(null);
const deckglMap = useRef<any>(null);
const mapPane = useRef<HTMLDivElement>(null);

const navControlStyle= {
Expand Down Expand Up @@ -189,7 +196,7 @@ export const ActivityMap: React.FC = () => {

const updateActivity = (instructions: string, pk: number): void => {
const data = {
project: projectPk,
project: projectPk ? parseInt(projectPk, 10) : undefined,
instructions: instructions
};
void put<ActivityData>(`/api/activity/${pk}/`, data)
Expand Down Expand Up @@ -574,7 +581,7 @@ export const ActivityMap: React.FC = () => {
//Close Popup if there is a click after search
setShowSearchPopup(false);
// Cast to provide type def for coordinate
const infoPrime = info as PickInfo<D> & {coordinate: [number, number]};
const infoPrime = info;

// Create on single click, make sure that new event
// is not created when user intends to pick an existing event
Expand Down Expand Up @@ -663,7 +670,7 @@ export const ActivityMap: React.FC = () => {
return activeEventDetail && d.pk == activeEventDetail.pk ?
ICON_SIZE_ACTIVE : ICON_SIZE; },
getColor: () => {
return layer.color ? ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT; },
return (layer.color ? ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT) as any; },
visible: layerVisibility.get(layer.pk) || false
});
return acc.concat(MBLayer);
Expand All @@ -682,7 +689,7 @@ export const ActivityMap: React.FC = () => {
sizeScale: ICON_SCALE,
getPosition: (d) => d.lngLat,
getSize: ICON_SIZE,
getColor: ICON_COLOR_ACTIVE,
getColor: ICON_COLOR_ACTIVE as any,
}));
}
const handleViewportChange = useCallback(
Expand All @@ -691,7 +698,7 @@ export const ActivityMap: React.FC = () => {
[]
);
const handleGeocoderViewportChange = useCallback(
(newViewport) => {
(newViewport: any) => {
const geocoderDefaultOverrides = { transitionDuration: 1000 };

// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
Expand Down Expand Up @@ -910,7 +917,8 @@ export const ActivityMap: React.FC = () => {
getPosition: (d) => d.location.lng_lat,
onClick: pickEventClickHandler,
getSize: ICON_SIZE,
getColor: ICON_COLOR[layer.color],
getColor: (layer.color ?
ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT) as any,
})
);
}
Expand Down Expand Up @@ -986,19 +994,19 @@ export const ActivityMap: React.FC = () => {
for (const layer of projData.raster_layers) {
rLayers.push(new TileLayer({
data: layer.url,
renderSubLayers: (obj: TileSublayerProps) => {
renderSubLayers: ((obj: TileSublayerProps) => {
const {
bbox: {west, south, east, north}
} = obj.tile;
return new BitmapLayer<string>({
return new BitmapLayer<string>(({
id: obj.id,
image: obj.data,
bounds: [west, south, east, north],
desaturate: 0,
transparentColor: [0, 0, 0, 0],
tintColor: [255, 255, 255]
});
}
}) as any);
}) as any
}));
}
setRasterLayers(rLayers);
Expand Down Expand Up @@ -1038,7 +1046,8 @@ export const ActivityMap: React.FC = () => {
getPosition: (d) => d.location.lng_lat,
onClick: pickEventClickHandler,
getSize: ICON_SIZE,
getColor: ICON_COLOR[layer.color],
getColor: (layer.color ?
ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT) as any,
})
);
}
Expand Down Expand Up @@ -1114,6 +1123,10 @@ export const ActivityMap: React.FC = () => {
void getData().finally(() => {setIsDataLoading(false);});
}, []);

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const DeckGLAny = DeckGL as any;

return (
<>
{(isMapLoading || isDataLoading) && <LoadingModal />}
Expand All @@ -1127,20 +1140,20 @@ export const ActivityMap: React.FC = () => {
ref={geocoderContainerRef}
style={{ position: 'absolute', top: 20, right: 20, zIndex: 1 }}
/>
<DeckGL
<DeckGLAny
layers={[
...rasterLayers as any, // eslint-disable-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, max-len
...mapLayers
]}
ref={deckglMap}
viewState={viewportState}
onViewStateChange={e => setViewportState(e.viewState)} // eslint-disable-line @typescript-eslint/no-unsafe-argument, max-len
onViewStateChange={(e: any) => setViewportState(e.viewState)} // eslint-disable-line @typescript-eslint/no-unsafe-argument, max-len
width={'100%'}
height={'100%'}
controller={{doubleClickZoom: false} as {doubleClickZoom: boolean} & Controller} // eslint-disable-line max-len
onClick={handleDeckGlClick}
controller={{doubleClickZoom: false} as any} // eslint-disable-line max-len
onClick={handleDeckGlClick as any}
pickingRadius={15}
ContextProvider={MapContext.Provider}>
ContextProvider={MapContext.Provider as any}>
<StaticMap
reuseMaps
width={'100%'}
Expand Down Expand Up @@ -1224,7 +1237,7 @@ export const ActivityMap: React.FC = () => {
<div id='map-navigation-control'>
<NavigationControl style={navControlStyle} />
</div>
</DeckGL>
</DeckGLAny>
</div>
)}
{projectData && (
Expand Down
3 changes: 2 additions & 1 deletion media/src/project-activity-components/common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* A place to set shared settings */
import { FlyToInterpolator } from 'deck.gl';
import { Position } from '@deck.gl/core/utils/positions';
// import { Position } from '@deck.gl/core/utils/positions';
export type Position = [number, number] | [number, number, number];
export const STATIC_URL = LocusTempus.staticUrl;

export const ICON_ATLAS = STATIC_URL + 'img/icon-map-marker.png';
Expand Down
13 changes: 7 additions & 6 deletions media/src/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { ProjectMap } from './project/project-map';

ReactDOM.render(
<React.StrictMode>
const container = document.getElementById('project-map-container');
if (container) {
const root = createRoot(container);
root.render(
<ProjectMap />
</React.StrictMode>,
document.getElementById('project-map-container')
);
);
}
53 changes: 32 additions & 21 deletions media/src/project/project-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
_MapContext as MapContext, StaticMap, NavigationControl, Popup, MapRef
} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// Deck.gl
import DeckGL, { Controller, FlyToInterpolator } from 'deck.gl';
import DeckGL, { FlyToInterpolator } from 'deck.gl';
import { BitmapLayer, IconLayer } from '@deck.gl/layers';
import { TileLayer } from '@deck.gl/geo-layers';
import { Position } from '@deck.gl/core/utils/positions';
import { PickInfo } from '@deck.gl/core/lib/deck';
// import { PickInfo } from 'deck.gl';
type Position = [number, number] | [number, number, number];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type PickInfo<D> = any;

import { ProjectMapPane } from './project-map-pane';
import { LoadingModal } from '../project-activity-components/loading-modal';
Expand Down Expand Up @@ -40,7 +47,7 @@ export const ProjectMap: React.FC = () => {
const pathList = window.location.pathname.split('/');
const projectPk = pathList[pathList.length - 2];
const coursePk = pathList[pathList.length - 4];
const deckglMap = useRef<DeckGL>(null);
const deckglMap = useRef<any>(null);
const mapPane = useRef<HTMLDivElement>(null);
const [isNewProject, setIsNewProject] = useState<boolean>(newProjectFlag);
const [projectData, setProjectData] = useState<ProjectData | null>(null);
Expand Down Expand Up @@ -329,7 +336,7 @@ export const ProjectMap: React.FC = () => {
return;
}
const data = {
project: projectPk,
project: parseInt(projectPk, 10),
instructions: instructions
};
void post<ActivityData>('/api/activity/', data)
Expand All @@ -341,7 +348,7 @@ export const ProjectMap: React.FC = () => {

const updateActivity = (instructions: string, pk: number): void => {
const data = {
project: projectPk,
project: parseInt(projectPk, 10),
instructions: instructions
};
void put<ActivityData>(`/api/activity/${pk}/`, data)
Expand All @@ -368,7 +375,7 @@ export const ProjectMap: React.FC = () => {
//Close Popup if there is a click after search
setShowSearchPopup(false);
// Cast to provide type def for coordinate
const infoPrime = info as PickInfo<D> & {coordinate: [number, number]};
const infoPrime = info;

// Create on single click, make sure that new event
// is not created when user intends to pick an existing event
Expand Down Expand Up @@ -445,7 +452,7 @@ export const ProjectMap: React.FC = () => {
return activeEventDetail && d.pk == activeEventDetail.pk ?
ICON_SIZE_ACTIVE : ICON_SIZE; },
getColor: () => {
return layer.color ? ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT; },
return (layer.color ? ICON_COLOR[layer.color] : ICON_COLOR_DEFAULT) as any; },
visible: layerVisibility.get(layer.pk) || false
});
return acc.concat(MBLayer);
Expand All @@ -464,17 +471,17 @@ export const ProjectMap: React.FC = () => {
sizeScale: ICON_SCALE,
getPosition: (d) => d.lngLat,
getSize: ICON_SIZE_ACTIVE,
getColor: ICON_COLOR_ACTIVE,
getColor: ICON_COLOR_ACTIVE as any,
}));
}

const handleViewportChange = useCallback(
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
(newViewport: React.SetStateAction<ViewportState>) => setViewportState(newViewport),
(newViewport: any) => setViewportState(newViewport),
[]
);
const handleGeocoderViewportChange = useCallback(
(newViewport) => {
(newViewport: any) => {
const geocoderDefaultOverrides = { transitionDuration: 1000 };

// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
Expand Down Expand Up @@ -533,19 +540,19 @@ export const ProjectMap: React.FC = () => {
for (const layer of projData.raster_layers) {
rLayers.push(new TileLayer({
data: layer.url,
renderSubLayers: (obj: TileSublayerProps) => {
renderSubLayers: ((obj: TileSublayerProps) => {
const {
bbox: {west, south, east, north}
} = obj.tile;
return new BitmapLayer<string>({
return new BitmapLayer<string>(({
id: obj.id,
image: obj.data,
bounds: [west, south, east, north],
desaturate: 0,
transparentColor: [0, 0, 0, 0],
tintColor: [255, 255, 255]
});
}
}) as any);
}) as any
}));
}
setRasterLayers(rLayers);
Expand All @@ -559,6 +566,10 @@ export const ProjectMap: React.FC = () => {
void getData().finally(() => {setIsDataLoading(false);});
}, []);

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const DeckGLAny = DeckGL as any;

return (
<>
{(isMapLoading || isDataLoading) && <LoadingModal />}
Expand All @@ -568,20 +579,20 @@ export const ProjectMap: React.FC = () => {
ref={geocoderContainerRef}
style={{ position: 'absolute', top: 20, right: 20, zIndex: 1 }}
/>
<DeckGL
<DeckGLAny
layers={[
...rasterLayers as any, // eslint-disable-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, max-len
...mapLayers
]}
viewState={viewportState}
onViewStateChange={e => setViewportState(e.viewState)} // eslint-disable-line @typescript-eslint/no-unsafe-argument, max-len
onViewStateChange={(e: any) => setViewportState(e.viewState)} // eslint-disable-line @typescript-eslint/no-unsafe-argument, max-len
width={'100%'}
height={'100%'}
controller={{doubleClickZoom: false} as {doubleClickZoom: boolean} & Controller} // eslint-disable-line max-len
onClick={handleDeckGlClick}
controller={{doubleClickZoom: false} as any} // eslint-disable-line max-len
onClick={handleDeckGlClick as any}
pickingRadius={15}
ref={deckglMap}
ContextProvider={MapContext.Provider}>
ContextProvider={MapContext.Provider as any}>
<StaticMap
reuseMaps
width={'100%'}
Expand Down Expand Up @@ -666,7 +677,7 @@ export const ProjectMap: React.FC = () => {
<div id='map-navigation-control'>
<NavigationControl style={navControlStyle} />
</div>
</DeckGL>
</DeckGLAny>
</div>
)}
{projectData && (
Expand Down
Loading
Loading