From 4f91a25fb99bf582f1086a01d359e18d8a0b38f5 Mon Sep 17 00:00:00 2001
From: Marlon Johnson <johnsonmarlon18@gmail.com>
Date: Sat, 19 Jun 2021 22:28:33 -0700
Subject: [PATCH] refactor(client): convert toggle-button to TypeScript

---
 .../{ToggleButton.js => toggle-button.tsx}    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)
 rename client/src/components/helpers/{ToggleButton.js => toggle-button.tsx} (82%)

diff --git a/client/src/components/helpers/ToggleButton.js b/client/src/components/helpers/toggle-button.tsx
similarity index 82%
rename from client/src/components/helpers/ToggleButton.js
rename to client/src/components/helpers/toggle-button.tsx
index bb6b1fdd64..38a371832a 100644
--- a/client/src/components/helpers/ToggleButton.js
+++ b/client/src/components/helpers/toggle-button.tsx
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import {
   ToggleButtonGroup as BSBG,
   ToggleButton as TB
@@ -9,15 +8,18 @@ import './toggle-button.css';
 import ToggleCheck from '../../assets/icons/ToggleCheck';
 import Spacer from '../../assets/icons/Spacer';
 
-const propTypes = {
-  name: PropTypes.string.isRequired,
-  offLabel: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onLabel: PropTypes.string,
-  value: PropTypes.bool.isRequired
-};
+interface ButtonProps {
+  name: string;
+  offLabel: string;
+  onChange: (value: string) => void;
+  onLabel: string;
+  value: boolean;
+  condition: boolean;
+}
 
-function getActiveClass(condition) {
+type ActiveClass = Pick<ButtonProps, 'condition'>;
+
+function getActiveClass(condition: ActiveClass | unknown) {
   return condition ? 'active' : 'not-active';
 }
 
@@ -27,7 +29,7 @@ export default function ToggleButton({
   value,
   onLabel = 'On',
   offLabel = 'Off'
-}) {
+}: ButtonProps): React.ReactNode {
   const checkIconStyle = {
     height: '15px',
     width: '20px'
@@ -71,4 +73,3 @@ export default function ToggleButton({
 }
 
 ToggleButton.displayName = 'ToggleButton';
-ToggleButton.propTypes = propTypes;