From 5c07f40e713291c5f4e374762c10567de93cdd4b Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Tue, 10 Sep 2024 12:00:10 +0545 Subject: [PATCH 01/17] Add `...rest` props to Button component --- frontend/src/components/button.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js index af665a7a92..6cb1c7de41 100644 --- a/frontend/src/components/button.js +++ b/frontend/src/components/button.js @@ -10,7 +10,15 @@ export const AnimatedLoadingIcon = () => ( ); -export function Button({ onClick, children, icon, className, disabled, loading = false }: Object) { +export function Button({ + onClick, + children, + icon, + className, + disabled, + loading = false, + ...rest +}: Object) { return ( + + {/* dropdown list */} + {isActive && ( + + )} + + ); +}; From 557fa02ee129a9c56ff69809db736b2bedbe0f51 Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Tue, 10 Sep 2024 17:04:27 +0545 Subject: [PATCH 03/17] Move `Resources` section to banner in Partner Stats page --- .../components/partners/partnersResources.js | 28 +++++++++---------- frontend/src/views/partnersStats.js | 26 +++++++---------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/partners/partnersResources.js b/frontend/src/components/partners/partnersResources.js index 05a327fcc3..bb5e0371a4 100644 --- a/frontend/src/components/partners/partnersResources.js +++ b/frontend/src/components/partners/partnersResources.js @@ -1,4 +1,7 @@ -import { CustomButton } from '../button'; +import { FormattedMessage } from 'react-intl'; + +import { CustomDropdown } from './customDropdown'; +import messages from '../../views/messages'; export const Resources = ({ partner }) => { const renderWebsiteLinks = () => { @@ -11,20 +14,17 @@ export const Resources = ({ partner }) => { name: partner[nameKey], url: partner[urlKeys[index]], })); + + const resourcesData = websiteLinks.map((link) => ({ + ...link, + label: link.name, + onClick: (item) => { + window.open(item.url, '_blank'); + }, + })); + return ( -
- {websiteLinks.map((link, index) => ( - - {link.name} - - ))} -
+ } data={resourcesData} /> ); }; diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.js index 152abe8d09..f394b4fbdb 100644 --- a/frontend/src/views/partnersStats.js +++ b/frontend/src/views/partnersStats.js @@ -63,12 +63,16 @@ export const PartnersStats = () => { ) : (

{partner.name}

)} - {/* new to mapping button */} - - - +
+ {/* new to mapping button */} + + + + {/* resources button */} + +
{/* social logos */}
@@ -117,16 +121,6 @@ export const PartnersStats = () => { - {/* resources section */} - {Object.keys(partner).some((key) => key.includes('name_')) && ( -
-

- -

- -
- )} - {/* activity section */}

From 109eba15a2b85682569db4ecf5ab6b4e1f6f9ee2 Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Wed, 11 Sep 2024 16:26:03 +0545 Subject: [PATCH 04/17] Add style prop to button component --- frontend/src/components/button.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js index 6cb1c7de41..207c20bf42 100644 --- a/frontend/src/components/button.js +++ b/frontend/src/components/button.js @@ -17,6 +17,7 @@ export function Button({ className, disabled, loading = false, + style, ...rest }: Object) { return ( @@ -25,7 +26,7 @@ export function Button({ aria-pressed="false" focusindex="0" className={`${className || ''} br1 f5 bn ${disabled || loading ? 'o-50' : 'pointer'}`} - style={{ padding: '.75rem 1.5rem' }} + style={{ padding: '.75rem 1.5rem', ...style }} disabled={disabled || loading} {...rest} > From 8c31dde827c9667e3cec5530c471fd334c931cba Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Wed, 11 Sep 2024 16:42:06 +0545 Subject: [PATCH 05/17] Adjust icon size in `CustomDropdown` component --- frontend/src/components/partners/customDropdown.js | 11 ++++++++--- frontend/src/components/partners/partnersResources.js | 6 +++++- frontend/src/components/partners/styles.scss | 4 ++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/partners/customDropdown.js b/frontend/src/components/partners/customDropdown.js index 229e44ee4d..caf86ef59e 100644 --- a/frontend/src/components/partners/customDropdown.js +++ b/frontend/src/components/partners/customDropdown.js @@ -4,19 +4,24 @@ import { Button } from '../button'; import { ChevronDownIcon } from '../svgIcons/chevron-down'; import { ChevronUpIcon } from '../svgIcons/chevron-up'; -export const CustomDropdown = ({ title, data }) => { +export const CustomDropdown = ({ title, data, buttonClassname }) => { const [isActive, setIsActive] = useState(false); return (
{/* dropdown select */} {/* dropdown list */} diff --git a/frontend/src/components/partners/partnersResources.js b/frontend/src/components/partners/partnersResources.js index bb5e0371a4..248fd0d572 100644 --- a/frontend/src/components/partners/partnersResources.js +++ b/frontend/src/components/partners/partnersResources.js @@ -24,7 +24,11 @@ export const Resources = ({ partner }) => { })); return ( - } data={resourcesData} /> + } + data={resourcesData} + /> ); }; diff --git a/frontend/src/components/partners/styles.scss b/frontend/src/components/partners/styles.scss index fd14c119ad..67ab58c5d9 100644 --- a/frontend/src/components/partners/styles.scss +++ b/frontend/src/components/partners/styles.scss @@ -23,6 +23,6 @@ } .partners-social-icon { - height: 24px; - width: 24px; + height: 20px; + width: 20px; } From d97ca4ceae8a139b0f64a0c3fa31e2b116db785d Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Wed, 11 Sep 2024 16:48:37 +0545 Subject: [PATCH 06/17] Add tab switch feature in partners stats page - Add tabname param to partner stats route - Conditionally render tab content based selected tab - Separate Leaderboard section to a seperate component --- .../src/components/partners/leaderboard.js | 33 ++++ frontend/src/routes.js | 2 +- frontend/src/views/partnersStats.js | 159 ++++++++++-------- 3 files changed, 126 insertions(+), 68 deletions(-) create mode 100644 frontend/src/components/partners/leaderboard.js diff --git a/frontend/src/components/partners/leaderboard.js b/frontend/src/components/partners/leaderboard.js new file mode 100644 index 0000000000..6ce3b044dd --- /dev/null +++ b/frontend/src/components/partners/leaderboard.js @@ -0,0 +1,33 @@ +import { FormattedMessage } from 'react-intl'; +import messages from '../../views/messages'; + +import { StatsSection } from './partnersStats'; +import { Activity } from './partnersActivity'; +import { CurrentProjects } from './currentProjects'; + +export const Leaderboard = ({ partner, partnerStats }) => { + return ( +
+
+

+ {partner.primary_hashtag + ?.split(',') + ?.map((str) => `#${str}`) + ?.join(', ')} +

+
+ + + + + + {/* activity section */} +
+

+ +

+ +
+
+ ); +}; diff --git a/frontend/src/routes.js b/frontend/src/routes.js index 2ca317b374..7495186182 100644 --- a/frontend/src/routes.js +++ b/frontend/src/routes.js @@ -113,7 +113,7 @@ export const router = createBrowserRouter( }} /> { const { PartnersStats } = await import( './views/partnersStats' /* webpackChunkName: "partnersStats" */ diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.js index f394b4fbdb..4fc05eeed8 100644 --- a/frontend/src/views/partnersStats.js +++ b/frontend/src/views/partnersStats.js @@ -1,24 +1,32 @@ import React, { useEffect, useState } from 'react'; -import { Link, useParams } from 'react-router-dom'; +import { Link, useParams, useNavigate } from 'react-router-dom'; import ReactPlaceholder from 'react-placeholder'; import { FormattedMessage } from 'react-intl'; import messages from './messages'; import { NotFound } from './notFound'; import { useFetch } from '../hooks/UseFetch'; -import { StatsSection } from '../components/partners/partnersStats'; -import { Activity } from '../components/partners/partnersActivity'; -import { CurrentProjects } from '../components/partners/currentProjects'; +import { Leaderboard } from '../components/partners/leaderboard'; import { Resources } from '../components/partners/partnersResources'; import { OHSOME_STATS_BASE_URL } from '../config'; import { Button } from '../components/button'; import { TwitterIcon, FacebookIcon, InstagramIcon } from '../components/svgIcons'; +const tabData = [{ id: 'leaderboard', title: 'Leaderboard' }]; + export const PartnersStats = () => { - const { id } = useParams(); + const { id, tabname } = useParams(); + const navigate = useNavigate(); 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(); @@ -45,6 +53,15 @@ export const PartnersStats = () => { } }, [partner]); + function getTabContent() { + switch (tabname) { + case 'leaderboard': + return ; + default: + return <>; + } + } + return ( { ) : (
-
+
{/* logo */} {partner.logo_url ? ( logo ) : ( -

{partner.name}

- )} -
- {/* new to mapping button */} - - - - {/* resources button */} - -
-
- {/* social logos */} -
-
-

- {partner.primary_hashtag - ?.split(',') - ?.map((str) => `#${str}`) - ?.join(', ')} +

+ {partner.name}

-
- {!!partner.link_x && ( - - - - )} - {!!partner.link_meta && ( - - - - )} - {!!partner.link_instagram && ( - + -
- - +
+ {/* new to mapping button */} + + + - + {/* resources button */} + - {/* activity section */} -
-

- -

- + {/* social logos */} +
+ {!!partner.link_x && ( + + + + )} + {!!partner.link_meta && ( + + + + )} + {!!partner.link_instagram && ( + + + + )} +
+
+ + {/* tab content */} + {getTabContent()}
)} From 2309f23f4c2f21ef7bf85b0fc6660d1cb018616e Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Wed, 11 Sep 2024 17:13:51 +0545 Subject: [PATCH 07/17] Refactor social icon render logic in `Partner Stats` page - Dynamically map the icons from api data --- frontend/src/views/partnersStats.js | 64 ++++++++++++++--------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.js index 4fc05eeed8..f8c9611754 100644 --- a/frontend/src/views/partnersStats.js +++ b/frontend/src/views/partnersStats.js @@ -12,6 +12,20 @@ import { OHSOME_STATS_BASE_URL } from '../config'; import { Button } from '../components/button'; import { TwitterIcon, FacebookIcon, InstagramIcon } from '../components/svgIcons'; +function getSocialIcons(link) { + const socialName = link.split('_')?.[1]; + switch (socialName) { + case 'x': + return ; + case 'meta': + return ; + case 'instagram': + return ; + default: + return <>; + } +} + const tabData = [{ id: 'leaderboard', title: 'Leaderboard' }]; export const PartnersStats = () => { @@ -62,6 +76,10 @@ export const PartnersStats = () => { } } + const socialLinks = Object.keys(partner) + .filter((key) => key.startsWith('link')) + .filter((link) => partner[link]); + return ( { {/* social logos */} -
- {!!partner.link_x && ( - - - - )} - {!!partner.link_meta && ( - - - - )} - {!!partner.link_instagram && ( - - - - )} -
+ {!!socialLinks.length && ( +
+ {socialLinks.map((link) => ( + + {getSocialIcons(link)} + + ))} +
+ )}
From b222a2ed6f906877b0bbe3ae04e45a1a6a5d76e9 Mon Sep 17 00:00:00 2001 From: royallsilwallz Date: Wed, 11 Sep 2024 17:24:30 +0545 Subject: [PATCH 08/17] Adjust styling for `Resources` dropdown in `Partner Stats` --- frontend/src/components/partners/customDropdown.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/partners/customDropdown.js b/frontend/src/components/partners/customDropdown.js index caf86ef59e..b63b446e35 100644 --- a/frontend/src/components/partners/customDropdown.js +++ b/frontend/src/components/partners/customDropdown.js @@ -27,8 +27,12 @@ export const CustomDropdown = ({ title, data, buttonClassname }) => { {/* dropdown list */} {isActive && (