Homepage: build a PreviewLayout of user groups in UserHome

packages/lib-user/src/components/MyGroups/MyGroupsContainer.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { shape, string } from 'prop-types'
+import { bool, shape, string } from 'prop-types'
 import { useState } from 'react'
 
 import {
@@ -21,11 +21,9 @@ import MyGroups from './MyGroups'
 import CreateButton from './components/CreateButton'
 import GroupCardList from './components/GroupCardList'
 import GroupCreateFormContainer from './components/GroupCreateFormContainer'
+import PreviewLayout from './components/PreviewLayout'
 
-function MyGroupsContainer({
-  authUser,
-  login
-}) {
+function MyGroupsContainer({ authUser, login, previewLayout = false }) {
   const [groupModalActive, setGroupModalActive] = useState(false)
 
   const {
@@ -36,7 +34,7 @@ function MyGroupsContainer({
     authUser,
     login
   })
-  
+
   const {
     data: membershipsWithGroups,
     error: membershipsError,
@@ -61,6 +59,7 @@ function MyGroupsContainer({
       >
         <GroupCreateFormContainer />
       </GroupModal>
+      {!previewLayout ? (
       <Layout
         primaryHeaderItem={
           <HeaderLink
@@ -71,21 +70,23 @@ function MyGroupsContainer({
         }
       >
         <ContentBox
-          linkLabel='Learn more about Groups'
-          linkProps={{ href: '/groups' }}
-          title='My Groups'
-          pad={{ horizontal: '60px', vertical: '30px' }}
-        >
-          <MyGroups>
-            <GroupCardList
-              groups={activeGroupsWithRoles}
-            />
-          </MyGroups>
-          <CreateButton
-            onClick={() => setGroupModalActive(true)}
-          />
-        </ContentBox>
-      </Layout>
+            title='My Groups'
+            pad={{ horizontal: '60px', vertical: '30px' }}
+          >
+            <MyGroups>
+              <GroupCardList groups={activeGroupsWithRoles} />
+            </MyGroups>
+            <CreateButton onClick={() => setGroupModalActive(true)} />
+          </ContentBox>
+        </Layout>
+      ) : (
+        <PreviewLayout
+          authUser={authUser}
+          groups={activeGroupsWithRoles}
+          loading={userLoading || membershipsLoading}
+          setGroupModalActive={setGroupModalActive}
+        />
+      )}
     </>
   )
 }
@@ -94,7 +95,8 @@ MyGroupsContainer.propTypes = {
   authUser: shape({
     id: string
   }),
-  login: string
+  login: string,
+  previewLayout: bool
 }
 
 export default MyGroupsContainer

packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js

@@ -0,0 +1,67 @@
+import { Loader } from '@zooniverse/react-components'
+import { Box, Paragraph } from 'grommet'
+import { arrayOf, bool, func, shape, string } from 'prop-types'
+
+import { ContentBox } from '@components/shared'
+import GroupCardContainer from '../GroupCard/GroupCardContainer.js'
+import CreateButton from '../CreateButton'
+
+const DEFAULT_HANDLER = () => true
+
+export default function PreviewLayout({
+  authUser,
+  groups,
+  loading = false,
+  setGroupModalActive = DEFAULT_HANDLER
+}) {
+  return (
+    <ContentBox
+      linkLabel='See all'
+      linkProps={{ href: `/users/${authUser?.login}/groups` }}
+      title='My Groups'
+    >
+      {loading && (
+        <Box fill justify='center' align='center'>
+          <Loader />
+        </Box>
+      )}
+      {!loading && groups?.length ? (
+        <Box margin={{ bottom: 'medium' }}>
+          {groups.slice(0, 2).map(group => (
+            <GroupCardContainer
+              key={group.id}
+              id={group.id}
+              displayName={group.displayName}
+              role={group.role}
+            />
+          ))}
+        </Box>
+      ) : (
+        <Box fill justify='center' align='center'>
+          <Paragraph margin={{ top: '0', bottom: '20px' }}>
+            You are not a member of any Groups.
+          </Paragraph>
+          <Paragraph margin={{ top: '0', bottom: '20px' }}>
+            Create one below
+          </Paragraph>
+        </Box>
+      )}
+      <CreateButton onClick={() => setGroupModalActive(true)} />
+    </ContentBox>
+  )
+}
+
+PreviewLayout.propTypes = {
+  authUser: shape({
+    id: string.isRequired
+  }),
+  groups: arrayOf(
+    shape({
+      display_name: string,
+      id: string,
+      roles: arrayOf(string)
+    })
+  ),
+  loading: bool,
+  setGroupModalActive: func
+}

packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.stories.js

@@ -0,0 +1,44 @@
+import { Box } from 'grommet'
+
+import { getActiveGroupsWithRoles } from '../../helpers/getActiveGroupsWithRoles.js'
+import {
+  USER,
+  MEMBERSHIPS,
+  USER_GROUPS
+} from '../../../../../test/mocks/panoptes'
+
+import PreviewLayout from './PreviewLayout'
+
+const MEMBERSHIPS_WITH_GROUPS = {
+  linked: {
+    user_groups: USER_GROUPS
+  },
+  memberships: MEMBERSHIPS
+}
+const groups = getActiveGroupsWithRoles(MEMBERSHIPS_WITH_GROUPS)
+
+function ComponentDecorator(Story) {
+  return (
+    <Box
+      background={{
+        dark: 'dark-3',
+        light: 'neutral-6'
+      }}
+      width={{ max: '625px' }}
+    >
+      <Story />
+    </Box>
+  )
+}
+
+export default {
+  title: 'Components/MyGroups/PreviewLayout',
+  component: PreviewLayout,
+  decorators: [ComponentDecorator],
+  args: {
+    authUser: USER,
+    groups: groups
+  }
+}
+
+export const Default = {}

packages/lib-user/src/components/MyGroups/components/PreviewLayout/index.js

@@ -0,0 +1 @@
+export { default } from './PreviewLayout.js'

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

@@ -1,13 +1,22 @@
 import { shape, string } from 'prop-types'
+import { useContext } from 'react'
+import { Grid, ResponsiveContext } from 'grommet'
 
-import { Layout } from '@components/shared'
+import { ContentBox, Layout } from '@components/shared'
 import DashboardContainer from './components/Dashboard/DashboardContainer.js'
 import RecentSubjectsContainer from './components/RecentSubjects/RecentSubjectsContainer.js'
+import MyGroupsContainer from '../MyGroups/MyGroupsContainer.js'
 
 function UserHome({ authUser }) {
+  const size = useContext(ResponsiveContext)
+
   return (
     <Layout>
-      <DashboardContainer authUser={authUser}/>
+      <DashboardContainer authUser={authUser} />
+      <Grid gap='medium' columns={size !== 'small' ? ['1fr 1fr'] : ['1fr']}>
+        <ContentBox />
+        <MyGroupsContainer previewLayout authUser={authUser} login={authUser.login} />
+      </Grid>
       <RecentSubjectsContainer authUser={authUser} />
     </Layout>
   )