From b6e6c2c84901e164f316104e2117e93d46c1ed96 Mon Sep 17 00:00:00 2001
From: Sebastian <haschtl@online.de>
Date: Wed, 5 Feb 2020 12:00:41 +0100
Subject: [PATCH] Added donation button

---
 README.md                        |  1 +
 src/locales/de/translation.json  |  2 ++
 src/pages/AboutPage.tsx          | 14 ++++++++++----
 src/store/connections/reducer.ts |  6 ++++--
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ba43044..f1ae284 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
 - Nice JSON-Data formatting
 - Custom AES-Ecryption
 - Communication-Protocoll
+- Protocoll Presets - Till now hardcoded available: [Crescience Deneb](https://cre.science) and [RTOC](https://haschtl.github.io/RealTimeOpenControl/)
 
 ## Example Ionic4 React project
 This app can be seen as an Ionic4 React example, that can be deployed on all available platforms with the following features:
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
index 207b355..7b66022 100644
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -10,7 +10,9 @@
     "Connect": "Verbinden",
     "Disconnect": "Trennen",
     "Commands": "Befehle",
+    "Compatible Tools": "Weitere Tools",
     "Disconnected": "Verbindung getrennt",
+    "Donate": "Spenden",
     "Connected": "Verbindung hergestellt",
     "Message from ":"Nachricht von ",
     "Remove": "Entfernen",
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index d68990e..18d672a 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -94,15 +94,21 @@ class AboutPage extends PureComponent<Props & WithTranslation> {
           <IonButton expand="full" fill="solid" color="secondary" onClick={this.share}>
             <Trans>Share</Trans>
           </IonButton>
-          <IonButton expand="full" fill="solid" color="secondary" onClick={() => Browser.open({ url: 'https://haschtl.github.io/ModernWebsocketClient/' })}>
+          <IonButton expand="full" fill="solid" color="danger" onClick={() => Browser.open({ url: 'https://www.paypal.com/donate/?token=ECCLajboRrJcPTW0AvKLtiw114LrXmBEpAy0y3AWQEZfz0u2ZXFbN63lxjFceNOSqu2YQW&country.x=DE&locale.x=DE' })}>
+            <Trans>Donate</Trans>
+          </IonButton>
+          <IonButton expand="full" fill="solid" color="tertiary" onClick={() => Browser.open({ url: 'https://haschtl.github.io/ModernWebsocketClient/' })}>
             <Trans>Github Page</Trans>
           </IonButton>
-          <IonButton expand="full" fill="solid" color="secondary" onClick={() => this.exportConnections()}>
+          <IonButton expand="full" fill="solid" color="tertiary" onClick={() => Browser.open({ url: 'https://haschtl.github.io/RealTimeOpenControl/' })}>
+            <Trans>Compatible Tools</Trans>
+          </IonButton>      
+          <IonButton expand="full" fill="solid" color="primary" onClick={() => this.exportConnections()}>
             <Trans>Export App settings</Trans>
           </IonButton>
-          <IonButton expand="full" fill="solid" color="secondary" onClick={() => this.importConnections()}>
+          <IonButton expand="full" fill="solid" color="primary" onClick={() => this.importConnections()}>
             <Trans>Import App settings</Trans>
-          </IonButton>        
+          </IonButton>  
           </IonContent>
       </IonPage>
     );
diff --git a/src/store/connections/reducer.ts b/src/store/connections/reducer.ts
index c2aac49..645bc51 100644
--- a/src/store/connections/reducer.ts
+++ b/src/store/connections/reducer.ts
@@ -41,7 +41,8 @@ export default (state = connectionDefaultState, action: ActionType<typeof connec
       action.payload.id = newId
 
       state.connections.push(action.payload)
-      return state;
+      return {...state,
+        connections: [...state.connections]};;
     case getType(connections.removeConnection):
       con = state.connections.find(e => e.id === action.payload.id);
       if (con === undefined) {
@@ -49,7 +50,8 @@ export default (state = connectionDefaultState, action: ActionType<typeof connec
         return state;
       }
       state.connections.splice(state.connections.indexOf(con), 1)
-      return state;
+      return {...state,
+        connections: [...state.connections]};
     case getType(connections.editConnection):
       con = state.connections.find(e => e.id === action.payload.id);
       if (con === undefined) {