From a7adeadb08c34981e6900bb46c8878f4776d7750 Mon Sep 17 00:00:00 2001
From: Dan Strano <stranoj@gmail.com>
Date: Tue, 30 May 2023 14:37:34 -0400
Subject: [PATCH] #839: Don't show 0 counts for top submitters

---
 src/views/Home.js | 198 +++++++++++++++++++++++++---------------------
 1 file changed, 107 insertions(+), 91 deletions(-)

diff --git a/src/views/Home.js b/src/views/Home.js
index e9a1c813..d918794f 100644
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -23,17 +23,30 @@ const Home = (props) => {
     axios.get(config.api.getUriPrefix() + '/user/topSubmitters')
       .then(res => {
         const tSubmitters = res.data.data
-        tSubmitters.allTime[0].rank = '🥇'
-        tSubmitters.allTime[1].rank = '🥈'
-        tSubmitters.allTime[2].rank = '🥉'
-        tSubmitters.monthly[0].rank = '🥇'
-        tSubmitters.monthly[1].rank = '🥈'
-        tSubmitters.monthly[2].rank = '🥉'
         tSubmitters.weekly[0].rank = '🥇'
         tSubmitters.weekly[1].rank = '🥈'
         tSubmitters.weekly[2].rank = '🥉'
+        tSubmitters.monthly[0].rank = '🥇'
+        tSubmitters.monthly[1].rank = '🥈'
+        tSubmitters.monthly[2].rank = '🥉'
+        tSubmitters.allTime[0].rank = '🥇'
+        tSubmitters.allTime[1].rank = '🥈'
+        tSubmitters.allTime[2].rank = '🥉'
+
+        const ts = { weekly: [], monthly: [], allTime: [] }
+        for (let i = 0; i < 3; ++i) {
+          if (tSubmitters.weekly[i].submissionsCount > 0) {
+            ts.weekly.push(tSubmitters.weekly[i])
+          }
+          if (tSubmitters.monthly[i].submissionsCount > 0) {
+            ts.monthly.push(tSubmitters.monthly[i])
+          }
+          if (tSubmitters.allTime[i].submissionsCount > 0) {
+            ts.allTime.push(tSubmitters.allTime[i])
+          }
+        }
 
-        setTopSubmitters(tSubmitters)
+        setTopSubmitters(ts)
       })
 
     if (!props.tabKey) {
@@ -85,90 +98,93 @@ const Home = (props) => {
       <h5>Top Submitters</h5>
       <Suspense fallback={<div>Loading...</div>}>
         <Tabs id='top-submissions-tabs'>
-          <Tab eventKey='Weekly' title='Weekly' className='metriq-nav-tab'>
-            <div className='card'>
-              <SortingTable
-                columns={[
-                  {
-                    title: 'Name',
-                    key: 'username',
-                    width: 360
-                  },
-                  {
-                    title: 'Rank',
-                    key: 'rank',
-                    width: 80
-                  },
-                  {
-                    title: 'Submission Count',
-                    key: 'submissionsCount',
-                    width: 360
-                  }
-                ]}
-                data={topSubmitters.weekly}
-                key={Math.random()}
-                onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
-                tableLayout='auto'
-                rowClassName='link'
-              />
-            </div>
-          </Tab>
-          <Tab eventKey='Monthly' title='Monthly' className='metriq-nav-tab'>
-            <div className='card'>
-              <SortingTable
-                columns={[
-                  {
-                    title: 'Name',
-                    key: 'username',
-                    width: 360
-                  },
-                  {
-                    title: 'Rank',
-                    key: 'rank',
-                    width: 80
-                  },
-                  {
-                    title: 'Submission Count',
-                    key: 'submissionsCount',
-                    width: 360
-                  }
-                ]}
-                data={topSubmitters.monthly}
-                key={Math.random()}
-                onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
-                tableLayout='auto'
-                rowClassName='link'
-              />
-            </div>
-          </Tab>
-          <Tab eventKey='AllTime' title='All Time' className='metriq-nav-tab'>
-            <div className='card'>
-              <SortingTable
-                columns={[
-                  {
-                    title: 'Name',
-                    key: 'username',
-                    width: 360
-                  },
-                  {
-                    title: 'Rank',
-                    key: 'rank',
-                    width: 80
-                  },
-                  {
-                    title: 'Submission Count',
-                    key: 'submissionsCount',
-                    width: 360
-                  }
-                ]}
-                data={topSubmitters.allTime}
-                key={Math.random()}
-                onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
-                tableLayout='auto'
-                rowClassName='link'
-              />
-            </div>
-          </Tab>
+          {(topSubmitters.weekly.length > 0) &&
+            <Tab eventKey='Weekly' title='Weekly' className='metriq-nav-tab'>
+              <div className='card'>
+                <SortingTable
+                  columns={[
+                    {
+                      title: 'Name',
+                      key: 'username',
+                      width: 360
+                    },
+                    {
+                      title: 'Rank',
+                      key: 'rank',
+                      width: 80
+                    },
+                    {
+                      title: 'Submission Count',
+                      key: 'submissionsCount',
+                      width: 360
+                    }
+                  ]}
+                  data={topSubmitters.weekly}
+                  key={Math.random()}
+                  onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
+                  tableLayout='auto'
+                  rowClassName='link'
+                />
+              </div>
+            </Tab>}
+          {(topSubmitters.monthly.length > 0) &&
+            <Tab eventKey='Monthly' title='Monthly' className='metriq-nav-tab'>
+              <div className='card'>
+                <SortingTable
+                  columns={[
+                    {
+                      title: 'Name',
+                      key: 'username',
+                      width: 360
+                    },
+                    {
+                      title: 'Rank',
+                      key: 'rank',
+                      width: 80
+                    },
+                    {
+                      title: 'Submission Count',
+                      key: 'submissionsCount',
+                      width: 360
+                    }
+                  ]}
+                  data={topSubmitters.monthly}
+                  key={Math.random()}
+                  onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
+                  tableLayout='auto'
+                  rowClassName='link'
+                />
+              </div>
+            </Tab>}
+          {(topSubmitters.allTime.length > 0) &&
+            <Tab eventKey='AllTime' title='All Time' className='metriq-nav-tab'>
+              <div className='card'>
+                <SortingTable
+                  columns={[
+                    {
+                      title: 'Name',
+                      key: 'username',
+                      width: 360
+                    },
+                    {
+                      title: 'Rank',
+                      key: 'rank',
+                      width: 80
+                    },
+                    {
+                      title: 'Submission Count',
+                      key: 'submissionsCount',
+                      width: 360
+                    }
+                  ]}
+                  data={topSubmitters.allTime}
+                  key={Math.random()}
+                  onRowClick={(record) => this.props.history.push('/User/' + record.id + '/Submissions')}
+                  tableLayout='auto'
+                  rowClassName='link'
+                />
+              </div>
+            </Tab>}
         </Tabs>
       </Suspense>
       <br />