moved msg history view into send view; added readme & license and don…

…e cleanup

.compilerc

@@ -2,7 +2,10 @@
   "env": {
     "development": {
       "application/javascript": {
-        "plugins": ["react-hot-loader/babel", "@babel/plugin-transform-runtime"]
+        "plugins": [
+          "react-hot-loader/babel",
+          "@babel/plugin-transform-runtime"
+        ]
       }
     }
   }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present sms77 e.K.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,51 @@
+![alt text](https://www.sms77.io/wp-content/uploads/2019/07/sms77-Logo-400x79.png "sms77")
+# sms77io Desktop Application
+
+Distributed for Linux, MacOS and Windows.
+
+## Installation
+Head to /releases and download the latest installer for your operating system.
+Follow the installer instructions to install the application on your disk.
+
+You can alternatively clone the project 
+and build the application yourself by running ```npm install``` and ```npm run make```.
+Make sure you have NodeJS installed.
+
+### Features
+- Send SMS to one/multiple user(s)
+- Message utilites: emojis, date/time, system-related
+- Message history
+- Number lookups: CNAM, HLR, MNP, format
+- Lookup history
+- Retrieve pricing
+- Read contacts
+
+#### ToDo
+- Write tests
+- Add translations
+
+##### Screenshots
+<figure>
+<figcaption>Send SMS</figcaption>
+<img alt='Send SMS' src="https://user-images.githubusercontent.com/12965261/75873156-bad0fc00-5e0f-11ea-88ba-d8d712c33cb7.png"/>
+</figure>
+
+<figure>
+<figcaption>Lookup Number</figcaption>
+<img alt='Lookup Number' src="https://user-images.githubusercontent.com/12965261/75870168-e6051c80-5e0a-11ea-8cf4-54015ed3ed4f.png"/>
+</figure>
+
+<figure>
+<figcaption>Options</figcaption>
+<img alt='Options' src="https://user-images.githubusercontent.com/12965261/75872404-5e211180-5e0e-11ea-915b-8c2cca0f289d.png"/>
+</figure>
+
+<figure>
+<figcaption>Contacts</figcaption>
+<img alt='Contacts' src="https://user-images.githubusercontent.com/12965261/75872467-7f81fd80-5e0e-11ea-9f3d-1e5bb03f7bc0.png"/>
+</figure>
+
+<figure>
+<figcaption>Pricing</figcaption>
+<img alt='Pricing' src="https://user-images.githubusercontent.com/12965261/75872517-97f21800-5e0e-11ea-8b5d-3aa96b81845f.png"/>
+</figure>

src/components/History/BaseHistory.tsx → src/components/BaseHistory/BaseHistory.tsx

@@ -1,32 +1,36 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import TableContainer from '@material-ui/core/TableContainer';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
-import {useTranslation} from 'react-i18next';
 
 import {ILocalStore, LocalStore} from '../../util/LocalStore';
+import {usePrevious} from '../../util/usePrevious';
 import {Navigation} from './Navigation';
 
 export type BaseHistoryProps = {
-    nsKey: string
     path?: string
     rowHandler: (row: any, i: number) => any
     storeKey: keyof ILocalStore
 }
 
-export const BaseHistory = ({path, nsKey, storeKey, rowHandler}: BaseHistoryProps) => {
-    const {t} = useTranslation(nsKey);
-    const list = LocalStore.get(storeKey) as any[];
-    const [index, setIndex] = useState(list.length - 1);
+export const BaseHistory = ({path, storeKey, rowHandler}: BaseHistoryProps) => {
+    const list = LocalStore.get(storeKey) as any;
+    const previousList = usePrevious<any>(list);
+    const getLastIndex = () => list.length - 1;
+    const [index, setIndex] = useState(getLastIndex());
     const entry = list[index];
 
-    return <>
-        <h1>{t(storeKey)}</h1>
+    useEffect(() => {
+        if (previousList && previousList.length !== list.length) {
+            setIndex(getLastIndex());
+        }
+    }, [list]);
 
-        {entry && <Navigation index={index} list={list} onNavigation={setIndex}/>}
+    return <>
+        {entry && <Navigation index={index} list={list} onNavigation={(n) => setIndex(n)}/>}
 
         <TableContainer>
-            <Table>
+            <Table size='small'>
                 <TableBody>
                     {entry && (path ? eval(`entry${path}`) : [entry].flat()).map(rowHandler)}
                 </TableBody>

src/components/BaseHistory/Navigation.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+
+import {NavigationBaseButton} from './NavigationBaseButton';
+import {NavigationBaseProps} from './types';
+
+export type NavigationProps = NavigationBaseProps & {
+    onNavigation: (i: number) => void
+}
+
+export const Navigation = ({index, list, onNavigation}: NavigationProps) => {
+    const handleNavigation = (operator: '+' | '-'): void => {
+        let newIndex: number = eval(`${index} ${operator} 1`);
+
+        if (!list[newIndex]) {
+            newIndex = eval(`${newIndex} ${'+' === operator ? '-' : '+'} 1`);
+        }
+
+        onNavigation(newIndex);
+    };
+
+    return <>
+        <NavigationBaseButton index={index} list={list}
+                              IconButtonProps={{style: {left: '0px'}, onClick: () => handleNavigation('-')}}
+                              Icon={ArrowLeftIcon} operator='-'/>
+
+
+        <NavigationBaseButton index={index} list={list}
+                              IconButtonProps={{style: {right: '0px'}, onClick: () => handleNavigation('+')}}
+                              Icon={ArrowRightIcon} operator='+'/>
+    </>;
+};

src/components/BaseHistory/NavigationBaseButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import {IconButtonProps, SvgIconProps} from '@material-ui/core';
+
+import {NavigationBaseProps} from './types';
+
+export type NavigationBaseButtonProps = NavigationBaseProps & {
+    Icon: React.JSXElementConstructor<SvgIconProps>
+    IconButtonProps: IconButtonProps
+    operator: '+' | '-'
+}
+
+export const NavigationBaseButton = (props: NavigationBaseButtonProps) => {
+    props.IconButtonProps.style!.position = 'absolute';
+
+    return <IconButton disabled={undefined === props.list[eval(`${props.index} ${props.operator} 1`)]}
+                       onClick={props.IconButtonProps.onClick}
+                       style={{...props.IconButtonProps.style, position: 'absolute'}}>
+        <props.Icon fontSize='large' style={{fontSize: '3rem'}}/>
+    </IconButton>;
+};

src/components/BaseHistory/types.ts

@@ -0,0 +1,7 @@
+export type NavigationBaseProps = {
+    index: number
+    list: any[]
+}
+
+
+

src/components/BoolChip.tsx

@@ -1,6 +1,6 @@
-import Chip from '@material-ui/core/Chip';
 import React from 'react';
 import {useTranslation} from 'react-i18next';
+import Chip from '@material-ui/core/Chip';
 
 export type BoolChipProps = {
     value: boolean
@@ -9,6 +9,8 @@ export type BoolChipProps = {
 export const BoolChip = ({value}: BoolChipProps) => {
     const {t} = useTranslation();
 
-    return <Chip style={{backgroundColor: value ? 'green' : 'red', color: '#fff'}}
-                 label={t(Boolean(value) ? 'true' : 'false')}/>;
+    return <Chip
+        label={t(Boolean(value) ? 'true' : 'false')}
+        style={{backgroundColor: value ? 'green' : 'red', color: '#fff'}}
+    />;
 };

src/components/Contacts/Contact.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {Contact as IContact} from 'sms77-client/dist/types';
+
 import TableContainer from '@material-ui/core/TableContainer';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
-import {useTranslation} from 'react-i18next';
-import {Contact as IContact} from 'sms77-client';
 
 export type ContactProps = {
     contact: IContact

src/components/CountryFlag.tsx

@@ -14,7 +14,5 @@ export const CountryFlag = ({pricing}: CountryFlagProps) => {
 
     const flag = pricing.countryCode ? toFlag() : 'eu';
 
-    const className = `flag-icon flag-icon-${flag}`;
-
-    return <span className={className}/>;
+    return <span className={`flag-icon flag-icon-${flag}`}/>;
 };

src/components/Documentation.tsx

@@ -10,6 +10,7 @@ export const Documentation = () => {
         <webview id='docs' src='https://www.sms77.io/en/docs/gateway/http-api/' style={{height: '65vh'}}/>
 
         <h2>{t('help')}</h2>
+
         <p dangerouslySetInnerHTML={{__html: t('mailUs')}}/>
     </section>;
 };

src/components/From.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import TextField from '@material-ui/core/TextField';
 import {useTranslation} from 'react-i18next';
+import TextField from '@material-ui/core/TextField';
 
 export type FromProps = {
     value: string,