added history page and routing, deploying to chrome store

README.md

@@ -1,8 +1,33 @@
+>Nova Poshta track extension - расширение для браузера, позволяет отслеживать посылки в сети доставки новая почта. Доступно в Chrome/Firefox.
+Создано на фреймворке React.
+Chrome -  https://chrome.google.com/webstore/detail/novaposhta-tracking/dlkjflpmejaehpobbokpgofkbfkojpea?hl=ru&authuser=0
+
+##### nova poshta track extension:
+![Alt text](img/maingif.gif?raw=true "scheme")
+
+##### main:
+![Alt text](img/main.JPG?raw=true "scheme")
+##### package info:
+![Alt text](img/pack1.JPG?raw=true "scheme")
+
+##### package info additional:
+![Alt text](img/pack2.JPG?raw=true "scheme")
+
+##### history:
+![Alt text](img/history.JPG?raw=true "scheme")
+
+##### errr:
+![Alt text](img/phoneErr.JPG?raw=true "scheme")
+
+##### validation:
+![Alt text](img/validation.JPG?raw=true "scheme")
 ##### todo:
 
 - [x] - добавить фетч детальной инфы по номеру телефона (24.04.2021) :white_check_mark:
 - [x] - сделать локализации интерфейса (06.05.2021) :white_check_mark:
 - [x] - сделать валидацию инпутов (04.05.2021) :white_check_mark:
 - [x] - записывать трек номера  из поиска в локал сторейдж и показывать их внизу поп-апа, сделать кликабельными (05.05.2021) :white_check_mark:
-- [ ] - сделать страницу истории через табсы или роутер туда автоматически добавлять информацию по
-    каждой найденной посылке(маршрут, адрес доставки и т.д)
+- [x] - сделать страницу истории через табсы или роутер туда автоматически добавлять информацию по
+    каждой найденной посылке(маршрут, адрес доставки и т.д) (14.05.2021) :white_check_mark:
+- [ ] - перенести все на тайпскрипт
+- [ ] - сделать какой нибудь спиннер

package.json

@@ -17,6 +17,7 @@
     "react-i18next": "^11.8.15",
     "react-icons": "^4.2.0",
     "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",

public/_locales/en/messages.json

@@ -0,0 +1,9 @@
+{
+  "extName": {
+    "message": "NovaPoshta tracking",
+    "description": ""
+  },
+  "appDesc": {
+    "message": "Track your novaposhta packages"
+  }
+}

public/_locales/ru/messages.json

@@ -0,0 +1,9 @@
+{
+  "extName": {
+    "message": "Новая Почта трекинг",
+    "description": "Расширение для отслеживания посылок новой почты"
+  },
+  "appDesc": {
+    "message": "Отследите ваши отправления Новой Пошты"
+  }
+}

public/_locales/uk/messages.json

@@ -0,0 +1,9 @@
+{
+  "extName": {
+    "message": "Нова Пошта трекінг",
+    "description": "Доповнення для трекінгу відправлень нової пошти"
+  },
+  "appDesc": {
+    "message": "Відслідкуйте ваші відправлення Нової Пошти"
+  }
+}

public/locales/en/translation.json

@@ -26,5 +26,10 @@
     "phoneNumb_required": "phonenumber is required",
     "phoneNumb_length": "Should contain 12 characters, no more no less",
     "only_numbers_allowed": "Only numbers allowed!"
+  },
+  "history_table": {
+    "track":"track",
+    "route": "route",
+    "status": "status"
   }
 }

public/locales/ru/translation.json

@@ -26,5 +26,10 @@
     "phoneNumb_required": "телефонный номер обязателен",
     "phoneNumb_length": "Должен содержать 12 знаков, не более не менее",
     "only_numbers_allowed": "Разрешены только числа!"
+  },
+  "history_table": {
+    "track":"ттн",
+    "route": "маршрут",
+    "status": "статус"
   }
 }

public/locales/ua/translation.json

@@ -26,5 +26,10 @@
     "phoneNumb_required": "телефонний номер обов'язковий",
     "phoneNumb_length": "Повинен містити 12 знаків, не більше не менше",
     "only_numbers_allowed": "Дозволені лише числа!"
