From 8662ca5080d3dd84e89e4953cd146e47b057e1e4 Mon Sep 17 00:00:00 2001 From: Snehil Shah <130062020+Snehil-Shah@users.noreply.github.com> Date: Thu, 25 Apr 2024 17:06:37 +0530 Subject: [PATCH] refactor: add Card component for Slur Crowdsource Feature (#546) * feat: make the slur card use the card component Signed-off-by: Snehil Shah * refactor: use abstracted `DataTable` instead of `Table` Signed-off-by: Snehil Shah * refactor: use ternary operator for conditional Signed-off-by: Snehil Shah * style: revert to original text format Signed-off-by: Snehil Shah * fix: align & conditionally render footer tag Signed-off-by: Snehil Shah * chore: remove original `SlurCard` Signed-off-by: Snehil Shah --------- Signed-off-by: Snehil Shah --- .../src/ui-components/atoms/SlurCard.js | 311 +++++------------- .../ui-components/atoms/SlurCardComponent.js | 21 -- .../plugin/src/ui-components/atoms/Theme.jsx | 9 +- .../plugin/src/ui-components/pages/Slur.jsx | 3 +- 4 files changed, 85 insertions(+), 259 deletions(-) delete mode 100644 browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCard.js b/browser-extension/plugin/src/ui-components/atoms/SlurCard.js index 62d7699f..ad086c79 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCard.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCard.js @@ -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 = @@ -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 ? : ; - return ( - - {isDataEmpty ? ( - - - + const columns = [ + { + property: 'name', + header: false, + render: data => {data.name}, + }, + { + property: 'value', + header: false, + render: data => { + return data.name === 'Categories' ? ( + + {data.value.map((category, categoryIndex) => ( + + + + ))} - Add metadata for the slur - - ) : ( - <> - - {/* - - {data.labelMeaning} - - - ) - }, - { - name: 'Categories', - value: ( - - {data.categories.map( - (category, categoryIndex) => ( - - ) - )} - - ) - } - ]} - /> */} - - {/* - - - Name - - - Flavor - - - */} - - - - - Level of Severity - - - - {data.levelOfSeverity} - - - - - Casual - - - {data.casual === true - ? 'Yes' - : data.casual === false - ? 'No' - : ''} - - - - - - Appropriated - - - - {data.appropriated === true - ? 'Yes' - : data.appropriated === false - ? 'No' - : ''} - - - {showMore && ( - <> - - - - If, Appropriated, Is it by - Community or Others? - - - - {data.appropriationContext === true - ? 'Community' - : data.appropriationContext === - false - ? 'Others' - : ''} - - - - - - What Makes it Problematic? - - - - - - {data.labelMeaning} - - - - - - - - Categories - - - - { - - {data.categories.map( - ( - category, - categoryIndex - ) => ( - - - - ) - )} - - } - - - - )} - -
- - + ) : 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 ( + + + {isDataEmpty ? ( + + + + Add metadata for the slur - - )} - + ) : ( + + )} + + {!isDataEmpty && ( + + + + )} + ); -}; +} -export default SlurCard; +export default SlurCard \ No newline at end of file diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js deleted file mode 100644 index f5ee618a..00000000 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import SlurCardBubble from './SlurCardBubble'; -import { - Card, CardBody, CardFooter, CardHeader, List, - Text, - Box, - Button, - Anchor, -} from 'grommet'; - - -const SlurCardComponent = ({ data }) => { - return ( - - Header - Body - - ) -} - -export default SlurCardComponent \ No newline at end of file diff --git a/browser-extension/plugin/src/ui-components/atoms/Theme.jsx b/browser-extension/plugin/src/ui-components/atoms/Theme.jsx index 7bbc4f12..fa6adbd2 100644 --- a/browser-extension/plugin/src/ui-components/atoms/Theme.jsx +++ b/browser-extension/plugin/src/ui-components/atoms/Theme.jsx @@ -71,7 +71,14 @@ const Theme = { ) } - } + }, + dataTable: { + header: { + border: { + color: 'transparent', + }, + }, + }, }; export default Theme; diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx index 5ee2ddff..6e1889a4 100644 --- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx +++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx @@ -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; @@ -56,7 +55,7 @@ export function Slur() { }, []); return ( - + {isLoading ? (