[WIP] TFAC-354 Adding MoneyRaised to Auth

src/__tests__/pages/auth.test.js

@@ -3,6 +3,8 @@ import { shallow } from 'enzyme'
 import Typography from '@material-ui/core/Typography'
 import Logo from 'src/components/Logo'
 import FirebaseAuth from 'src/components/FirebaseAuth'
+import MoneyRaisedContainer from 'src/components/MoneyRaisedContainer'
+import useData from 'src/utils/hooks/useData'
 
 jest.mock('src/utils/pageWrappers/withRelay')
 jest.mock('src/components/FirebaseAuth', () => () => (
@@ -11,15 +13,30 @@ jest.mock('src/components/FirebaseAuth', () => () => (
 jest.mock('src/components/FullPageLoader', () => () => (
   <div data-test-id="full-page-loader-mock" />
 ))
+jest.mock('src/components/FullPageLoader', () => () => (
+  <div data-test-id="full-page-loader-mock" />
+))
 jest.mock('src/components/Logo')
 jest.mock('src/utils/pageWrappers/withSentry')
+jest.mock('src/utils/hooks/useData')
+
+const getMockProps = () => ({
+  data: {
+    app: {
+      moneyRaised: 846892.02,
+      dollarsPerDayRate: 602.12,
+    },
+  },
+})
+
+beforeEach(() => {
+  useData.mockReturnValue({ data: getMockProps().data })
+})
 
 afterEach(() => {
   jest.clearAllMocks()
 })
 
-const getMockProps = () => ({})
-
 describe('auth.js', () => {
   it('renders without error', () => {
     expect.assertions(1)
@@ -43,7 +60,7 @@ describe('auth.js', () => {
     const AuthPage = require('src/pages/auth.js').default
     const mockProps = getMockProps()
     const wrapper = shallow(<AuthPage {...mockProps} />)
-    expect(wrapper.find(Typography).first().text()).toEqual(
+    expect(wrapper.find(Typography).at(1).text()).toEqual(
       '"One of the simplest ways to raise money"'
     )
   })
@@ -53,7 +70,7 @@ describe('auth.js', () => {
     const AuthPage = require('src/pages/auth.js').default
     const mockProps = getMockProps()
     const wrapper = shallow(<AuthPage {...mockProps} />)
-    expect(wrapper.find(Typography).at(1).text()).toEqual('- USA Today')
+    expect(wrapper.find(Typography).last().text()).toEqual('- USA Today')
   })
 
   it('includes the FirebaseAuth component', async () => {
@@ -63,4 +80,27 @@ describe('auth.js', () => {
     const wrapper = shallow(<AuthPage {...mockProps} />)
     expect(wrapper.find(FirebaseAuth).exists()).toBe(true)
   })
+
+  it('includes the MoneyRaisedContainer component', async () => {
+    expect.assertions(1)
+    const AuthPage = require('src/pages/auth.js').default
+    const mockProps = getMockProps()
+    const wrapper = shallow(<AuthPage {...mockProps} />)
+    expect(wrapper.find(MoneyRaisedContainer).exists()).toBe(true)
+  })
+
+  it('passes the expected getRelayQuery function to `useData`', async () => {
+    expect.assertions(1)
+    const AuthPage = require('src/pages/auth.js').default
+    const mockProps = {
+      ...getMockProps(),
+      data: { ...getMockProps().data, some: 'stuff' },
+    }
+    shallow(<AuthPage {...mockProps} />)
+    const useDataArg = useData.mock.calls[0][0]
+    const queryInfo = await useDataArg.getRelayQuery()
+    expect(queryInfo).toMatchObject({
+      query: expect.any(Object),
+    })
+  })
 })

src/pages/auth.js

@@ -8,6 +8,10 @@ import grey from '@material-ui/core/colors/grey'
 import Typography from '@material-ui/core/Typography'
 import FirebaseAuth from 'src/components/FirebaseAuth'
 import Logo from 'src/components/Logo'
+import useData from 'src/utils/hooks/useData'
+import MoneyRaisedContainer from 'src/components/MoneyRaisedContainer'
+import { graphql } from 'react-relay'
+import PropTypes from 'prop-types'
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -36,13 +40,40 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 'bold',
   },
   quoteAttribution: {},
+  topContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignContent: 'flex-start',
+  },
 }))
 
-const Auth = () => {
+const getRelayQuery = () => ({
+  query: graphql`
+    query authQuery {
+      app {
+        ...MoneyRaisedContainer_app
+      }
+    }
+  `,
+})
+
+const Auth = ({ data: initialData }) => {
   const classes = useStyles()
+  const { data } = useData({ getRelayQuery, initialData })
+  const fetchInProgress = !data
+  console.log(fetchInProgress)
+  const { app } = data || {}
   return (
     <div className={classes.container}>
-      <Logo includeText className={classes.logo} />
+      { !fetchInProgress &&
+        <div className={classes.topContainer}>
+          <Logo includeText className={classes.logo} />
+          <Typography variant="h5">
+            <MoneyRaisedContainer app={app} />
+          </Typography>
+        </div>
+      }
       <div className={classes.loginContainer}>
         <FirebaseAuth />
       </div>
@@ -70,9 +101,15 @@ const Auth = () => {
 
 Auth.displayName = 'Auth'
 
-Auth.propTypes = {}
+Auth.propTypes = {
+  data: PropTypes.shape({
+    app: PropTypes.shape({}).isRequired,
+  }),
+}
 
-Auth.defaultProps = {}
+Auth.defaultProps = {
+  data: undefined,
+}
 
 export default flowRight([
   withAuthUser({

src/utils/hooks/useData.js

@@ -20,6 +20,7 @@ const useData = ({ getRelayQuery, initialData, ...SWROptions }) => {
   // Before fetching data, wait for the AuthUser to initialize
   // if it's not not already available.
   const AuthUser = useAuthUser()
+  console.log(AuthUser)
   if (!AuthUser) {
     throw new Error(
       'The `useData` HOC should be wrapped in the `withAuthUser` HOC.'
@@ -77,6 +78,8 @@ const useData = ({ getRelayQuery, initialData, ...SWROptions }) => {
     }
   )
 
+  console.log(data)
+  console.log(error)
   return {
     data,
     error,