Merge pull request carrawao#80 from carrawao/feature/activities

refactor: put Backend apiKeys and BotBackendFetchURL into .env
fefifef · May 19, 2022 · e0a7292 · e0a7292
2 parents fcb40d1 + b425e80
commit e0a7292
Show file tree

Hide file tree

Showing 56 changed files with 637 additions and 274 deletions.
diff --git a/Backend/.env b/Backend/.env
@@ -0,0 +1,7 @@
+#API Keys
+APIKEY1 = ZSQ57OXG4YKUA0B8 #API Key Hakan;
+APIKEY2 = MB6DE4CNFFYGP4M7 #API Key Steffen;
+APIKEY3 = NOGQ7D1A1RHDGMU4 #API Key Cedrik
+APIKEY4 = ZSQ57OXG4YKUA0B8 #API Key Hakan;    #RESERVIERT FÜR MONATLICH
+APIKEY5 = MB6DE4CNFFYGP4M7 #API Key Steffen;
+APIKEY6 = NOGQ7D1A1RHDGMU4 #API Key Cedrik;
diff --git a/Backend/.gitignore b/Backend/.gitignore
@@ -73,7 +73,6 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
 .env.development.local
 .env.test.local
 .env.production.local

diff --git a/Backend/package-lock.json b/Backend/package-lock.json
diff --git a/Backend/package.json b/Backend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "package.json",
+  "name": "benchmarket-backend",
   "version": "1.0.0",
   "description": "BenchmarketBackendServer",
   "main": "server.js",
@@ -8,11 +8,11 @@
     "start": "node server.js"
   },
   "author": "Steffen Kruschina @fefifef",
