migrated to TypeScript

README.md

@@ -1,5 +1,5 @@
 >Nova Poshta track extension - расширение для браузера, позволяет отслеживать посылки в сети доставки новая почта. Доступно в Chrome/Firefox.
-Создано на фреймворке React.
+Создано на React.
 Chrome -  https://chrome.google.com/webstore/detail/novaposhta-tracking/dlkjflpmejaehpobbokpgofkbfkojpea?hl=ru&authuser=0
 
 ##### nova poshta track extension:
@@ -29,5 +29,5 @@ Chrome -  https://chrome.google.com/webstore/detail/novaposhta-tracking/dlkjflpm
 - [x] - записывать трек номера  из поиска в локал сторейдж и показывать их внизу поп-апа, сделать кликабельными (05.05.2021) :white_check_mark:
 - [x] - сделать страницу истории через табсы или роутер туда автоматически добавлять информацию по
     каждой найденной посылке(маршрут, адрес доставки и т.д) (14.05.2021) :white_check_mark:
-- [ ] - перенести все на тайпскрипт
+- [x] - перенести все на тайпскрипт (21.05.2021) :white_check_mark:
 - [ ] - сделать какой нибудь спиннер

package.json

@@ -28,7 +28,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "npx eslint . --ext .ts"
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix --color"
   },
   "eslintConfig": {
     "extends": [
@@ -52,6 +53,7 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^15.3.0",
     "@types/react": "^17.0.6",
+    "@types/react-bootstrap": "^0.32.25",
     "@types/react-dom": "^17.0.5",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",

public/locales/en/translation.json

@@ -14,7 +14,7 @@
     "phone_number": "phone number",
     "phone_sender": "sender",
     "phone_receiver": "receiver",
-    "package_description": "package_description",
+    "package_description": "package description",
     "estimated_delivery_time": "estimated delivery time"
   },
   "phone_form_description": "specify the recipient's or sender's phone number for add. information",

src/App.css

@@ -3,5 +3,5 @@ body {
   font-family: "Segoe UI", Tahoma, sans-serif;
   font-size: 75%;
   margin: 8px!important;
-  background-image: url('./assets/bg.png');
+  background-image: url(./assets/bg.png);
 }

src/App.js → src/App.tsx

@@ -9,10 +9,15 @@ import Notification from './components/notifications/notifications.component';
 import { hideErrorToast } from './redux/notifications_store/notifications.actions';
 import HomePage from './pages/home-page/home-page';
 import HistoryPage from './pages/history-page/history-page';
+import { RootStateType } from './redux/root-reducer';
 
 function App() {
-  const currentNotification = useSelector((state) => state.notifications.currentNotification);
-  const showNotification = useSelector((state) => state.notifications.showNotification);
+  const currentNotification = useSelector(
+    (state: RootStateType) => state.notifications.currentNotification,
+  );
+  const showNotification = useSelector(
+    (state: RootStateType) => state.notifications.showNotification,
+  );
   const dispatch = useDispatch();
   const history = useHistory();
 

src/components/footer_with_history/footer_with_history.component.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { fetchPackageInfo } from '../../redux/packages/packages.actions';
 import { RootStateType } from '../../redux/root-reducer';
 
-const FooterWithHistory = () => {
+const FooterWithHistory = (): JSX.Element | null => {
   const { t } = useTranslation();
   const oldTracks = useSelector((state: RootStateType) => state.history.historyTracks);
   const dispatch = useDispatch();

src/components/footer_with_history/footer_with_history.styles.css

@@ -16,4 +16,4 @@
   color:rgb(76, 8, 235);
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   margin-right: 10px;
-}
+}

src/components/form/form.component.jsx → src/components/form/form.component.tsx

@@ -5,12 +5,18 @@ import {
 } from 'react-bootstrap';
 import { ImSearch } from 'react-icons/im';
 import { useTranslation } from 'react-i18next';
-import Validator from '../../helpers/validator';
+import Validator, { ValidationStateType } from '../../helpers/validator';
 import { fetchPackageInfo } from '../../redux/packages/packages.actions';
 import './form.styles.css';
+import { RootStateType } from '../../redux/root-reducer';
+
+export type InputNameVal = {
+  name:string,
+  value:string,
+};
 
 const FormMain = () => {
-  const currentTrack = useSelector((state) => state.packages.currentTrack);
+  const currentTrack = useSelector((state: RootStateType) => state.packages.currentTrack);
   const { t } = useTranslation();
 
   const [trackNumber, setTrackNumber] = useState(currentTrack);
@@ -22,11 +28,11 @@ const FormMain = () => {
     success: {
       trackNumb: false,
     },
-  });
+  } as ValidationStateType);
 
   const dispatch = useDispatch();
 
