Display GPAs and percentages as doubles (#89)

* grades as doubles

* also in the quickinfofield

Co-authored-by: nicolesorial <grace.cola@gmail.com>

Author: nicolesorial

pharmd-app/src/components/Fields/GradeField.js

@@ -1,9 +1,10 @@
 import React from "react";
 import tw, { styled } from "twin.macro";
-import { NumberField } from "react-admin";
+import { FunctionField } from "react-admin";
 import TextField from "./TextField";
 import { getFieldColor } from "../../themes/field-colors";
 import { STUDENT_COURSE } from "../../constants/apiObjects";
+import { formatDecimal } from '../../services/Utility'
 
 const StyledTextField = styled(TextField)`
   ${tw`fontStyle-6 text-gray-700 font-medium`}
@@ -12,23 +13,24 @@ const StyledTextField = styled(TextField)`
   font-size: 1.4em;
 `;
 
-const StyledNumberField = styled(NumberField)`
+const StyledFunctionField = styled(FunctionField)`
   ${tw`fontStyle-6 text-gray-700 font-medium`}
   
   color: ${props => props.color};
   font-size: 1.4em;
 `;
 
 const GradeField = props => {
-  return props.source === STUDENT_COURSE.LETTER_GRADE ? (
-    <StyledTextField color={getFieldColor(props)} {...props} />
-  ) : (
-    <StyledNumberField
-      color={getFieldColor(props)}
-      {...props}
-      options={{ maximumFractionDigits: 2 }}
-    />
-  );
+  return props.source === STUDENT_COURSE.LETTER_GRADE ?
+    (
+      <StyledTextField color={getFieldColor(props)} {...props} />
+    ) : (
+      <StyledFunctionField
+        render={record => `${formatDecimal(record[props.source])}`}
+        color={getFieldColor(props)}
+        {...props}
+      />
+    );
 };
 
 export default GradeField;

pharmd-app/src/components/Fields/QuickInfoField.js

@@ -3,6 +3,7 @@
 // Function Imports
 import React from "react";
 import { Loading, useGetOne } from "react-admin";
+import { formatDecimal } from "../../services/Utility";
 
 // Component Imports
 import { styled } from "twin.macro";
@@ -34,7 +35,7 @@ const QuickInfoField = ({ record = {}, source }) => {
   }
   return (
     <Info>
-      <QuickInfo info={data.gpa} label="GPA" />
+      <QuickInfo info={formatDecimal(data.gpa)} label="GPA" />
       <QuickInfo info={data.gradDate} label="Cohort" />
     </Info>
   );

pharmd-app/src/services/Utility.js

@@ -13,3 +13,25 @@ export function arrayToObject(inputArray, keySourceArray) {
 }
 
 export const doAllRequests = requests => axios.all(requests);
+
+
+export function formatDecimal(preformatted) {
+  const preformattedString = preformatted.toString();
+  const decimalRegex = /^(?<wholeNumber>\d*)(?<point>\.)?(?<decimal>\d*)?/;
+  const numPlaces = 2;
+
+  const matches = preformattedString.match(decimalRegex);
+  const wholeNumber = matches.groups.wholeNumber;
+  const point = matches.groups.point || '.';
+  let decimal = matches.groups.decimal || '00';
+
+  while (decimal.length < numPlaces) {
+    decimal = decimal + '0';
+  }
+
+  if (decimal.length > numPlaces) {
+    decimal = decimal.substring(0, numPlaces);
+  }
+
+  return wholeNumber + point + decimal;
+}