From 13dfe2edd2981eb3eb9a25c4749b7cf05cba8949 Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Fri, 13 May 2022 08:58:38 +0200
Subject: [PATCH 1/5] feature/watchlist: refactoring asset details page

---
 .../screens/Dashboard/PortfolioCharts.jsx     | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx b/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx
index 3ff7ae9f..7f9382a9 100644
--- a/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx
+++ b/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx
@@ -1,22 +1,18 @@
 import React from 'react';
-import {Card, Container, CardContent, Box} from '@mui/material';
+import {Container, Box} from '@mui/material';
 import PortfolioPerformance from './PortfolioPerformance';
 import PortfolioValueChart from './PortfolioValuechart';
 
 export const PortfolioCharts = props => {
   return (
-    <Card raised className='col-12' sx={{border: 3, borderColor: 'rgb(0, 0, 100)', borderRadius: 3}}>
-      <CardContent className='d-flex col-12 py-4'>
-        <Container className='d-flex flex-column flex-xl-row justify-content-center align-items-center'>
-          <Box className='col-12 col-xl-6 mb-4 mb-xl-0 me-xl-4'>
-            <PortfolioValueChart {...props} view={props.view}/>
-          </Box>
-          <Box className='col-12 col-xl-6 ms-xl-4'>
-            <PortfolioPerformance {...props} view={props.view}/>
-          </Box>
-        </Container>
-      </CardContent>
-    </Card>
+    <Container className='d-flex flex-column flex-xl-row justify-content-center align-items-center'>
+      <Box className='col-12 col-xl-6 mb-4 mb-xl-0 me-xl-4'>
+        <PortfolioValueChart {...props} view={props.view}/>
+      </Box>
+      <Box className='col-12 col-xl-6 ms-xl-4'>
+        <PortfolioPerformance {...props} view={props.view}/>
+      </Box>
+    </Container>
   )
 }
 

From 073954ab7ed88824920d3fbb651a9e80ff6ccb25 Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Fri, 13 May 2022 09:00:19 +0200
Subject: [PATCH 2/5] missing styles for asset details page

---
 .../screens/AssetDetails/AssetCard.jsx        | 22 +++++++++----------
 .../screens/AssetDetails/AssetChart.jsx       |  7 +++---
 .../AssetDetails/AssetDetailsScreen.jsx       |  8 +++++++
 .../screens/AssetDetails/Masterdata.jsx       |  2 +-
 .../screens/Dashboard/AllocationGraph.jsx     |  2 +-
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/Frontend/src/components/screens/AssetDetails/AssetCard.jsx b/Frontend/src/components/screens/AssetDetails/AssetCard.jsx
index ed8a9600..b2985aa4 100644
--- a/Frontend/src/components/screens/AssetDetails/AssetCard.jsx
+++ b/Frontend/src/components/screens/AssetDetails/AssetCard.jsx
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import AssetChart from './AssetChart';
 import ChartButtons from './ChartButtons';
 import Masterdata from './Masterdata';
-import {Container, Card, Grid} from '@mui/material';
+import {Container, Card, Grid, Box} from '@mui/material';
 import PropTypes from 'prop-types';
 import SwitchButtons from './SwitchButtons';
 import AssetPerformance from './AssetPerfofmance';
@@ -50,25 +50,23 @@ const AssetCard = props => {
   }
 
   return (
-    <Container className='d-flex flex-column px-1 pt-2 sm'>
+    <Container className='d-flex flex-column px-1 pt-2'>
       <Card>
-        <Grid container direction='column'>
-          <Grid xs={2} item container direction='row' justifyContent='space-between'>
-            <>
+        <Box container direction='column'>
+          <Box className='d-flex flex-row justify-content-space-between'>
               <SwitchButtons containsAssetData={containsAssetData} setChartType={setChartType} chartType={chartType}/>
               <ChartButtons view={view} setView={setView}/>
-            </>
-          </Grid>
-          <Grid item xs={6} className='mt-2 mb-2'>
+          </Box>
+          <Box className='mt-2 mb-2'>
             {renderContent()}
-          </Grid>
-          <Grid item xs={4}>
+          </Box>
+          <Box>
             {
               props.assetType === 'Stock' &&
               <Masterdata assetType={props.assetType} symbol={props.symbol} setName={setName}/>
             }
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
       </Card>
     </Container>
   )