-  const handleInputeValidation = ({ name, value }) => {
+  const handleInputeValidation = ({ name, value } : InputNameVal) => {
     const isValid = Validator(name, value.trim());
     const { errors, success } = validationState;
     success[name] = !isValid.length;
@@ -43,15 +49,15 @@ const FormMain = () => {
     }
   };
 
-  const handleKeyPress = (e) => {
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       handleSubmit();
     }
   };
-
-  const handleInput = (e) => {
+  const handleInput = (e:React.ChangeEvent<HTMLInputElement>) => {
     setTrackNumber(e.target.value);
     const { errors } = validationState;
+    //! e.target.name
     errors.trackNumb = [];
     setValidationState({ ...validationState, errors });
   };
@@ -66,10 +72,10 @@ const FormMain = () => {
         <InputGroup className="mb-3" size="sm">
           <FormControl
             placeholder={t('placeholders.main_form')}
-            onChange={(e) => handleInput(e)}
-            onKeyUp={handleKeyPress}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInput(e)}
+            onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => handleKeyPress(e)}
             name="trackNumb"
-            isInvalid={validationState.errors.trackNumb.length}
+            isInvalid={Boolean(validationState.errors.trackNumb.length)}
             value={trackNumber}
           />
           <InputGroup.Prepend>

src/components/history_table/history_table.component.jsx → src/components/history_table/history_table.component.tsx

@@ -5,13 +5,18 @@ import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { fetchPackageInfo } from '../../redux/packages/packages.actions';
 import './history_table.styles.css';
+import { IPackage } from '../../redux/packages/packages.types';
 
