HorizontalCard is a Layout; Created ProjectCard and TicketCard

client/src/components/HorizontalCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from "react";
+import React, { FC, MouseEvent, ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
@@ -10,33 +10,22 @@ import { getRemainingdays } from "../utils/methods";
 
 interface IProps {
   title?: string;
-  remainingDays?: string;
-  validateTicket?: (event: MouseEvent) => void;
   link?: string;
+  content: ReactNode;
+  actions?: ReactNode;
 }
 
 const useStyles = makeStyles({
   root: {
-    minWidth: 275
+    minWidth: 275,
   },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)"
-  },
-  title: {
-    fontSize: 14
-  },
-  pos: {
-    marginBottom: 12
-  }
 });
 
 export const HorizontalCard: FC<IProps> = ({
   title,
-  remainingDays,
   link = "#",
-  validateTicket
+  content,
+  actions,
 }) => {
   const classes = useStyles();
 
@@ -48,26 +37,9 @@ export const HorizontalCard: FC<IProps> = ({
             <b>{title ?? "Nothing to do"}</b>
           </Link>
         </Typography>
-
-        <Typography variant="body2" component="p">
-          <span>
-            Due{" "}
-            {remainingDays ? (
-              getRemainingdays(remainingDays)
-            ) : (
-              <span>
-                <del>Too much</del> 0
-              </span>
-            )}{" "}
-            days
-          </span>
-        </Typography>
+        {content}
       </CardContent>
-      <CardActions>
-        <Button size="small" onClick={validateTicket}>
-          Mark as done
-        </Button>
-      </CardActions>
+      <CardActions>{actions}</CardActions>
     </Card>
   );
 };

client/src/components/ProjectCard.tsx

@@ -0,0 +1,34 @@
+import React, { FC, MouseEvent } from "react";
+import { HorizontalCard } from "./HorizontalCard";
+import { Typography } from "@material-ui/core";
+import { getRemainingdays } from "../utils/methods";
+
+interface IProps {
+  title?: string;
+  remainingDays?: string;
+  link?: string;
+}
+
+const ProjectCard: FC<IProps> = ({ title, remainingDays, link = "#" }) => {
+  const Content: FC = () => {
+    return (
+      <Typography variant="body2" component="p">
+        <span>
+          Due{" "}
+          {remainingDays ? (
+            getRemainingdays(remainingDays)
+          ) : (
+            <span>
+              <del>Too much</del> 0
+            </span>
+          )}{" "}
+          days
+        </span>
+      </Typography>
+    );
+  };
+
+  return <HorizontalCard title={title} link={link} content={<Content />} />;
+};
+
+export default ProjectCard;

client/src/components/ProjectList.tsx

@@ -13,6 +13,7 @@ import { HttpResponse } from "../types/HttpResponse";
 import { Project } from "../types/Project";
 import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
+import ProjectCard from "./ProjectCard";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -65,21 +66,21 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
       <Grid item xs={12}>
         <div className="col s12 grey lighten-1">
           {filteredTickets.length === 0 ? (
-            <HorizontalCard />
+            <ProjectCard />
           ) : (
             filteredTickets.map((t: Project) => (
-              <HorizontalCard
+              <ProjectCard
                 key={t.id}
                 title={t.title}
                 remainingDays={t.endingDate}
                 link={`/projects/${t.id}`}
-                validateTicket={async (e: MouseEvent) => {
-                  e.preventDefault();
-                  await put<HttpResponse<Ticket>>(
-                    `${Constants.ticketsURI}/${t.id}/closed`,
-                    {}
-                  );
-                }}
+                // validateTicket={async (e: MouseEvent) => {
+                //   e.preventDefault();
+                //   await put<HttpResponse<Ticket>>(
+                //     `${Constants.ticketsURI}/${t.id}/closed`,
+                //     {}
+                //   );
+                // }}
               />
             ))
           )}

client/src/components/TicketCard.tsx

@@ -0,0 +1,57 @@
+import React, { FC, MouseEvent } from "react";
+import { HorizontalCard } from "./HorizontalCard";
+import { Button, Typography } from "@material-ui/core";
+import { getRemainingdays } from "../utils/methods";
+
+interface IProps {
+  title?: string;
+  remainingDays?: string;
+  validateTicket?: (event: MouseEvent) => void;
+  link?: string;
+}
+
+const TicketCard: FC<IProps> = ({
+  title,
+  remainingDays,
+  link = "#",
+  validateTicket,
+}) => {
+  const Content: FC = () => {
+    return (
+      <Typography variant="body2" component="p">
+        <span>
+          Due{" "}
+          {remainingDays ? (
+            getRemainingdays(remainingDays)
+          ) : (
+            <span>
+              <del>Too much</del> 0
+            </span>
+          )}{" "}
+          days
+        </span>
+      </Typography>
+    );
+  };
+
+  const Action = () => {
+    return (
+      <>
+        <Button size="small" onClick={validateTicket}>
+          Mark as done
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <HorizontalCard
+      title={title}
+      link={link}
+      content={<Content />}
+      actions={<Action />}
+    />
+  );
+};
+
+export default TicketCard;

client/src/components/TicketList.tsx

@@ -15,6 +15,7 @@ import { NewTicketModal } from "./NewTicketModal";
 import { Project } from "../types/Project";
 import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
+import TicketCard from "./TicketCard";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -101,10 +102,10 @@ export const TicketList: FC<TicketListProps> = ({
         <Grid item xs={12}>
           <div className="col s12 grey lighten-1">
             {filteredTickets.length === 0 ? (
-              <HorizontalCard />
+              <TicketCard />
             ) : (
               filteredTickets.map((t: Ticket) => (
-                <HorizontalCard
+                <TicketCard
                   key={t.id}
                   title={t.title}
                   remainingDays={t.endingDate}