Skip to content

Commit

Permalink
Merge pull request #1499 from kianamcc/featuredresearch-component-update
Browse files Browse the repository at this point in the history 
FeaturedResearch Component Update: Removing Tags and Affiliation
  • Loading branch information
@kianamcc
kianamcc authored Jan 14, 2025
2 parents aecff54 + 3dea0c8 commit e877c04
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 125 deletions.
40 changes: 6 additions & 34 deletions packages/synapse-react-client/src/components/FeaturedResearch/FeaturedResearch.test.tsx
View file
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
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

0 comments on commit e877c04

Please sign in to comment.