typed MapListDialog

src/components/dialogs/MapListDialog.tsx

@@ -16,11 +16,12 @@ import { Range } from 'rc-slider';
 import { TABS } from '$constants/dialogs';
 import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
-import { IRootState } from '$redux/user/reducer';
+import { IRootState, IRouteListItem } from '$redux/user/reducer';
 
 interface Props extends IRootState {
   marks: { [x: number]: string },
-  routes_sorted: Array<string>,
+  routes_sorted: Array<IRouteListItem>,
+
   mapsLoadMore: typeof mapsLoadMore,
   searchSetDistance: typeof searchSetDistance,
   searchSetTitle: typeof searchSetTitle,
@@ -29,7 +30,7 @@ interface Props extends IRootState {
 }
 
 interface State {
-  editing_item: string,
+  editing_item: IRouteListItem['_id'],
 }
 
 class Component extends React.Component<Props, State> {
@@ -77,9 +78,8 @@ class Component extends React.Component<Props, State> {
           tab,
         }
       },
-      editing,
       marks,
-    } = this.props;
+    }: Props = this.props;
 
     const { editing_item } = this.state;
 
@@ -151,8 +151,10 @@ class Component extends React.Component<Props, State> {
             {
               list.map(route => (
                 <RouteRow
-                  editing={editing}
+                  title={route.title}
-                  {...route}
+                  distance={route.distance}
+                  _id={route._id}
+                  is_public={route.is_public}
                   tab={tab}
                   is_editing={(editing_item === route._id)}
                   openRoute={this.openRoute}

src/components/maps/RouteRow.tsx

@@ -17,7 +17,9 @@ interface Props {
   key: string,
 }
 
-export const RouteRow = ({ title, distance, _id, openRoute, tab, is_editing, startEditing }: any) => (
+export const RouteRow = ({
+  title, distance, _id, openRoute, tab, is_editing, startEditing
+}: Props) => (
   <div className={classnames('route-row-wrapper', { is_editing })}>
     {
       tab === 'mine' &&

src/redux/user/reducer.ts

@@ -9,13 +9,15 @@ import { DIALOGS, IDialogs, TABS } from '$constants/dialogs';
 import * as ActionCreators from '$redux/user/actions';
 import { IStickers } from "$constants/stickers";
 
-interface IRoute {
+export interface IRouteListItem {
-  lat: number,
-  lng: number,
   _id: string,
+  title: string,
+  distance: number,
+  is_public: boolean,
+  updated_at: string,
 }
 
-interface IRootReducer {
+export interface IRootReducer {
   ready: boolean,
   user: IUser,
   editing: boolean,
@@ -56,15 +58,15 @@ interface IRootReducer {
   routes: {
     limit: 0,
     loading: boolean,
-    list: Array<IRoute>,
+    list: Array<IRouteListItem>,
     step: number,
     shift: number,
     filter: {
-      title: '',
+      title: string,
       starred: boolean,
       distance: [number, number],
-      author: '',
+      author: string,
-      tab: '',
+      tab: string,
       min: number,
       max: number,
     }

src/redux/user/sagas.ts

@@ -476,7 +476,7 @@ function* searchGetRoutes() {
 
   const { routes: { step, shift, filter: { title, distance, tab } } } = yield select(getState);
 
-  return yield call(getRouteList, {
+  const result = yield call(getRouteList, {
     id,
     token,
     title,
@@ -486,6 +486,10 @@ function* searchGetRoutes() {
     author: tab === 'mine' ? id : '',
     starred: tab === 'starred',
   });
+
+  console.log('RESULT?', result);
+
+  return result;
 }
 
 function* searchSetSagaWorker() {

src/utils/api.js

@@ -1,49 +0,0 @@
-import axios from 'axios/index';
-
-import { API } from '$constants/api';
-
-const arrayToObject = (array, key) => array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
-
-export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, {
-  params: { id, token }
-}).then(result => (result && result.data && {
-  ...result.data,
-  id,
-  token,
-  routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {},
-})).catch(() => null);
-
-export const getGuestToken = () => axios.get(API.GET_GUEST).then(result => (result && result.data));
-
-export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, {
-  params: { name }
-}).then(result => (result && result.data && result.data.success && result.data));
-
-export const postMap = ({
-  title, address, route, stickers, id, token, force, logo, distance, provider, is_public,
-}) => axios.post(API.POST_MAP, {
-  title,
-  address,
-  route,
-  stickers,
-  id,
-  token,
-  force,
-  logo,
-  distance,
-  provider,
-  is_public,
-}).then(result => (result && result.data && result.data));
-
-export const checkIframeToken = ({ viewer_id, auth_key }) => 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 = ({
-  title, distance, author, starred, id, token, step, shift,
-}) => axios.get(API.GET_ROUTE_LIST, {
-  params: {
-    title, distance, author, starred, id, token, step, shift
-  }
-}).then(result => (result && result.data && result.data.success && result.data))
-  .catch(() => ({ list: [], min: 0, max: 0, limit: 0, step: 20, shift: 20 }));

src/utils/api.ts

@@ -0,0 +1,97 @@
+import axios, { AxiosPromise } from 'axios/index';
+import { API } from '$constants/api';
+import { IRootState } from "$redux/user/reducer";
+import { IUser } from "$constants/auth";
+import { ILatLng } from "$modules/Stickers";
+import { IStickerDump } from "$modules/Sticker";
+
+const arrayToObject = (array: any[], key: string): {} => array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
+
+interface IPostMap {
+  title: IRootState['title'],
+  address: IRootState['address'],
+  route: Array<ILatLng>,
+  stickers: Array<IStickerDump>,
+  id: IRootState['user']['id'],
+  token: IRootState['user']['token'],
+  force: boolean,
+  logo: IRootState['logo'],
+  distance: IRootState['distance'],
+  provider: IRootState['provider'],
+  is_public: IRootState['is_public'],
+}
+
+interface IGetRouteList {
+  title: IRootState['title'],
+  distance: IRootState['distance'],
+  author: IRootState['routes']['filter']['author'],
+  step: IRootState['routes']['step'],
+  shift: IRootState['routes']['step'],
+  starred: IRootState['routes']['filter']['starred'],
+  id: IRootState['user']['id'],
+  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']}
+):AxiosPromise<IUser> => axios.get(API.CHECK_TOKEN, {
+  params: { id, token }
+}).then(result => (result && result.data && {
+  ...result.data,
+  id,
+  token,
+  routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {},
+})).catch(() => null);
+
+export const getGuestToken = ():AxiosPromise<any> => axios.get(API.GET_GUEST).then(result => (result && result.data));
+
+export const getStoredMap = (
+  { name }: { name: IRootState['address'] }
+) => axios.get(API.GET_MAP, {
+  params: { name }
+})
+  .then(result => (
+    result && result.data && result.data.success && result.data
+  ));
+
+export const postMap = ({
+  title, address, route, stickers, id, token, force, logo, distance, provider, is_public,
+}: IPostMap) => axios.post(API.POST_MAP, {
+  title,
+  address,
+  route,
+  stickers,
+  id,
+  token,
+  force,
+  logo,
+  distance,
+  provider,
+  is_public,
+}).then(result => (result && result.data && result.data));
+
+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 = ({
+  title, distance, author, starred, id, token, step, shift,
+}: IGetRouteList): AxiosPromise<IGetRouteListResult> => axios.get(API.GET_ROUTE_LIST, {
+  params: {
+    title, distance, author, starred, id, token, step, shift
+  }
+}).then(result => (result && result.data && result.data.success && result.data))
+  .catch(() => ({ list: [], min: 0, max: 0, limit: 0, step: 20, shift: 20 }));