From b5435b58cc0c0a45f5eb6187dc587556c38c5049 Mon Sep 17 00:00:00 2001
From: Snehil Shah <snehilshah.989@gmail.com>
Date: Tue, 23 Apr 2024 02:58:51 +0530
Subject: [PATCH] feat: make the slur card use the card component

Signed-off-by: Snehil Shah <snehilshah.989@gmail.com>
---
 .../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 ? <FormUp /> : <FormDown />;
+
     return (
         <Card flex={true} background="#FFE5B4">
-            <CardHeader pad="medium">Header</CardHeader>
-            <CardBody pad="medium">Body</CardBody>
+            <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>
+                ) : (
+                    <Table>
+                        <tbody>
+                            <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>
+                                </>
+                            )}
+                        </tbody>
+                    </Table>
+                )}
+            </CardBody>
+            <CardFooter pad={{horizontal: "medium"}}>
+                <Anchor
+                    label={buttonLabel}
+                    icon={buttonIcon}
+                    onClick={toggleShowMore}
+                />
+            </CardFooter>
         </Card>
-    )
+    );
 }
 
 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 (
-        <Box fill gap={'medium'}>
+        <Box fill gap={'medium'} pad={{bottom: 'medium'}}>
             <Box gap="medium" alignContent="center" wrap>
                 {isLoading ? (
                     <Box alignContent="center">