diff --git a/Frontend/src/components/screens/AssetDetails/AssetChart.jsx b/Frontend/src/components/screens/AssetDetails/AssetChart.jsx
index 5dc2fb38..7a861287 100644
--- a/Frontend/src/components/screens/AssetDetails/AssetChart.jsx
+++ b/Frontend/src/components/screens/AssetDetails/AssetChart.jsx
@@ -198,9 +198,10 @@ export const AssetChart = props => {
   // Manipulate data according to view
   changeData(props.view, data, labels, options, setup);
   return (
-    <Card raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
-      <CardHeader title={'Price | ' + props.name}
-                  subheader={Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR',}).format(price)}/>
+    <Card className='col-xl-12' raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
+      <CardHeader
+        title={'Price | ' + props.name}
+        subheader={Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR',}).format(price)}/>
       <CardContent>
         <Line data={setup} options={options} plugins={[crosshair]}/>
       </CardContent>
diff --git a/Frontend/src/components/screens/AssetDetails/AssetDetailsScreen.jsx b/Frontend/src/components/screens/AssetDetails/AssetDetailsScreen.jsx
index 93220b33..24dbd0d0 100644
--- a/Frontend/src/components/screens/AssetDetails/AssetDetailsScreen.jsx
+++ b/Frontend/src/components/screens/AssetDetails/AssetDetailsScreen.jsx
@@ -27,6 +27,10 @@ const AssetDetailsScreen = props => {
         assetsListArray={props.assetsListArray}
         searchResult={props.searchResult}
         setSearchResult={props.setSearchResult}
+        statusMessage={props.statusMessage}
+        setStatusMessage={props.setStatusMessage}
+        messageType={props.messageType}
+        setMessageType={props.setMessageType}
       />
     </React.Fragment>
   );
@@ -39,6 +43,10 @@ AssetDetailsScreen.propTypes = {
   activePortfolio: PropTypes.string,
   watchListsArray: PropTypes.array,
   assetsListArray: PropTypes.array,
+  statusMessage: PropTypes.string,
+  setStatusMessage: PropTypes.func,
+  messageType: PropTypes.string,
+  setMessageType: PropTypes.func
 };
 
 export default AssetDetailsScreen;
diff --git a/Frontend/src/components/screens/AssetDetails/Masterdata.jsx b/Frontend/src/components/screens/AssetDetails/Masterdata.jsx
index 9b174d2b..ea468b5a 100644
--- a/Frontend/src/components/screens/AssetDetails/Masterdata.jsx
+++ b/Frontend/src/components/screens/AssetDetails/Masterdata.jsx
@@ -48,7 +48,7 @@ const Masterdata = props => {
         </List>
       </Grid>
       <Grid item>
-        <Divider orientation='vertical' flexItem sx={1} style={{height: '100%'}}/>
+        <Divider orientation='vertical' flexItem xs={1} style={{height: '100%'}}/>
       </Grid>
       <Grid item xs={5}>
         <List>
diff --git a/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx b/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
index d9ab12e7..6bdb72fb 100644
--- a/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
+++ b/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
@@ -11,7 +11,7 @@ import {DoughnutChart} from '../../common';
 
 const AllocationGraph = props => {
   const defaultMiddleDisplayLabel = `Value of ${props.activePortfolio}`;
-  const defaultMiddleDisplayValue = `${parseFloat(props.portfolioData.value.toFixed(2)).toLocaleString()} €`;
+  const defaultMiddleDisplayValue = props.portfolioData.value ?`${parseFloat(props.portfolioData.value).toFixed(2).toLocaleString()} €` : '0.00 €';
 
   const assets = props.getAllAssets();
 

From 802ac65409508507b994b69e85a1f73feca539de Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Sat, 14 May 2022 17:23:55 +0200
Subject: [PATCH 3/5] feature/watchlist:  final layout touch and tests

---
 .../components/common/SearchResultsTable.jsx  |  6 +-
 .../Analysis/__test__/AnalysisScreen.test.jsx | 25 +++----
 .../AnalysisScreen.test.jsx.snap              | 66 +++++++++++++++++--
 .../__snapshots__/AssetDetails.test.jsx.snap  |  2 +
 .../Settings/__test__/SettingsScreen.test.jsx |  2 +-
 .../__test__/WatchListsScreen.test.jsx        | 22 ++++---
 6 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/Frontend/src/components/common/SearchResultsTable.jsx b/Frontend/src/components/common/SearchResultsTable.jsx
index 5282323d..de7b5faa 100644
--- a/Frontend/src/components/common/SearchResultsTable.jsx
+++ b/Frontend/src/components/common/SearchResultsTable.jsx
@@ -21,7 +21,7 @@ const SearchResultsTable = props => {
    * @returns {boolean}
    */
   const checkAssetInWatchLists = asset => {
-    let isAssetInWatchList = false
+    let isAssetInWatchList = false;
     props.assetsListArray.forEach(innerArray => {
       innerArray.forEach(assetInWatchList => {
         if (assetInWatchList.name === asset.name || assetInWatchList.name === asset.symbol) {
@@ -32,7 +32,6 @@ const SearchResultsTable = props => {
     return isAssetInWatchList;
   }
 
-  let navigate = useNavigate();
   const routeChange = path => {
     navigate(path);
   } 
@@ -94,13 +93,12 @@ const SearchResultsTable = props => {
             item
             className={`d-flex flex-column ${props.watchListsArray && props.watchListsArray.length > 0 ? 'flex-xl-row flex-grow-1 col-1 pe-4' : 'col-9 col-sm-10'}`}>
             <Link
-              className='col-12 text-decoration-none text-black'
+              className={`d-flex flex-grow-1 text-decoration-none text-black ${props.watchListsArray && props.watchListsArray.length > 0 && 'col-xl-8'}`}
               to={`/asset/${element.assetType}/${element.symbol}`}
               key={`search_result_links_${index}`}
             >
               <Typography
                 noWrap
-                className={`${props.watchListsArray && props.watchListsArray.length > 0 && 'col-xl-8'}`}
                 fontSize={{
                   lg: 16,
                   md: 15,
diff --git a/Frontend/src/components/screens/Analysis/__test__/AnalysisScreen.test.jsx b/Frontend/src/components/screens/Analysis/__test__/AnalysisScreen.test.jsx
index ca95f306..4a7adcc8 100644
--- a/Frontend/src/components/screens/Analysis/__test__/AnalysisScreen.test.jsx
+++ b/Frontend/src/components/screens/Analysis/__test__/AnalysisScreen.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {BrowserRouter} from 'react-router-dom';
 import AnalysisScreen from '../AnalysisScreen';
 import AnalysisDetailItem from '../AnalysisDetailitem';
 import {shallow, mount, configure} from 'enzyme';
@@ -36,17 +37,19 @@ it('AnalysisScreen renders without crashing', () => {
     }
   }
 
-  const tree = shallow(<AnalysisScreen
-    searchResult={[]}
-    setSearchResult={setSearchResult}
-    watchListsArray={[]}
-    assetsListArray={[[]]}
-    portfolioData={portfolioData}
-    activePortfolio={'Portfolio'}
-    setPortfolioData={setPortfolioData}
-    setStatusMessage={setStatusMessage}
-    setMessageType={setMessageType}
-  />);
+  const tree = shallow(<BrowserRouter>
+    <AnalysisScreen
+      searchResult={[]}
+      setSearchResult={setSearchResult}
+      watchListsArray={[]}
+      assetsListArray={[[]]}
+      portfolioData={portfolioData}
+      activePortfolio={'Portfolio'}
+      setPortfolioData={setPortfolioData}
+      setStatusMessage={setStatusMessage}
+      setMessageType={setMessageType}
+    />
+  </BrowserRouter>);
 
   expect(toJson(tree)).toMatchSnapshot();
 });
diff --git a/Frontend/src/components/screens/Analysis/__test__/__snapshots__/AnalysisScreen.test.jsx.snap b/Frontend/src/components/screens/Analysis/__test__/__snapshots__/AnalysisScreen.test.jsx.snap
index bcf7d844..1fcb0a8b 100644
--- a/Frontend/src/components/screens/Analysis/__test__/__snapshots__/AnalysisScreen.test.jsx.snap
+++ b/Frontend/src/components/screens/Analysis/__test__/__snapshots__/AnalysisScreen.test.jsx.snap
@@ -1,21 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnalysisScreen renders without crashing 1`] = `
-<Fragment>
-  <ScreensTemplate
+<Router
+  location={
+    Object {
+      "hash": "",
+      "key": "default",
+      "pathname": "/",
+      "search": "",
+      "state": null,
+    }
+  }
+  navigationType="POP"
+  navigator={
+    Object {
+      "action": "POP",
+      "back": [Function],
+      "block": [Function],
+      "createHref": [Function],
+      "forward": [Function],
+      "go": [Function],
+      "listen": [Function],
+      "location": Object {
+        "hash": "",
+        "key": "default",
+        "pathname": "/",
+        "search": "",
+        "state": null,
+      },
+      "push": [Function],
+      "replace": [Function],
+    }
+  }
+>
+  <AnalysisScreen
+    activePortfolio="Portfolio"
     assetsListArray={
       Array [
         Array [],
       ]
     }
-    bodyComponent={[Function]}
+    portfolioData={
+      Object {
+        "Portfolio": Object {
+          "activities": Array [],
+          "activitiesLastId": -1,
+          "cash": Array [],
+          "cashValue": 0,
+          "crypto": Array [],
+          "cryptoValue": 0,
+          "dailyDataForPerformanceGraph": Object {},
+          "dailyDataForValueDevelopment": Object {},
+          "gains": 0,
+          "name": "Portfolio",
+          "performanceWithRealisedGains": 0,
+          "performanceWithoutRealisedGains": 0,
+          "realisedGains": 0,
+          "shareValue": 0,
+          "shares": Array [],
+          "totalGains": 0,
+          "updated": "1970-01-01",
+          "value": 0,
+        },
+      }
+    }
     searchResult={Array []}
-    selectedNavLinkIndex={3}
     setMessageType={[MockFunction]}
+    setPortfolioData={[MockFunction]}
     setSearchResult={[MockFunction]}
     setStatusMessage={[MockFunction]}
+    watchListsArray={Array []}
   />
-</Fragment>
+</Router>
 `;
 
 exports[`Snapshot Test AnalysisDetailItem 1`] = `
diff --git a/Frontend/src/components/screens/AssetDetails/__test__/__snapshots__/AssetDetails.test.jsx.snap b/Frontend/src/components/screens/AssetDetails/__test__/__snapshots__/AssetDetails.test.jsx.snap
index c56b9a9d..5e5dd17e 100644
--- a/Frontend/src/components/screens/AssetDetails/__test__/__snapshots__/AssetDetails.test.jsx.snap
+++ b/Frontend/src/components/screens/AssetDetails/__test__/__snapshots__/AssetDetails.test.jsx.snap
@@ -11,7 +11,9 @@ exports[`AssetDetailsScreen renders without crashing 1`] = `
     bodyComponent={[Function]}
     searchResult={Array []}
     selectedNavLinkIndex={-1}
+    setMessageType={[MockFunction]}
     setSearchResult={[MockFunction]}
+    setStatusMessage={[MockFunction]}
   />
 </Fragment>
 `;
diff --git a/Frontend/src/components/screens/Settings/__test__/SettingsScreen.test.jsx b/Frontend/src/components/screens/Settings/__test__/SettingsScreen.test.jsx
index 7d156d61..92964aa9 100644
--- a/Frontend/src/components/screens/Settings/__test__/SettingsScreen.test.jsx
+++ b/Frontend/src/components/screens/Settings/__test__/SettingsScreen.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import {BrowserRouter} from 'react-router-dom';
 import SettingsScreen from '../SettingsScreen';
 import toJson from 'enzyme-to-json';
 import Enzyme, {shallow} from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import {BrowserRouter} from 'react-router-dom';
 
 Enzyme.configure({adapter: new Adapter()})
 
diff --git a/Frontend/src/components/screens/WatchLists/__test__/WatchListsScreen.test.jsx b/Frontend/src/components/screens/WatchLists/__test__/WatchListsScreen.test.jsx
index b8cde426..8df3abf4 100644
--- a/Frontend/src/components/screens/WatchLists/__test__/WatchListsScreen.test.jsx
+++ b/Frontend/src/components/screens/WatchLists/__test__/WatchListsScreen.test.jsx
@@ -20,6 +20,11 @@ const assetsListArray = [
   ]
 ];
 
+const mockedNavigator = jest.fn();
+jest.mock('react-router-dom', () => ({
+  useNavigate: () => mockedNavigator
+}));
+
 describe('Tests regarding WatchList screen', () => {
   const addToWatchList = jest.fn();
   const setWatchListsArray = jest.fn();
@@ -30,14 +35,15 @@ describe('Tests regarding WatchList screen', () => {
   const setMessageType = jest.fn();
 
   it('search results are not shown', () => {
-    const wrapper = shallow(<SearchResultsTable
-      searchResult={[]}
-      watchListsArray={watchListsArray}
-      selectedListIndex={0}
-      assetsListArray={assetsListArray}
-      addToWatchList={addToWatchList}
-      onClose={onClose}
-    />);
+    const wrapper = shallow(
+      <SearchResultsTable
+        searchResult={[]}
+        watchListsArray={watchListsArray}
+        selectedListIndex={0}
+        assetsListArray={assetsListArray}
+        addToWatchList={addToWatchList}
+        onClose={onClose}
+      />);
 
     expect(wrapper.find(<ListItem/>).exists()).toBeFalsy();
   });

From 0d20bf2cb5ab4a6093a34e16271d45b0ac223d62 Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Sat, 14 May 2022 17:28:49 +0200
Subject: [PATCH 4/5] feature/watchlist: putting a missing function back

---
 Frontend/src/components/common/SearchResultsTable.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Frontend/src/components/common/SearchResultsTable.jsx b/Frontend/src/components/common/SearchResultsTable.jsx
index de7b5faa..2bed3183 100644
--- a/Frontend/src/components/common/SearchResultsTable.jsx
+++ b/Frontend/src/components/common/SearchResultsTable.jsx
@@ -32,6 +32,7 @@ const SearchResultsTable = props => {
     return isAssetInWatchList;
   }
 
+  let navigate = useNavigate();
   const routeChange = path => {
     navigate(path);
   } 

From 2371c6aee9229a83d56ce1b899878ccb7e0b5d0a Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Sat, 14 May 2022 23:49:59 +0200
Subject: [PATCH 5/5] feature/watchlist: putting back the navigate function in
 live search results

---
 Frontend/src/components/common/SearchResultsTable.jsx        | 5 +++--
 .../src/components/screens/Dashboard/AllocationGraph.jsx     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/components/common/SearchResultsTable.jsx b/Frontend/src/components/common/SearchResultsTable.jsx
index 2bed3183..1829ac42 100644
--- a/Frontend/src/components/common/SearchResultsTable.jsx
+++ b/Frontend/src/components/common/SearchResultsTable.jsx
@@ -32,7 +32,7 @@ const SearchResultsTable = props => {
     return isAssetInWatchList;
   }
 
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   const routeChange = path => {
     navigate(path);
   } 
@@ -126,7 +126,8 @@ const SearchResultsTable = props => {
             <Grid item className='d-flex flex-row justify-content-end'>
               <ListItemButton
                 className='p-0 ms-3 flex-grow-0 justify-content-end'
-                onClick={() => {routeChange(`../activities/addActivity/${element.assetType}/${element.symbol}/${element.name}`)}}
+                onClick={() => {
+                  routeChange(`../activities/addActivity/${element.assetType}/${element.symbol}/${element.name}`)}}
               >
                 <Tooltip
                   title='Add Activity'
diff --git a/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx b/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
index 6bdb72fb..e0ecc3c6 100644
--- a/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
+++ b/Frontend/src/components/screens/Dashboard/AllocationGraph.jsx
@@ -29,7 +29,7 @@ const AllocationGraph = props => {
   })();
 
   const valueData = (() => {
-    let valueData = []
+    let valueData = [];
     assets.forEach(element => {
       valueData.push(parseFloat(element.value).toFixed(2));
     });