Merge pull request #425 from rvpanoz/develop

Feat/doctor-flow (#424)

app/commons/utils.js

@@ -249,14 +249,23 @@ export const shrinkDirectory = directory => {
 };
 
 export const parseNpmDoctor = data => {
-  if (!data) {
-    return null;
-  }
+  console.log(data);
 
   try {
-    const dataParts = data.split('\n').map(line => line.replace(/  +/g, ' '));
+    const dataToJson = JSON.parse(data);
+    const { error } = dataToJson;
+
+    if (error) {
+      const { code, summary } = error;
+
+      return {
+        error: true,
+        message: `${code}: ${summary}`,
+        content: null
+      };
+    }
 
-    return dataParts;
+    return dataToJson;
   } catch (error) {
     throw new Error(error);
   }

app/components/views/doctor/components/DoctorList.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { string, arrayOf, objectOf } from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Avatar from '@material-ui/core/Avatar';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import CheckIcon from '@material-ui/icons/CheckOutlined';
+import { iMessage } from 'commons/utils';
+
+import ToolbarView from './Toolbar';
+import styles from '../styles/doctorList'
+
+const DoctorList = ({ classes, data }) => <Paper elevation={2}>
+  <div className={classes.toolbar}>
+    <ToolbarView
+      title={iMessage('title', 'doctorReport')}
+    />
+  </div>
+  <Divider />
+  <List disablePadding>
+    {data && data.filter(value => value.length && value.indexOf('Recommendation') === -1).map(dataValue => (
+      <ListItem key={dataValue}>
+        <ListItemAvatar>
+          <Avatar style={{ backgroundColor: '#fff' }}>
+            <CheckIcon color="primary" />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={dataValue} />
+      </ListItem>
+    ))}
+  </List>
+</Paper>
+
+DoctorList.propTypes = {
+  classes: objectOf(string).isRequired,
+  data: arrayOf(string)
+}
+
+export default withStyles(styles)(DoctorList);

app/components/views/doctor/components/Toolbar.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+import styles from '../styles/toolbar';
+
+const ToolbarView = ({ classes, title }) => <div className={classes.root}>
+    <Toolbar
+        disableGutters
+    >
+        <div className={classes.header}>
+            <Typography variant="h4" className={classes.title}>
+                {title}
+            </Typography>
+        </div>
+        <div className={classes.spacer} />
+    </Toolbar>
+</div>
+
+ToolbarView.propTypes = {
+    classes: PropTypes.objectOf(PropTypes.string).isRequired,
+    title: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(ToolbarView);

app/components/views/doctor/components/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+
+import DoctorList from './DoctorList'
+
+export { DoctorList }

app/components/views/doctor/styles/doctorList.js

@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    width: '100%'
+  },
+});
+
+export default styles;

app/components/views/doctor/styles/toolbar.js

@@ -0,0 +1,39 @@
+import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
+import { defaultFont, flexContainer, grayColor } from 'styles/variables';
+
+const styles = theme => ({
+  root: {
+    width: '100%'
+  },
+  tableListToolbar: {
+    paddingRight: 8
+  },
+  spacer: {
+    flex: '1 1 100%'
+  },
+  header: {
+    flex: '0 0 auto',
+    padding: theme.spacing(2) + 4
+  },
+  title: {
+    display: 'flex',
+    color: darken(grayColor, 0.2),
+    flexDirection: 'column',
+    justifyContent: 'flex-start'
+  },
+  directory: {
+    ...defaultFont,
+    fontSize: 12
+  },
+  highlight: {
+    color: theme.palette.common.white,
+    backgroundColor: lighten(theme.palette.secondary.light, 0.9)
+  },
+  actions: {
+    ...flexContainer,
+    flex: '0 0 auto',
+    padding: theme.spacing(1)
+  }
+});
+
+export default styles;

app/components/views/notifications/styles/list.js

@@ -21,12 +21,13 @@ const styles = theme => ({
   },
   tableWrapper: {
     whiteSpace: 'nowrap',
+    overflowY: 'scroll',
     padding: theme.spacing(1),
-    [theme.breakpoints.up('md')]: {
-      maxHeight: 450
+    [theme.breakpoints.down('md')]: {
+      maxHeight: 535
     },
     [theme.breakpoints.up('lg')]: {
-      maxHeight: 650
+      maxHeight: 700
     }
   },
   tableResponsive: {

app/containers/Doctor.js

@@ -1,23 +1,13 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { useDispatch, useMappedState } from 'redux-react-hook';
-
 import Grid from '@material-ui/core/Grid';
-import Avatar from '@material-ui/core/Avatar';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ListItemText from '@material-ui/core/ListItemText';
-
-import CheckIcon from '@material-ui/icons/CheckOutlined';
-
 import { AppLoader, HelperText } from 'components/common';
 import { iMessage } from 'commons/utils';
 import { runDoctor } from 'models/npm/actions';
-
+import { DoctorList } from 'components/views/doctor/components';
 import styles from './styles/doctor';
 
 const mapState = ({
@@ -27,41 +17,22 @@ const mapState = ({
     }
   },
   npm: {
-    doctor: { error, result }
+    doctor: { result }
   }
 }) => ({
   loading,
   message,
   result,
-  error
 });
 
-const renderData = data => (
-  <List disablePadding>
-    {data &&
-      data
-        .filter(value => value.length)
-        .map(dataValue => (
-          <ListItem key={dataValue}>
-            <ListItemAvatar>
-              <Avatar style={{ backgroundColor: '#fff' }}>
-                <CheckIcon color="secondary" />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={dataValue} />
-          </ListItem>
-        ))}
-  </List>
-);
-
 const Doctor = ({ classes }) => {
-  const { loading, message, result, error } = useMappedState(mapState);
+  const { loading, message, result } = useMappedState(mapState);
   const [status, setStatus] = useState({
     type: result ? 'doctor' : 'init',
     options: null
   });
+  const { content, error } = result || {};
   const dispatch = useDispatch();
-  const { type } = status;
 
   const handleDoctor = () =>
     dispatch(
@@ -78,40 +49,42 @@ const Doctor = ({ classes }) => {
     color: 'primary'
   };
 
-  useEffect(() => {
-    setStatus(options => ({
-      ...options,
-      type: result ? 'doctor' : 'init',
-      options: result ? null : options
-    }));
-  }, [result, loading]);
-
-  // set error
   useEffect(() => {
     if (error) {
-      const { summary, code } = error || {};
+      const { message: errorMessage, code } = error || {};
 
       const errorOptions = {
-        text: summary,
+        text: errorMessage,
         code
       };
 
-      setStatus({
+      setStatus(options => ({
+        ...options,
         type: 'error',
         options: errorOptions
-      });
+      }));
+
+      return;
     }
-  }, [error]);
+
+    setStatus(options => ({
+      ...options,
+      type: content ? 'doctor' : 'init'
+    }));
+  }, [content, error, loading]);
+
+  const { type, options } = status;
 
   return (
     <AppLoader loading={loading} message={message}>
       <div className={classes.root}>
+        {type === 'error' && <HelperText {...options} />}
         {type === 'init' && <HelperText {...initOptions} />}
         {type === 'doctor' && (
           <Grid className={classes.container} container>
-            <Grid item sm={12}>
-              <div className={cn(classes.topSection, classes.wrapper)}>
-                {renderData(result)}
+            <Grid item sm={12} md={12} lg={12} xl={12}>
+              <div className={classes.wrapper}>
+                <DoctorList data={content} />
               </div>
             </Grid>
           </Grid>