Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FeaturedResearch Component Update: Removing Tags and Affiliation #1499

Merged
merged 1 commit into from
Jan 14, 2025
Merged

FeaturedResearch Component Update: Removing Tags and Affiliation #1499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 6 additions & 34 deletions packages/synapse-react-client/src/components/FeaturedResearch/FeaturedResearch.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,13 @@ describe('FeaturedResearch Tests', () => {
columnType: ColumnTypeEnum.DATE,
id: '3',
},
{
name: 'tags',
columnType: ColumnTypeEnum.STRING_LIST,
id: '4',
},
{
name: 'affiliation',
columnType: ColumnTypeEnum.STRING,
id: '5',
},
{
name: 'image',
columnType: ColumnTypeEnum.FILEHANDLEID,
id: '6',
id: '4',
},
{ name: 'link', columnType: ColumnTypeEnum.LINK, id: '7' },
{ name: 'order', columnType: ColumnTypeEnum.INTEGER, id: '8' },
{ name: 'link', columnType: ColumnTypeEnum.LINK, id: '5' },
{ name: 'order', columnType: ColumnTypeEnum.INTEGER, id: '6' },
],
rows: [
{
Expand All @@ -67,8 +57,6 @@ describe('FeaturedResearch Tests', () => {
'Title 1',
'Description 1',
'1726164997000',
'["tag1_1", "tag1_2"]',
'affiliation 1',
'151525812',
'https://mockurl.com/data-release-1',
'2',
Expand All @@ -80,8 +68,6 @@ describe('FeaturedResearch Tests', () => {
'Title 2',
'Description 2',
'1726164997000',
'["tag2_1"]',
'affiliation 2',
'151468828',
'https://mockurl.com/data-release-2',
'2',
Expand All @@ -106,23 +92,13 @@ describe('FeaturedResearch Tests', () => {
columnType: ColumnTypeEnum.DATE,
id: '3',
},
{
name: 'tags',
columnType: ColumnTypeEnum.STRING_LIST,
id: '4',
},
{
name: 'affiliation',
columnType: ColumnTypeEnum.STRING,
id: '5',
},
{
name: 'image',
columnType: ColumnTypeEnum.FILEHANDLEID,
id: '6',
id: '4',
},
{ name: 'link', columnType: ColumnTypeEnum.LINK, id: '7' },
{ name: 'order', columnType: ColumnTypeEnum.INTEGER, id: '8' },
{ name: 'link', columnType: ColumnTypeEnum.LINK, id: '5' },
{ name: 'order', columnType: ColumnTypeEnum.INTEGER, id: '6' },
],
}

Expand Down Expand Up @@ -169,12 +145,8 @@ describe('FeaturedResearch Tests', () => {
expect(screen.getByText('Read more')).toBeInTheDocument()
expect(screen.getByText('Title 1')).toBeInTheDocument()
expect(screen.getByText('Description 1')).toBeInTheDocument()
expect(screen.getByText('tag1_1')).toBeInTheDocument()
expect(screen.getByText('affiliation 1')).toBeInTheDocument()

expect(screen.getByText('Title 2')).toBeInTheDocument()
expect(screen.getByText('tag2_1')).toBeInTheDocument()
expect(screen.getByText('affiliation 2')).toBeInTheDocument()
expect(screen.getByText('September, 2024')).toBeInTheDocument()

await waitFor(() => {
Expand Down
98 changes: 7 additions & 91 deletions packages/synapse-react-client/src/components/FeaturedResearch/FeaturedResearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,9 @@ export type FeaturedResearchCardProps = {
research: Row
entityId: string
isLoading: boolean
affiliationColIndex: number
publicationDateColIndex: number
titleColIndex: number
descriptionColIndex: number
tagsColIndex: number
linkColIndex: number
imageColIndex: number
}
Expand All @@ -51,30 +49,11 @@ const useImageUrl = (fileId: string, entityId: string) => {
return dataUrl
}

const parseTags = (
tagsColIndex: number,
research: { values: (string | null)[] },
): string[] => {
try {
const tags = (
research.values[tagsColIndex]
? JSON.parse(research.values[tagsColIndex] || '')
: []
) as string[]
return tags
} catch (e) {
console.error(e)
return []
}
}

const FeaturedResearchCard = ({
research,
entityId,
affiliationColIndex,
publicationDateColIndex,
titleColIndex,
tagsColIndex,
linkColIndex,
imageColIndex,
isLoading,
Expand All @@ -99,14 +78,6 @@ const FeaturedResearchCard = ({
}}
>
<Stack useFlexGap gap={'10px'}>
<Typography
fontSize={'14px'}
lineHeight={'normal'}
fontWeight={500}
color={'grey.600'}
>
{research.values[affiliationColIndex]}
</Typography>
<Typography variant="headline2" color="gray.1000" fontSize={'21px'}>
<Link
href={research.values[linkColIndex] ?? ''}
Expand All @@ -122,29 +93,13 @@ const FeaturedResearchCard = ({
{research.values[titleColIndex]}
</Link>
</Typography>
<Stack direction={'row'} useFlexGap gap={'16px'} alignItems={'center'}>
{parseTags(tagsColIndex, research)[0] && (
<Typography
variant="overline"
fontSize={'14px'}
sx={{
backgroundColor: 'grey.300',
borderRadius: '3px',
padding: '4px 8px',
lineHeight: 'initial',
}}
>
{parseTags(tagsColIndex, research)[0] || ''}
</Typography>
)}
<Typography lineHeight={'normal'} color={'grey.600'}>
{research.values[publicationDateColIndex] &&
formatDate(
dayjs(Number(research.values[publicationDateColIndex])),
'MMMM, YYYY',
)}
</Typography>
</Stack>
<Typography lineHeight={'normal'} color={'grey.600'}>
{research.values[publicationDateColIndex] &&
formatDate(
dayjs(Number(research.values[publicationDateColIndex])),
'MMMM, YYYY',
)}
</Typography>
</Stack>
<CardMedia
component="img"
Expand All @@ -166,10 +121,8 @@ const FeaturedResearchCard = ({
const FeaturedResearchTopCard = ({
research,
entityId,
affiliationColIndex,
titleColIndex,
descriptionColIndex,
tagsColIndex,
linkColIndex,
imageColIndex,
isLoading,
Expand Down Expand Up @@ -199,32 +152,6 @@ const FeaturedResearchTopCard = ({
marginBottom: '30px',
}}
/>
<Stack
direction="row"
useFlexGap
gap={'10px'}
paddingBottom={'20px'}
alignItems={'start'}
>
{parseTags(tagsColIndex, research)[0] && (
<Typography
fontSize={'14px'}
lineHeight={'normal'}
sx={{
fontWeight: 700,
backgroundColor: 'primary.main',
color: '#FFFF',
padding: '3px 8px',
borderRadius: '3px',
}}
>
{parseTags(tagsColIndex, research)[0] || ''}
</Typography>
)}
<Typography lineHeight={'normal'} color={'grey.600'}>
{research.values[affiliationColIndex] ?? ''}
</Typography>
</Stack>
<Stack useFlexGap gap={'16px'}>
<Typography variant="headline2" fontSize={'36px'} color={'grey.1000'}>
<Link
Expand Down Expand Up @@ -276,8 +203,6 @@ function FeaturedResearch(props: FeaturedResearchProps) {
TITLE = 'title',
DESCRIPTION = 'description',
PUBLICATION_DATE = 'publicationDate',
TAGS = 'tags',
AFFILIATION = 'affiliation',
IMAGE = 'image',
LINK = 'link',
}
Expand All @@ -291,11 +216,6 @@ function FeaturedResearch(props: FeaturedResearchProps) {
ExpectedColumns.PUBLICATION_DATE,
queryResultBundle,
)
const tagsColIndex = getFieldIndex(ExpectedColumns.TAGS, queryResultBundle)
const affiliationColIndex = getFieldIndex(
ExpectedColumns.AFFILIATION,
queryResultBundle,
)
const imageColIndex = getFieldIndex(ExpectedColumns.IMAGE, queryResultBundle)
const linkColIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)

Expand Down Expand Up @@ -323,8 +243,6 @@ function FeaturedResearch(props: FeaturedResearchProps) {
isLoading={isLoading}
descriptionColIndex={descriptionColIndex}
publicationDateColIndex={publicationDateColIndex}
tagsColIndex={tagsColIndex}
affiliationColIndex={affiliationColIndex}
imageColIndex={imageColIndex}
linkColIndex={linkColIndex}
/>
Expand All @@ -350,8 +268,6 @@ function FeaturedResearch(props: FeaturedResearchProps) {
titleColIndex={titleColIndex}
descriptionColIndex={descriptionColIndex}
publicationDateColIndex={publicationDateColIndex}
tagsColIndex={tagsColIndex}
affiliationColIndex={affiliationColIndex}
imageColIndex={imageColIndex}
linkColIndex={linkColIndex}
/>
Expand Down
Loading