fixed typescript errors

src/components/StickerDesc.tsx

@@ -23,10 +23,15 @@ class StickerDesc extends React.PureComponent<Props, State> {
   blockMouse = e => {
     e.preventDefault();
     e.stopPropagation();
+
+    if (!this.input) {
+      return
+    }
+
     this.input.focus();
   };
 
-  input: HTMLTextAreaElement;
+  input: HTMLTextAreaElement | null = null;
 
   render() {
     const { value: text } = this.props;

src/components/dialogs/MapListDialog.tsx

@@ -64,9 +64,8 @@ export interface State {
 
 class MapListDialogUnconnected extends PureComponent<Props, State> {
   state = {
-    menu_target: null,
+    menu_target: '',
-    editor_target: null,
+    editor_target: '',
-
     is_editing: false,
     is_dropping: false,
   };
@@ -74,7 +73,7 @@ class MapListDialogUnconnected extends PureComponent<Props, State> {
   startEditing = (editor_target: IRouteListItem['address']): void =>
     this.setState({
       editor_target,
-      menu_target: null,
+      menu_target: '',
       is_editing: true,
       is_dropping: false,
     });
@@ -86,19 +85,19 @@ class MapListDialogUnconnected extends PureComponent<Props, State> {
 
   hideMenu = (): void =>
     this.setState({
-      menu_target: null,
+      menu_target: '',
     });
 
   showDropCard = (editor_target: IRouteListItem['address']): void =>
     this.setState({
       editor_target,
-      menu_target: null,
+      menu_target: '',
       is_editing: false,
       is_dropping: true,
     });
 
   stopEditing = (): void => {
-    this.setState({ editor_target: null });
+    this.setState({ editor_target: '' });
   };
 
   setTitle = ({ target: { value } }: { target: { value: string } }): void => {

src/components/dialogs/ProviderDialog.tsx

@@ -27,7 +27,7 @@ const ProviderDialogUnconnected = ({ provider, mapSetProvider }: Props) => (
               backgroundImage: `url(${replaceProviderUrl(item, { x: 5980, y: 2589, zoom: 13 })})`,
             }}
             onMouseDown={() => mapSetProvider(item)}
-            key={PROVIDERS[item].name}
+            key={PROVIDERS[item]?.name}
           >
             {
               provider === item &&

src/components/dialogs/TitleDialog.tsx

@@ -42,7 +42,7 @@ export class TitleDialogUnconnected extends React.PureComponent<Props, State> {
     this.setMaxHeight();
   }
 
-  setMaxHeight = (): number => {
+  setMaxHeight = () => {
     if (!this.ref_sizer || !this.ref_title || !this.ref_text) return 0;
 
     const { height: sizer_height } = this.ref_sizer.getBoundingClientRect();

src/components/maps/RouteRowView.tsx

@@ -40,7 +40,7 @@ export const RouteRowView = ({
   is_admin,
   is_published,
   toggleStarred
-}: Props): ReactElement<Props, null> => (
+}: Props): ReactElement<Props> => (
   <div className={classnames("route-row-view", { has_menu: tab === "my" })}>
     {(tab === TABS.PENDING || tab === TABS.STARRED) && is_admin && (
       <div className="route-row-fav" onClick={toggleStarred.bind(null, address)}>

src/components/panels/EditorPanel.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, useState, useCallback } from 'react';
+import React, { PureComponent } from 'react';
 import { MODES } from '~/constants/modes';
 import classnames from 'classnames';
 
@@ -7,12 +7,12 @@ import { EditorDialog } from '~/components/panels/EditorDialog';
 import { connect } from 'react-redux';
 import {
   editorChangeMode,
+  editorKeyPressed,
+  editorRedo,
   editorStartEditing,
   editorStopEditing,
   editorTakeAShot,
-  editorKeyPressed,
   editorUndo,
-  editorRedo,
 } from '~/redux/editor/actions';
 import { Tooltip } from '~/components/panels/Tooltip';
 import { IState } from '~/redux/store';
@@ -47,6 +47,10 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 
 class EditorPanelUnconnected extends PureComponent<Props, void> {
   componentDidMount() {
+    if (!this.panel) {
+      return;
+    }
+
     window.addEventListener('keydown', this.onKeyPress as any);
 
     const obj = document.getElementById('control-dialog');
@@ -57,7 +61,7 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
     obj.style.width = String(width);
   }
 
-  panel: HTMLElement = null;
+  panel: HTMLDivElement | null = null;
 
   componentWillUnmount() {
     window.removeEventListener('keydown', this.onKeyPress as any);

src/components/renderer/Renderer.tsx

@@ -31,6 +31,10 @@ class Component extends React.Component<Props, State> {
   };
 
   onImageLoaded = () => {
+    if (!this.image) {
+      return
+    }
+
     this.croppr = new Croppr(this.image, {
       onInitialize: this.onCropInit,
     });
@@ -57,12 +61,12 @@ class Component extends React.Component<Props, State> {
     regionEl.append(this.logo);
   };
 
-  croppr: Croppr;
+  croppr?: Croppr;
-  logo: HTMLDivElement;
+  logo: HTMLDivElement | null = null;
-  image: HTMLImageElement;
+  image: HTMLImageElement | null = null;
-  logoImg: HTMLImageElement;
+  logoImg: HTMLImageElement | null = null;
 
-  getImage = () => this.props.editorCropAShot(this.croppr.getValue());
+  getImage = () => this.props.editorCropAShot(this.croppr?.getValue());
 
   render() {
     const { data } = this.props.editor.renderer;

src/components/search/MapListDialogHead.tsx

@@ -7,7 +7,7 @@ interface Props {
   max: number;
   search: string;
   distance: [number, number];
-  onDistanceChange: (val: [number, number]) => void;
+  onDistanceChange: (val: number[]) => void;
   onSearchChange: ChangeEventHandler<HTMLInputElement>;
 }
 

src/constants/api.ts

@@ -1,16 +1,14 @@
-import { CLIENT } from '~/config/frontend';
-
 export const API = {
-  GET_GUEST: `${CLIENT.API_ADDR}/api/auth/`,
+  GET_GUEST: `/api/auth/`,
-  CHECK_TOKEN: `${CLIENT.API_ADDR}/api/auth/`,
+  CHECK_TOKEN: `/api/auth/`,
-  IFRAME_LOGIN_VK: `${CLIENT.API_ADDR}/api/auth/vk`,
+  IFRAME_LOGIN_VK: `/api/auth/vk`,
-  GET_MAP: `${CLIENT.API_ADDR}/api/route/`,
+  GET_MAP: `/api/route/`,
-  POST_MAP: `${CLIENT.API_ADDR}/api/route/`,
+  POST_MAP: `/api/route/`,
-  GET_ROUTE_LIST: tab => `${CLIENT.API_ADDR}/api/route/list/${tab}`,
+  GET_ROUTE_LIST: tab => `/api/route/list/${tab}`,
 
-  DROP_ROUTE: `${CLIENT.API_ADDR}/api/route/`,
+  DROP_ROUTE: `/api/route/`,
-  MODIFY_ROUTE: `${CLIENT.API_ADDR}/api/route/`,
+  MODIFY_ROUTE: `/api/route/`,
-  SET_STARRED: `${CLIENT.API_ADDR}/api/route/publish`,
+  SET_STARRED: `/api/route/publish`,
 };
 
 export const API_RETRY_INTERVAL = 10;

src/constants/auth.ts

@@ -11,7 +11,7 @@ export interface IUser {
   role: IRoles[keyof IRoles];
   routes: {};
   success: boolean;
-  id?: string;
+  id: string;
   uid: string;
   token?: string;
   photo: string;
@@ -31,9 +31,9 @@ export const DEFAULT_USER: IUser = {
   role: ROLES.guest,
   routes: {},
   success: false,
-  id: null,
+  id: '',
-  token: null,
+  token: undefined,
-  photo: null,
+  photo: '',
-  name: null,
+  name: '',
-  uid: null,
+  uid: '',
 };

src/constants/providers.ts

@@ -5,21 +5,6 @@ export interface IProvider {
 }
 
 export type ITileMaps = Record<string, IProvider>
-//  {
-  // WATERCOLOR: IProvider,
-  // DGIS: IProvider,
-  // DEFAULT: IProvider,
-  // DARQ: IProvider,
-  // BLANK: IProvider,
-  // HOT: IProvider,
-  // YSAT: IProvider,
-  // YMAP: IProvider,
-  // SAT: IProvider,
-  // ESAT: IProvider,
-  // CACHE_OSM: IProvider,
-  // CACHE_CARTO: IProvider,
-// }
-
 
 // Стили карт
 const TILEMAPS: ITileMaps = {
@@ -53,7 +38,7 @@ const TILEMAPS: ITileMaps = {
 const ENABLED: Array<keyof ITileMaps> = ['BLANK', 'DEFAULT', 'DGIS', 'HOT', 'ESAT'];
 
 export const DEFAULT_PROVIDER: keyof ITileMaps = ENABLED[1];
-export const PROVIDERS: Partial<ITileMaps> = ENABLED.reduce((obj, provider) => ({
+export const PROVIDERS: ITileMaps = ENABLED.reduce((obj, provider) => ({
   ...obj,
   [provider]: TILEMAPS[provider],
 }), {});

src/map/Arrows/index.tsx

@@ -14,7 +14,7 @@ const mapDispatchToProps = {};
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const ArrowsUnconnected: FC<Props> = memo(({ route }) => {
-  const [layer, setLayer] = useState(null);
+  const [layer, setLayer] = useState<ArrowsLayer | null>(null);
 
   useEffect(() => {
     const item = new ArrowsLayer({}).addTo(MainMap);

src/map/CurrentLocation/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
-import { LatLngLiteral, marker, Marker, DivIcon } from 'leaflet';
+import { DivIcon, LatLngLiteral, Marker } from 'leaflet';
 import { MainMap } from '~/constants/map';
 
 interface IProps {
-  location: LatLngLiteral;
+  location?: LatLngLiteral;
 }
 
 const CurrentLocation: FC<IProps> = ({ location }) => {

src/map/GpxPolyline/index.tsx

@@ -8,7 +8,7 @@ interface IProps {
 }
 
 const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
-  const [layer, setLayer] = useState<Polyline>(null);
+  const [layer, setLayer] = useState<Polyline | null>(null);
 
   useEffect(() => {
     const item = new Polyline([], {

src/map/KmMarks/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, memo } from 'react';
+import React, { FC, memo, useEffect, useState } from 'react';
 import { KmMarksLayer } from '~/utils/marks';
 import { MainMap } from '~/constants/map';
 import { selectMap } from '~/redux/map/selectors';
@@ -14,14 +14,14 @@ const mapDispatchToProps = {};
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const KmMarksUnconnected: FC<Props> = memo(({ map: { route } }) => {
-  const [layer, setLayer] = useState(null);
+  const [layer, setLayer] = useState<KmMarksLayer | null>(null);
 
   useEffect(() => {
     const layer = new KmMarksLayer([]);
     layer.addTo(MainMap);
     setLayer(layer);
     return () => MainMap.removeLayer(layer);
-  }, [MainMap]);
+  }, []);
 
   useEffect(() => {
     if (!layer) return;

src/map/Map/index.tsx

@@ -93,7 +93,7 @@ const MapUnconnected: React.FC<IProps> = memo(
               enabled && <GpxPolyline latlngs={latlngs} color={color} key={index} />
           )}
       </div>,
-      document.getElementById('canvas')
+      document.getElementById('canvas')!
     );
   }
 );

src/map/Route/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useEffect, memo, useState, useCallback } from 'react';
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
 import { InteractivePoly } from '~/utils/map/InteractivePoly';
 import { isMobile } from '~/utils/window';
 import { LatLng } from 'leaflet';
-import { selectEditorMode, selectEditorEditing, selectEditorDirection } from '~/redux/editor/selectors';
+import { selectEditorDirection, selectEditorEditing, selectEditorMode } from '~/redux/editor/selectors';
 import * as MAP_ACTIONS from '~/redux/map/actions';
 import { connect } from 'react-redux';
 import { selectMapRoute } from '~/redux/map/selectors';
@@ -28,7 +28,7 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 
 const RouteUnconnected: FC<Props> = memo(
   ({ route, editing, mode, drawing_direction, mapSetRoute, editorSetDistance, editorSetMarkersShown }) => {
-    const [layer, setLayer] = useState<InteractivePoly>(null);
+    const [layer, setLayer] = useState<InteractivePoly | null>(null);
 
     const onDistanceChange = useCallback(({ distance }) => editorSetDistance(distance), [
       editorSetDistance,

src/map/Router/index.tsx

@@ -1,16 +1,12 @@
-import { FC, useEffect, useCallback, memo, useState } from 'react';
+import { FC, memo, useCallback, useEffect, useState } from 'react';
 import { OsrmRouter } from '~/utils/map/OsrmRouter';
 import { connect } from 'react-redux';
 import { selectMapRoute } from '~/redux/map/selectors';
-import {
+import { selectEditorDistance, selectEditorMode, selectEditorRouter } from '~/redux/editor/selectors';
-  selectEditorRouter,
-  selectEditorMode,
-  selectEditorDistance,
-} from '~/redux/editor/selectors';
 import { MainMap } from '~/constants/map';
 import * as EDITOR_ACTIONS from '~/redux/editor/actions';
 import { MODES } from '~/constants/modes';
-import { LatLngLiteral, marker, divIcon } from 'leaflet';
+import { divIcon, LatLngLiteral, marker } from 'leaflet';
 import classNames from 'classnames';
 import { angleBetweenPoints } from '~/utils/geom';
 
@@ -30,7 +26,7 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 const RouterUnconnected: FC<Props> = memo(
   ({ route, mode, router: { waypoints }, editorSetRouter, distance }) => {
     const [dist, setDist] = useState(0);
-    const [end, setEnd] = useState<LatLngLiteral>(null);
+    const [end, setEnd] = useState<LatLngLiteral | null>(null);
     const [direction, setDirection] = useState<boolean>(false);
 
     const updateWaypoints = useCallback(

src/map/Sticker/index.tsx

@@ -20,8 +20,8 @@ interface IProps {
   mapDropSticker: (index: number) => void;
 }
 
-export const getLabelDirection = (angle: number): 'left' | 'right' =>
+export const getLabelDirection = (angle?: number): 'left' | 'right' =>
-  angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
+  !!angle && angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
 
 const getX = e =>
   e.touches && e.touches.length > 0
@@ -36,50 +36,58 @@ const Sticker: React.FC<IProps> = ({
   mapSetSticker,
   mapDropSticker,
 }) => {
-  const [text, setText] = useState(sticker.text);
+  const [text, setText] = useState(sticker.text || '');
-  const [layer, setLayer] = React.useState<Marker>(null);
+  const [layer, setLayer] = React.useState<Marker | null>(null);
   const [dragging, setDragging] = React.useState(false);
-  const wrapper = useRef(null);
+  const wrapper = useRef<HTMLDivElement>(null);
 
   let angle = useRef(sticker.angle);
 
   const element = React.useMemo(() => document.createElement('div'), []);
 
-  const stickerArrow = React.useRef(null);
+  const stickerArrow = React.useRef<HTMLDivElement>(null);
-  const stickerImage = React.useRef(null);
+  const stickerImage = React.useRef<HTMLDivElement>(null);
 
   const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
   const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]);
 
   const updateAngle = useCallback(
     ang => {
-      if (!stickerImage.current || !stickerArrow.current) return;
-
       const x = Math.cos(ang + Math.PI) * 56 - 30;
       const y = Math.sin(ang + Math.PI) * 56 - 30;
 
+      if (!stickerImage.current || !stickerArrow.current) {
+        return;
+      }
+
       stickerImage.current.style.left = String(6 + x);
       stickerImage.current.style.top = String(6 + y);
 
       stickerArrow.current.style.transform = `rotate(${ang + Math.PI}rad)`;
     },
-    [stickerArrow, stickerImage, angle]
+    [stickerArrow, stickerImage]
   );
 
   const onDragStart = React.useCallback(() => {
+    if (!layer?.dragging) {
+      return
+    }
+
     layer.dragging.disable();
     MainMap.dragging.disable();
     MainMap.disableClicks();
 
     setDragging(true);
-  }, [setDragging, layer, MainMap]);
+  }, [setDragging, layer]);
 
   const onDragStop = React.useCallback(
     event => {
       event.stopPropagation();
       event.preventDefault();
 
-      if (!layer) return;
+      if (!layer?.dragging) {
+        return;
+      }
 
       setDragging(false);
       onChange({
@@ -134,7 +142,9 @@ const Sticker: React.FC<IProps> = ({
     });
   }, [text, onChange, sticker]);
 
-  const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]);
+  const direction = React.useMemo(() => {
+    getLabelDirection(sticker?.angle)
+  }, [sticker.angle]);
 
   useEffect(() => {
     updateAngle(sticker.angle);
@@ -148,7 +158,8 @@ const Sticker: React.FC<IProps> = ({
 
   useEffect(() => {
     if (!layer) return;
-    setText(sticker.text);
+
+    setText(sticker.text || '');
   }, [layer, sticker.text]);
 
   useEffect(() => {

src/map/Stickers/index.tsx

@@ -14,7 +14,7 @@ interface IProps {
 }
 
 const Stickers: FC<IProps> = memo(({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
-  const [layer, setLayer] = useState<FeatureGroup>(null);
+  const [layer, setLayer] = useState<FeatureGroup | null>(null);
   const [zoom, setZoom] = useState(MainMap.getZoom());
 
   const onZoomChange = useCallback(

src/map/TileLayer/index.tsx

@@ -10,7 +10,7 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 const TileLayer: React.FC<IProps> = React.memo(({ children, provider, map }) => {
-  const [layer, setLayer] = React.useState<TileLayerInterface>(null);
+  const [layer, setLayer] = React.useState<TileLayerInterface | undefined>(undefined);
 
   React.useEffect(() => {
     if (!map) return;
@@ -34,7 +34,11 @@ const TileLayer: React.FC<IProps> = React.memo(({ children, provider, map }) =>
     layer.setUrl(url);
   }, [layer, provider]);
 
-  return <TileContext.Provider value={layer}>{children}</TileContext.Provider>;
+  return (
+    <TileContext.Provider value={layer}>
+      {children}
+    </TileContext.Provider>
+  );
 });
 
 export { TileLayer };

src/redux/editor/index.ts

@@ -41,7 +41,7 @@ export interface IEditorState {
   distance: number;
   estimated: number;
   speed: number;
-  activeSticker: { set?: string; sticker?: string };
+  activeSticker: { set: string; sticker: string };
   is_empty: boolean;
   is_published: boolean;
   is_routing: boolean;
@@ -134,7 +134,7 @@ export const EDITOR_INITIAL_STATE = {
   },
 
   save: {
-    error: null,
+    error: '',
     finished: false,
     overwriting: false,
     processing: false,

src/redux/editor/sagas.ts

@@ -69,8 +69,14 @@ import uuid from 'uuid';
 import { getRandomColor, getAdaptiveScale } from '~/utils/dom';
 
 const hideLoader = () => {
-  document.getElementById('loader').style.opacity = String(0);
+  const el = document.getElementById('loader');
-  document.getElementById('loader').style.pointerEvents = 'none';
+
+  if (!el) {
+    return true;
+  }
+
+  el.style.opacity = String(0);
+  el.style.pointerEvents = 'none';
 
   return true;
 };
@@ -125,6 +131,10 @@ function* getRenderData() {
   canvas.height = window.innerHeight;
   const ctx = canvas.getContext('2d');
 
+  if (!ctx) {
+    return
+  }
+
   const geometry = getTilePlacement();
   const points = getPolyPlacement(route);
   const sticker_points = getStickersPlacement(stickers);
@@ -184,6 +194,11 @@ function* getCropData({ x, y, width, height }) {
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    return
+  }
+
   const image = yield imageFetcher(data);
 
   ctx.drawImage(image, -x, -y);
@@ -281,7 +296,7 @@ function* mapClick({ latlng }: ReturnType<typeof mapClicked>) {
 
 function* routerSubmit() {
   const route: ReturnType<typeof selectMapRoute> = yield select(selectMapRoute);
-  const latlngs: LatLng[] = path(['_routes', 0, 'coordinates'], OsrmRouter);
+  const latlngs: LatLng[] = path(['_routes', 0, 'coordinates'], OsrmRouter) || [];
 
   const coordinates = simplify(latlngs);
 

src/redux/map/index.ts

@@ -28,7 +28,7 @@ export const MAP_INITIAL_STATE: IMapReducer = {
   address: '',
   address_origin: '',
   description: '',
-  owner: { id: null },
+  owner: { id: '' },
   is_public: false,
   zoom: 13,
 }

src/redux/map/sagas.ts

@@ -1,40 +1,30 @@
-import {
+import { call, delay, put, race, select, take, TakeEffect, takeEvery, takeLatest } from 'redux-saga/effects';
-  takeEvery,
-  select,
-  put,
-  call,
-  TakeEffect,
-  race,
-  take,
-  takeLatest,
-  delay,
-} from 'redux-saga/effects';
 import { MAP_ACTIONS } from './constants';
 import {
-  mapClicked,
   mapAddSticker,
-  mapSetProvider,
+  mapClicked,
   mapSet,
-  mapSetTitle,
   mapSetAddressOrigin,
+  mapSetProvider,
   mapSetRoute,
   mapSetStickers,
+  mapSetTitle,
 } from './actions';
-import { selectUser, selectUserUser } from '~/redux/user/selectors';
+import { selectUser } from '~/redux/user/selectors';
 import { MODES } from '~/constants/modes';
 import {
+  editorCaptureHistory,
   editorChangeMode,
+  editorClearAll,
+  editorSendSaveRequest,
+  editorSetActiveSticker,
   editorSetChanged,
   editorSetEditing,
-  editorSetReady,
-  editorSetActiveSticker,
-  editorSendSaveRequest,
-  editorSetSave,
-  editorClearAll,
   editorSetHistory,
-  editorCaptureHistory,
+  editorSetReady,
+  editorSetSave,
 } from '~/redux/editor/actions';
-import { pushLoaderState, getUrlData, pushPath } from '~/utils/history';
+import { getUrlData, pushLoaderState, pushPath } from '~/utils/history';
 import { getStoredMap, postMap } from '~/utils/api';
 import { Unwrap } from '~/utils/middleware';
 import { selectMap, selectMapProvider, selectMapRoute, selectMapStickers } from './selectors';
@@ -70,8 +60,11 @@ export function* replaceAddressIfItsBusy(destination, original) {
 }
 
 export function* loadMapSaga(path) {
+  try {
     const {
-    data: { route, error, random_url },
+      data: {
+        route, error, random_url,
+      },
     }: Unwrap<typeof getStoredMap> = yield call(getStoredMap, { name: path });
 
     if (route && !error) {
@@ -85,7 +78,7 @@ export function* loadMapSaga(path) {
           description: route.description,
           is_public: route.is_public,
           logo: route.logo,
-      })
+        }),
       );
 
       yield put(editorSetHistory({ records: [{ route: route.route, stickers: route.stickers }] }));
@@ -93,6 +86,10 @@ export function* loadMapSaga(path) {
     }
 
     return null;
+  } catch (e) {
+    console.log(e);
+    yield call(startEmptyEditorSaga);
+  }
 }
 
 export function* startEmptyEditorSaga() {
@@ -142,10 +139,10 @@ export function* mapInitSaga() {
   yield put(mapSetProvider(provider));
 
   if (hash && /^#map/.test(hash)) {
-    const [, newUrl] = hash.match(/^#map[:/?!](.*)$/);
+    const matches = hash.match(/^#map[:/?!](.*)$/);
 
-    if (newUrl) {
+    if (matches && matches[1]) {
-      yield pushPath(`/${newUrl}`);
+      yield pushPath(`/${matches[1]}`);
       yield call(setReadySaga);
       return;
     }
@@ -161,7 +158,7 @@ function* setActiveStickerSaga() {
   yield put(editorChangeMode(MODES.STICKERS));
 }
 
-function* setTitleSaga({ title }: ReturnType<typeof mapSetTitle>) {
+function setTitleSaga({ title }: ReturnType<typeof mapSetTitle>) {
   if (title) {
     document.title = `${title} | Редактор маршрутов`;
   }
@@ -216,7 +213,7 @@ function* clearSaga({ type }) {
   const { mode, activeSticker }: ReturnType<typeof selectEditor> = yield select(selectEditor);
 
   if (activeSticker && activeSticker.set && activeSticker.sticker) {
-    yield put(editorSetActiveSticker(null));
+    yield put(editorSetActiveSticker({ set: '', sticker: '' }));
   }
 
   if (mode !== MODES.NONE) {
@@ -231,19 +228,19 @@ function* sendSaveRequestSaga({
   is_public,
   description,
 }: ReturnType<typeof editorSendSaveRequest>) {
+  try {
     const { route, stickers, provider }: ReturnType<typeof selectMap> = yield select(selectMap);
 
     if (!route.length && !stickers.length) {
       return yield put(
-      editorSetSave({ error: TIPS.SAVE_EMPTY, loading: false, overwriting: false, finished: false })
+        editorSetSave({ error: TIPS.SAVE_EMPTY, loading: false, overwriting: false, finished: false }),
       );
     }
 
     const { logo }: ReturnType<typeof selectMap> = yield select(selectMap);
     const { distance }: ReturnType<typeof selectEditor> = yield select(selectEditor);
-  const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
 
-  yield put(editorSetSave({ loading: true, overwriting: false, finished: false, error: null }));
+    yield put(editorSetSave({ loading: true, overwriting: false, finished: false, error: '' }));
 
     const {
       result,
@@ -255,7 +252,6 @@ function* sendSaveRequestSaga({
       cancel: TakeEffect;
     } = yield race({
       result: postMap({
-      token,
         route,
         stickers,
         title,
@@ -285,7 +281,7 @@ function* sendSaveRequestSaga({
           loading: false,
           overwriting: false,
           finished: false,
-      })
+        }),
       );
 
     if (timeout || !result || !result.data.route || !result.data.route.address)
@@ -295,7 +291,7 @@ function* sendSaveRequestSaga({
           loading: false,
           overwriting: false,
           finished: false,
-      })
+        }),
       );
 
     yield put(
@@ -304,7 +300,7 @@ function* sendSaveRequestSaga({
         title: result.data.route.title,
         is_public: result.data.route.is_public,
         description: result.data.route.description,
-    })
+      }),
     );
 
     yield put(editorSetReady(false));
@@ -317,8 +313,11 @@ function* sendSaveRequestSaga({
         loading: false,
         overwriting: false,
         finished: true,
-    })
+      }),
     );
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* setChanged() {
@@ -328,14 +327,10 @@ function* setChanged() {
   yield put(editorSetChanged(true));
 }
 
-function* onZoomChange() {
-
-}
-
 export function* mapSaga() {
   yield takeEvery(
     [MAP_ACTIONS.SET_ROUTE, MAP_ACTIONS.SET_STICKER, MAP_ACTIONS.SET_STICKERS],
-    setChanged
+    setChanged,
   );
 
   yield takeEvery(EDITOR_ACTIONS.START_EDITING, startEditingSaga);
@@ -351,6 +346,6 @@ export function* mapSaga() {
       EDITOR_ACTIONS.CLEAR_ALL,
       EDITOR_ACTIONS.CLEAR_CANCEL,
     ],
-    clearSaga
+    clearSaga,
   );
 }

src/redux/store.ts

@@ -18,9 +18,12 @@ import { map, IMapReducer } from '~/redux/map';
 import { mapSaga } from '~/redux/map/sagas';
 import { watchLocation, getLocation } from '~/utils/window';
 import { LatLngLiteral } from 'leaflet';
-import { setUserLocation } from './user/actions';
+import { setUserLocation, userLogout } from './user/actions';
 import { MainMap } from '~/constants/map';
 import { mapZoomChange } from './map/actions';
+import { assocPath } from 'ramda';
+import { AxiosError } from 'axios';
+import { api } from '~/utils/api/instance';
 
 const userPersistConfig: PersistConfig = {
   key: 'user',
@@ -64,6 +67,28 @@ export function configureStore(): { store: Store<any>; persistor: Persistor } {
 
   const persistor = persistStore(store);
 
+  // Pass token to axios
+  api.interceptors.request.use(options => {
+    const token = store.getState().user.token;
+
+    if (!token) {
+      return options;
+    }
+
+    return assocPath(['headers', 'authorization'], `Bearer ${token}`, options);
+  });
+
+  // Logout on 401
+  api.interceptors.response.use(undefined, (error: AxiosError<{ error: string }>) => {
+    if (error.response?.status === 401) {
+      store.dispatch(userLogout());
+    }
+
+    error.message = error?.response?.data?.error || error?.response?.statusText || error.message;
+
+    throw error;
+  });
+
   return { store, persistor };
 }
 
@@ -74,5 +99,5 @@ history.listen((location, action) => {
   store.dispatch(editorLocationChanged(location.pathname));
 });
 
-watchLocation((location: LatLngLiteral) => store.dispatch(setUserLocation(location)));
+watchLocation((location: LatLngLiteral | undefined) => store.dispatch(setUserLocation(location)));
 MainMap.on('zoomend', event => store.dispatch(mapZoomChange(event.target._zoom)))

src/redux/user/index.ts

@@ -15,7 +15,7 @@ export interface IRouteListItem {
 export interface IRootReducer {
   // ready: boolean,
   user: IUser;
-  location: LatLngLiteral;
+  location?: LatLngLiteral;
   routes: {
     limit: 0;
     loading: boolean;
@@ -38,7 +38,7 @@ export type IRootState = Readonly<IRootReducer>;
 
 export const INITIAL_STATE: IRootReducer = {
   user: { ...DEFAULT_USER },
-  location: null,
+  location: undefined,
   routes: {
     limit: 0,
     loading: false, // <-- maybe delete this

src/redux/user/sagas.ts

@@ -1,5 +1,5 @@
 import { REHYDRATE, RehydrateAction } from 'redux-persist';
-import { takeLatest, select, call, put, takeEvery, delay } from 'redux-saga/effects';
+import { call, delay, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 import {
   checkIframeToken,
   checkUserToken,
@@ -9,15 +9,16 @@ import {
   modifyRoute,
   sendRouteStarred,
 } from '~/utils/api';
+import * as ActionCreators from '~/redux/user/actions';
 import {
-  searchSetTab,
-  setUser,
   mapsSetShift,
   searchChangeDistance,
   searchPutRoutes,
   searchSetLoading,
+  searchSetTab,
   searchSetTitle,
   setRouteStarred,
+  setUser,
   userLogin,
 } from '~/redux/user/actions';
 
@@ -26,8 +27,6 @@ import { USER_ACTIONS } from '~/redux/user/constants';
 import { DEFAULT_USER } from '~/constants/auth';
 
 import { DIALOGS, TABS } from '~/constants/dialogs';
-
-import * as ActionCreators from '~/redux/user/actions';
 import { Unwrap } from '~/utils/middleware';
 import { selectUser, selectUserUser } from './selectors';
 import { mapInitSaga } from '~/redux/map/sagas';
@@ -35,6 +34,7 @@ import { editorSetDialog, editorSetDialogActive } from '../editor/actions';
 import { selectEditor } from '../editor/selectors';
 
 function* generateGuestSaga() {
+  try {
     const {
       data: { user, random_url },
     }: Unwrap<typeof getGuestToken> = yield call(getGuestToken);
@@ -42,9 +42,13 @@ function* generateGuestSaga() {
     yield put(setUser({ ...user, random_url }));
 
     return { ...user, random_url };
+  } catch(e) {
+    console.log(e)
+  }
 }
 
 function* authCheckSaga({ key }: RehydrateAction) {
+  try {
     if (key !== 'user') return;
 
     pushLoaderState(70);
@@ -73,7 +77,6 @@ function* authCheckSaga({ key }: RehydrateAction) {
         data: { user, random_url },
       }: Unwrap<typeof checkUserToken> = yield call(checkUserToken, {
         id,
-      token,
       });
 
       if (user) {
@@ -93,6 +96,9 @@ function* authCheckSaga({ key }: RehydrateAction) {
     pushLoaderState(80);
 
     return yield call(mapInitSaga);
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* gotVkUserSaga({ user: u }: ReturnType<typeof ActionCreators.gotVkUser>) {
@@ -105,8 +111,7 @@ function* gotVkUserSaga({ user: u }: ReturnType<typeof ActionCreators.gotVkUser>
 }
 
 function* searchGetRoutes() {
-  const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
+  try {
-
     const {
       routes: {
         step,
@@ -116,7 +121,6 @@ function* searchGetRoutes() {
     }: ReturnType<typeof selectUser> = yield select(selectUser);
 
     const result: Unwrap<typeof getRouteList> = yield getRouteList({
-    token,
       search: title,
       min: distance[0],
       max: distance[1],
@@ -126,9 +130,13 @@ function* searchGetRoutes() {
     });
 
     return result;
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 export function* searchSetSagaWorker() {
+  try {
     const {
       routes: { filter },
     }: ReturnType<typeof selectUser> = yield select(selectUser);
@@ -152,11 +160,14 @@ export function* searchSetSagaWorker() {
         searchChangeDistance([
           filter.min > min && filter.distance[0] <= filter.min ? min : filter.distance[0],
           filter.max < max && filter.distance[1] >= filter.max ? max : filter.distance[1],
-      ])
+        ]),
       );
     }
 
     return yield put(searchSetLoading(false));
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* searchSetSaga() {
@@ -167,6 +178,7 @@ function* searchSetSaga() {
 }
 
 function* openMapDialogSaga({ tab }: ReturnType<typeof ActionCreators.openMapDialog>) {
+  try {
     const {
       routes: {
         filter: { tab: current },
@@ -187,6 +199,9 @@ function* openMapDialogSaga({ tab }: ReturnType<typeof ActionCreators.openMapDia
     yield put(editorSetDialogActive(true));
 
     return tab;
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* searchSetTabSaga() {
@@ -210,6 +225,7 @@ function* setUserSaga() {
 }
 
 function* mapsLoadMoreSaga() {
+  try {
     const {
       routes: { limit, list, shift, step, loading, filter },
     }: ReturnType<typeof selectUser> = yield select(selectUser);
@@ -237,7 +253,7 @@ function* mapsLoadMoreSaga() {
         searchChangeDistance([
           filter.min > min && filter.distance[0] <= filter.min ? min : filter.distance[0],
           filter.max < max && filter.distance[1] >= filter.max ? max : filter.distance[1],
-      ])
+        ]),
       );
     }
 
@@ -249,13 +265,16 @@ function* mapsLoadMoreSaga() {
         shift: resp_shift,
         step: resp_step,
         list: [...list, ...routes],
-    })
+      }),
     );
     yield put(searchSetLoading(false));
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* dropRouteSaga({ address }: ReturnType<typeof ActionCreators.dropRoute>) {
-  const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
+  try {
     const {
       routes: {
         list,
@@ -277,11 +296,14 @@ function* dropRouteSaga({ address }: ReturnType<typeof ActionCreators.dropRoute>
           step,
           shift: shift > 0 ? shift - 1 : 0,
           limit: limit > 0 ? limit - 1 : limit,
-      })
+        }),
       );
     }
 
-  return yield call(dropRoute, { address, token });
+    return yield call(dropRoute, { address });
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* modifyRouteSaga({
@@ -289,7 +311,7 @@ function* modifyRouteSaga({
   title,
   is_public,
 }: ReturnType<typeof ActionCreators.modifyRoute>) {
-  const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
+  try {
     const {
       routes: {
         list,
@@ -311,31 +333,37 @@ function* modifyRouteSaga({
           step,
           shift: shift > 0 ? shift - 1 : 0,
           limit: limit > 0 ? limit - 1 : limit,
-      })
+        }),
       );
     }
 
-  return yield call(modifyRoute, { address, token, title, is_public });
+    return yield call(modifyRoute, { address, title, is_public });
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 function* toggleRouteStarredSaga({
   address,
 }: ReturnType<typeof ActionCreators.toggleRouteStarred>) {
-  const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
+  try {
     const {
       routes: { list },
     }: ReturnType<typeof selectUser> = yield select(selectUser);
 
     const route = list.find(el => el.address === address);
 
-  yield put(setRouteStarred(address, !route.is_published));
+    yield put(setRouteStarred(address, !route?.is_published));
+
     const result = yield sendRouteStarred({
-    token,
       address,
-    is_published: !route.is_published,
+      is_published: !route?.is_published,
     });
 
-  if (!result) return yield put(setRouteStarred(address, route.is_published));
+    if (!result) return yield put(setRouteStarred(address, !!route?.is_published));
+  } catch (e) {
+    console.log(e);
+  }
 }
 
 export function* updateUserRoutes() {
@@ -350,7 +378,7 @@ export function* userSaga() {
 
   yield takeLatest(
     [USER_ACTIONS.SEARCH_SET_TITLE, USER_ACTIONS.SEARCH_SET_DISTANCE],
-    searchSetSaga
+    searchSetSaga,
   );
 
   yield takeLatest(USER_ACTIONS.OPEN_MAP_DIALOG, openMapDialogSaga);

src/utils/api.ts

@@ -1,258 +0,0 @@
-import axios from 'axios/index';
-import { API } from '~/constants/api';
-import { IRootState, IRouteListItem } from '~/redux/user';
-import { IUser } from '~/constants/auth';
-import { CLIENT } from '~/config/frontend';
-import { LatLngLiteral } from 'leaflet';
-import {
-  resultMiddleware,
-  errorMiddleware,
-  IResultWithStatus,
-  configWithToken,
-} from './middleware';
-import { IRoute } from '~/redux/map/types';
-import { INominatimResult } from '~/redux/types';
-import { MainMap } from '~/constants/map';
-
-const arrayToObject = (array: any[], key: string): {} =>
-  array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
-
-interface IGetRouteList {
-  min: number;
-  max: number;
-  tab: string;
-  search: string;
-  step: IRootState['routes']['step'];
-  shift: IRootState['routes']['step'];
-  token: IRootState['user']['token'];
-}
-
-interface IGetRouteListResult {
-  min: IRootState['routes']['filter']['min'];
-  max: IRootState['routes']['filter']['max'];
-  limit: IRootState['routes']['limit'];
-  step: IRootState['routes']['step'];
-  shift: IRootState['routes']['shift'];
-  list: IRootState['routes']['list'];
-}
-
-export const checkUserToken = ({
-  id,
-  token,
-}: {
-  id: IRootState['user']['id'];
-  token: IRootState['user']['token'];
-}): Promise<IResultWithStatus<{
-  user: IUser;
-  random_url: string;
-  routes: IRouteListItem[];
-}>> =>
-  axios
-    .get(API.CHECK_TOKEN, {
-      params: { id, token },
-    })
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const getGuestToken = (): Promise<IResultWithStatus<{
-  user: IUser;
-  random_url: string;
-}>> =>
-  axios
-    .get(API.GET_GUEST)
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const getStoredMap = ({
-  name,
-}: {
-  name: IRoute['address'];
-}): Promise<IResultWithStatus<{
-  route: IRoute;
-  error?: string;
-  random_url: string;
-}>> =>
-  axios
-    .get(API.GET_MAP, {
-      params: { name },
-    })
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const postMap = ({
-  title,
-  address,
-  route,
-  stickers,
-  force,
-  logo,
-  distance,
-  provider,
-  is_public,
-  description,
-  token,
-}: Partial<IRoute> & {
-  force: boolean;
-  token: string;
-}): Promise<IResultWithStatus<{
-  route: IRoute;
-  error?: string;
-  code?: string;
-}>> =>
-  axios
-    .post(
-      API.POST_MAP,
-      {
-        route: {
-          title,
-          address,
-          route,
-          stickers,
-          logo,
-          distance,
-          provider,
-          is_public,
-          description,
-        },
-        force,
-      },
-      configWithToken(token)
-    )
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const checkIframeToken = ({
-  viewer_id,
-  auth_key,
-}: {
-  viewer_id: string;
-  auth_key: string;
-}) =>
-  axios
-    .get(API.IFRAME_LOGIN_VK, {
-      params: { viewer_id, auth_key },
-    })
-    .then(result => result && result.data && result.data.success && result.data.user)
-    .catch(() => false);
-
-export const getRouteList = ({
-  search,
-  min,
-  max,
-  tab,
-  token,
-  step,
-  shift,
-}: IGetRouteList): Promise<IResultWithStatus<{
-  routes: IRoute[];
-  limits: {
-    min: number;
-    max: number;
-    count: number;
-  };
-  filter: {
-    min: number;
-    max: number;
-    shift: number;
-    step: number;
-  };
-}>> =>
-  axios
-    .get(
-      API.GET_ROUTE_LIST(tab),
-      configWithToken(token, {
-        params: {
-          search,
-          min,
-          max,
-          token,
-          step,
-          shift,
-        },
-      })
-    )
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const checkOSRMService = (bounds: LatLngLiteral[]): Promise<boolean> =>
-  CLIENT &&
-  CLIENT.OSRM_URL &&
-  axios
-    .get(CLIENT.OSRM_TEST_URL(bounds))
-    .then(() => true)
-    .catch(() => false);
-
-export const checkNominatimService = (): Promise<boolean> =>
-  CLIENT &&
-  CLIENT.NOMINATIM_TEST_URL &&
-  axios
-    .get(CLIENT.NOMINATIM_TEST_URL)
-    .then(() => true)
-    .catch(() => false);
-
-export const searchNominatim = (query: string) =>
-  CLIENT &&
-  CLIENT.NOMINATIM_URL &&
-  axios
-    .get(`${CLIENT.NOMINATIM_URL} ${query}`, {
-      params: {
-        format: 'json',
-        country_code: 'ru',
-        'accept-language': 'ru_RU',
-        dedupe: 1,
-      },
-    })
-    .then(
-      data =>
-        data &&
-        data.data &&
-        data.data.map(
-          (item): INominatimResult => ({
-            id: item.place_id,
-            latlng: {
-              lat: item.lat,
-              lng: item.lon,
-            },
-            title: item.display_name,
-          })
-        )
-    )
-    .catch(() => []);
-
-export const dropRoute = ({ address, token }: { address: string; token: string }): Promise<any> =>
-  axios
-    .delete(API.DROP_ROUTE, configWithToken(token, { data: { address } }))
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const modifyRoute = ({
-  address,
-  token,
-  title,
-  is_public,
-}: {
-  address: string;
-  token: string;
-  title: string;
-  is_public: boolean;
-}): Promise<IResultWithStatus<{
-  route: IRoute;
-}>> =>
-  axios
-    .patch(API.MODIFY_ROUTE, { address, token, is_public, title }, configWithToken(token))
-    .then(resultMiddleware)
-    .catch(errorMiddleware);
-
-export const sendRouteStarred = ({
-  token,
-  address,
-  is_published,
-}: {
-  token: string;
-  address: string;
-  is_published: boolean;
-}): Promise<IResultWithStatus<{ route: IRoute }>> =>
-  axios
-    .post(API.SET_STARRED, { address, is_published }, configWithToken(token))
-    .then(resultMiddleware)
-    .catch(errorMiddleware);

src/utils/api/index.ts

@@ -0,0 +1,214 @@
+import { API } from '~/constants/api';
+import { IRootState, IRouteListItem } from '~/redux/user';
+import { IUser } from '~/constants/auth';
+import { CLIENT } from '~/config/frontend';
+import { LatLngLiteral } from 'leaflet';
+import { IRoute } from '~/redux/map/types';
+import { INominatimResult } from '~/redux/types';
+import { api } from './instance';
+
+interface IGetRouteList {
+  min: number;
+  max: number;
+  tab: string;
+  search: string;
+  step: IRootState['routes']['step'];
+  shift: IRootState['routes']['step'];
+}
+
+export const checkUserToken = ({
+  id,
+}: {
+  id: IRootState['user']['id'];
+}) =>
+  api
+    .get<{
+      user: IUser;
+      random_url: string;
+      routes: IRouteListItem[];
+    }>(API.CHECK_TOKEN, {
+      params: { id },
+    });
+
+export const getGuestToken = () =>
+  api
+    .get<{
+      user: IUser;
+      random_url: string;
+    }>(API.GET_GUEST);
+
+export const getStoredMap = ({
+  name,
+}: {
+  name: IRoute['address'];
+}) =>
+  api
+    .get<{
+      route: IRoute;
+      error?: string;
+      random_url: string;
+    }>(API.GET_MAP, {
+      params: { name },
+    });
+
+export const postMap = ({
+  title,
+  address,
+  route,
+  stickers,
+  force,
+  logo,
+  distance,
+  provider,
+  is_public,
+  description,
+}: Partial<IRoute> & {
+  force: boolean;
+}) =>
+  api
+    .post<{
+      route: IRoute;
+      error?: string;
+      code?: string;
+    }>(
+      API.POST_MAP,
+      {
+        route: {
+          title,
+          address,
+          route,
+          stickers,
+          logo,
+          distance,
+          provider,
+          is_public,
+          description,
+        },
+        force,
+      },
+    );
+
+export const checkIframeToken = ({
+  viewer_id,
+  auth_key,
+}: {
+  viewer_id: string;
+  auth_key: string;
+}) =>
+  api
+    .get<{
+      success: boolean,
+      user: IUser,
+    }>(API.IFRAME_LOGIN_VK, {
+      params: { viewer_id, auth_key },
+    })
+    .then(result => !!result.data.success && !!result.data.user)
+    .catch(() => false);
+
+export const getRouteList = ({
+  search,
+  min,
+  max,
+  tab,
+  step,
+  shift,
+}: IGetRouteList) =>
+  api
+    .get<{
+      routes: IRoute[];
+      limits: {
+        min: number;
+        max: number;
+        count: number;
+      };
+      filter: {
+        min: number;
+        max: number;
+        shift: number;
+        step: number;
+      };
+    }>(
+      API.GET_ROUTE_LIST(tab),
+      {
+        params: {
+          search,
+          min,
+          max,
+          step,
+          shift,
+        },
+      },
+    );
+
+export const checkOSRMService = (bounds: LatLngLiteral[]) =>
+  !!CLIENT &&
+  !!CLIENT.OSRM_URL &&
+  api
+    .get<boolean>(CLIENT.OSRM_TEST_URL(bounds))
+    .then(() => true)
+    .catch(() => false);
+
+export const checkNominatimService = () =>
+  !!CLIENT &&
+  !!CLIENT.NOMINATIM_TEST_URL &&
+  api
+    .get<boolean>(CLIENT.NOMINATIM_TEST_URL)
+    .then(() => true)
+    .catch(() => false);
+
+export const searchNominatim = (query: string) =>
+  CLIENT &&
+  CLIENT.NOMINATIM_URL &&
+  api
+    .get(`${CLIENT.NOMINATIM_URL} ${query}`, {
+      params: {
+        format: 'json',
+        country_code: 'ru',
+        'accept-language': 'ru_RU',
+        dedupe: 1,
+      },
+    })
+    .then(
+      data =>
+        data &&
+        data.data &&
+        data.data.map(
+          (item): INominatimResult => ({
+            id: item.place_id,
+            latlng: {
+              lat: item.lat,
+              lng: item.lon,
+            },
+            title: item.display_name,
+          }),
+        ),
+    )
+    .catch(() => []);
+
+export const dropRoute = ({ address }: { address: string }) =>
+  api
+    .delete(API.DROP_ROUTE, { data: { address } });
+
+export const modifyRoute = ({
+  address,
+  title,
+  is_public,
+}: {
+  address: string;
+  title: string;
+  is_public: boolean;
+}) =>
+  api
+    .patch<{
+      route: IRoute;
+    }>(API.MODIFY_ROUTE, { address, is_public, title });
+
+export const sendRouteStarred = ({
+  address,
+  is_published,
+}: {
+  address: string;
+  is_published: boolean;
+}) =>
+  api
+    .post<{ route: IRoute }>(API.SET_STARRED, { address, is_published });

src/utils/api/instance.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+import { CLIENT } from '~/config/frontend';
+
+export const api = axios.create({
+  baseURL: CLIENT.API_ADDR,
+})

src/utils/context.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Map, TileLayer } from 'leaflet';
 
-export const MapContext = React.createContext<Map>(null);
+export const MapContext = React.createContext<Map | undefined>(undefined);
-export const TileContext = React.createContext<TileLayer>(null)
+export const TileContext = React.createContext<TileLayer | undefined>(undefined)

src/utils/gpx.ts

@@ -39,7 +39,7 @@ export const getGPXString = ({
   <metadata>
     <name>${title || 'GPX Track'}</name> 
   </metadata>
-  ${stickers.reduce(
+  ${(stickers || []).reduce(
     (cat, { latlng: { lat, lng }, text }) =>
       `${cat}
           <wpt lat="${lat}" lon="${lng}">            
@@ -93,12 +93,12 @@ export const importGpxTrack = async (file: File) => {
           return trkseg.trkpt
             ? [
                 ...trkseg_res,
-                ...trkseg.trkpt.map(pnt => ({ lat: pnt['$'].lat, lng: pnt['$'].lon })),
+                ...trkseg.trkpt.map(pnt => new LatLng(pnt['$'].lat, pnt['$'].lon)),
               ]
             : trkseg_res;
         }, trk_res)
       : trk_res;
-  }, []);
+  }, [] as LatLng[]);
 
   return [
     {

src/utils/history.ts

@@ -36,20 +36,20 @@ export const parseQuery = (queryString: string) => {
 };
 
 export const pushLoaderState = (state: number) => {
-  document.getElementById('loader-bar').style.width = `${state}%`;
+  document.getElementById('loader-bar')!.style.width = `${state}%`;
 };
 
 export const countDownToRefresh = (left: number = API_RETRY_INTERVAL): void => {
   if (left <= 0) return document.location.reload();
 
-  document.getElementById('loader-bar').style.width = `${(left / API_RETRY_INTERVAL) * 100}%`;
+  document.getElementById('loader-bar')!.style.width = `${(left / API_RETRY_INTERVAL) * 100}%`;
   setTimeout(() => countDownToRefresh(left - 0.25), 1000);
 };
 
 export const pushNetworkInitError = () => {
-  document.getElementById('loader-bar').classList.add('is_failed');
+  document.getElementById('loader-bar')!.classList.add('is_failed');
-  document.getElementById('loader-bar').style.width = '100%';
+  document.getElementById('loader-bar')!.style.width = '100%';
-  document.getElementById('loader-error').style.opacity = String(1);
+  document.getElementById('loader-error')!.style.opacity = String(1);
 
   countDownToRefresh();
 };

src/utils/map/ArrowsLayer.ts

@@ -9,6 +9,7 @@ import { LatLng, LatLngLiteral, LayerGroup, Map, Marker } from 'leaflet';
 import { arrowClusterIcon, createArrow } from '~/utils/arrow';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { angleBetweenPoints, dist2, middleCoord } from '~/utils/geom';
+import { MainMap } from '~/constants/map';
 
 class ArrowsLayer extends LayerGroup {
   constructor(props) {
@@ -46,13 +47,13 @@ class ArrowsLayer extends LayerGroup {
               ),
             ]
           : res,
-      []
+      [] as Marker[]
     );
 
     this.arrowLayer.addLayers(midpoints);
   };
 
-  map: Map;
+  map: Map = MainMap;
   arrowLayer = new MarkerClusterGroup({
     spiderfyOnMaxZoom: false,
     showCoverageOnHover: false,
@@ -62,10 +63,10 @@ class ArrowsLayer extends LayerGroup {
     iconCreateFunction: arrowClusterIcon,
   });
 
-  layers: Marker<any>[] = [];
+  layers: Marker[] = [];
 }
 
-ArrowsLayer.addInitHook(function() {
+ArrowsLayer.addInitHook(function(this: ArrowsLayer) {
   this.once('add', event => {
     if (event.target instanceof ArrowsLayer) {
       this.map = event.target._map;

src/utils/map/InteractivePoly.ts

@@ -36,9 +36,9 @@ class InteractivePoly extends Polyline {
 
     this.constraintsStyle = {
       ...this.constraintsStyle,
-      ...options.constraintsStyle,
+      ...(options?.constraintsStyle || {}),
     };
-    this.maxMarkers = options.maxMarkers || this.maxMarkers;
+    this.maxMarkers = options?.maxMarkers || this.maxMarkers;
 
     this.constrLine = new Polyline([], this.constraintsStyle);
 
@@ -162,10 +162,12 @@ class InteractivePoly extends Polyline {
           ? { ...obj, hidden: [...obj.hidden, marker] }
           : { ...obj, visible: [...obj.visible, marker] };
       },
-      { visible: [], hidden: [] }
+      { visible: [], hidden: [] } as Record<'visible' | 'hidden', Marker[]>
     );
 
-    if (visible.length > this.maxMarkers) return this.hideAllMarkers();
+    if (visible.length > (this.maxMarkers || 2)) {
+      return this.hideAllMarkers();
+    }
 
     this.showAllMarkers();
 
@@ -337,11 +339,11 @@ class InteractivePoly extends Polyline {
 
   onMarkerDrag = ({ target }: { target: Marker }) => {
     const coords = new Array(0)
-      .concat((this.vertex_index > 0 && this.markers[this.vertex_index - 1].getLatLng()) || [])
+      .concat((this.vertex_index! > 0 && this.markers[this.vertex_index! - 1].getLatLng()) || [])
       .concat(target.getLatLng())
       .concat(
-        (this.vertex_index < this.markers.length - 1 &&
+        (this.vertex_index! < this.markers.length - 1 &&
-          this.markers[this.vertex_index + 1].getLatLng()) ||
+          this.markers[this.vertex_index! + 1].getLatLng()) ||
           []
       );
 
@@ -369,17 +371,17 @@ class InteractivePoly extends Polyline {
   onMarkerDragEnd = ({ target }: { target: Marker }): void => {
     const latlngs = this.getLatLngs() as LatLngLiteral[];
     this.markerDragChangeDistance(
-      this.vertex_index,
+      this.vertex_index!,
-      latlngs[this.vertex_index],
+      latlngs[this.vertex_index!],
       target.getLatLng()
     );
 
-    this.replaceLatlng(target.getLatLng(), this.vertex_index);
+    this.replaceLatlng(target.getLatLng(), this.vertex_index!);
 
     this.is_dragging = false;
     this.constrLine.removeFrom(this._map);
 
-    this.vertex_index = null;
+    this.vertex_index = 0;
 
     if (this.is_drawing) this.startDrawing();
 
@@ -568,27 +570,27 @@ class InteractivePoly extends Polyline {
   is_drawing: boolean = false;
 
   drawing_direction: 'forward' | 'backward' = 'forward';
-  vertex_index?: number = null;
+  vertex_index: number = 0;
 
-  hint_prev_marker: number = null;
+  hint_prev_marker: number = 0;
   distance: number = 0;
 }
 
-InteractivePoly.addInitHook(function() {
+InteractivePoly.addInitHook(function(this: InteractivePoly) {
   this.once('add', event => {
     if (event.target instanceof InteractivePoly) {
-      this.map = event.target._map;
+      this._map = event.target._map;
 
-      this.map.on('touch', console.log);
+      this._map.on('touch', console.log);
 
       this.markerLayer.addTo(event.target._map);
       this.hintMarker.addTo(event.target._map);
       this.constrLine.addTo(event.target._map);
       this.touchHinter.addTo(event.target._map);
 
-      this.map.on('moveend', this.updateMarkers);
+      this._map.on('moveend', this.updateMarkers);
 
-      this.on('latlngschange', this.updateTouchHinter);
+      this.on('latlngschange' as any, this.updateTouchHinter as any);
 
       if (this.touchHinter && window.innerWidth < 768) {
         try {
@@ -605,7 +607,7 @@ InteractivePoly.addInitHook(function() {
       this.constrLine.removeFrom(this._map);
       this.touchHinter.removeFrom(this._map);
 
-      this.map.off('moveend', this.updateMarkers);
+      this._map.off('moveend', this.updateMarkers);
     }
   });
 });

src/utils/marks.ts

@@ -3,6 +3,7 @@ import { arrowClusterIcon } from '~/utils/arrow';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { allwaysPositiveAngleDeg, angleBetweenPoints, distKmHaversine } from '~/utils/geom';
 import classNames from 'classnames';
+import { MainMap } from '~/constants/map';
 
 const arrow_image = '/images/arrow.svg';
 
@@ -43,8 +44,7 @@ class KmMarksLayer extends LayerGroup {
   };
 
   drawMiddleMarkers = (latlngs: LatLngLiteral[]) => {
-    const marks = [];
+    const marks: Marker[] = [];
-    const arrows = [];
     let last_km_mark = 0;
 
     this.distance = latlngs.reduce((dist, current, index) => {
@@ -160,7 +160,7 @@ class KmMarksLayer extends LayerGroup {
   };
 
   options: KmMarksOptions;
-  map: Map;
+  map: Map = MainMap;
   marksLayer: MarkerClusterGroup = new MarkerClusterGroup({
     spiderfyOnMaxZoom: false,
     showCoverageOnHover: false,
@@ -173,7 +173,7 @@ class KmMarksLayer extends LayerGroup {
   distance: number = 0;
 }
 
-KmMarksLayer.addInitHook(function() {
+KmMarksLayer.addInitHook(function(this: KmMarksLayer) {
   this.once('add', event => {
     if (event.target instanceof KmMarksLayer) {
       this.map = event.target._map;

src/utils/middleware.ts

@@ -1,4 +1,4 @@
-import { AxiosRequestConfig } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 export type Unwrap<T> = T extends (...args: any[]) => Promise<infer U> ? U : T;
 
@@ -23,28 +23,3 @@ export const HTTP_RESPONSES = {
   NOT_FOUND: 404,
   TOO_MANY_REQUESTS: 429,
 };
-
-export const resultMiddleware = (<T extends {}>({
-  status,
-  data,
-}: {
-  status: number;
-  data: T;
-}): { status: number; data: T } => ({ status, data }));
-
-export const errorMiddleware = <T extends any>(debug): IResultWithStatus<T> => (debug && debug.response
-  ? debug.response
-  : {
-    status: HTTP_RESPONSES.CONNECTION_REFUSED,
-    data: {},
-    debug,
-    error: 'Ошибка сети',
-  });
-
-export const configWithToken = (
-  token: string,
-  config: AxiosRequestConfig = {},
-): AxiosRequestConfig => ({
-  ...config,
-  headers: { ...(config.headers || {}), Authorization: `${token}` },
-});

src/utils/renderer.ts

@@ -133,7 +133,7 @@ export const fetchImages = (
 ): Promise<{ x: number; y: number; image: HTMLImageElement }[]> => {
   const { minX, maxX, minY, maxY, zoom } = geometry;
 
-  const images = [];
+  const images: { x: number; y: number; source: string }[] = [];
   for (let x = minX; x <= maxX; x += 1) {
     for (let y = minY; y <= maxY; y += 1) {
       images.push({ x, y, source: getImageSource({ x, y, zoom }, provider) });
@@ -173,7 +173,7 @@ export const composePoly = ({
   ctx,
   color = 'gradient',
   weight = CLIENT.STROKE_WIDTH,
-  dash = null,
+  dash = [],
 }: {
   points: Point[];
   ctx: CanvasRenderingContext2D;
@@ -472,14 +472,14 @@ export const composeStickers = async ({
   if (!stickers || stickers.length < 0) return;
 
   stickers.map(({ x, y, angle, text }) => {
-    composeStickerArrow(ctx, x, y, angle, zoom);
+    composeStickerArrow(ctx, x, y, angle || 0, zoom);
 
-    if (text) composeStickerText(ctx, x, y, angle, text, zoom);
+    if (text) composeStickerText(ctx, x, y, angle || 0, text, zoom);
   });
 
   await Promise.all(
     stickers.map(({ x, y, angle, set, sticker }) =>
-      composeStickerImage(ctx, x, y, angle, set, sticker, zoom)
+      composeStickerImage(ctx, x, y, angle || 0, set, sticker, zoom)
     )
   );
 };

src/utils/window.ts

@@ -3,10 +3,10 @@ import { LatLngLiteral } from 'leaflet';
 
 export const isMobile = (): boolean => window.innerWidth <= MOBILE_BREAKPOINT;
 
-export const getLocation = (callback: (pos: LatLngLiteral) => void) => {
+export const getLocation = (callback: (pos: LatLngLiteral | undefined) => void) => {
   window.navigator.geolocation.getCurrentPosition(position => {
     if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude)
-      return callback(null);
+      return callback(undefined);
 
     const { latitude: lat, longitude: lng } = position.coords;
 
@@ -15,18 +15,18 @@ export const getLocation = (callback: (pos: LatLngLiteral) => void) => {
   });
 };
 
-export const watchLocation = (callback: (pos: LatLngLiteral) => void): number => {
+export const watchLocation = (callback: (pos: LatLngLiteral | undefined) => void): number => {
   return window.navigator.geolocation.watchPosition(
     position => {
       if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude)
-        return callback(null);
+        return callback(undefined);
 
       const { latitude: lat, longitude: lng } = position.coords;
 
       callback({ lat, lng });
       return;
     },
-    () => callback(null),
+    () => callback(undefined),
     {
       timeout: 30,
     }

tsconfig.json

@@ -11,7 +11,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",