Homepage: Build avatar and profile banner into user dashboard

packages/app-root/src/components/HomePageContainer.js

@@ -21,7 +21,7 @@ export default function HomePageContainer({
         </Box>
       ) : (
         <Box height={{ min: '100vh' }}>
-          {user?.login ? <UserHome authUser={user}/> : <DefaultHome />}
+          {user?.login ? <UserHome authUser={user} /> : <DefaultHome />}
         </Box>
       )}
       <CommunityContainer

packages/lib-user/dev/components/App/App.js

@@ -9,6 +9,7 @@ import {
   Contributors,
   GroupStats,
   MyGroups,
+  UserHome,
   UserStats
 } from '@components'
 
@@ -31,7 +32,7 @@ function App({
   useEffect(() => {
     async function checkUserSession() {
       setLoading(true)
-  
+
       try {
         const user = await auth.checkCurrent()
         setUser(user)
@@ -41,7 +42,7 @@ function App({
         setLoading(false)
       }
     }
-    
+
     auth.listen('change', checkUserSession)
 
     return function () {
@@ -93,13 +94,14 @@ function App({
           </li>
         </ul>
       </ul>
+      {user?.id ? <UserHome authUser={user} /> : null}
     </div>
   )
 
   if (groups) {
     const subpaths = groups.split('/')
     const groupId = subpaths[0] || ''
-  
+
     if (subpaths[0] === '[user_group_id]') {
       content = <p>In the url query param <code>?groups=</code>, please replace <code>[user_group_id]</code> with a user group id.</p>
     } else if (subpaths[1] === 'contributors') {
@@ -185,7 +187,7 @@ function App({
             />
           </div>
         </header>
-        {loading ? 
+        {loading ?
           <p>Loading...</p> : (
           <div>
             {content}

packages/lib-user/src/components/UserHome/UserHome.js

@@ -1,11 +1,13 @@
 import { shape, string } from 'prop-types'
 
 import { Layout } from '@components/shared'
+import DashboardContainer from './components/Dashboard/DashboardContainer.js'
 import RecentSubjectsContainer from './components/RecentSubjects/RecentSubjectsContainer.js'
 
 function UserHome({ authUser }) {
   return (
     <Layout>
+      <DashboardContainer authUser={authUser}/>
       <RecentSubjectsContainer authUser={authUser} />
     </Layout>
   )

packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js

@@ -0,0 +1,65 @@
+import { Box, Image, ResponsiveContext } from 'grommet'
+import styled from 'styled-components'
+import { bool, shape, string } from 'prop-types'
+import { useContext } from 'react'
+
+const Relative = styled(Box)`
+  position: relative;
+`
+
+const StyledAvatar = styled(Image)`
+  width: 128px;
+  height: 128px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: solid white 6px;
+  position: absolute;
+  top: 203px;
+
+  // For Grommet breakpoint small
+  @media (width < 769px) {
+    width: 80px;
+    height: 80px;
+    top: 137px;
+  }
+`
+
+export default function Dashboard({ isLoading = false, user }) {
+  const size = useContext(ResponsiveContext)
+
+  return (
+    <Relative
+      fill
+      align='center'
+      height={
+        size !== 'small'
+          ? { min: '270px', max: '270px' }
+          : { min: '180px', max: '180px' }
+      }
+      background={
+        isLoading || !user?.profile_header
+          ? 'brand'
+          : { image: `url(${user.profile_header})` }
+      }
+      round={size !== 'small' ? { size: '16px', corner: 'top' } : false}
+    >
+      <StyledAvatar
+        alt='User avatar'
+        src={
+          !user?.avatar_src || isLoading
+            ? 'https://www.zooniverse.org/assets/simple-avatar.png'
+            : user.avatar_src
+        }
+      />
+    </Relative>
+  )
+}
+
+Dashboard.propTypes = {
+  isLoading: bool,
+  user: shape({
+    avatar_src: string,
+    id: string.isRequired,
+    profile_header: string
+  })
+}

packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.stories.js

@@ -0,0 +1,36 @@
+import Dashboard from './Dashboard.js'
+
+export default {
+  title: 'Components / UserHome / Dashboard',
+  component: Dashboard
+}
+
+const USER = {
+  admin: false,
+  avatar_src: 'https://panoptes-uploads-staging.zooniverse.org/user_avatar/e638f5a3-7ffb-4d23-bb08-f296377a2e74.jpeg',
+  display_name: 'Test User 1',
+  id: '12345',
+  login: 'TestUser',
+  profile_header: 'https://panoptes-uploads.zooniverse.org/user_profile_header/9da9fd16-46c1-4d84-a272-83ac19fb32c3.jpeg'
+}
+
+const USER_NO_IMAGES = {
+  admin: false,
+  avatar_src: '',
+  display_name: 'Zootester 123',
+  id: '847637',
+  login: 'zootester123',
+  profile_header: ''
+}
+
+export const Default = {
+  args: {
+    user: USER
+  }
+}
+
+export const NoAvatarOrBanner = {
+  args: {
+    user: USER_NO_IMAGES
+  }
+}

packages/lib-user/src/components/UserHome/components/Dashboard/DashboardContainer.js

@@ -0,0 +1,40 @@
+import { panoptes } from '@zooniverse/panoptes-js'
+import auth from 'panoptes-client/lib/auth'
+import useSWR from 'swr'
+
+import Dashboard from './Dashboard'
+
+const SWROptions = {
+  revalidateIfStale: true,
+  revalidateOnMount: true,
+  revalidateOnFocus: true,
+  revalidateOnReconnect: true,
+  refreshInterval: 0
+}
+
+/* This is a similar pattern to usePanoptesUser hook, but includes the profile_header */
+const fetchProfileBanner = async ({ authUser }) => {
+  const token = await auth.checkBearerToken()
+  const authorization = `Bearer ${token}`
+  const query = { include: 'profile_header', user_id: authUser.id }
+
+  try {
+    const { body } = await panoptes.get('/users', query, { authorization })
+    const user = body.users?.[0]
+
+    if (body.linked?.profile_headers?.length) {
+      user.profile_header = body.linked.profile_headers[0].src
+    }
+    return user
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+export default function DashboardContainer({ authUser }) {
+  const key = { authUser }
+  const { data: user, isLoading } = useSWR(key, fetchProfileBanner, SWROptions)
+
+  return <Dashboard user={user} isLoading={isLoading} />
+}

packages/lib-user/src/components/UserHome/index.js

@@ -1 +1 @@
-export { default } from './UserHome'
+export { default } from './UserHome.js'