Use /stats route instead of /stats/leaderboard for Partner Stats

hotosm · Oct 21, 2024 · 591fa56 · 591fa56
1 parent f10eae6
commit 591fa56
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/frontend/src/components/partners/partners.js b/frontend/src/components/partners/partners.js
@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-        <Link to={`/partners/${details.permalink}/stats/leaderboard`}>
+        <Link to={`/partners/${details.permalink}/stats`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"

diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.js
@@ -38,13 +38,6 @@ export const PartnersStats = () => {
   const [partnerStats, setPartnerStats] = useState(null);
   const [error, loading, partner] = useFetch(`partners/${id}/`);
 
-  // navigate to /leaderboard path when no tab param present
-  useEffect(() => {
-    if (!tabname) {
-      navigate('leaderboard');
-    }
-  }, [navigate, tabname]);
-
   const fetchData = async (name) => {
     try {
       let hashtag = name.trim();
@@ -73,12 +66,10 @@ export const PartnersStats = () => {
 
   function getTabContent() {
     switch (tabname) {
-      case 'leaderboard':
-        return <Leaderboard partner={partner} partnerStats={partnerStats} />;
       case 'mapswipe':
         return <PartnersMapswipeStats />;
       default:
-        return <></>;
+        return <Leaderboard partner={partner} partnerStats={partnerStats} />;
     }
   }
 
@@ -91,6 +82,8 @@ export const PartnersStats = () => {
     ? tabData.filter((tab) => tab.id !== 'mapswipe')
     : tabData;
 
+  const activeTab = tabname === 'mapswipe' ? 'mapswipe' : 'leaderboard';
+
   return (
     <ReactPlaceholder
       showLoadingAnimation={true}
@@ -121,9 +114,13 @@ export const PartnersStats = () => {
                     role="button"
                     tabIndex={0}
                     className={`flex items-center pointer partners-tab-item ${
-                      tabname === tabId ? 'bg-tan blue-dark' : 'bg-grey-dark white'
+                      activeTab === tabId ? 'bg-tan blue-dark' : 'bg-grey-dark white'
                     }`}
-                    onClick={() => navigate(`/partners/${id}/stats/${tabId}`)}
+                    onClick={() =>
+                      tabId === 'leaderboard'
+                        ? navigate(`/partners/${id}/stats`)
+                        : navigate(`/partners/${id}/stats/${tabId}`)
+                    }
                     onKeyDown={() => {}}
                   >
                     <p className="ma0">{title}</p>