From 8c25a496fee039199c75c6d96e7a16540e67394e Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Thu, 9 Feb 2023 17:24:08 -0800
Subject: [PATCH 1/9] add type string to switch case

---
 client/src/Models/Ringdown.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/Models/Ringdown.js b/client/src/Models/Ringdown.js
index 434b17d7..07bdc5fc 100644
--- a/client/src/Models/Ringdown.js
+++ b/client/src/Models/Ringdown.js
@@ -30,6 +30,7 @@ const handleInputValidation = (name, value) => {
       break;
     case 'enum':
     case 'text':
+    case 'string':
       isValidType = typeof value === 'string';
       break;
     case 'decimal':

From d171bfad57f867db136b7a220cd65373c3c532d9 Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Sun, 26 Feb 2023 17:44:12 -0800
Subject: [PATCH 2/9] add celsius/fahrenheit inputs, metadata, conversion
 method in RingdownForm class

---
 client/src/EMS/PatientFields.js | 11 +++++++++++
 client/src/Models/Ringdown.js   | 25 +++++++++++++++++++++++--
 shared/metadata/patient.js      | 16 ++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/client/src/EMS/PatientFields.js b/client/src/EMS/PatientFields.js
index 86efbff3..562d8fc5 100644
--- a/client/src/EMS/PatientFields.js
+++ b/client/src/EMS/PatientFields.js
@@ -165,6 +165,17 @@ function PatientFields({ ringdown, onChange }) {
             </FormRadioFieldSet>
           </div>
           <FormField metadata={Patient.temperature} />
+          <FormField
+            metadata={Patient.fahrenheit}
+            label="Temperature"
+          >
+            <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
+            <FormField
+              metadata={Patient.celsius}
+              isWrapped={false}
+              label={false}
+            />
+          </FormField>
         </fieldset>
       </div>
       <Heading title="Additional notes" subtitle="optional" />
diff --git a/client/src/Models/Ringdown.js b/client/src/Models/Ringdown.js
index 07bdc5fc..34a99373 100644
--- a/client/src/Models/Ringdown.js
+++ b/client/src/Models/Ringdown.js
@@ -19,7 +19,6 @@ const fieldHashes = {
 
 const handleInputValidation = (name, value) => {
   const { type = null, required = false } = fieldHashes[name];
-
   let isValidType = false;
   switch (type) {
     case 'integer':
@@ -57,6 +56,8 @@ const validatedFields = [
   'oxygenSaturation',
   'supplementalOxygenAmount',
   'temperature',
+  'fahrenheit',
+  'celsius',
   'glasgowComaScale',
 ];
 
@@ -262,6 +263,7 @@ class Ringdown {
       this.setValidationStateForInput(updatedField, currentState, inputValue);
     }
 
+
     const partition = updatedFieldHasValidations ? this.validationData[updatedField].order : null;
     const sorted = Object.values(this.validationData).sort(this.ascendingByOrder);
     const previousFields = sorted.slice(0, partition);
@@ -272,11 +274,30 @@ class Ringdown {
       });
   }
 
+  setConvertedField(conversionType, valueToConvert) {
+    console.log('valueToConvert', valueToConvert)
+    switch(conversionType) {
+      case 'celsius':
+        console.log('converting to celsius')
+        this[conversionType] = ((parseFloat(valueToConvert) - 32) / 1.8).toFixed(2);
+        break;
+      case 'fahrenheit':
+
+      console.log('converting to fahrenheit')
+        this[conversionType] = ((parseFloat(valueToConvert) * 1.8) + 32).toFixed(2);
+        break;
+    }
+  }
+
   setValidationStateForInput(fieldName, currentState, inputValue) {
     const isInputValueEmpty = isValueEmpty(inputValue);
-    const { range, required = false } = fieldHashes[fieldName];
+    const { range, required = false, conversion } = fieldHashes[fieldName];
     const isInRange = range && handleRange(inputValue, range.max, range.min);
 
+    if(conversion) {
+      this.setConvertedField(conversion, inputValue)
+    }
+
     switch (currentState) {
       case ValidationState.REQUIRED_ERROR:
       case ValidationState.EMPTY_REQUIRED_INPUT:
diff --git a/shared/metadata/patient.js b/shared/metadata/patient.js
index f364ffc3..6f02f8a6 100644
--- a/shared/metadata/patient.js
+++ b/shared/metadata/patient.js
@@ -107,6 +107,22 @@ const fields = [
     unit: '°F',
     range: { min: 80, max: 150 },
   },
+  {
+    name: 'fahrenheit',
+    type: 'decimal',
+    label: 'Fahrenheit',
+    conversion: 'celsius',
+    unit: '°F',
+    range: { min: 80, max: 150 },
+  },
+  {
+    name: 'celsius', 
+    type: 'decimal',
+    label: 'Celsius',
+    conversion: 'fahrenheit',
+    unit: '°C',
+    range: { min: 26.5, max: 65.5 },
+  },
   {
     name: 'treatmentNotes',
     type: 'text',

From fe28b527708453c8aa5d44d336dec687e3237cb3 Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Tue, 28 Feb 2023 11:41:04 -0800
Subject: [PATCH 3/9] Brute force approach handling temperature conversion in
 Ringdown. Alternate approaches in comment.

---
 client/src/EMS/PatientFields.js |  6 +++---
 client/src/Models/Ringdown.js   | 33 +++++++++++++++++++--------------
 shared/metadata/patient.js      | 24 ++++++++----------------
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/client/src/EMS/PatientFields.js b/client/src/EMS/PatientFields.js
index 562d8fc5..ddd4313e 100644
--- a/client/src/EMS/PatientFields.js
+++ b/client/src/EMS/PatientFields.js
@@ -164,14 +164,14 @@ function PatientFields({ ringdown, onChange }) {
               />
             </FormRadioFieldSet>
           </div>
-          <FormField metadata={Patient.temperature} />
+          {/* <FormField metadata={Patient.temperature} /> */}
           <FormField
-            metadata={Patient.fahrenheit}
+            metadata={Patient.temperature}
             label="Temperature"
           >
             <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
             <FormField
-              metadata={Patient.celsius}
+              metadata={Patient.temperature.conversion}
               isWrapped={false}
               label={false}
             />
diff --git a/client/src/Models/Ringdown.js b/client/src/Models/Ringdown.js
index 34a99373..bc71ce7b 100644
--- a/client/src/Models/Ringdown.js
+++ b/client/src/Models/Ringdown.js
@@ -11,6 +11,7 @@ const fieldHashes = {
   ...metadata.patient.getFieldHash(),
   ...metadata.ambulance.getFieldHash(),
   ...metadata.emergencyMedicalServiceCall.getFieldHash(),
+  celsius: { name: 'celsius', type: 'decimal', unit: '°C', range: { min: 26.5, max: 65.5 }, originColumn: 'temperature' },
 };
 
 // define the fields that must all have valid input to make the ringdown valid.  the second array item is an optional function to determine
@@ -18,7 +19,8 @@ const fieldHashes = {
 // array order should be the same as the field order in PatientFields.
 
 const handleInputValidation = (name, value) => {
-  const { type = null, required = false } = fieldHashes[name];
+  const { type = null, required = false } = fieldHashes[name] || {};
+
   let isValidType = false;
   switch (type) {
     case 'integer':
@@ -56,7 +58,7 @@ const validatedFields = [
   'oxygenSaturation',
   'supplementalOxygenAmount',
   'temperature',
-  'fahrenheit',
+  // 'fahrenheit',
   'celsius',
   'glasgowComaScale',
 ];
@@ -81,7 +83,13 @@ const payloadModels = [
   [['emergencyMedicalServiceCall', 'emsCall'], ['dispatchCallNumber']],
   // we want to expose the hospital id field under a different name, so we'll define it in the class below instead of here
   ['hospital', []],
-  ['patient', metadata.patient.getObjectFields()],
+  [
+    'patient',
+    [
+      ...metadata.patient.getObjectFields(),
+      { name: 'celsius', type: 'decimal', unit: '°C', range: { min: 26.5, max: 65.5 }, originColumn: 'temperature', defaultValue: null },
+    ],
+  ],
   ['patientDelivery', ['etaMinutes', 'currentDeliveryStatus']],
 ];
 
@@ -263,7 +271,6 @@ class Ringdown {
       this.setValidationStateForInput(updatedField, currentState, inputValue);
     }
 
-
     const partition = updatedFieldHasValidations ? this.validationData[updatedField].order : null;
     const sorted = Object.values(this.validationData).sort(this.ascendingByOrder);
     const previousFields = sorted.slice(0, partition);
@@ -275,27 +282,25 @@ class Ringdown {
   }
 
   setConvertedField(conversionType, valueToConvert) {
-    console.log('valueToConvert', valueToConvert)
-    switch(conversionType) {
+    switch (conversionType) {
       case 'celsius':
-        console.log('converting to celsius')
         this[conversionType] = ((parseFloat(valueToConvert) - 32) / 1.8).toFixed(2);
         break;
-      case 'fahrenheit':
-
-      console.log('converting to fahrenheit')
-        this[conversionType] = ((parseFloat(valueToConvert) * 1.8) + 32).toFixed(2);
+      case 'temperature':
+        this[conversionType] = (parseFloat(valueToConvert) * 1.8 + 32).toFixed(2);
         break;
+      default:
+        throw new Error(`Conversion type value (${conversionType}) has no use case.`);
     }
   }
 
   setValidationStateForInput(fieldName, currentState, inputValue) {
     const isInputValueEmpty = isValueEmpty(inputValue);
-    const { range, required = false, conversion } = fieldHashes[fieldName];
+    const { range, required = false, conversion = null, originColumn } = fieldHashes[fieldName];
     const isInRange = range && handleRange(inputValue, range.max, range.min);
 
-    if(conversion) {
-      this.setConvertedField(conversion, inputValue)
+    if (conversion || originColumn) {
+      this.setConvertedField(conversion?.name || originColumn, inputValue);
     }
 
     switch (currentState) {
diff --git a/shared/metadata/patient.js b/shared/metadata/patient.js
index 6f02f8a6..a9022137 100644
--- a/shared/metadata/patient.js
+++ b/shared/metadata/patient.js
@@ -104,25 +104,17 @@ const fields = [
     type: 'decimal',
     label: 'Temperature',
     shortLabel: 'Temp.',
+    conversion: {
+      name: 'celsius',
+      type: 'decimal',
+      unit: '°C',
+      range: { min: 26.5, max: 65.5 },
+      originColumn: 'temperature',
+    },
     unit: '°F',
     range: { min: 80, max: 150 },
   },
-  {
-    name: 'fahrenheit',
-    type: 'decimal',
-    label: 'Fahrenheit',
-    conversion: 'celsius',
-    unit: '°F',
-    range: { min: 80, max: 150 },
-  },
-  {
-    name: 'celsius', 
-    type: 'decimal',
-    label: 'Celsius',
-    conversion: 'fahrenheit',
-    unit: '°C',
-    range: { min: 26.5, max: 65.5 },
-  },
+
   {
     name: 'treatmentNotes',
     type: 'text',

From c70eff9f2b5e18dfa17128aaf2ff47a705cd424d Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Wed, 1 Mar 2023 17:29:23 -0800
Subject: [PATCH 4/9] comment out celsius field metadata

---
 shared/metadata/patient.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/shared/metadata/patient.js b/shared/metadata/patient.js
index a9022137..0144ecfd 100644
--- a/shared/metadata/patient.js
+++ b/shared/metadata/patient.js
@@ -114,7 +114,15 @@ const fields = [
     unit: '°F',
     range: { min: 80, max: 150 },
   },
-
+  // {
+  //   name: 'celsius',
+  //   type: 'decimal',
+  //   label: 'Temperature',
+  //   shortLabel: 'Temp.',
+  //   unit: '°C',
+  //   range: { min: 26.5, max: 65.5 },
+  //   originColumn: 'temperature',
+  // },
   {
     name: 'treatmentNotes',
     type: 'text',

From bc3a852d190d92cb6e4d5fd5ca0b534102ab62b7 Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Wed, 1 Mar 2023 17:55:32 -0800
Subject: [PATCH 5/9] TemperatureField.js file created

---
 client/src/EMS/TemperatureField.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 client/src/EMS/TemperatureField.js

diff --git a/client/src/EMS/TemperatureField.js b/client/src/EMS/TemperatureField.js
new file mode 100644
index 00000000..5124e30e
--- /dev/null
+++ b/client/src/EMS/TemperatureField.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+
+const TemperatureInput = () => {
+  const {data, onChange} = useForm()
+}
+
+const TemperatureField = () => {
+  return (
+    <div>TemperatureField</div>
+  )
+}
+
+export default TemperatureField
\ No newline at end of file

From 3e293e71bdf44a83db2fb587e4e7d88095321a8c Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Thu, 2 Mar 2023 14:04:59 -0800
Subject: [PATCH 6/9] Temperature control created

---
 client/src/EMS/PatientFields.js      |  6 ++-
 client/src/EMS/TemperatureField.js   | 64 ++++++++++++++++++++++++----
 client/src/EMS/TemperatureField.scss | 22 ++++++++++
 client/src/Models/Ringdown.js        | 36 ++++------------
 shared/metadata/patient.js           | 16 -------
 5 files changed, 90 insertions(+), 54 deletions(-)
 create mode 100644 client/src/EMS/TemperatureField.scss

diff --git a/client/src/EMS/PatientFields.js b/client/src/EMS/PatientFields.js
index 943de787..a68a5565 100644
--- a/client/src/EMS/PatientFields.js
+++ b/client/src/EMS/PatientFields.js
@@ -12,6 +12,7 @@ import Ringdown from '../Models/Ringdown';
 import ApiService from '../ApiService';
 import Context from '../Context';
 import patient from '../../../shared/metadata/patient';
+import TemperatureField from './TemperatureField';
 
 const Patient = patient.getFieldHash();
 
@@ -158,7 +159,8 @@ function PatientFields({ ringdown, onChange }) {
             </FormRadioFieldSet>
           </div>
           {/* <FormField metadata={Patient.temperature} /> */}
-          <FormField
+          <TemperatureField temperatureMetadata={Patient.temperature} />
+          {/* <FormField
             metadata={Patient.temperature}
             label="Temperature"
           >
@@ -168,7 +170,7 @@ function PatientFields({ ringdown, onChange }) {
               isWrapped={false}
               label={false}
             />
-          </FormField>
+          </FormField> */}
         </fieldset>
       </div>
       <Heading title="Additional notes" subtitle="optional" />
diff --git a/client/src/EMS/TemperatureField.js b/client/src/EMS/TemperatureField.js
index 5124e30e..3db6ef32 100644
--- a/client/src/EMS/TemperatureField.js
+++ b/client/src/EMS/TemperatureField.js
@@ -1,14 +1,60 @@
-import React from 'react'
+import React, { useState } from 'react';
+import { useForm } from '../Components/Form';
+import FormInput from '../Components/FormInput';
 
+import { ValidationState } from '../Models/PatientFieldData';
+import classNames from 'classnames';
 
-const TemperatureInput = () => {
-  const {data, onChange} = useForm()
-}
+import './TemperatureField.scss';
 
-const TemperatureField = () => {
+const TemperatureInput = ({ metadata, unit, onChange, value }) => {
+  const { data } = useForm();
+  const { name, range = {} } = metadata || {};
+  const { min, max } = range;
+
+  return (
+    <div className="temperature-field__input">
+      <FormInput
+        type="number"
+        property={name}
+        value={data[name] || value}
+        validationState={data.getValidationState(name)}
+        unit={unit || metadata?.unit}
+        min={min}
+        max={max}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+const TemperatureField = ({ temperatureMetadata }) => {
+  const { data, onChange } = useForm();
+  const [celsius, setCelsius] = useState('');
+  const celsiusMetadata = { name: 'celsius', unit: '°C', range: { min: 26.5, max: 65.5 } };
+
+  const hasError = data.getValidationState(temperatureMetadata.name) === ValidationState.RANGE_ERROR;
+
+  const handleOnChange = (name, value) => {
+    if (name === 'celsius') {
+      onChange('temperature', (parseFloat(value) * 1.8 + 32).toFixed(2));
+      setCelsius(value);
+    } else {
+      onChange(name, value);
+      setCelsius(((parseFloat(value) - 32) / 1.8).toFixed(2));
+    }
+  };
   return (
-    <div>TemperatureField</div>
-  )
-}
+    <>
+      <label htmlFor={temperatureMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+        Temperature
+      </label>
+      <div className="temperature-field">
+        <TemperatureInput metadata={temperatureMetadata} onChange={handleOnChange} />
+        <TemperatureInput metadata={celsiusMetadata} value={celsius} onChange={handleOnChange} />
+      </div>
+    </>
+  );
+};
 
-export default TemperatureField
\ No newline at end of file
+export default TemperatureField;
diff --git a/client/src/EMS/TemperatureField.scss b/client/src/EMS/TemperatureField.scss
new file mode 100644
index 00000000..a0bad012
--- /dev/null
+++ b/client/src/EMS/TemperatureField.scss
@@ -0,0 +1,22 @@
+@import '../theme/base';
+
+.temperature-field {
+  display: flex;
+  gap: 0.6rem;
+  position: relative;
+}
+
+.temperature-field__input {
+  .grid-row {
+    flex-wrap: nowrap;
+  }
+
+  .usa-input {
+    width: 13ex;
+  }
+
+  .usa-error-message {
+    top: 3rem;
+    max-width: 9rem;
+  }
+}
diff --git a/client/src/Models/Ringdown.js b/client/src/Models/Ringdown.js
index 88935511..8ec1109e 100644
--- a/client/src/Models/Ringdown.js
+++ b/client/src/Models/Ringdown.js
@@ -11,7 +11,6 @@ const fieldHashes = {
   ...metadata.patient.getFieldHash(),
   ...metadata.ambulance.getFieldHash(),
   ...metadata.emergencyMedicalServiceCall.getFieldHash(),
-  celsius: { name: 'celsius', type: 'decimal', unit: '°C', range: { min: 26.5, max: 65.5 }, originColumn: 'temperature' },
 };
 
 // define the fields that must all have valid input to make the ringdown valid.  the second array item is an optional function to determine
@@ -58,8 +57,6 @@ const validatedFields = [
   'oxygenSaturation',
   'supplementalOxygenAmount',
   'temperature',
-  // 'fahrenheit',
-  'celsius',
   'glasgowComaScale',
 ];
 
@@ -83,13 +80,7 @@ const payloadModels = [
   [['emergencyMedicalServiceCall', 'emsCall'], ['dispatchCallNumber']],
   // we want to expose the hospital id field under a different name, so we'll define it in the class below instead of here
   ['hospital', []],
-  [
-    'patient',
-    [
-      ...metadata.patient.getObjectFields(),
-      { name: 'celsius', type: 'decimal', unit: '°C', range: { min: 26.5, max: 65.5 }, originColumn: 'temperature', defaultValue: null },
-    ],
-  ],
+  ['patient', [...metadata.patient.getObjectFields()]],
   ['patientDelivery', ['etaMinutes', 'currentDeliveryStatus']],
 ];
 
@@ -281,27 +272,18 @@ class Ringdown {
       });
   }
 
-  setConvertedField(conversionType, valueToConvert) {
-    switch (conversionType) {
-      case 'celsius':
-        this[conversionType] = ((parseFloat(valueToConvert) - 32) / 1.8).toFixed(2);
-        break;
-      case 'temperature':
-        this[conversionType] = (parseFloat(valueToConvert) * 1.8 + 32).toFixed(2);
-        break;
-      default:
-        throw new Error(`Conversion type value (${conversionType}) has no use case.`);
-    }
-  }
-
   setValidationStateForInput(fieldName, currentState, inputValue) {
     const isInputValueEmpty = isValueEmpty(inputValue);
-    const { range, required = false, conversion = null, originColumn } = fieldHashes[fieldName];
+    const {
+      range,
+      required = false,
+      // conversion = null, originColumn
+    } = fieldHashes[fieldName];
     const isInRange = range && handleRange(inputValue, range.max, range.min);
 
-    if (conversion || originColumn) {
-      this.setConvertedField(conversion?.name || originColumn, inputValue);
-    }
+    // if (conversion || originColumn) {
+    //   this.setConvertedField(conversion?.name || originColumn, inputValue);
+    // }
 
     switch (currentState) {
       case ValidationState.REQUIRED_ERROR:
diff --git a/shared/metadata/patient.js b/shared/metadata/patient.js
index 0144ecfd..f364ffc3 100644
--- a/shared/metadata/patient.js
+++ b/shared/metadata/patient.js
@@ -104,25 +104,9 @@ const fields = [
     type: 'decimal',
     label: 'Temperature',
     shortLabel: 'Temp.',
-    conversion: {
-      name: 'celsius',
-      type: 'decimal',
-      unit: '°C',
-      range: { min: 26.5, max: 65.5 },
-      originColumn: 'temperature',
-    },
     unit: '°F',
     range: { min: 80, max: 150 },
   },
-  // {
-  //   name: 'celsius',
-  //   type: 'decimal',
-  //   label: 'Temperature',
-  //   shortLabel: 'Temp.',
-  //   unit: '°C',
-  //   range: { min: 26.5, max: 65.5 },
-  //   originColumn: 'temperature',
-  // },
   {
     name: 'treatmentNotes',
     type: 'text',

From 4da5386c1b31528595df8fb4e7253eb06a3394a6 Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Sun, 5 Mar 2023 15:30:49 -0800
Subject: [PATCH 7/9] FormMultiField component/stylesheet wrapper created

---
 client/src/EMS/BloodPressureField.js          | 24 ++++++++++---------
 client/src/EMS/FormMultiField.js              | 17 +++++++++++++
 ...peratureField.scss => FormMultiField.scss} |  4 ++--
 client/src/EMS/TemperatureField.js            | 19 ++++++++-------
 4 files changed, 43 insertions(+), 21 deletions(-)
 create mode 100644 client/src/EMS/FormMultiField.js
 rename client/src/EMS/{TemperatureField.scss => FormMultiField.scss} (82%)

diff --git a/client/src/EMS/BloodPressureField.js b/client/src/EMS/BloodPressureField.js
index 09ac9811..c03d9c2c 100644
--- a/client/src/EMS/BloodPressureField.js
+++ b/client/src/EMS/BloodPressureField.js
@@ -6,6 +6,7 @@ import FormInput from '../Components/FormInput';
 import { useForm } from '../Components/Form';
 
 import './BloodPressureField.scss';
+import FormMultiField from './FormMultiField';
 
 function BPInput({ metadata, unit }) {
   const { data, onChange } = useForm();
@@ -18,7 +19,7 @@ function BPInput({ metadata, unit }) {
     // grouped with its input in a div because the fields are arranged horizontally
     // in a row.  since the errors are absolutely positioned, they'd both shift to
     // the left margin of the .bpfield without this extra div, causing an overlap.
-    <div className="bpfield__input">
+    <>
       <FormInput
         type="number"
         property={name}
@@ -29,7 +30,7 @@ function BPInput({ metadata, unit }) {
         max={max}
         onChange={onChange}
       />
-    </div>
+    </>
   );
 }
 
@@ -39,15 +40,16 @@ export default function BloodPressureField({ systolicMetadata, diastolicMetadata
   const hasError = validations.includes(ValidationState.RANGE_ERROR);
 
   return (
-    <>
-      <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
-        Blood pressure
-      </label>
-      <div className="bpfield">
-        <BPInput metadata={systolicMetadata} unit="/" />
-        <BPInput metadata={diastolicMetadata} unit="mmHG" />
-      </div>
-    </>
+    <FormMultiField
+      label={
+        <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+          Blood pressure
+        </label>
+      }
+    >
+      <BPInput metadata={systolicMetadata} unit="/" />
+      <BPInput metadata={diastolicMetadata} unit="mmHG" />
+    </FormMultiField>
   );
 }
 
diff --git a/client/src/EMS/FormMultiField.js b/client/src/EMS/FormMultiField.js
new file mode 100644
index 00000000..142c829c
--- /dev/null
+++ b/client/src/EMS/FormMultiField.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import './FormMultiField.scss';
+
+const FormMultiField = ({ label, children }) => {
+  return (
+    <>
+      {label}
+      <div className="multi-field">
+        {children.map((child) => {
+          return <div className="multi-field__input">{child}</div>;
+        })}
+      </div>
+    </>
+  );
+};
+
+export default FormMultiField;
diff --git a/client/src/EMS/TemperatureField.scss b/client/src/EMS/FormMultiField.scss
similarity index 82%
rename from client/src/EMS/TemperatureField.scss
rename to client/src/EMS/FormMultiField.scss
index a0bad012..af6bf0e0 100644
--- a/client/src/EMS/TemperatureField.scss
+++ b/client/src/EMS/FormMultiField.scss
@@ -1,12 +1,12 @@
 @import '../theme/base';
 
-.temperature-field {
+.multi-field {
   display: flex;
   gap: 0.6rem;
   position: relative;
 }
 
-.temperature-field__input {
+.multi-field__input {
   .grid-row {
     flex-wrap: nowrap;
   }
diff --git a/client/src/EMS/TemperatureField.js b/client/src/EMS/TemperatureField.js
index 3db6ef32..7bebfae2 100644
--- a/client/src/EMS/TemperatureField.js
+++ b/client/src/EMS/TemperatureField.js
@@ -5,7 +5,7 @@ import FormInput from '../Components/FormInput';
 import { ValidationState } from '../Models/PatientFieldData';
 import classNames from 'classnames';
 
-import './TemperatureField.scss';
+import FormMultiField from './FormMultiField';
 
 const TemperatureInput = ({ metadata, unit, onChange, value }) => {
   const { data } = useForm();
@@ -13,7 +13,7 @@ const TemperatureInput = ({ metadata, unit, onChange, value }) => {
   const { min, max } = range;
 
   return (
-    <div className="temperature-field__input">
+    <>
       <FormInput
         type="number"
         property={name}
@@ -24,7 +24,7 @@ const TemperatureInput = ({ metadata, unit, onChange, value }) => {
         max={max}
         onChange={onChange}
       />
-    </div>
+    </>
   );
 };
 
@@ -46,13 +46,16 @@ const TemperatureField = ({ temperatureMetadata }) => {
   };
   return (
     <>
-      <label htmlFor={temperatureMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
-        Temperature
-      </label>
-      <div className="temperature-field">
+      <FormMultiField
+        label={
+          <label htmlFor={temperatureMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+            Temperature
+          </label>
+        }
+      >
         <TemperatureInput metadata={temperatureMetadata} onChange={handleOnChange} />
         <TemperatureInput metadata={celsiusMetadata} value={celsius} onChange={handleOnChange} />
-      </div>
+      </FormMultiField>
     </>
   );
 };

From 14b5f4f33f490f2e262ac6cf4ba57e912b28679c Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Mon, 6 Mar 2023 14:27:12 -0800
Subject: [PATCH 8/9] add key to mapped children in FormMultiField.js

---
 client/src/Components/FormMultiField.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/Components/FormMultiField.js b/client/src/Components/FormMultiField.js
index 142c829c..dddae54e 100644
--- a/client/src/Components/FormMultiField.js
+++ b/client/src/Components/FormMultiField.js
@@ -7,7 +7,11 @@ const FormMultiField = ({ label, children }) => {
       {label}
       <div className="multi-field">
         {children.map((child) => {
-          return <div className="multi-field__input">{child}</div>;
+          return (
+            <div key={child.props.metadata.name} className="multi-field__input">
+              {child}
+            </div>
+          );
         })}
       </div>
     </>

From cfcda429f98a6c93dd69dec0d1aba428e503c2a6 Mon Sep 17 00:00:00 2001
From: bryan kretz <kretzbryan@gmail.com>
Date: Mon, 6 Mar 2023 14:58:31 -0800
Subject: [PATCH 9/9] remove unnecessary comments

---
 client/src/EMS/PatientFields.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/EMS/PatientFields.js b/client/src/EMS/PatientFields.js
index a68a5565..78d0a5a8 100644
--- a/client/src/EMS/PatientFields.js
+++ b/client/src/EMS/PatientFields.js
@@ -158,19 +158,7 @@ function PatientFields({ ringdown, onChange }) {
               />
             </FormRadioFieldSet>
           </div>
-          {/* <FormField metadata={Patient.temperature} /> */}
           <TemperatureField temperatureMetadata={Patient.temperature} />
-          {/* <FormField
-            metadata={Patient.temperature}
-            label="Temperature"
-          >
-            <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
-            <FormField
-              metadata={Patient.temperature.conversion}
-              isWrapped={false}
-              label={false}
-            />
-          </FormField> */}
         </fieldset>
       </div>
       <Heading title="Additional notes" subtitle="optional" />