Skip to content

Commit

Permalink
refactor: add Card component for Slur Crowdsource Feature (#546)
Browse files Browse the repository at this point in the history 
* feat: make the slur card use the card component

Signed-off-by: Snehil Shah <[email protected]>

* refactor: use abstracted `DataTable` instead of `Table`

Signed-off-by: Snehil Shah <[email protected]>

* refactor: use ternary operator for conditional

Signed-off-by: Snehil Shah <[email protected]>

* style: revert to original text format

Signed-off-by: Snehil Shah <[email protected]>

* fix: align & conditionally render footer tag

Signed-off-by: Snehil Shah <[email protected]>

* chore: remove original `SlurCard`

Signed-off-by: Snehil Shah <[email protected]>

---------

Signed-off-by: Snehil Shah <[email protected]>
  • Loading branch information
@Snehil-Shah
Snehil-Shah authored Apr 25, 2024
1 parent eefd281 commit 8662ca5
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 259 deletions.
311 changes: 76 additions & 235 deletions browser-extension/plugin/src/ui-components/atoms/SlurCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import React, { useState } from 'react';
import React from 'react'
import SlurCardBubble from './SlurCardBubble';
import {
List,
Text,
Card, CardBody, CardFooter,
Box,
Table,
TableHeader,
TableRow,
TableCell,
TableBody,
Button,
Anchor,
DataTable,
Text,
} from 'grommet';
import { Alert, FormUp, FormDown } from 'grommet-icons';
import SlurCardBubble from './SlurCardBubble';

const SlurCard = ({ data }) => {
const isDataEmpty =
Expand All @@ -21,239 +16,85 @@ const SlurCard = ({ data }) => {
data.appropriated === undefined ||
data.categories.length === 0;

const [showMore, setShowMore] = useState(false);
const [showMore, setShowMore] = React.useState(false);
const toggleShowMore = () => {
setShowMore(!showMore);
};
const buttonLabel = showMore ? 'See Less' : 'See More';
const buttonIcon = showMore ? <FormUp /> : <FormDown />;

return (
<Box align="center">
{isDataEmpty ? (
<Box
direction="row"
gap="medium"
align="center"
background="status-warning"
width={'fit-content'}
>
<Box margin="medium">
<Alert />
const columns = [
{
property: 'name',
header: false,
render: data => <Text color="#646464">{data.name}</Text>,
},
{
property: 'value',
header: false,
render: data => {
return data.name === 'Categories' ? (
<Box direction="row" gap="medium" wrap={true}>
{data.value.map((category, categoryIndex) => (
<Box margin={'xsmall'} key={categoryIndex}>
<SlurCardBubble data={category} />
</Box>
))}
</Box>
<Text margin="small">Add metadata for the slur</Text>
</Box>
) : (
<>
<Box width={'fit-content'}>
{/* <List
primaryKey="name"
secondaryKey="value"
data={[
{
name: 'Level of Severity',
value: data.levelOfSeverity
},
{
name: 'Casual',
value:
data.casual === true
? 'Yes'
: data.casual === false
? 'No'
: ''
},
{
name: 'Appropriated',
value:
data.appropriated === true
? 'Yes'
: data.appropriated === false
? 'No'
: ''
},
{
name: 'If, Appropriated, Is it by Community or Others?',
value:
data.appropriated === true
? 'Community'
: data.appropriated === false
? 'Others'
: ''
},
{
name: 'What Makes it Problematic?',
value: (
<Box>
<Text truncate>
{data.labelMeaning}
</Text>
</Box>
)
},
{
name: 'Categories',
value: (
<Box
direction="row"
gap="medium"
>
{data.categories.map(
(category, categoryIndex) => (
<SlurCardBubble
key={categoryIndex}
data={category}
/>
)
)}
</Box>
)
}
]}
/> */}
<Table>
{/* <TableHeader>
<TableRow>
<TableCell scope="col" border="bottom">
Name
</TableCell>
<TableCell scope="col" border="bottom">
Flavor
</TableCell>
</TableRow>
</TableHeader> */}
<TableBody>
<TableRow>
<TableCell scope="row">
<Text color="#646464">
Level of Severity
</Text>
</TableCell>
<TableCell>
{data.levelOfSeverity}
</TableCell>
</TableRow>
<TableRow>
<TableCell scope="row">
<Text color="#646464">Casual</Text>
</TableCell>
<TableCell>
{data.casual === true
? 'Yes'
: data.casual === false
? 'No'
: ''}
</TableCell>
</TableRow>
<TableRow>
<TableCell scope="row">
<Text color="#646464">
Appropriated
</Text>
</TableCell>
<TableCell>
{data.appropriated === true
? 'Yes'
: data.appropriated === false
? 'No'
: ''}
</TableCell>
</TableRow>
{showMore && (
<>
<TableRow>
<TableCell scope="row">
<Text color="#646464">
If, Appropriated, Is it by
Community or Others?
</Text>
</TableCell>
<TableCell>
{data.appropriationContext === true
? 'Community'
: data.appropriationContext ===
false
? 'Others'
: ''}
</TableCell>
</TableRow>
<TableRow>
<TableCell scope="row">
<Text color="#646464">
What Makes it Problematic?
</Text>
</TableCell>
<TableCell>
<Box>
<Text
truncate
style={{
maxWidth: '100px',
overflow: 'hidden',
textOverflow:
'ellipsis',
whiteSpace: 'nowrap'
}}
>
{data.labelMeaning}
</Text>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell scope="row">
<Text color="#646464">
Categories
</Text>
</TableCell>
<TableCell>
{
<Box
direction="row"
gap="medium"
wrap={true}
>
{data.categories.map(
(
category,
categoryIndex
) => (
<Box
margin={
'xsmall'
}
>
<SlurCardBubble
key={
categoryIndex
}
data={
category
}
/>
</Box>
)
)}
</Box>
}
</TableCell>
</TableRow>
</>
)}
</TableBody>
</Table>
<Box align='center' margin={{top: "small"}}>
<Anchor
label={buttonLabel}
icon={buttonIcon}
onClick={toggleShowMore}
/>
) : data.value;
},
},
];

const dataToShow = [
{ name: 'Level of Severity', value: data.levelOfSeverity },
{ name: 'Casual', value: data.casual ? 'Yes' : 'No' },
{ name: 'Appropriated', value: data.appropriated ? 'Yes' : 'No' },
];

if (showMore) {
dataToShow.push(
{ name: 'If, Appropriated, Is it by Community or Others?', value: data.appropriationContext ? 'Community' : 'Others' },
{ name: 'What Makes it Problematic?', value: data.labelMeaning },
{ name: 'Categories', value: data.categories },
);
}

return (
<Card flex={true} background="#FFE5B4">
<CardBody pad="medium">
{isDataEmpty ? (
<Box
direction="row"
gap="medium"
align="center"
background="status-warning"
width={'fit-content'}
>
<Box margin="medium">
<Alert />
</Box>
<Text margin="small">Add metadata for the slur</Text>
</Box>
</>
)}
</Box>
) : (
<DataTable
columns={columns}
data={dataToShow}
border={false}
/>
)}
</CardBody>
{!isDataEmpty && (
<CardFooter justify="center" pad={{horizontal: "medium"}}>
<Anchor
label={buttonLabel}
icon={buttonIcon}
onClick={toggleShowMore}
/>
</CardFooter>
)}
</Card>
);
};
}

export default SlurCard;
export default SlurCard
21 changes: 0 additions & 21 deletions browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
View file

This file was deleted.

9 changes: 8 additions & 1 deletion browser-extension/plugin/src/ui-components/atoms/Theme.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,14 @@ const Theme = {
</Text>
)
}
}
},
dataTable: {
header: {
border: {
color: 'transparent',
},
},
},
};

export default Theme;
3 changes: 1 addition & 2 deletions browser-extension/plugin/src/ui-components/pages/Slur.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom';
import Api from './Api';
import { UserContext, NotificationContext } from '../atoms/AppContext';
import SlurCard from '../atoms/SlurCard';
// import SlurCardComponent from '../atoms/SlurCardComponent';

const { getSlurAndCategory, deleteSlurAndCategory } = Api;

Expand Down Expand Up @@ -56,7 +55,7 @@ export function Slur() {
}, []);

return (
<Box fill gap={'medium'}>
<Box fill gap={'medium'} pad={{bottom: 'medium'}}>
<Box gap="medium" alignContent="center" wrap>
{isLoading ? (
<Box alignContent="center">
Expand Down

0 comments on commit 8662ca5

Please sign in to comment.