From d627c7db1265b4018d6e8136d8d5d6e0594cc355 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Wed, 3 Feb 2021 15:08:00 +0000
Subject: [PATCH] Add completeness counts to subject set cards

---
 .../components/SubjectSetCard/SubjectSetCard.js        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/app-project/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js b/packages/app-project/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js
index e9b58db79d1..63203e6e16a 100644
--- a/packages/app-project/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js
+++ b/packages/app-project/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js
@@ -6,13 +6,15 @@ import { array, number, string } from 'prop-types'
 import React from 'react'
 
 function SubjectSetCard (props) {
-  const { display_name, id, set_member_subjects_count, subjects } = props
+  const { availableSubjects, display_name, id, set_member_subjects_count, subjects } = props
   const [subject] = subjects
   const { publicRuntimeConfig = {} } = getConfig() || {}
   const assetPrefix = publicRuntimeConfig.assetPrefix || ''
   const placeholderUrl = `${assetPrefix}/subject-placeholder.png`
   const subjectURLs = subject ? subject.locations.map(location => Object.values(location)[0]) : []
   const alt = subject ? `Subject ${subject.id}` : 'Loading'
+  const completeness = 1 - (availableSubjects / set_member_subjects_count)
+  const percentComplete = parseInt(100 * completeness)
 
   return (
     <Box
@@ -48,6 +50,12 @@ function SubjectSetCard (props) {
           >
             {`${set_member_subjects_count} subjects`}
           </Text>
+            <br/>
+          <Text
+            weight="normal"
+          >
+            {`${percentComplete}% complete`}
+          </Text>
         </Paragraph>
       </Box>
     </Box>