From 30c727e3dcb2186f0bb9a8854ffadc57a8a0e95d Mon Sep 17 00:00:00 2001
From: Lennon Puldagrealy <lpuldagrealy@gmail.com>
Date: Sun, 18 Dec 2022 12:26:07 -0800
Subject: [PATCH] Componentize the rating button. Currently it's local to this
 file, can write a more general purpose common button component soon.

---
 website/src/pages/grading/grade-output.tsx | 61 +++++++---------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/website/src/pages/grading/grade-output.tsx b/website/src/pages/grading/grade-output.tsx
index 25e5543a..83d47cf1 100644
--- a/website/src/pages/grading/grade-output.tsx
+++ b/website/src/pages/grading/grade-output.tsx
@@ -28,48 +28,13 @@ export default function OutputDetail(): JSX.Element {
 
                 {/* Rating buttons */}
                 <div className="flex justify-center p-6">
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    1
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    2
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    3
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    4
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    5
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    6
-                  </button>
-                  <button
-                    type="button"
-                    className="nline-flex items-center mx-2 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    7
-                  </button>
+                  <RatingButton rating={1} active={false}></RatingButton>
+                  <RatingButton rating={2} active={false}></RatingButton>
+                  <RatingButton rating={3} active={false}></RatingButton>
+                  <RatingButton rating={4} active={false}></RatingButton>
+                  <RatingButton rating={5} active={false}></RatingButton>
+                  <RatingButton rating={6} active={false}></RatingButton>
+                  <RatingButton rating={7} active={true}></RatingButton>
                 </div>
               </div>
 
@@ -132,6 +97,18 @@ export default function OutputDetail(): JSX.Element {
   );
 }
 
+function RatingButton(props: { rating: number; active: boolean }): JSX.Element {
+  const activeClasses =
+    "inline-flex items-center mx-2 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
+  const inActiveClasses =
+    "inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
+  return (
+    <button type="button" className={props.active ? activeClasses : inActiveClasses}>
+      {props.rating}
+    </button>
+  );
+}
+
 function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
   let AdditionalExplanation = null;
   if (props.option.additionalExplanation) {