Merge branch 'feature/about'

src/components/ErrorBoundary/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+/**
+ * Generic ErrorBoundary handler. Will catch error and return a basic respons message
+ * TODO:
+ *  * Extend the plesantry of the error message and perhaps direct to help page etc
+ *  * improve verbosity of logging
+ * 
+ * 
+ * 
+ * 
+ */
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false };
+    }
+
+    componentDidCatch(error, info) {
+      // Display fallback UI
+      this.setState({ hasError: true });
+      // You can also log the error to an error reporting service
+      console.log(error, info);
+    }
+
+    render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return <h1>Ooops. Something went wrong.</h1>;
+      }
+      return this.props.children;
+    }
+  }
+
+  export default ErrorBoundary;

src/components/UnAuthorized/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Wrapper, Message, Button } from './style';
+
+const UnAuthorized = props => (
+    <Wrapper
+        {...props.theme}>
+        <Message>You Must be Logged in to view this page</Message>
+        <Button>Login</Button>
+    </Wrapper>
+);
+
+export default UnAuthorized;

src/components/UnAuthorized/style.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+    width: 100%;
+    height: 300px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    vertical-align: middle;
+`;
+
+export const Message = styled.div`
+    color: black;
+    align-self: center;
+`
+export const Button = styled.button`
+    color: black;
+    width: 100px;
+    align-self: center;
+
+`

src/services/sapi/client.js

@@ -43,8 +43,27 @@ import StockLogo from './fixtures/images/stockLogo.png';
  *
  */
 class ShortedAPI {
-    constructor() {
+    constructor(credentials = false) {
         console.log('constructing stub client');
+        this.credentials = credentials
+        this.authenticated = false
+    }
+    /**
+     * login
+     * generate authentication token for client side requests 
+     */
+    login() {
+        if (this.credentials) {
+            this.authenticated = this.authenticate(this.credentials);
+            return this.authenticated
+        }
+    }
+    authenticate(credentials) {
+        if (credentials) {
+            return true
+        } else {
+            return false
+        }
     }
     /**
      * getTopShorts
@@ -157,6 +176,20 @@ class ShortedAPI {
     getTopAlerts(total = 5) {
         return topAlerts.alerts.slice(0, total);
     }
+    /**
+     * getUserAlerts()
+     * 
+     * 
+     * 
+     * 
+     */
+    getUserAlerts() {
+        if (this.authenticated) {
+            // get user list here
+        } else {
+            return false
+        }
+    }
     /**
      * getAlerts
      * get the latest alerts for a specific stock

src/components/AboutHeader/index.jsx → src/views/aboutpage/components/AboutHeader/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-import AboutHeaderHero from '../../assets/images/about-main.svg';
+import AboutHeaderHero from '../../../../assets/images/about-main.svg';
 import {
     HeroWrapper,
     HeroButtonWrapper,

src/views/aboutpage/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
 import AppViewWrapper from '../../components/AppViewWrapper';
-import AboutHeader from '../../components/AboutHeader';
+import AboutHeader from './components/AboutHeader';
 import {duration, transitionStyles} from './style';
 
 class AboutPage extends React.Component {

src/views/alerts/components/List/index.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import {Wrapper} from './style';
-
 import Row from '../Row';
+import UnAuthorized from '../../../../components/UnAuthorized';
 
 const List = props => (
     <Wrapper>
-        {props.data.map(row => (
+        {props.data ? props.data.map(row => (
             <Row data={row} />
-        ))}
+        )) : <UnAuthorized />}
     </Wrapper>
 );
 

src/views/alerts/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Transition from 'react-transition-group/Transition';
 import ShortedAPI from '../../services/sapi/client';
 import List from './components/List';
-import {DashboardWrapper, duration, transitionStyles} from './style';
+import {DashboardWrapper, duration, transitionStyles, Header} from './style';
 
 /**
  * View:Alerts
@@ -39,11 +39,20 @@ class Alerts extends React.Component {
                 {state => {
                     return (
                         <DashboardWrapper {...this.props.theme}>
-                            <List
-                                onHover={row => this.handleHover(row)}
-                                onSelect={row => this.handleClick(row)}
-                                data={this.apiClient.getTopAlerts()}
-                            />
+                        <Header>Market Alerts</Header>
+                        <List
+                            onHover={row => this.handleHover(row)}
+                            onSelect={row => this.handleClick(row)}
+                            data={this.apiClient.getTopAlerts()}
+                        />
+                        <Header>Your Alerts</Header>
+
+                        <List
+                            onHover={row => this.handleHover(row)}
+                            onSelect={row => this.handleClick(row)}
+                            data={this.apiClient.getUserAlerts()}
+                        />
+
                         </DashboardWrapper>
                     );
                 }}

src/views/alerts/style.js

@@ -16,6 +16,11 @@ export const DashboardWrapper = styled.div`
             'top-list top-alerts top-alerts top-movers';
     }
 `;
+export const Header = styled.div`
+    font-family: Avenir Next, sans-serif;
+    font-size: 40px;
+    font-weight: bold;
+`
 
 export const duration = 300;
 

src/views/dashboard/index.jsx

@@ -3,6 +3,7 @@ import Transition from 'react-transition-group/Transition';
 import {Menu, Icon, Switch, Button} from 'antd';
 import 'antd/dist/antd.css';
 import Logo from '../../components/Logo';
+import ErrorBoundary from '../../components/ErrorBoundary';
 import ThemeSwitch from '../../components/ThemeSwitch';
 import Sectors from '../../views/sectors';
 import Alerts from '../../views/alerts';
@@ -48,17 +49,17 @@ class Dashboard extends React.Component {
     getView(selection, theme) {
         switch (selection) {
             case 'SECTORS':
-                return <Sectors theme={themes[theme]} />;
+                return <ErrorBoundary><Sectors theme={themes[theme]} /></ErrorBoundary>;
             case 'MOVERS':
-                return <Movers theme={themes[theme]} />;
+                return <ErrorBoundary><Movers theme={themes[theme]} /></ErrorBoundary>;
             case 'ALERTS':
-                return <Alerts theme={themes[theme]} />;
+                return <ErrorBoundary><Alerts theme={themes[theme]} /></ErrorBoundary>;
             case 'SEASONALITY':
-                return <Seasonality theme={themes[theme]} />;
+                return <ErrorBoundary><Seasonality theme={themes[theme]} /></ErrorBoundary>;
             case 'SUMMARY':
-                return <Summary theme={themes[theme]} />;
+                return <ErrorBoundary><Summary theme={themes[theme]} /></ErrorBoundary>;
             default:
-                return <Summary theme={themes[theme]} />;
+                return <ErrorBoundary><Summary theme={themes[theme]} /></ErrorBoundary>;
         }
     }
 

src/views/dashboard/style.js

@@ -60,4 +60,5 @@ export const ContentWrapper = styled.div`
     padding-right: 20px;
     padding-bottom: 20px;
     background: ${props => props.background};
