From cf6866240bf7f7b795a75a0ff8d2cd682568459a Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 21 Feb 2019 11:34:35 +0700 Subject: [PATCH] typed MapListDialog --- src/components/dialogs/MapListDialog.tsx | 16 ++-- src/components/maps/RouteRow.tsx | 4 +- src/redux/user/reducer.ts | 18 +++-- src/redux/user/sagas.ts | 6 +- src/utils/api.js | 49 ------------ src/utils/api.ts | 97 ++++++++++++++++++++++++ 6 files changed, 124 insertions(+), 66 deletions(-) delete mode 100644 src/utils/api.js create mode 100644 src/utils/api.ts diff --git a/src/components/dialogs/MapListDialog.tsx b/src/components/dialogs/MapListDialog.tsx index a5c4b8c..cb0a2bf 100644 --- a/src/components/dialogs/MapListDialog.tsx +++ b/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, + routes_sorted: Array, + 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 { @@ -77,9 +78,8 @@ class Component extends React.Component { tab, } }, - editing, marks, - } = this.props; + }: Props = this.props; const { editing_item } = this.state; @@ -151,8 +151,10 @@ class Component extends React.Component { { list.map(route => ( ( +export const RouteRow = ({ + title, distance, _id, openRoute, tab, is_editing, startEditing +}: Props) => (
{ tab === 'mine' && diff --git a/src/redux/user/reducer.ts b/src/redux/user/reducer.ts index b7a8ab5..d45608c 100644 --- a/src/redux/user/reducer.ts +++ b/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 { - lat: number, - lng: number, +export interface IRouteListItem { _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, + list: Array, step: number, shift: number, filter: { - title: '', + title: string, starred: boolean, distance: [number, number], - author: '', - tab: '', + author: string, + tab: string, min: number, max: number, } diff --git a/src/redux/user/sagas.ts b/src/redux/user/sagas.ts index d99bb12..dafcd00 100644 --- a/src/redux/user/sagas.ts +++ b/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() { diff --git a/src/utils/api.js b/src/utils/api.js deleted file mode 100644 index 6237cfb..0000000 --- a/src/utils/api.js +++ /dev/null @@ -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 })); diff --git a/src/utils/api.ts b/src/utils/api.ts new file mode 100644 index 0000000..2229278 --- /dev/null +++ b/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, + stickers: Array, + 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 => 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 => 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 => 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 }));