From 8df08e6e2c30c9e303e49843d19b02de8f9f05e5 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Fri, 30 Apr 2021 13:05:11 -0400
Subject: [PATCH] refactor: use Decorator component in SelectedAnvil

---
 .../components/Anvils/SelectedAnvil.tsx       | 41 ++++---------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/striker-ui/components/Anvils/SelectedAnvil.tsx b/striker-ui/components/Anvils/SelectedAnvil.tsx
index bdf21baf..983d401a 100644
--- a/striker-ui/components/Anvils/SelectedAnvil.tsx
+++ b/striker-ui/components/Anvils/SelectedAnvil.tsx
@@ -1,16 +1,11 @@
 import { useState, useContext } from 'react';
 import { Switch, Box } from '@material-ui/core';
-import { ClassNameMap } from '@material-ui/styles';
 import { makeStyles } from '@material-ui/core/styles';
 import { HeaderText } from '../Text';
-import {
-  BLUE,
-  PURPLE_OFF,
-  RED_ON,
-  SELECTED_ANVIL,
-} from '../../lib/consts/DEFAULT_THEME';
+import { SELECTED_ANVIL } from '../../lib/consts/DEFAULT_THEME';
 import anvilState from '../../lib/consts/ANVILS';
 import { AnvilContext } from '../AnvilContext';
+import Decorator, { Colours } from '../Decorator';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -22,34 +17,18 @@ const useStyles = makeStyles(() => ({
   anvilName: {
     paddingLeft: 0,
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  optimal: {
-    backgroundColor: BLUE,
-  },
-  notReady: {
-    backgroundColor: PURPLE_OFF,
-  },
-  degraded: {
-    backgroundColor: RED_ON,
-  },
 }));
 
-const selectDecorator = (
-  state: string,
-): keyof ClassNameMap<'optimal' | 'notReady' | 'degraded'> => {
+const selectDecorator = (state: string): Colours => {
   switch (state) {
     case 'optimal':
-      return 'optimal';
+      return 'ok';
     case 'not_ready':
-      return 'notReady';
+      return 'warning';
     case 'degraded':
-      return 'degraded';
+      return 'error';
     default:
-      return 'optimal';
+      return 'error';
   }
 };
 
@@ -67,11 +46,7 @@ const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
       {uuid !== '' && (
         <>
           <Box p={1}>
-            <div
-              className={`${classes.decorator} ${
-                classes[selectDecorator(list[index].anvil_state)]
-              }`}
-            />
+            <Decorator colour={selectDecorator(list[index].anvil_state)} />
           </Box>
           <Box p={1} flexGrow={1} className={classes.anvilName}>
             <HeaderText text={list[index].anvil_name} />