+    height: 100vh;
 `;

src/views/stockprofile/index.jsx

@@ -6,11 +6,11 @@ import ShortedAPI from '../../services/sapi/client';
 
 import headerBackground from '../../assets/images/header-background.svg';
 import AppViewWrapper from '../../components/AppViewWrapper';
-import ProfileChart from '../../components/ProfileChart';
-import ProfileSidePanel from '../../components/ProfileSidePanel';
-import ProfileHeader from '../../components/ProfileHeader';
-import ProfileAlerts from '../../components/ProfileAlerts';
-import icon32 from '../../../static/favicon-32x32.png';
+import ProfileChart from './components/ProfileChart';
+import ProfileSidePanel from './components/ProfileSidePanel';
+import ProfileHeader from './components/ProfileHeader';
+import ProfileAlerts from './components/ProfileAlerts';
+import icon32 from './../../../static/favicon-32x32.png';
 import {StockProfileWrapper, duration, transitionStyles} from './style';
 
 /**

src/components/Alerts/index.jsx → src/views/summary/components/Alerts/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-import ShortedAPI from '../../services/sapi/client';
-import AlertRow from '../../components/AlertRow';
+import AlertRow from '../AlertRow';
 import {duration, transitionStyles, Wrapper, Header, More, Rows} from './style';
 /**
  * Responsible for the rendering/display of "alerts" which represent anomalous changes in short positions for a given stock.

src/components/Legend/index.jsx → src/views/summary/components/Legend/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-import LegendCompanyCode from '../../components/LegendCompanyCode';
-import LegendCompanyLogo from '../../components/LegendCompanyLogo';
-import LegendCompanyPE from '../../components/LegendCompanyPE';
-import LegendCompanyMarketCap from '../../components/LegendCompanyMarketCap';
+import LegendCompanyCode from '../LegendCompanyCode';
+import LegendCompanyLogo from '../LegendCompanyLogo';
+import LegendCompanyPE from '../LegendCompanyPE';
+import LegendCompanyMarketCap from '../LegendCompanyMarketCap';
 import {
     Wrapper,
     duration,
@@ -12,7 +12,7 @@ import {
     CompanyName,
     CompanySector,
 } from './style';
-import ShortedAPI from '../../services/sapi/client';
+import ShortedAPI from '../../../../services/sapi/client';
 /**
  * Renders a shorted.com.au logo
  * TODO: add data fetch here, async or prefetch based of top-short positions

src/components/MoversList/index.jsx → src/views/summary/components/MoversList/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-import ShortedAPI from '../../services/sapi/client';
-import MoversListRow from '../../components/MoversListRow';
+import MoversListRow from '../MoversListRow';
 import {Wrapper, Header, More, duration, transitionStyles} from './style';
 /**
  * Renders a list of TopShortsListRow components. These rows will display the stock code, stock name, and percentage shorted

src/components/WindowPicker/index.jsx → src/views/summary/components/WindowPicker/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Wrapper} from './style';
-import Button from '../Button';
+import Button from '../../../../components/Button';
 
 /**
  * WindowPicker

src/views/summary/index.jsx

@@ -1,18 +1,14 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
-import headerBackground from '../../assets/images/header-background.svg';
 import ShortedAPI from '../../services/sapi/client';
-import AppViewWrapper from '../../components/AppViewWrapper';
-import TopChartVictory from '../../components/TopChartVictory';
-import MoversList from '../../components/MoversList';
-import TopShortsList from '../../components/TopShortsList';
-import Legend from '../../components/Legend';
-import Alerts from '../../components/Alerts';
-import ThemePicker from '../../components/ThemePicker';
-import WindowPicker from './../../components/WindowPicker';
-import ChartOptions from '../../components/ChartOptions';
+import TopChartVictory from './components/TopChartVictory';
+import MoversList from './components/MoversList';
+import TopShortsList from './components/TopShortsList';
+import Legend from './components/Legend';
+import Alerts from './components/Alerts';
+import WindowPicker from '././components/WindowPicker';
+import ChartOptions from './components/ChartOptions';
 import {DashboardWrapper, themes, duration, transitionStyles} from './style';
-import {runInThisContext} from 'vm';
 
 /**
  * View:TopShorts