From e13d5510d0adedc05f7b631ea82b23f88cb0cb3b Mon Sep 17 00:00:00 2001
From: Bruno Juca <brunoolijuca@gmail.com>
Date: Sat, 14 Aug 2021 17:54:06 -0300
Subject: [PATCH] Add Status component

---
 src/components/Status.js | 33 +++++++++++++++++++++++++++++++++
 src/pages/Jobs.js        | 22 +++++-----------------
 2 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Status.js

diff --git a/src/components/Status.js b/src/components/Status.js
new file mode 100644
index 0000000..d80ac37
--- /dev/null
+++ b/src/components/Status.js
@@ -0,0 +1,33 @@
+import { makeStyles } from "@material-ui/core";
+import React from "react";
+
+const useStyle = makeStyles((theme) => ({
+  status: {
+    width: "max-content",
+    padding: "3px 10px 0px 10px",
+    borderRadius: "20px",
+  },
+  done: {
+    backgroundColor: "green",
+  },
+  waiting: {
+    backgroundColor: "yellow",
+    color: "black",
+  },
+  failed: {
+    backgroundColor: "red",
+  },
+  center: {
+    margin: "auto",
+  }
+}));
+
+function Status({ children, color, center }) {
+  const classes = useStyle();
+
+  return (
+    <div className={`${classes.status} ${classes[color]} ${center ? classes.center : null}`}>{children}</div>
+  );
+}
+
+export default Status;
diff --git a/src/pages/Jobs.js b/src/pages/Jobs.js
index a8cbe81..e27133e 100644
--- a/src/pages/Jobs.js
+++ b/src/pages/Jobs.js
@@ -14,6 +14,7 @@ import {
 import React, { useState, useEffect } from "react";
 import { Link, useHistory } from "react-router-dom";
 import API from "../api/API";
+import Status from "../components/Status";
 import { useJobsContext } from "../contexts/JobsContext";
 
 const useStyle = makeStyles((theme) => ({
@@ -44,21 +45,8 @@ const useStyle = makeStyles((theme) => ({
     color: "white",
   },
   status: {
-    width: "max-content",
-    padding: "3px 10px 0px 10px",
-    margin: "auto",
-    borderRadius: "20px",
-  },
-  done: {
-    backgroundColor: "green",
-  },
-  waiting: {
-    backgroundColor: "yellow",
-    color: "black",
-  },
-  failed: {
-    backgroundColor: "red",
-  },
+    margin: "auto"
+  }
 }));
 
 function descendingComparator(a, b, orderBy) {
@@ -158,9 +146,9 @@ function Jobs() {
                     {job.version}
                   </TableCell>
                   <TableCell className={classes.cell} align="center">
-                    <div className={`${classes.status} ${classes[job.status]}`}>
+                    <Status color={job.status} center>
                       {job.status.toUpperCase()}
-                    </div>
+                    </Status>
                   </TableCell>
                 </TableRow>
               ))}