-const HistoryTable = ({ packages }) => {
+type HistoryTableProps = {
+  packages: IPackage[]
+};
+
+const HistoryTable = ({ packages } : HistoryTableProps) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const { t } = useTranslation();
 
-  const handleClick = (tnn) => {
+  const handleClick = (tnn:string) => {
     dispatch(fetchPackageInfo(tnn));
     history.push('/');
   };
@@ -30,7 +35,6 @@ const HistoryTable = ({ packages }) => {
             <td>
               <span
                 className="history-table-number"
-                href="#"
                 onClick={() => handleClick(pack.Number)}
               >
                 {pack.Number}

src/components/language_selector/language_selector.component.jsx → src/components/language_selector/language_selector.component.tsx

@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Form } from 'react-bootstrap';
 import { setLanguageHistory } from '../../redux/history/history.actions';
 import './language_selector.styles.css';
+import { RootStateType } from '../../redux/root-reducer';
 
 const LanguageSelect = () => {
-  const savedLang = useSelector((state) => state.history.savedLanguage);
+  const savedLang = useSelector((state: RootStateType) => state.history.savedLanguage);
   const dispatch = useDispatch();
-  const handleLanguage = (lang) => {
+  const handleLanguage = (lang:string) => {
     dispatch(setLanguageHistory(lang));
   };
 

src/components/notifications/notifications.component.jsx → src/components/notifications/notifications.component.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { Toast } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { NotificationType } from '../../redux/notifications_store/notifications.types';
 import './notifications.styles.css';
 
-const Notification = ({ showToast, hideToast, notification }) => {
+type NotificationPropTypes = {
+  showToast: boolean,
+  hideToast: ()=>void,
+  notification: NotificationType
+};
+
+const Notification = ({ showToast, hideToast, notification } : NotificationPropTypes) => {
   const { text, header, classBg } = notification;
   const { t } = useTranslation();
   return (

src/components/package_info/package_info.component.jsx → src/components/package_info/package_info.component.tsx

@@ -3,10 +3,11 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import PhoneForm from '../phone_form/phone_form.component';
 import './package_info.styles.css';
+import { RootStateType } from '../../redux/root-reducer';
 
 const PackageInfo = () => {
-  const oldPhone = useSelector((state) => state.history.oldPhoneNumb);
-  const packageState = useSelector((state) => state.packages);
+  const oldPhone = useSelector((state :RootStateType) => state.history.oldPhoneNumb);
+  const packageState = useSelector((state :RootStateType) => state.packages);
   const { packageInfo, showDetailed } = packageState;
   const { t } = useTranslation();
 

src/components/phone_form/phone_form.component.jsx → src/components/phone_form/phone_form.component.tsx

@@ -5,14 +5,15 @@ import {
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { ImPhone } from 'react-icons/im';
-import Validator from '../../helpers/validator';
+import Validator, { ValidationStateType } from '../../helpers/validator';
 import { fetchPackageInfo } from '../../redux/packages/packages.actions';
 import './phone_form.styles.css';
+import { RootStateType } from '../../redux/root-reducer';
 
-const PhoneForm = ({ oldPhone }) => {
+const PhoneForm = ({ oldPhone } : { oldPhone:string }) => {
   const [phoneNum, setPhoneNum] = useState(oldPhone);
   const { t } = useTranslation();
-  const currentTrack = useSelector((state) => state.packages.currentTrack);
+  const currentTrack = useSelector((state :RootStateType) => state.packages.currentTrack);
   const [validationState, setValidationState] = useState({
     errors: {
       phoneNumb: [],
@@ -21,9 +22,9 @@ const PhoneForm = ({ oldPhone }) => {
     success: {
       phoneNumb: false,
     },
-  });
+  } as ValidationStateType);
 
-  const handleInputValidation = ({ name, value }) => {
+  const handleInputValidation = ({ name, value } :{ name:string, value:string }) => {
     const num = value[0] === '+' ? value.slice(1) : value;
     const isValid = Validator(name, num.trim());
     const { errors, success } = validationState;
@@ -43,14 +44,14 @@ const PhoneForm = ({ oldPhone }) => {
     }
   };
 
-  const handleInput = (e) => {
+  const handleInput = (e:React.ChangeEvent<HTMLInputElement>) => {
     setPhoneNum(e.target.value);
     const { errors } = validationState;
     errors.phoneNumb = [];
     setValidationState({ ...validationState, errors });
   };
 
-  const handleKeyPress = (e) => {
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       handleSubmit();
     }
@@ -62,9 +63,9 @@ const PhoneForm = ({ oldPhone }) => {
         <FormControl
           value={phoneNum}
           placeholder={t('placeholders.phone_form')}
-          onChange={(e) => handleInput(e)}
+          onChange={(e : React.ChangeEvent<HTMLInputElement>) => handleInput(e)}
           onKeyUp={handleKeyPress}
-          isInvalid={validationState.errors.phoneNumb.length}
+          isInvalid={Boolean(validationState.errors.phoneNumb.length)}
         />
         <InputGroup.Prepend>
           <Button variant="danger" className="form-button" onClick={handleSubmit}>

src/components/route_switcher/route_switcher.component.jsx → src/components/route_switcher/route_switcher.component.tsx

@@ -5,14 +5,15 @@ import { Nav } from 'react-bootstrap';
 import { useHistory } from 'react-router-dom';
 import { ImHome3, ImClock } from 'react-icons/im';
 import './route_switcher.styles.css';
+import { RootStateType } from '../../redux/root-reducer';
 
 const RouteSwitcher = () => {
   const history = useHistory();
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
-  const currentTrack = useSelector((state) => state.packages.currentTrack);
+  const currentTrack = useSelector((state: RootStateType) => state.packages.currentTrack);
 
-  useEffect(() => null, [currentTrack]); // ререндер на переход из history-page
+  useEffect(() => {}, [currentTrack]); // ререндер на переход из history-page
 
   const goHome = () => {
     history.push('/');

src/helpers/validator.ts

@@ -1,9 +1,19 @@
 const numbers = /^[0-9]+$/;
 
-export interface IValidationError {
+export type IValidationError = {
   label: string,
   error: string,
-}
+};
+
+export type ValidationStateType = {
+  errors: {
+    [key:string]: IValidationError[]
+  },
+  isValid: boolean,
+  success: {
+    [key:string]: boolean
+  }
+};
 
 export default function Validate(label:string, value:string) {
   const errors: IValidationError[] = [];

src/pages/history-page/history-page.jsx → src/pages/history-page/history-page.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import HistoryTable from '../../components/history_table/history_table.component';
+import { RootStateType } from '../../redux/root-reducer';
 
 const HistoryPage = () => {
-  const packages = useSelector((state) => state.history.historyPageTracks);
+  const packages = useSelector((state: RootStateType) => state.history.historyPageTracks);
   return (
     <div className="history-page-wrap">
       <HistoryTable packages={packages} />

src/redux/packages/packages.types.ts

@@ -51,6 +51,7 @@ export interface IPackage {
   PaymentStatusDate: string;
   AmountToPay: string;
   AmountPaid: string;
+  PhoneRecipient?:string;
   LastAmountTransferGM: string;
   LastAmountReceivedCommissionGM: string;
   DocumentCost: string;

src/reportWebVitals.js

@@ -1,6 +1,8 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import('web-vitals').then(({
+      getCLS, getFID, getFCP, getLCP, getTTFB,
+    }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);