moved components to TypeScript

src/redux/user/reducer.ts

@@ -10,6 +10,12 @@ 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,
+  _id: string,
+}
+
 interface IRootReducer {
   ready: boolean,
   user: IUser,
@@ -49,7 +55,7 @@ interface IRootReducer {
   routes: {
     limit: 0,
     loading: boolean,
-    list: [],
+    list: Array<IRoute>,
     filter: {
       title: '',
       starred: boolean,

src/redux/user/sagas.ts

@@ -22,7 +22,7 @@ import {
 import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history';
 import { editor } from '$modules/Editor';
 import { ACTIONS } from '$redux/user/constants';
-import { MODES } from '$constants/modes';
+import { IModes, MODES } from '$constants/modes';
 import { DEFAULT_USER } from '$constants/auth';
 import { TIPS } from '$constants/tips';
 import {
@@ -33,15 +33,18 @@ import {
   getTilePlacement,
   imageFetcher
 } from '$utils/renderer';
-import { LOGOS } from '$constants/logos';
+import { ILogos, LOGOS } from '$constants/logos';
 import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
 import { DIALOGS } from '$constants/dialogs';
 
+import * as ActionCreators from '$redux/user/actions';
+import { IRootState } from "$redux/user/reducer";
+
 const getUser = state => (state.user.user);
 const getState = state => (state.user);
 
 const hideLoader = () => {
-  document.getElementById('loader').style.opacity = 0;
+  document.getElementById('loader').style.opacity = String(0);
   document.getElementById('loader').style.pointerEvents = 'none';
 
   return true;
@@ -213,19 +216,19 @@ function* authCheckSaga() {
   return yield call(mapInitSaga);
 }
 
-function* setModeSaga({ mode }) {
+function* setModeSaga({ mode }: ReturnType<typeof ActionCreators.setMode>) {
   return yield editor.changeMode(mode);
   // console.log('change', mode);
 }
 
-function* setActiveStickerSaga({ activeSticker }) {
+function* setActiveStickerSaga({ activeSticker }: { type: string, activeSticker: IRootState['activeSticker'] }) {
   yield editor.activeSticker = activeSticker;
   yield put(setMode(MODES.STICKERS));
 
   return true;
 }
 
-function* setLogoSaga({ logo }) {
+function* setLogoSaga({ logo }: { type: string, logo: keyof ILogos }) {
   const { mode } = yield select(getState);
   editor.logo = logo;
 
@@ -275,7 +278,7 @@ function* clearSaga({ type }) {
 
 function* sendSaveRequestSaga({
   title, address, force, is_public
-}) {
+}: ReturnType<typeof ActionCreators.sendSaveRequest>) {
   if (editor.isEmpty) return yield put(setSaveError(TIPS.SAVE_EMPTY));
 
   const { route, stickers, provider } = editor.dumpData();
@@ -310,7 +313,7 @@ function* sendSaveRequestSaga({
 function* getRenderData() {
   yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
 
-  const canvas = document.getElementById('renderer');
+  const canvas = <HTMLCanvasElement>document.getElementById('renderer');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   const ctx = canvas.getContext('2d');
@@ -355,7 +358,7 @@ function* getCropData({
   x, y, width, height
 }) {
   const { logo, renderer: { data } } = yield select(getState);
-  const canvas = document.getElementById('renderer');
+  const canvas = <HTMLCanvasElement>document.getElementById('renderer');
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext('2d');
@@ -381,7 +384,7 @@ function* cropAShotSaga(params) {
   return yield put(hideRenderer());
 }
 
-function* changeProviderSaga({ provider }) {
+function* changeProviderSaga({ provider }: ReturnType<typeof ActionCreators.changeProvider>) {
   const { provider: current_provider } = yield select(getState);
 
   yield put(setProvider(provider));
@@ -396,7 +399,7 @@ function* changeProviderSaga({ provider }) {
   return put(setMode(MODES.NONE));
 }
 
-function* locationChangeSaga({ location }) {
+function* locationChangeSaga({ location }: ReturnType<typeof ActionCreators.locationChanged>) {
   const { address, ready, user: { id, random_url } } = yield select(getState);
 
   if (!ready) return;
@@ -426,12 +429,12 @@ function* locationChangeSaga({ location }) {
   }
 }
 
-function* gotVkUserSaga({ user }) {
+function* gotVkUserSaga({ user }: ReturnType<typeof ActionCreators.gotVkUser>) {
   const data = yield call(checkUserToken, user);
   yield put(setUser(data));
 }
 
-function* keyPressedSaga({ key, target }): any {
+function* keyPressedSaga({ key, target }: ReturnType<typeof ActionCreators.keyPressed>): any {
   if (
     target === 'INPUT' ||
     target === 'TEXTAREA'
@@ -490,7 +493,7 @@ function* searchSetSaga() {
   yield call(searchSetSagaWorker);
 }
 
-function* openMapDialogSaga({ tab }) {
+function* openMapDialogSaga({ tab }: ReturnType<typeof ActionCreators.openMapDialog>) {
   const { dialog_active, routes: { filter: { tab: current } } } = yield select(getState);
 
   if (dialog_active && tab === current) {
@@ -514,7 +517,7 @@ function* searchSetTabSaga() {
   yield call(searchSetSaga);
 }
 
-function* setSaveSuccessSaga({ address, title, is_public }) {
+function* setSaveSuccessSaga({ address, title, is_public }: ReturnType<typeof ActionCreators.setSaveSuccess>) {
   const { id } = yield select(getUser);
   const { dialog_active } = yield select(getState);