Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: zooniverse/front-end-monorepo
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 2c6c8b50ba399580464f3f401ba0f5ba5f790577
Choose a base ref
..
head repository: zooniverse/front-end-monorepo
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 3edd480f6d8990c7215420ee21f91a9e79ba1921
Choose a head ref
Original file line number Diff line number Diff line change
@@ -46,10 +46,10 @@ function ContributorsList({
direction='row'
fill='horizontal'
overflow={{ horizontal: 'auto' }}
pad='none'
style={{
boxShadow: 'inset -10px 0px 10px -10px rgba(0, 0, 0, 0.25)',
listStyle: 'none',
paddingInlineStart: 0
listStyle: 'none'
}}
>
{contributor.project_contributions.map(statsProject => {
63 changes: 34 additions & 29 deletions packages/lib-user/src/components/MyGroups/MyGroupsContainer.js
Original file line number Diff line number Diff line change
@@ -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,
@@ -50,6 +48,7 @@ function MyGroupsContainer({
})

const activeGroupsWithRoles = getActiveGroupsWithRoles(membershipsWithGroups)
const groupsSortedByCreatedAt = activeGroupsWithRoles.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))

return (
<>
@@ -61,29 +60,34 @@ function MyGroupsContainer({
>
<GroupCreateFormContainer />
</GroupModal>
<Layout
primaryHeaderItem={
<HeaderLink
href='/'
label='back'
primaryItem={true}
/>
}
>
<ContentBox
title='My Groups'
pad={{ horizontal: '60px', vertical: '30px' }}
>
<MyGroups>
<GroupCardList
groups={activeGroupsWithRoles}
{!previewLayout ? (
<Layout
primaryHeaderItem={
<HeaderLink
href='/'
label='back'
primaryItem={true}
/>
</MyGroups>
<CreateButton
onClick={() => setGroupModalActive(true)}
/>
</ContentBox>
</Layout>
}
>
<ContentBox
title='My Groups'
pad={{ horizontal: '60px', vertical: '30px' }}
>
<MyGroups>
<GroupCardList groups={groupsSortedByCreatedAt} />
</MyGroups>
<CreateButton onClick={() => setGroupModalActive(true)} />
</ContentBox>
</Layout>
) : (
<PreviewLayout
authUser={authUser}
groups={groupsSortedByCreatedAt}
loading={userLoading || membershipsLoading}
setGroupModalActive={setGroupModalActive}
/>
)}
</>
)
}
@@ -92,7 +96,8 @@ MyGroupsContainer.propTypes = {
authUser: shape({
id: string
}),
login: string
login: string,
previewLayout: bool
}

export default MyGroupsContainer
Original file line number Diff line number Diff line change
@@ -5,11 +5,9 @@ import GroupCardContainer from '../GroupCard/GroupCardContainer'
function GroupCardList({
groups = []
}) {
const groupsSortedByCreatedAt = groups.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))

return (
<>
{groupsSortedByCreatedAt.map(group => (
{groups.map(group => (
<GroupCardContainer
key={group.id}
displayName={group.display_name}
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
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
as='ul'
gap='xsmall'
margin={{ bottom: 'medium' }}
pad='none'
>
{groups.slice(0, 2).map(group => (
<GroupCardContainer
key={group.id}
id={group.id}
displayName={group.display_name}
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
}
Original file line number Diff line number Diff line change
@@ -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 = {}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './PreviewLayout.js'
3 changes: 2 additions & 1 deletion packages/lib-user/src/components/UserHome/UserHome.js
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { ContentBox, Layout } from '@components/shared'
import DashboardContainer from './components/Dashboard/DashboardContainer.js'
import RecentProjectsContainer from './components/RecentProjects/RecentProjectsContainer.js'
import RecentSubjectsContainer from './components/RecentSubjects/RecentSubjectsContainer.js'
import MyGroupsContainer from '../MyGroups/MyGroupsContainer.js'

function UserHome({ authUser }) {
const size = useContext(ResponsiveContext)
@@ -15,7 +16,7 @@ function UserHome({ authUser }) {
<DashboardContainer authUser={authUser} />
<Grid gap='medium' columns={size !== 'small' ? ['1fr 1fr'] : ['1fr']}>
<RecentProjectsContainer authUser={authUser} />
<ContentBox />
<MyGroupsContainer previewLayout authUser={authUser} login={authUser.login} />
</Grid>
<RecentSubjectsContainer authUser={authUser} />
</Layout>