+  },
+  "history_table": {
+    "track":"ттн",
+    "route": "маршрут",
+    "status": "статус"
   }
 }

public/manifest.json

@@ -1,27 +1,18 @@
 {
   "manifest_version": 2,
-  "version": "0.0.1",
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "description": "Sample application showing how to create an extension with Create React App",
+  "version": "0.1.7",
+  "short_name": "Nova Poshta Track",
+  "name": "__MSG_extName__",
+  "description": "__MSG_appDesc__",
+  "default_locale": "ru",
   "browser_action": {
-    "default_title": "CRE",
+    "default_title": "nova poshta",
     "default_popup": "popup.html"
   },
-  "background": {
-    "scripts": ["background.bundle.js"]
-  },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["contentScript.bundle.js"]
-    }
-  ],
   "icons": {
     "16": "img/icon-16.png",
     "48": "img/icon-48.png",
     "128": "img/icon-128.png"
   },
-  "permissions": ["activeTab"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

src/App.js

@@ -1,19 +1,24 @@
 import './App.css';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { Switch, Route, useHistory } from 'react-router-dom';
 import Header from './components/header/header.component';
-import Form from './components/form/form.component';
-import PackageInfo from './components/package_info/package_info.component';
 import Notification from './components/notifications/notifications.component';
 import { hideErrorToast } from './redux/notifications_store/notifications.actions';
-import FooterWithHistory from './components/footer_with_history/footer_with_history.component';
+import HomePage from './pages/home-page/home-page';
+import HistoryPage from './pages/history-page/history-page';
 
 function App() {
   const currentNotification = useSelector((state) => state.notifications.currentNotification);
   const showNotification = useSelector((state) => state.notifications.showNotification);
   const dispatch = useDispatch();
+  const history = useHistory();
+
+  useEffect(()=>{
+    history.push("/")
+  },[])
 
   return (
     <div className="App">
@@ -23,9 +28,10 @@ function App() {
         hideToast={() => dispatch(hideErrorToast())}
       />
       <Header />
-      <Form />
-      <PackageInfo />
-      <FooterWithHistory />
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+        <Route path="/history" component={HistoryPage} />
+      </Switch>
     </div>
   );
 }

src/components/header/header.component.jsx

@@ -2,11 +2,13 @@ import React from 'react';
 import './header.styles.css';
 import { useTranslation } from 'react-i18next';
 import LanguageSelect from '../language_selector/language_selector.component';
+import RouteSwitcher from '../route_switcher/route_switcher.component';
 
 const Header = () => {
   const { t } = useTranslation();
   return (
     <div className="header-wrap">
+      <RouteSwitcher />
       <h3>
         {t('title')} <b>Nova Poshta</b>
       </h3>

src/components/header/header.styles.css

@@ -1,3 +1,6 @@
+.header-wrap {
+  margin-bottom: 13px;
+}
 .header-wrap h3 {
   font-size: 0.90rem;
   text-align: center;

src/components/history_table/history_table.component.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Table } from 'react-bootstrap';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { fetchPackageInfo } from '../../redux/packages/packages.actions';
+import './history_table.styles.css';
+
+const HistoryTable = ({ packages }) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const handleClick = (tnn) => {
+    dispatch(fetchPackageInfo(tnn));
+    history.push('/');
+  };
+  return (
+    <Table striped bordered variant="dark" hover size="sm" className="history-table">
+      <thead>
+        <tr>
+          <th>{t('history_table.track')}#</th>
+          <th>{t('history_table.route')}</th>
+          <th>{t('history_table.status')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {packages.map((pack) => (
+          <tr key={pack.Number}>
+            <td>
+              <span
+                className="history-table-number"
+                href="#"
+                onClick={() => handleClick(pack.Number)}
+              >
+                {pack.Number}
+              </span>
+            </td>
+            <td>
+              {pack.WarehouseSender} - {pack.WarehouseRecipient}
+            </td>
+            <td>{pack.Status}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};
+
+export default HistoryTable;