194 add judge score preview

src/components/judging/CriteriaCard.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { Typography, Card, Slider } from "antd";
+import { Badge } from "@chakra-ui/react";
 
 const { Paragraph } = Typography;
 
 interface Props {
   criteria: any;
   changeScore: (value: number, id: number) => void;
+  currScore: string;
 }
 
 const CriteriaCard: React.FC<Props> = props => {
@@ -17,7 +19,10 @@ const CriteriaCard: React.FC<Props> = props => {
   return (
     <div>
       <Card hoverable title={props.criteria.name} size="small" style={{ maxWidth: "500px" }}>
-        <Paragraph>{props.criteria.description}</Paragraph>
+        <Paragraph>{props.criteria.description} <Badge colorScheme="blue" variant="subtle">
+          {props.currScore}
+        </Badge></Paragraph>
+
         <Slider
           marks={marks}
           min={props.criteria.minScore}

src/components/judging/CriteriaCardContainer.tsx

@@ -9,14 +9,18 @@ interface Props {
   criteriaArray: any[];
   changeScore: (value: number, id: number) => void;
   categoryName: string;
+  projectScores: any;
 }
 
 const CriteriaCardContainer: React.FC<Props> = props => (
   <div>
     <Title level={3}>{props.categoryName}</Title>
-    {props.criteriaArray.map((criteria: any) => (
-      <CriteriaCard criteria={criteria} changeScore={props.changeScore} />
-    ))}
+    {props.criteriaArray.map((criteria: any) => {
+      const currScore = props.projectScores[criteria.id];
+      return (
+        <CriteriaCard criteria={criteria} changeScore={props.changeScore} currScore={currScore} />
+      )
+    })}
   </div>
 );
 

src/components/judging/JudgingCardsContainer.tsx

@@ -113,6 +113,7 @@ const JudgingCardsContainer: React.FC<Props> = props => {
           criteriaArray={cToCMapping[key]}
           changeScore={changeScore}
           categoryName={key}
+          projectScores={projectScores}
         />
       );
     }