-  "license": "ISC",
   "dependencies": {
     "axios": "^0.26.1",
     "body-parser": "^1.19.2",
     "convert-csv-to-json": "^1.3.3",
+    "dotenv": "^16.0.1",
     "express": "^4.17.3",
     "linebyline": "^1.3.0",
     "match-sorter": "^6.3.1",

diff --git a/Backend/server.js b/Backend/server.js
@@ -1,3 +1,4 @@
+require('dotenv').config();
 const express = require('express');
 const bodyParser = require('body-parser');
 const fs = require('fs');
@@ -17,12 +18,12 @@ let accessURL = '*';
 
 
 const apiKeys =[
-    'ZSQ57OXG4YKUA0B8', //API Key Hakan;
-    'MB6DE4CNFFYGP4M7', //API Key Steffen;
-    'NOGQ7D1A1RHDGMU4', //API Key Cedrik
-    'ZSQ57OXG4YKUA0B8', //API Key Hakan;    //RESERVIERT FÜR MONATLICH
-    'MB6DE4CNFFYGP4M7', //API Key Steffen;
-    'NOGQ7D1A1RHDGMU4'  //API Key Cedrik
+    process.env.APIKEY1,
+    process.env.APIKEY2,
+    process.env.APIKEY3,
+    process.env.APIKEY4,
+    process.env.APIKEY5,
+    process.env.APIKEY6
 ]
 let apiKeyIndex = 0;
 // let apiKey;

diff --git a/Frontend/.env b/Frontend/.env
@@ -1 +1,2 @@
-REACT_APP_BASEURL = http://localhost:3001
+REACT_APP_BASEURL = http://localhost:3001
+REACT_APP_BOTBACKENDURL = http://benchmarket.germanywestcentral.cloudapp.azure.com:1880
diff --git a/Frontend/.env.production b/Frontend/.env.production
@@ -1 +1,2 @@
-REACT_APP_BASEURL = http://benchmarket.germanywestcentral.cloudapp.azure.com:3001
+REACT_APP_BASEURL = http://benchmarket.germanywestcentral.cloudapp.azure.com:3001
+REACT_APP_BOTBACKENDURL = http://benchmarket.germanywestcentral.cloudapp.azure.com:1880
diff --git a/Frontend/README.md b/Frontend/README.md
@@ -10,7 +10,7 @@ To avoid incompatibility's issues it is recommended to [install](https://nodejs.
 - Node (version 16.14.2)
 - npm (version 8.5.0)
 
-Once the installation is finished, for load the used dependencies it is required to run:
+Once the installation is finished, for loading the used dependencies it is required to run:
 ####`npm install`
 
 ## Available Scripts

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
diff --git a/Frontend/public/favicon.ico b/Frontend/public/favicon.ico
diff --git a/Frontend/public/index.html b/Frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Bench:market</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/Frontend/public/logo192.png b/Frontend/public/logo192.png
diff --git a/Frontend/public/logo512.png b/Frontend/public/logo512.png
diff --git a/Frontend/public/manifest.json b/Frontend/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Bench:market",
+  "name": "Bench:market | SWE Finanzen",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/Frontend/src/App.css b/Frontend/src/App.css
@@ -1,5 +1,6 @@
 .App {
     text-align: center;
+    color: #30302f
 }
 
 .App-logo {
@@ -48,3 +49,12 @@
 .hovered {
     color: green;
 }
+
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
@@ -3,6 +3,7 @@ import {CircularProgress} from '@mui/material';
 import {BrowserRouter as Router} from 'react-router-dom';
 import AppRoutes from './routes';
 import './App.css';
+import { Loading } from './components/common';
 
 /**
  * App root component with link navigations and routes
@@ -17,7 +18,7 @@ const App = () => (
           transform: 'translate(-50%, -50%)'
         }}
       >
-        <CircularProgress/>
+        <Loading/>
       </div>}>
       <AppRoutes/>
     </Suspense>

diff --git a/Frontend/src/benchi-chatbot/MessageParser.js b/Frontend/src/benchi-chatbot/MessageParser.js
@@ -32,7 +32,7 @@ class MessageParser {
 
   async fetchAnswer(message) {
     try {
-      const response = await fetch(`http://benchmarket.germanywestcentral.cloudapp.azure.com:1880/interpretMessage?message=${message}`, {mode:'cors'})
+      const response = await fetch(`${process.env.REACT_APP_BOTBACKENDURL}/interpretMessage?message=${message}`, {mode:'cors'})
       const json = await response.json();
       return json.answers;
     } catch (e) {

diff --git a/Frontend/src/benchi-chatbot/TextToSpeech.js b/Frontend/src/benchi-chatbot/TextToSpeech.js
@@ -6,7 +6,7 @@ class TextToSpeech {
 
         let audio;
         try {
-            const response = await fetch(`http://benchmarket.germanywestcentral.cloudapp.azure.com:1880/textToSpeech?text=${answer}`, {mode:'cors'})
+            const response = await fetch(`${process.env.REACT_APP_BOTBACKENDURL}/textToSpeech?text=${answer}`, {mode:'cors'})
             const arrayBuffer = await response.arrayBuffer();
             TextToSpeech.ctx.close();
             TextToSpeech.ctx = new AudioContext();

diff --git a/Frontend/src/benchi-chatbot/config.js b/Frontend/src/benchi-chatbot/config.js
@@ -12,7 +12,6 @@ const config = {
   state: {
     questionNr: 0,
     userPreferences: {experience: '', risk: '', active: false, effort: '', duration: ''},
-    textToSpeech: new TextToSpeech()
   },
   customComponents: {
      // Replaces the default header

diff --git a/Frontend/src/components/common/AssetDetailItem.jsx b/Frontend/src/components/common/AssetDetailItem.jsx
@@ -4,6 +4,8 @@ import {Avatar, Box, Container, ListItem, Typography} from '@mui/material';
 import DropdownMenu from '../screens/WatchLists/DropdownMenu';
 import PropTypes from 'prop-types';
 
+import Colors from './Colors';
+
 /**
  * Formats the date (day and month)
  * @param activityDate
@@ -51,7 +53,7 @@ const AssetDetailItem = props => (
       borderBottomLeftRadius: props.itemsArray && props.index === props.itemsArray.length - 1 && '0.5rem',
       borderBottomRightRadius: props.itemsArray && props.index === props.itemsArray.length - 1 && '0.5rem',
       backgroundColor: 'white',
-      borderLeftColor: props.activities ? props.colorsArray[4][props.row.type][1] : props.colorsArray[props.row.symbol.hashCode() % 4],
+      borderLeftColor: props.activities ? props.colorsArray[0][props.row.type][1] : Colors.COLORPALETTE[props.row.symbol.hashCode() % 10],
       boxShadow: props.index === 0 ?
         'rgb(0 0 0 / 15%) 0px -6px 6px -6px' :
         props.itemsArray && props.index === props.itemsArray.length - 1 ?
@@ -76,8 +78,8 @@ const AssetDetailItem = props => (
               xs: 12
             }}
             sx={{
-              color: props.colorsArray[4][props.row.type][0],
-              backgroundColor: props.colorsArray[4][props.row.type][1],
+              color: props.colorsArray[0][props.row.type][0],
+              backgroundColor: props.colorsArray[0][props.row.type][1],
             }}
           >
             {`${props.row.type}`}
@@ -101,7 +103,7 @@ const AssetDetailItem = props => (
           alt={`${props.activities ? props.row.assetName : props.row.name}-logo`}
           //src={`${process.env.PUBLIC_URL}/assets/images/allianz-logo.jpeg`} //TODO: put icon if exists
           sx={{
-            backgroundColor: props.activities ? props.colorsArray[props.row.asset.hashCode() % 4] : props.colorsArray[props.row.symbol.hashCode() % 4],
+            backgroundColor: props.activities ? Colors.COLORPALETTE[props.row.asset.hashCode() % 10] : Colors.COLORPALETTE[props.row.symbol.hashCode() % 10],
             width: {
               xs: '2.5rem',
               md: '2.8rem'

diff --git a/Frontend/src/components/common/Benchi.jsx b/Frontend/src/components/common/Benchi.jsx
@@ -15,7 +15,7 @@ import ActionProvider from '../../benchi-chatbot/ActionProvider.js';
 import TextToSpeech from '../../benchi-chatbot/TextToSpeech.js';
 
 /**
- * Template to show modals throughout the app
+ * Renders the Benchi Icon and Chat
  * @param props
  * @returns {JSX.Element}
  * @constructor

diff --git a/Frontend/src/components/common/Colors.jsx b/Frontend/src/components/common/Colors.jsx
@@ -1,11 +1,25 @@
 const Colors = {
     BROWN: '#493f35',
     LIGHTBROWN: '#eacfb4',
+    TEXTBROWN: '#30302f',
     GREY: '#f3f4f6',
+    DARKGREY: '#bdbab7',
     GREEN: '#4eb96f',
     DARKGREEN: '#068930',
-
-
+    DARKORANGE: '#e47e25',
+    DARKERDARKORANGE: '#c96208',
+    COLORPALETTE: [
+        '#e57e24ff', //cadmium-orange
+        '#eb8e1fff', //carrot-orange
+        '#f19b1fff', //orange-peel
+        '#b69994ff', //tuscany
+        '#3a97d2ff', //carolina-blue 
+        '#3d9bcaff', //carolina-blue-2
+        '#4eb96fff', //medium-sea-green 
+        '#c1be49ff', // olive-green 
+        '#efc317ff', //jonquil 
+        '#ecb81aff', //orange-yellow 
+    ]
 }
 
 export default Colors;
diff --git a/Frontend/src/components/common/DoughnutChart.jsx b/Frontend/src/components/common/DoughnutChart.jsx
@@ -4,6 +4,24 @@ import {Chart as ChartJS, ArcElement, Tooltip, Legend} from 'chart.js';
 import {Doughnut} from 'react-chartjs-2';
 import {Typography, Grid, Paper} from '@mui/material';
 
+import Colors from './Colors';
+
+/**
+ * Creates a hashCode from a String
+ * @param String
+ * @returns {interger}
+ */
+ String.prototype.hashCode = function() {
+  let hash = 0, i, chr;
+  if (this.length === 0) return hash;
+  for (i = 0; i < this.length; i++) {
+    chr   = this.charCodeAt(i);
+    hash  = ((hash << 5) - hash) + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+
 /**
  * Shows a Custom DoughnutChart
  * @param props
@@ -29,16 +47,19 @@ const DoughnutChart = props => {
     setMiddleDisplayValue(defaultMiddleDisplayValue);
   }
 
+  const getColors = (symbols) => {
+    let colors = [];
+    symbols.forEach((symbol, index) => {
+      const symbolColor = Colors.COLORPALETTE[symbol ? symbol.hashCode() % 10 : index*8 % 10];
+      colors.push(symbolColor);
+    });
+    return colors;
+  }
+
   const labels = props.labels;
 
   const valueData = props.data;
-  const colors = [
-    'rgba(59, 151, 210, 1)',
-    'rgba(241, 155, 31, 1)',
-    'rgba(229, 126, 37, 1)',
-    'rgba(239, 195, 25, 1)',
-    'rgba(78, 185, 111, 1)',
-  ]
+  const colors = getColors(props.symbols);
 
   const data = {
     labels: labels,
@@ -133,7 +154,8 @@ DoughnutChart.propTypes = {
   defaultMiddleDisplayLabel: PropTypes.string,
   defaultMiddleDisplayValue: PropTypes.string,
   data: PropTypes.array,
-  labels: PropTypes.array
+  labels: PropTypes.array,
+  symbols: PropTypes.array
 };
 
 export default DoughnutChart;