[Chore]: Technical: Notification item types added (#1824)

* Notification item types added Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * prettier correction Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Review comments Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>
keplergl · Jun 6, 2022 · 55abc87 · 55abc87
1 parent bd8c332
commit 55abc87
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 70 deletions.
diff --git a/src/components/common/slider/mouse-event.ts b/src/components/common/slider/mouse-event.ts
@@ -19,7 +19,13 @@
 // THE SOFTWARE.
 
 import document from 'global/document';
-import {RefObject, TouchEvent, TouchEventHandler, MouseEventHandler as ReactMouseEventHandler, MouseEvent} from 'react';
+import {
+  RefObject,
+  TouchEvent,
+  TouchEventHandler,
+  MouseEventHandler as ReactMouseEventHandler,
+  MouseEvent
+} from 'react';
 import {StyleRangeSliderType} from './slider';
 
 function nope(...args) {}

diff --git a/src/components/common/slider/slider.tsx b/src/components/common/slider/slider.tsx
@@ -91,7 +91,9 @@ export default class Slider extends Component {
 
   private anchor: number = 0;
 
-  public ref: RefObject<typeof SliderWrapper & HTMLDivElement> = createRef<typeof SliderWrapper & HTMLDivElement>();
+  public ref: RefObject<typeof SliderWrapper & HTMLDivElement> = createRef<
+    typeof SliderWrapper & HTMLDivElement
+  >();
   public track: RefObject<StyleRangeSliderType> = createRef<StyleRangeSliderType>();
 
   constructor(public props: SliderProps) {

diff --git a/src/components/filters/polygon-filter.tsx b/src/components/filters/polygon-filter.tsx
@@ -30,43 +30,41 @@ const isAlreadySelected = (selectedLayers: Layer[], layerId: string) =>
   selectedLayers.findIndex(l => l.id === layerId) === -1;
 
 function PolygonFilterFactory() {
-  const PolygonFilter: React.FC<PolygonFilterProps> = React.memo(
-    ({filter, layers, setLayers}) => {
-      const setNewLayers = useCallback(
-        newLayers => {
-          return setLayers(newLayers.map((l: Layer) => l.id));
-        },
-        [setLayers]
-      );
-
-      const selectedLayers = useMemo(() => layers.filter(l => filter.layerId?.includes(l.id)), [
-        filter,
-        layers
-      ]);
+  const PolygonFilter: React.FC<PolygonFilterProps> = React.memo(({filter, layers, setLayers}) => {
+    const setNewLayers = useCallback(
+      newLayers => {
+        return setLayers(newLayers.map((l: Layer) => l.id));
+      },
+      [setLayers]
+    );
 
-      const availableLayers = useMemo(() => {
-        // remove already added layers and filter out non point layers
-        return layers.filter(
-          layer => layerFilter(layer) && isAlreadySelected(selectedLayers, layer.id)
-        );
-      }, [layers, selectedLayers]);
+    const selectedLayers = useMemo(() => layers.filter(l => filter.layerId?.includes(l.id)), [
+      filter,
+      layers
+    ]);
 
-      return (
-        <div>
-          <StyledFilterPanel htmlFor={`filter-${filter.id}`}>Layers:</StyledFilterPanel>
-          <ItemSelector
-            options={availableLayers}
-            selectedItems={selectedLayers}
-            onChange={setNewLayers}
-            searchable={false}
-            multiSelect={true}
-            getOptionValue={(l: Layer) => l.id}
-            displayOption={(l: Layer) => l.config.label}
-          />
-        </div>
+    const availableLayers = useMemo(() => {
+      // remove already added layers and filter out non point layers
+      return layers.filter(
+        layer => layerFilter(layer) && isAlreadySelected(selectedLayers, layer.id)
       );
-    }
-  );
+    }, [layers, selectedLayers]);
+
+    return (
+      <div>
+        <StyledFilterPanel htmlFor={`filter-${filter.id}`}>Layers:</StyledFilterPanel>
+        <ItemSelector
+          options={availableLayers}
+          selectedItems={selectedLayers}
+          onChange={setNewLayers}
+          searchable={false}
+          multiSelect={true}
+          getOptionValue={(l: Layer) => l.id}
+          displayOption={(l: Layer) => l.config.label}
+        />
+      </div>
+    );
+  });
 
   PolygonFilter.displayName = 'PolygonFilter';
 

diff --git a/src/components/injector.d.ts b/src/components/injector.d.ts
@@ -9,18 +9,25 @@ export const ERROR_MSG: {
 export type FactoryElement = (...args) => Component;
 export type Factory = FactoryElement & {
   deps: FactoryElement[];
-}
+};
 export type InjectorType = {
   provide: (factory: any, replacement: any) => InjectorType;
   get: (fac: any, parent?: any) => any;
-}
+};
 
 export const injector: (map?: Map) => InjectorType;
 
-export type ProvideRecipesToInjectorType = (factories: Factory[], appInjector: InjectorType) => InjectorType;
+export type ProvideRecipesToInjectorType = (
+  factories: Factory[],
+  appInjector: InjectorType
+) => InjectorType;
 
 export const provideRecipesToInjector: ProvideRecipesToInjectorType;
 
 export const flattenDeps: (deps: Factory[], replacement: any) => Factory[];
 
-export const withState: (lenses: any, mapStateToProps: (state: object) => object, actions: object) => (Component: Component<any> | FunctionComponent<any> | FC<any>) => Component;
+export const withState: (
+  lenses: any,
+  mapStateToProps: (state: object) => object,
+  actions: object
+) => (Component: Component<any> | FunctionComponent<any> | FC<any>) => Component;
diff --git a/src/components/map/layer-selector-panel.tsx b/src/components/map/layer-selector-panel.tsx
@@ -55,7 +55,7 @@ function LayerSelectorPanelFactory(
     mapControls,
     readOnly
   }) => {
-    const visibleLayers = mapControls?.visibleLayers || {} as MapControl;
+    const visibleLayers = mapControls?.visibleLayers || ({} as MapControl);
     const {active: isActive, show, disableClose} = visibleLayers || {};
 
     const legendLayers = useMemo(

diff --git a/src/components/map/map-legend-panel.tsx b/src/components/map/map-legend-panel.tsx
@@ -72,7 +72,7 @@ function MapLegendPanelFactory(MapControlPanel, MapLegend) {
     actionIcons = defaultActionIcons,
     mapHeight
   }) => {
-    const mapLegend = mapControls?.mapLegend || {} as MapControl;
+    const mapLegend = mapControls?.mapLegend || ({} as MapControl);
     const {active: isPinned} = mapLegend || {};
 
     const onClick = () => {

diff --git a/src/components/map/map-legend.tsx b/src/components/map/map-legend.tsx
@@ -89,15 +89,15 @@ export type LayerSizeLegendProps = {
 };
 
 /** @type {typeof import('./map-legend').LayerSizeLegend} */
-export const LayerSizeLegend: React.FC<LayerSizeLegendProps> = ({label, name}) => 
+export const LayerSizeLegend: React.FC<LayerSizeLegendProps> = ({label, name}) =>
   label ? (
-    (<div className="legend--layer_size-schema">
+    <div className="legend--layer_size-schema">
       <p>
         <span className="legend--layer_by">{label ? <FormattedMessage id={label} /> : null}</span>
         <span className="legend--layer_by"> by </span>
       </p>
       <VisualChannelMetric name={name} />
-    </div>)
+    </div>
   ) : null;
 
 const SINGLE_COLOR_DOMAIN = [''];

diff --git a/src/components/map/split-map-button.tsx b/src/components/map/split-map-button.tsx
@@ -57,7 +57,7 @@ function SplitMapButtonFactory() {
     mapControls,
     readOnly
   }) => {
-    const splitMap = mapControls?.splitMap || {} as MapControl;
+    const splitMap = mapControls?.splitMap || ({} as MapControl);
     const onClick = useCallback(
       event => {
         event.preventDefault();

diff --git a/...s/notification-panel/notification-item.js → .../notification-panel/notification-item.tsx b/...s/notification-panel/notification-item.js → .../notification-panel/notification-item.tsx
@@ -19,12 +19,17 @@
 // THE SOFTWARE.
 
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {Delete, Info, Warning, Checkmark} from 'components/common/icons';
 import ReactMarkdown from 'react-markdown';
+import {ActionHandler, removeNotification as removeNotificationActions} from 'actions';
 
-const NotificationItemContent = styled.div`
+interface NotificationItemContentProps {
+  type: string;
+  isExpanded?: boolean;
+}
+
+const NotificationItemContent = styled.div<NotificationItemContentProps>`
   background-color: ${props => props.theme.notificationColors[props.type] || '#000'};
   color: #fff;
   display: flex;
@@ -43,9 +48,13 @@ const DeleteIcon = styled(Delete)`
   cursor: pointer;
 `;
 
+interface NotificationMessageProps {
+  isExpanded?: boolean;
+}
+
 const NotificationMessage = styled.div.attrs({
   className: 'notification-item--message'
-})`
+})<NotificationMessageProps>`
   flex-grow: 2;
   width: ${props => props.theme.notificationPanelItemWidth}px;
   margin: 0 1em;
@@ -82,17 +91,19 @@ const LinkRenderer = props => {
   );
 };
 
-export default function NotificationItemFactory() {
-  return class NotificationItem extends Component {
-    static propTypes = {
-      notification: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        message: PropTypes.string.isRequired
-      }).isRequired,
-      isExpanded: PropTypes.bool
-    };
+interface NotificationItemProps {
+  notification: {
+    id: string;
+    type: string;
+    message: string;
+  };
+  isExpanded?: boolean;
+  removeNotification?: ActionHandler<typeof removeNotificationActions>;
+  theme?: any;
+}
 
+export default function NotificationItemFactory() {
+  return class NotificationItem extends Component<NotificationItemProps> {
     state = {
       isExpanded: false
     };

diff --git a/src/components/side-panel/layer-panel/color-range-selector.tsx b/src/components/side-panel/layer-panel/color-range-selector.tsx
@@ -218,10 +218,7 @@ export const PaletteConfig: React.FC<PaletteConfigProps> = ({
   config: {type, options},
   onChange
 }) => (
-  <StyledPaletteConfig
-    className="color-palette__config"
-    onClick={(e) => e.stopPropagation()}
-  >
+  <StyledPaletteConfig className="color-palette__config" onClick={e => e.stopPropagation()}>
     <div className="color-palette__config__label">
       <PanelLabel>
         <FormattedMessage id={`color.${label}`} />

diff --git a/src/components/side-panel/layer-panel/layer-panel-header.tsx b/src/components/side-panel/layer-panel/layer-panel-header.tsx
@@ -18,7 +18,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useState, ComponentType, MouseEventHandler, MouseEvent, ChangeEventHandler} from 'react';
+import React, {
+  useState,
+  ComponentType,
+  MouseEventHandler,
+  MouseEvent,
+  ChangeEventHandler
+} from 'react';
 import classnames from 'classnames';
 import styled from 'styled-components';
 import {SortableHandle} from 'react-sortable-hoc';

diff --git a/src/components/side-panel/layer-panel/layer-panel.tsx b/src/components/side-panel/layer-panel/layer-panel.tsx
@@ -18,7 +18,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, MouseEventHandler, TouchEventHandler, CSSProperties, ChangeEventHandler} from 'react';
+import React, {
+  Component,
+  MouseEventHandler,
+  TouchEventHandler,
+  CSSProperties,
+  ChangeEventHandler
+} from 'react';
 import styled from 'styled-components';
 
 import LayerConfiguratorFactory from './layer-configurator';

diff --git a/src/deckgl-layers/3d-building-layer/3d-building-utils.ts b/src/deckgl-layers/3d-building-layer/3d-building-utils.ts
@@ -151,7 +151,7 @@ function getCoordinates(vectorTileFeature: VectorTileFeature): FlatFigure[] {
     } else if (cmd === 7) {
       // Workaround for https://github.com/mapbox/mapnik-vector-tile/issues/90
       if (line) {
-        line.push(line[0].slice() as ([number, number] | [number, number, number])); // closePolygon
+        line.push(line[0].slice() as [number, number] | [number, number, number]); // closePolygon
       }
     } else {
       throw new Error(`unknown command ${cmd}`);

diff --git a/src/reducers/map-style-updaters.ts b/src/reducers/map-style-updaters.ts
@@ -188,7 +188,7 @@ interface GetMapStylesParam {
   styleType: string;
   visibleLayerGroups: {[id: string]: LayerGroup | boolean};
   topLayerGroups: {[id: string]: LayerGroup | boolean};
-  mapStyles: {[id: string]: any}
+  mapStyles: {[id: string]: any};
 }
 
 /**
@@ -200,7 +200,12 @@ interface GetMapStylesParam {
  * @param {Object} mapStyles - a dictionary of all map styles
  * @returns {Object} bottomMapStyle | topMapStyle | isRaster
  */
-export function getMapStyles({styleType, visibleLayerGroups, topLayerGroups, mapStyles}: GetMapStylesParam) {
+export function getMapStyles({
+  styleType,
+  visibleLayerGroups,
+  topLayerGroups,
+  mapStyles
+}: GetMapStylesParam) {
   const mapStyle = mapStyles[styleType];
 
   // style might not be loaded yet

diff --git a/src/utils/map-style-utils/mapbox-gl-style-editor.ts b/src/utils/map-style-utils/mapbox-gl-style-editor.ts
@@ -36,7 +36,15 @@ export function getDefaultLayerGroupVisibility({layerGroups = []}: {layerGroups:
   );
 }
 
-const resolver = ({id, mapStyle, visibleLayerGroups = {}}: {id?: string; mapStyle: BaseMapStyle; visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false}) =>
+const resolver = ({
+  id,
+  mapStyle,
+  visibleLayerGroups = {}
+}: {
+  id?: string;
+  mapStyle: BaseMapStyle;
+  visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
+}) =>
   `${id}:${Object.keys(visibleLayerGroups)
     .filter(d => visibleLayerGroups[d])
     .sort()
@@ -50,7 +58,13 @@ const resolver = ({id, mapStyle, visibleLayerGroups = {}}: {id?: string; mapStyl
  * @returns top map style
  */
 export const editTopMapStyle = memoize(
-  ({mapStyle, visibleLayerGroups}: {mapStyle: BaseMapStyle; visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false}) => {
+  ({
+    mapStyle,
+    visibleLayerGroups
+  }: {
+    mapStyle: BaseMapStyle;
+    visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
+  }) => {
     const visibleFilters = (mapStyle.layerGroups || [])
       .filter(lg => visibleLayerGroups[lg.slug])
       .map(lg => lg.filter);