From b5435b58cc0c0a45f5eb6187dc587556c38c5049 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Tue, 23 Apr 2024 02:58:51 +0530 Subject: [PATCH 1/6] feat: make the slur card use the card component Signed-off-by: Snehil Shah --- .../ui-components/atoms/SlurCardComponent.js | 172 +++++++++++++++++- .../plugin/src/ui-components/pages/Slur.jsx | 6 +- 2 files changed, 168 insertions(+), 10 deletions(-) diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js index f5ee618a..7545a4f4 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js @@ -1,21 +1,179 @@ import React from 'react' import SlurCardBubble from './SlurCardBubble'; import { - Card, CardBody, CardFooter, CardHeader, List, - Text, + Card, CardBody, CardFooter, Box, - Button, Anchor, + Table, + TableRow, + TableCell, + Text, } from 'grommet'; - +import { Alert, FormUp, FormDown } from 'grommet-icons'; const SlurCardComponent = ({ data }) => { + const isDataEmpty = + !data.levelOfSeverity || + data.casual === undefined || + data.appropriated === undefined || + data.categories.length === 0; + + const [showMore, setShowMore] = React.useState(false); + const toggleShowMore = () => { + setShowMore(!showMore); + }; + const buttonLabel = showMore ? 'See Less' : 'See More'; + const buttonIcon = showMore ? : ; + return ( - Header - Body + + {isDataEmpty ? ( + + + + + Add metadata for the slur + + ) : ( + + + + + + 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 + ) => ( + + + + ) + )} + + } + + + + )} + +
+ )} + + + + - ) + ); } export default SlurCardComponent \ No newline at end of file diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx index 5ee2ddff..b661c680 100644 --- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx +++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx @@ -4,8 +4,8 @@ import { Add, Edit, Trash } from 'grommet-icons'; 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'; +// import SlurCard from '../atoms/SlurCard'; +import SlurCard from '../atoms/SlurCardComponent'; const { getSlurAndCategory, deleteSlurAndCategory } = Api; @@ -56,7 +56,7 @@ export function Slur() { }, []); return ( - + {isLoading ? ( From 7d142c68642c966f6246c68123d7954caad148d4 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Tue, 23 Apr 2024 18:01:34 +0530 Subject: [PATCH 2/6] refactor: use abstracted `DataTable` instead of `Table` Signed-off-by: Snehil Shah --- .../ui-components/atoms/SlurCardComponent.js | 170 +++++------------- .../plugin/src/ui-components/atoms/Theme.jsx | 9 +- 2 files changed, 54 insertions(+), 125 deletions(-) diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js index 7545a4f4..11293758 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js @@ -4,9 +4,7 @@ import { Card, CardBody, CardFooter, Box, Anchor, - Table, - TableRow, - TableCell, + DataTable, Text, } from 'grommet'; import { Alert, FormUp, FormDown } from 'grommet-icons'; @@ -25,6 +23,46 @@ const SlurCardComponent = ({ data }) => { const buttonLabel = showMore ? 'See Less' : 'See More'; const buttonIcon = showMore ? : ; + const columns = [ + { + property: 'name', + header: false, + }, + { + property: 'value', + header: false, + render: data => { + if (data.name === 'Categories') { + return ( + + {data.value.map((category, categoryIndex) => ( + + + + ))} + + ); + } else { + return 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 ( @@ -42,127 +80,11 @@ const SlurCardComponent = ({ data }) => { Add metadata for the slur ) : ( - - - - - - 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 - ) => ( - - - - ) - )} - - } - - - - )} - -
+ )} 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; From d071a17faac008146b2a1e21f47b88fd610b5558 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Tue, 23 Apr 2024 18:10:22 +0530 Subject: [PATCH 3/6] refactor: use ternary operator for conditional Signed-off-by: Snehil Shah --- .../ui-components/atoms/SlurCardComponent.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js index 11293758..037a4266 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js @@ -32,19 +32,15 @@ const SlurCardComponent = ({ data }) => { property: 'value', header: false, render: data => { - if (data.name === 'Categories') { - return ( - - {data.value.map((category, categoryIndex) => ( - - - - ))} - - ); - } else { - return data.value; - } + return data.name === 'Categories' ? ( + + {data.value.map((category, categoryIndex) => ( + + + + ))} + + ) : data.value; }, }, ]; From 2f057613028f3d87fcb6c6b633f6ea211cbdd0d8 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Wed, 24 Apr 2024 16:55:31 +0530 Subject: [PATCH 4/6] style: revert to original text format Signed-off-by: Snehil Shah --- .../plugin/src/ui-components/atoms/SlurCardComponent.js | 1 + 1 file changed, 1 insertion(+) diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js index 037a4266..4a019d5c 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js @@ -27,6 +27,7 @@ const SlurCardComponent = ({ data }) => { { property: 'name', header: false, + render: data => {data.name}, }, { property: 'value', From 968a47e7aebd16d014c99202411ba740410909c9 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Wed, 24 Apr 2024 21:16:16 +0530 Subject: [PATCH 5/6] fix: align & conditionally render footer tag Signed-off-by: Snehil Shah --- .../plugin/src/ui-components/atoms/SlurCardComponent.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js index 4a019d5c..8313d0da 100644 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js @@ -84,13 +84,15 @@ const SlurCardComponent = ({ data }) => { /> )} - + {!isDataEmpty && ( + + )} ); } From 8098a7495b70a16ccaec93ddabbdfde9b8fac408 Mon Sep 17 00:00:00 2001 From: Snehil Shah Date: Wed, 24 Apr 2024 21:18:56 +0530 Subject: [PATCH 6/6] chore: remove original `SlurCard` Signed-off-by: Snehil Shah --- .../src/ui-components/atoms/SlurCard.js | 311 +++++------------- .../ui-components/atoms/SlurCardComponent.js | 100 ------ .../plugin/src/ui-components/pages/Slur.jsx | 3 +- 3 files changed, 77 insertions(+), 337 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 8313d0da..00000000 --- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react' -import SlurCardBubble from './SlurCardBubble'; -import { - Card, CardBody, CardFooter, - Box, - Anchor, - DataTable, - Text, -} from 'grommet'; -import { Alert, FormUp, FormDown } from 'grommet-icons'; - -const SlurCardComponent = ({ data }) => { - const isDataEmpty = - !data.levelOfSeverity || - data.casual === undefined || - data.appropriated === undefined || - data.categories.length === 0; - - const [showMore, setShowMore] = React.useState(false); - const toggleShowMore = () => { - setShowMore(!showMore); - }; - const buttonLabel = showMore ? 'See Less' : 'See More'; - const buttonIcon = showMore ? : ; - - 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) => ( - - - - ))} - - ) : 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 SlurCardComponent \ No newline at end of file diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx index b661c680..6e1889a4 100644 --- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx +++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx @@ -4,8 +4,7 @@ import { Add, Edit, Trash } from 'grommet-icons'; import { useNavigate } from 'react-router-dom'; import Api from './Api'; import { UserContext, NotificationContext } from '../atoms/AppContext'; -// import SlurCard from '../atoms/SlurCard'; -import SlurCard from '../atoms/SlurCardComponent'; +import SlurCard from '../atoms/SlurCard'; const { getSlurAndCategory, deleteSlurAndCategory } = Api;