[UI] updated TicketCard to display ticket Info

client/src/components/Cards/TicketCard.tsx

@@ -1,36 +1,103 @@
 import React, { FC, MouseEvent } from "react";
+import { Button, Typography, Grid } from "@material-ui/core";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import Chip from "@material-ui/core/Chip";
+import Paper from "@material-ui/core/Paper";
+import CategoryIcon from "@material-ui/icons/Category";
+import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
+import SpeedIcon from "@material-ui/icons/Speed";
 import { HorizontalCard } from "./HorizontalCard";
-import { Button, Typography } from "@material-ui/core";
+import { Ticket } from "../../types/Ticket";
 import { getRemainingdays } from "../../utils/methods";
 
 interface IProps {
-  title?: string;
-  remainingDays?: string;
+  ticket?: Ticket;
   validateTicket?: (event: MouseEvent) => void;
   link?: string;
 }
 
-const TicketCard: FC<IProps> = ({
-  title,
-  remainingDays,
-  link = "#",
-  validateTicket,
-}) => {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      justifyContent: "center",
+      flexWrap: "wrap",
+      listStyle: "none",
+      padding: theme.spacing(0.5),
+      margin: 0,
+      marginTop: 20,
+      marginBottom: 20,
+    },
+    chip: {
+      margin: theme.spacing(0.5),
+    },
+  })
+);
+
+const TicketCard: FC<IProps> = ({ link = "#", validateTicket, ticket }) => {
+  const ChipsArray: FC = () => {
+    const classes = useStyles();
+    const chipData = [
+      // { label: "status", value: ticket?.status },
+      { label: "category", value: ticket?.category },
+      { label: "impact", value: ticket?.impact },
+      { label: "difficulty", value: ticket?.difficulty },
+    ];
+
+    return (
+      // <Paper component="ul" className={classes.root}>
+      <Grid component="ul" className={classes.root}>
+        {chipData.map((data, i: number) => {
+          let icon = <CategoryIcon />;
+          let color:
+            | "inherit"
+            | "default"
+            | "primary"
+            | "secondary"
+            | undefined;
+
+          if (data.label === "impact") {
+            color = "primary";
+            icon = <PriorityHighIcon />;
+          }
+          if (data.label === "difficulty") {
+            color = "secondary";
+            icon = <SpeedIcon />;
+          }
+
+          return (
+            <li key={i}>
+              <Chip
+                icon={icon}
+                color={color}
+                label={data.value}
+                className={classes.chip}
+              />
+            </li>
+          );
+        })}
+      </Grid>
+    );
+  };
+
   const Content: FC = () => {
     return (
-      <Typography variant="body2" component="p">
-        <span>
-          Due in{" "}
-          {remainingDays ? (
-            getRemainingdays(remainingDays)
-          ) : (
-            <span>
-              <del>Too much</del> 0
-            </span>
-          )}{" "}
-          days
-        </span>
-      </Typography>
+      <Grid container justify="space-between" alignItems="center">
+        <ChipsArray />
+        <Typography variant="body2" component="p">
+          <span>
+            Due in{" "}
+            {ticket?.endingDate ? (
+              getRemainingdays(ticket?.endingDate)
+            ) : (
+              <span>
+                <del>Too much</del> 0
+              </span>
+            )}{" "}
+            days
+          </span>
+        </Typography>
+      </Grid>
     );
   };
 
@@ -46,7 +113,7 @@ const TicketCard: FC<IProps> = ({
 
   return (
     <HorizontalCard
-      title={title}
+      title={ticket?.title}
       link={link}
       content={<Content />}
       actions={<Action />}

client/src/components/Lists/TicketList.tsx

@@ -106,8 +106,7 @@ export const TicketList: FC<TicketListProps> = ({
               filteredTickets.map((t: Ticket) => (
                 <TicketCard
                   key={t.id}
-                  title={t.title}
-                  remainingDays={t.endingDate}
+                  ticket={t}
                   link={`/tickets/${t.id}`}
                   validateTicket={async (e: MouseEvent) => {
                     e.preventDefault();