Extracted TicketChipsArray in own component. Used on ticketPage

client/src/components/Cards/TicketCard.tsx

@@ -3,12 +3,11 @@ 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 { Ticket } from "../../types/Ticket";
 import { getRemainingdays } from "../../utils/methods";
+import TicketChipsArray from "./TicketChipsArray";
 
 interface IProps {
   ticket?: Ticket;
@@ -16,74 +15,20 @@ interface IProps {
   link?: string;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const TicketCard: FC<IProps> = ({
-  createStyles({
+  link = "#",
-    root: {
+  validateTicket,
-      display: "flex",
+  ticket = {} as Ticket,
-      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 (
       <Grid container justify="space-between" alignItems="center">
-        <ChipsArray />
+        <TicketChipsArray
+          status={ticket.status}
+          category={ticket.category}
+          impact={ticket.impact}
+          difficulty={ticket.difficulty}
+        />
         <Typography variant="body2" component="p">
           <span>
             Due in{" "}

client/src/components/Cards/TicketChipsArray.tsx

@@ -0,0 +1,77 @@
+import React, { FC } from "react";
+import { Grid, Chip, makeStyles, Theme, createStyles } from "@material-ui/core";
+import CategoryIcon from "@material-ui/icons/Category";
+import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
+import SpeedIcon from "@material-ui/icons/Speed";
+import { Ticket } from "../../types/Ticket";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      listStyle: "none",
+      padding: theme.spacing(0.5),
+      margin: 0,
+      marginTop: 20,
+      marginBottom: 20,
+    },
+    chip: {
+      margin: theme.spacing(0.5),
+    },
+  })
+);
+
+interface IProps {
+  status: string;
+  category: string;
+  impact: string;
+  difficulty: string;
+}
+const TicketChipsArray: FC<IProps> = ({
+  status,
+  category,
+  impact,
+  difficulty,
+}) => {
+  const classes = useStyles();
+  const chipData = [
+    // { label: "status", value: status },
+    { label: "category", value: category },
+    { label: "impact", value: impact },
+    { label: "difficulty", value: 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>
+  );
+};
+
+export default TicketChipsArray;

client/src/pages/TicketPage.tsx

@@ -7,14 +7,14 @@ import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
-import { Header } from "../components/Header";
-import { AvatarList } from "../components/Avatars/AvatarList";
-import { TicketVM } from "../VM/TicketVM";
-import { getRemainingdays } from "../utils/methods";
-
 import { makeStyles, Theme, Grid, Typography } from "@material-ui/core";
 import { Timer } from "@material-ui/icons";
 import PageLayout from "../layouts/PageLayout";
+import { TicketVM } from "../VM/TicketVM";
+import { Header } from "../components/Header";
+import { AvatarList } from "../components/Avatars/AvatarList";
+import TicketChipsArray from "../components/Cards/TicketChipsArray";
+import { getRemainingdays } from "../utils/methods";
 
 interface IProps {
   viewModel: TicketVM;
@@ -23,10 +23,15 @@ interface IProps {
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     margin: theme.spacing(1),
-    flexGrow: 1,
+    // flexGrow: 1,
   },
   table: {
-    minWidth: 650,
+    margin: "auto",
+    maxWidth: 650,
+    alignItems: "center",
+  },
+  subtitle: {
+    marginTop: 20,
   },
 }));
 
@@ -54,8 +59,12 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
         <div className={classes.root}>
           <Grid container>
             <Grid item xs={9}>
-              <Typography variant="h5" component="h5">
+              <Typography
-                <b>In project: </b>{" "}
+                variant="h5"
+                component="h5"
+                className={classes.subtitle}
+              >
+                <b>Project: </b>
                 <Link to={`/projects/${project.id}`}>{project.title}</Link>
               </Typography>
             </Grid>
@@ -65,8 +74,14 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
           </Grid>
         </div>
 
-        <div className={classes.root}>
+        <div className={classes.table}>
-          <InfoTable
+          {/* <InfoTable
+            status={status}
+            category={category}
+            impact={impact}
+            difficulty={difficulty}
+          /> */}
+          <TicketChipsArray
             status={status}
             category={category}
             impact={impact}
@@ -92,36 +107,36 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
   );
 };
 
-interface InfoProps {
+// interface InfoProps {
-  status: string;
+//   status: string;
-  category: string;
+//   category: string;
-  impact: string;
+//   impact: string;
-  difficulty: string;
+//   difficulty: string;
-}
+// }
 
-const InfoTable: FC<InfoProps> = (info: InfoProps) => {
+// const InfoTable: FC<InfoProps> = (info: InfoProps) => {
-  const classes = useStyles();
+//   const classes = useStyles();
 
-  return (
+//   return (
-    <TableContainer component={Paper}>
+//     <TableContainer component={Paper}>
-      <Table className={classes.table} aria-label="simple table">
+//       <Table className={classes.table} aria-label="simple table">
-        <TableHead>
+//         <TableHead>
-          <TableRow>
+//           <TableRow>
-            <TableCell>Status</TableCell>
+//             <TableCell>Status</TableCell>
-            <TableCell>Category</TableCell>
+//             <TableCell>Category</TableCell>
-            <TableCell>Impact</TableCell>
+//             <TableCell>Impact</TableCell>
-            <TableCell>Difficulty</TableCell>
+//             <TableCell>Difficulty</TableCell>
-          </TableRow>
+//           </TableRow>
-        </TableHead>
+//         </TableHead>
-        <TableBody>
+//         <TableBody>
-          <TableRow>
+//           <TableRow>
-            <TableCell>{info.status}</TableCell>
+//             <TableCell>{info.status}</TableCell>
-            <TableCell>{info.category}</TableCell>
+//             <TableCell>{info.category}</TableCell>
-            <TableCell>{info.impact}</TableCell>
+//             <TableCell>{info.impact}</TableCell>
-            <TableCell>{info.difficulty}</TableCell>
+//             <TableCell>{info.difficulty}</TableCell>
-          </TableRow>
+//           </TableRow>
-        </TableBody>
+//         </TableBody>
-      </Table>
+//       </Table>
-    </TableContainer>
+//     </TableContainer>
-  );
+//   );
-};
+// };