🚧 apply prettier format

Author: liberaliscomputing

config-overrides.js

@@ -1,12 +1,12 @@
 module.exports = config => {
-  require("react-app-rewire-postcss")(config, {
+  require('react-app-rewire-postcss')(config, {
     plugins: loader => [
-      require("postcss-import-ext-glob"),
-      require("postcss-import"),
-      require("postcss-for"),
-      require("postcss-inherit"),
-      require("postcss-nested")
-    ]
+      require('postcss-import-ext-glob'),
+      require('postcss-import'),
+      require('postcss-for'),
+      require('postcss-inherit'),
+      require('postcss-nested'),
+    ],
   });
 
   return config;

src/App.css

@@ -37,3 +37,12 @@ body {
 .study-contacts {
   grid-column: 10 / span 3;
 }
+
+.View--Login {
+  background-image: url(https://portal.kidsfirstdrc.org/static/media/background-science.68317e4e.jpg);
+}
+
+.Card--Login {
+  @inherit: .Card;
+  width: 620px;
+}

src/App.js

@@ -2,20 +2,12 @@ import React from 'react';
 import Routes from './Routes';
 import {ApolloProvider} from 'react-apollo';
 import {client} from './state/client';
-import {GridContainer} from './components/Grid';
-import {Header} from 'kf-uikit';
 
 const App = () => (
   <ApolloProvider client={client}>
-
-    <GridContainer>
-      <Header />
-    </GridContainer>
-
     <main className="App">
       <Routes />
     </main>
-    
   </ApolloProvider>
 );
 

src/App.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it('renders without crashing', () => {
+  const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/Routes/PrivateRoute.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import jwtDecode from 'jwt-decode';
-import { Route, Redirect, withRouter } from 'react-router-dom';
+import {Route, Redirect, withRouter} from 'react-router-dom';
 
 export const hasToken = () => {
   const token = localStorage.getItem('egoToken');
@@ -9,14 +9,17 @@ export const hasToken = () => {
   }
   const user = jwtDecode(token).context.user;
   return (
-    user.status === 'Approved' && jwtDecode(token).exp > Math.floor(new Date().getTime() / 1000)
+    user.status === 'Approved' &&
+    jwtDecode(token).exp > Math.floor(new Date().getTime() / 1000)
   );
 };
 
-const PrivateRoute = ({ component: Component, ...rest }) => (
+const PrivateRoute = ({component: Component, ...rest}) => (
   <Route
     {...rest}
-    render={props => (hasToken() ? <Component {...props} /> : <Redirect to="/login" />)}
+    render={props =>
+      hasToken() ? <Component {...props} /> : <Redirect to="/login" />
+    }
   />
 );
 

src/Routes/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
 import PrivateRoute from './PrivateRoute';
 
-import { LoginView, StudyListView, FileUploadView } from '../views';
+import {LoginView, StudyListView, FileUploadView} from '../views';
 
 const Routes = () => (
   <Router>

src/components/FileUpload/FileUploadTarget.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import classes from 'classnames';
 import PropTypes from 'prop-types';
 
 class FileUploadTarget extends Component {
   constructor(props) {
     super(props);
-    this.state = { dragging: false, count: 0 };
+    this.state = {dragging: false, count: 0};
   }
 
   preventDefaults = e => {
@@ -19,38 +19,38 @@ class FileUploadTarget extends Component {
 
   handleDragEnter = e => {
     this.preventDefaults(e);
-    let { count } = this.state;
-    this.setState({ count: ++count });
+    let {count} = this.state;
+    this.setState({count: ++count});
 
     if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-      this.setState({ dragging: true });
+      this.setState({dragging: true});
     }
   };
 
   handleDragLeave = e => {
     this.preventDefaults(e);
-    let { count } = this.state;
-    this.setState({ count: --count });
+    let {count} = this.state;
+    this.setState({count: --count});
 
     if (this.state.count === 0) {
-      this.setState({ dragging: false });
+      this.setState({dragging: false});
     }
   };
 
   handleDrop = e => {
     this.preventDefaults(e);
-    this.setState({ dragging: false });
+    this.setState({dragging: false});
 
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       this.props.onDrop(e.dataTransfer.files);
       e.dataTransfer.clearData();
-      this.setState({ count: 0 });
+      this.setState({count: 0});
     }
   };
 
   render() {
-    const { className, instructions, handleSelectedFile } = this.props;
-    const { handleDragOver, handleDragEnter, handleDragLeave, handleDrop } = this;
+    const {className, instructions, handleSelectedFile} = this.props;
+    const {handleDragOver, handleDragEnter, handleDragLeave, handleDrop} = this;
     const fileUploadFormClass = classes(
       'upload-target',
       'w-full',
@@ -80,7 +80,11 @@ class FileUploadTarget extends Component {
             </small>
           </p>
         ) : null}
-        <input type="file" className="Button Button--default" onChange={handleSelectedFile} />
+        <input
+          type="file"
+          className="Button Button--default"
+          onChange={handleSelectedFile}
+        />
       </form>
     );
   }

src/components/FileUpload/index.js

@@ -1 +1 @@
-export { default as FileUploadTarget } from "./FileUploadTarget";
+export {default as FileUploadTarget} from './FileUploadTarget';

src/components/Grid/GridContainer.js

@@ -5,8 +5,10 @@ import classes from 'classnames';
 /**
  * Container for a 12 column css grid
  */
-const GridContainer = ({ className, children, collapsed }) => {
-  const GridContainerClass = classes(className, { 'grid-container--collapsed': collapsed });
+const GridContainer = ({className, children, collapsed}) => {
+  const GridContainerClass = classes(className, {
+    'grid-container--collapsed': collapsed,
+  });
 
   return <section className={GridContainerClass}>{children}</section>;
 };

src/components/Grid/index.js

@@ -1 +1 @@
-export { default as GridContainer } from "./GridContainer";
+export {default as GridContainer} from './GridContainer';

src/components/Loading/index.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import { branch, renderComponent } from 'recompose';
+import {branch, renderComponent} from 'recompose';
 
-export const LoadingPlaceholder = () => <h1 className="col-12">LOADING ....</h1>;
+export const LoadingPlaceholder = () => (
+  <h1 className="col-12">LOADING ....</h1>
+);
 
 export const renderWhileLoading = (component, propName = 'data') =>
-  branch(props => props[propName] && props[propName].loading, renderComponent(component));
+  branch(
+    props => props[propName] && props[propName].loading,
+    renderComponent(component),
+  );

src/components/Login/Login.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import GoogleLogin from 'react-google-login';
+import {GOOGLE_APP_ID, EGO_API} from '../../common/globals';
+import {withRouter} from 'react-router';
+
+const onSuccess = (repsonse, history) => {
+  fetch(EGO_API + '/oauth/google/token', {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      token: repsonse.tokenId,
+      'content-type': 'application/json',
+    },
+  })
+    .then(resp => {
+      return resp.text();
+    })
+    .then(text => {
+      localStorage.setItem('egoToken', text);
+      history.push('/');
+      return text;
+    })
+    .catch(err => {
+      console.log('Problem getting Ego token');
+      console.log(err);
+    });
+};
+
+const onFailure = repsonse => {
+  console.log('Problem sign in');
+};
+
+const LoginContainer = ({history}) => (
+  <GoogleLogin
+    clientId={GOOGLE_APP_ID}
+    buttonText="Sign in with Google"
+    onSuccess={response => onSuccess(response, history)}
+    onFailure={onFailure}
+  />
+);
+
+export default withRouter(LoginContainer);

src/components/Login/index.js

@@ -0,0 +1 @@
+export {default as Login} from './Login';

src/components/StudyCard/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classes from 'classnames';
-import { Card } from 'kf-uikit';
+import {Card} from 'kf-uikit';
 
 /**
  * Displays all studies for each Investigator
  */
 
-const StudyCard = ({ children, className, title }) => {
+const StudyCard = ({children, className, title}) => {
   let studyCardClass = classes('study-card', className);
 
   return (
-    <Card {...{ title }} className={studyCardClass}>
+    <Card {...{title}} className={studyCardClass}>
       {children}
     </Card>
   );

src/index.css

@@ -1,3 +1,3 @@
-@import "../node_modules/kf-uikit/dist/styles.css";
-@import "./App.css";
+@import '../node_modules/kf-uikit/dist/styles.css';
+@import './App.css';
 @import-glob "./components/**/*.css";

src/index.js

@@ -1,14 +1,14 @@
 import './index.css';
 import React from 'react';
 import App from './App';
-import { render } from "react-dom";
+import {render} from 'react-dom';
 
-const RootHtml = () => (<App />);
+const RootHtml = () => <App />;
 
-render(<RootHtml />, document.getElementById("root"));
+render(<RootHtml />, document.getElementById('root'));
 
 if (module.hot) {
-  module.hot.accept("./App", () => {
-    render(<RootHtml />, document.getElementById("root"));
+  module.hot.accept('./App', () => {
+    render(<RootHtml />, document.getElementById('root'));
   });
 }

src/state/client.js

@@ -1,10 +1,10 @@
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
-import { createUploadLink } from 'apollo-upload-client';
-import { createHttpLink } from 'apollo-link-http';
-import { setContext } from 'apollo-link-context';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { KF_STUDY_API } from '../common/globals';
+import {ApolloClient} from 'apollo-client';
+import {ApolloLink} from 'apollo-link';
+import {createUploadLink} from 'apollo-upload-client';
+import {createHttpLink} from 'apollo-link-http';
+import {setContext} from 'apollo-link-context';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+import {KF_STUDY_API} from '../common/globals';
 
 const authLink = setContext((_, { headers }) => {
   const token = localStorage.getItem('egoToken');
@@ -17,6 +17,9 @@ const authLink = setContext((_, { headers }) => {
 });
 
 export const client = new ApolloClient({
-  link: ApolloLink.from([authLink, createUploadLink({ uri: `${KF_STUDY_API}/graphql` })]),
+  link: ApolloLink.from([
+    authLink,
+    createUploadLink({uri: `${KF_STUDY_API}/graphql`}),
+  ]),
   cache: new InMemoryCache(),
 });

src/state/nodes/allStudies/index.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag';
+
+// Example query to get studies
+export const STUDY_QUERY = gql`
+  {
+    allStudies {
+      edges {
+        node {
+          id
+          kfId
+          name
+        }
+      }
+    }
+  }
+`;
+

src/state/nodes/allStudiesNode.js

@@ -14,4 +14,3 @@ export const ALL_STUDIES_QUERY = gql`
     }
   }
 `;
-

src/state/nodes/index.js

@@ -1,3 +1,3 @@
-export { ALL_STUDIES_QUERY } from './allStudiesNode';
-export { GET_STUDY_BY_ID } from './studyNode';
-export { CREATE_FILE } from './filesNode';
+export {ALL_STUDIES_QUERY} from './allStudiesNode';
+export {GET_STUDY_BY_ID} from './studyNode';
+export {CREATE_FILE} from './filesNode';