Merge pull request #6502 from hotosm/refactor/partners-page-code

Refactor Partners Page code

frontend/src/assets/styles/_extra.scss

@@ -461,7 +461,7 @@ a[href="https://www.mapbox.com/map-feedback/"]
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;
-  grid-auto-rows: 370px;
+  grid-auto-rows: 360px;
 }
 
 .b--card {

frontend/src/components/partners/currentProjects.js

@@ -11,6 +11,7 @@ import { API_URL } from '../../config';
 import messages from './messages';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
 import { HeaderLine } from '../projectDetail/header';
+import { BigProjectTeaser } from '../projectDetail/bigProjectTeaser';
 
 // Import Swiper styles
 import './styles.scss';
@@ -44,6 +45,8 @@ export function CurrentProjects({ currentProjects }) {
         }
         const jsonData = await response.json();
         const jsonInfo = await responseInfo.json();
+        const contributionResponse = await fetch(API_URL + `projects/${id}/contributions/`);
+        const jsonContributions = await contributionResponse.json();
         return {
           id,
           tasks: jsonData,
@@ -52,6 +55,8 @@ export function CurrentProjects({ currentProjects }) {
           percentValidated: jsonInfo.percentValidated,
           percentBadImagery: jsonInfo.percentBadImagery,
           organisationName: jsonInfo.organisationName,
+          lastUpdated: jsonInfo.lastUpdated,
+          totalContributors: jsonContributions.userContributions.length,
         };
       });
 
@@ -86,12 +91,7 @@ export function CurrentProjects({ currentProjects }) {
           pagination={pagination}
           modules={[Pagination]}
           swipeHandler={{ draggable: false }}
-          className="shadow-4"
-          style={{
-            backgroundColor: 'white',
-            width: '100%',
-            borderColor: 'gray',
-          }}
+          className="shadow-4 bg-white w-100 b--gray"
         >
           {projectsData.map((project) => (
             <SwiperSlide
@@ -121,7 +121,7 @@ export function CurrentProjects({ currentProjects }) {
                 <section className="lh-title h5 overflow-y-auto mt3 mb3 flex flex-column">
                   <div
                     className="pr2 blue-dark-abbey markdown-content"
-                    dangerouslySetInnerHTML={{ __html: project.info.description }}
+                    dangerouslySetInnerHTML={{ __html: project.info.shortDescription }}
                   />
 
                   <a
@@ -133,7 +133,13 @@ export function CurrentProjects({ currentProjects }) {
                     </span>
                   </a>
 
-                  <div style={{ marginTop: 'auto' }}>
+                  <div className="mt-auto" style={{ overflowX: 'clip' }}>
+                    <BigProjectTeaser
+                      className="pt3"
+                      totalContributors={project.totalContributors}
+                      lastUpdated={project.lastUpdated}
+                      style={{ margin: '0.5rem 0', fontSize: '14px' }}
+                    />
                     <ProjectProgressBar
                       small={false}
                       className="pb3 bg-white"
@@ -144,7 +150,7 @@ export function CurrentProjects({ currentProjects }) {
                   </div>
                 </section>
               </div>
-              <div style={{ width: '100%', position: 'relative', gridColumn: 'span 2' }}>
+              <div className="w-100 relative" style={{ gridColumn: 'span 2' }}>
                 <TasksMap
                   className="w-100 h-100 m2-l"
                   mapResults={project.tasks}
@@ -165,8 +171,8 @@ export function CurrentProjects({ currentProjects }) {
       )}
 
       <div
-        className="swiper-custom-pagination mt2"
-        style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '0.5rem' }}
+        className="swiper-custom-pagination mt2 w-100 flex justify-center"
+        style={{ gap: '0.5rem' }}
       />
     </ReactPlaceholder>
   );

frontend/src/components/partners/messages.js

@@ -43,15 +43,15 @@ export default defineMessages({
   },
   buildingsStats: {
     id: 'management.partners.filter.buildingsStats',
-    defaultMessage: 'Building Edits',
+    defaultMessage: 'Buildings mapped',
   },
   contributors: {
     id: 'management.partners.contributors',
     defaultMessage: 'Contributors',
   },
   roadsStats: {
     id: 'management.partners.filter.roadsStats',
-    defaultMessage: 'km of Roads',
+    defaultMessage: 'Km road mapped',
   },
   editsStats: {
     id: 'management.partners.filter.editsStats',
@@ -63,15 +63,15 @@ export default defineMessages({
   },
   edits: {
     id: 'management.partners.activity.edits',
-    defaultMessage: 'Edits',
+    defaultMessage: 'Total Map Edits',
   },
   buildings: {
     id: 'management.partners.activity.buildings',
-    defaultMessage: 'Buildings mapped',
+    defaultMessage: 'Buildings Mapped',
   },
   roads: {
     id: 'management.partners.activity.roads',
-    defaultMessage: 'km of Roads Added',
+    defaultMessage: 'km of Roads Mapped',
   },
   users: {
     id: 'management.partners.activity.users',

frontend/src/components/partners/partners.js

@@ -41,7 +41,7 @@ export function PartnersManagement({ partners, isAdmin, isPartnersFetched }) {
         delay={10}
         ready={isPartnersFetched}
       >
-        <div style={{ marginBottom: '0.5rem' }} className="w-20-l w-25-m ">
+        <div className="w-20-l w-25-m mb2">
           <TextField
             value={searchQuery}
             placeholderMsg={messages.searchPartners}
@@ -71,47 +71,31 @@ export function PartnersManagement({ partners, isAdmin, isPartnersFetched }) {
 
 export function PartnersCard({ details }) {
   return (
-    <div
-      className="card"
-      style={{
-        backgroundColor: '#ffffff',
-        color: '#002366',
-        padding: '1rem',
-        borderRadius: '0.25rem',
-        border: '1px solid #cbd5e0',
-        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-        display: 'flex',
-        flexWrap: 'wrap',
-      }}
-    >
-      <div style={{ flex: '2 1 100%', textAlign: 'center' }}>
-        <div className="h3">
+    <div className="bg-white flex flex-column items-center pa4 justify-between shadow-4">
+      <div className="flex flex-column items-center">
+        <div className="h2">
           {details.logo_url && (
-            <img src={details.logo_url} alt={`${details.name} logo`} className="h2 mt2" />
+            <img src={details.logo_url} alt={`${details.name} logo`} className="h2" />
           )}
         </div>
-        <div>
-          <h3 className="barlow-condensed ttu f3 mb2 mt2 truncate" lang="en">
-            {details.name}
-          </h3>
-          <h4 className="ttu blue-grey f6">
-            {details?.primary_hashtag?.split(',')?.slice(0, 2)?.join(',')}
-          </h4>
-        </div>
+        <h3 className="barlow-condensed ttu f3 truncate" lang="en">
+          {details.name}
+        </h3>
+        <h4 className="ttu blue-grey f6 card-text-ellipsis ma0 tc" title={details?.primary_hashtag}>
+          {details?.primary_hashtag}
+        </h4>
       </div>
 
-      <div style={{ flex: '1 1 100%', textAlign: 'center', paddingTop: '1rem' }}>
-        <Link to={`${details.id}/`} style={{ textDecoration: 'none', flex: 1 }}>
+      <div className="flex flex-column items-center" style={{ gap: '1.2rem' }}>
+        <Link to={`${details.id}/`}>
           <CustomButton
             className="bg-red ba b--red white pv2 ph3"
             icon={<EditIcon className="h1 v-mid" />}
           >
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-      </div>
-      <div style={{ flex: '1 1 100%', textAlign: 'center', paddingTop: '1rem' }}>
-        <Link to={`/partners/${details.permalink}/stats/`} style={{ textDecoration: 'none' }}>
+        <Link to={`/partners/${details.permalink}/stats/`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"
@@ -156,13 +140,17 @@ export function PartnersForm(props) {
               </form>
               {props.errorMessage && (
                 <div className="mt2">
-                  <Alert type="error" compact>
-                    {props.errorMessage ? (
-                      <span>{props.errorMessage}</span>
-                    ) : (
-                      <FormattedMessage {...viewsMessages[`errorFallback`]} />
-                    )}
-                  </Alert>
+                  {props.errorMessage && (
+                    <Alert type="error" compact>
+                      {viewsMessages[`partnerEdit${props.errorMessage}Error`] ? (
+                        <FormattedMessage
+                          {...viewsMessages[`partnerEdit${props.errorMessage}Error`]}
+                        />
+                      ) : (
+                        <FormattedMessage {...viewsMessages[`errorFallback`]} />
+                      )}
+                    </Alert>
+                  )}
                 </div>
               )}
             </div>

frontend/src/components/partners/partnersActivity.js

@@ -18,9 +18,9 @@ export const Activity = ({ partner }) => {
       primaryHashtag = primaryHashtag.toLowerCase();
 
       const secondaryHashtags = partner.secondary_hashtag
-        .split(',')
-        .map((tag) => tag.trim().replace('#', '').toLowerCase())
-        .join(',');
+        ?.split(',')
+        ?.map((tag) => tag.trim().replace('#', '').toLowerCase())
+        ?.join(',');
       const response = await fetch(
         OHSOME_STATS_BASE_URL + `/stats/hashtags/${primaryHashtag},${secondaryHashtags}`,
       );
@@ -56,7 +56,13 @@ export const Activity = ({ partner }) => {
       });
     });
 
-    const formattedData = Object.entries(groupedData).map(([action, values]) => ({
+    const sortedData = {
+      edits: groupedData.edits,
+      buildings: groupedData.buildings,
+      roads: groupedData.roads,
+    };
+
+    const formattedData = Object.entries(sortedData).map(([action, values]) => ({
       label: action,
       data: sortBySecondaryDescending(values),
     }));
@@ -86,27 +92,17 @@ export const Activity = ({ partner }) => {
             );
             return (
               <div key={series.label} className="pa3 shadow-4 bg-white">
-                <div
-                  className="flex space-between"
-                  style={{
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    borderBottom: '1px solid grey',
-                  }}
-                >
-                  <p>Team</p>
+                <div className="flex justify-between items-center bb b--silver">
+                  <p className="silver">Team</p>
                   <h3 className="f3 fw6 ttu barlow-condensed blue-dark mv1">
                     <FormattedMessage {...messages[series.label]} />
                   </h3>
                 </div>
                 <div
-                  className="flex flex-column"
+                  className="flex flex-column overflow-y-auto overflow-x-hidden mt2"
                   style={{
                     maxHeight: '380px',
-                    overflowY: 'auto',
-                    overflowX: 'hidden',
                     gap: '1rem',
-                    marginTop: '1rem',
                   }}
                 >
                   {series.data.map((dataItem) => (

frontend/src/components/partners/partnersProgresBar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { OHSOME_STATS_BASE_URL } from '../../config';
 
 const height = '1.65rem';
@@ -8,26 +9,21 @@ const ProgressBar = ({ className, firstBarValue, secondBarValue = 0, children, d
     <div className={`cf db ${className || ''}`}>
       <div className="relative">
         <div
-          className="absolute ph1"
+          className="absolute ph1 flex justify-between items-center w-100 b"
           style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
             height,
             zIndex: 111,
-            width: '100%',
-            fontWeight: '700',
           }}
         >
           <a
             target={'_blank'}
             rel="noreferrer"
-            style={{ textDecoration: 'none', color: 'white' }}
+            className="white no-underline"
             href={OHSOME_STATS_BASE_URL + '/dashboard#hashtags=' + data.primary}
           >
             {'#' + data.primary}{' '}
           </a>
-          <p style={{ color: 'white', margin: 0 }}>{data.secondary}</p>
+          <p className="white ma0">{data.secondary}</p>
         </div>
         <div
           className={`absolute bg-blue-grey br-pill hide-child`}

frontend/src/components/partners/partnersStats.js

@@ -4,6 +4,7 @@ import shortNumber from 'short-number';
 import messages from './messages';
 import { StatsCard } from '../statsCard';
 import { MappingIcon, EditIcon, RoadIcon, HomeIcon } from '../svgIcons';
+import StatsInfoFooter from '../statsInfoFooter';
 
 const iconClass = 'h-50 w-50';
 const iconStyle = { height: '45px' };
@@ -43,31 +44,34 @@ export const StatsColumn = ({ label, value, icon }: Object) => {
 
 export const StatsSection = ({ partner }) => {
   return (
-    <div className="flex justify-between items-center" style={{ gap: '1.6rem' }}>
-      <StatsCard
-        icon={<MappingIcon className={iconClass} style={iconStyle} />}
-        description={<FormattedMessage {...messages.contributors} />}
-        value={partner ? partner.users : '-'}
-        className={'w-25-l w-50-m w-100 mv1'}
-      />
-      <StatsCard
-        icon={<EditIcon className={iconClass} style={iconStyle} />}
-        description={<FormattedMessage {...messages.editsStats} />}
-        value={partner ? partner.edits : '-'}
-        className={'w-25-l w-50-m w-100 mv1'}
-      />
-      <StatsCard
-        icon={<HomeIcon className={iconClass} style={iconStyle} />}
-        description={<FormattedMessage {...messages.buildingsStats} />}
-        value={partner ? partner.buildings : '-'}
-        className={'w-25-l w-50-m w-100 mv1'}
-      />
-      <StatsCard
-        icon={<RoadIcon className={iconClass} style={iconStyle} />}
-        description={<FormattedMessage {...messages.roadsStats} />}
-        value={partner ? partner.roads : '-'}
-        className={'w-25-l w-50-m w-100 mv1'}
-      />
+    <div className="mb2">
+      <div className="flex justify-between items-center" style={{ gap: '1.6rem' }}>
+        <StatsCard
+          icon={<MappingIcon className={iconClass} style={iconStyle} />}
+          description={<FormattedMessage {...messages.contributors} />}
+          value={partner ? partner.users : '-'}
+          className={'w-25-l w-50-m w-100 mv1'}
+        />
+        <StatsCard
+          icon={<EditIcon className={iconClass} style={iconStyle} />}
+          description={<FormattedMessage {...messages.editsStats} />}
+          value={partner ? partner.edits : '-'}
+          className={'w-25-l w-50-m w-100 mv1'}
+        />
+        <StatsCard
+          icon={<HomeIcon className={iconClass} style={iconStyle} />}
+          description={<FormattedMessage {...messages.buildingsStats} />}
+          value={partner ? partner.buildings : '-'}
+          className={'w-25-l w-50-m w-100 mv1'}
+        />
+        <StatsCard
+          icon={<RoadIcon className={iconClass} style={iconStyle} />}
+          description={<FormattedMessage {...messages.roadsStats} />}
+          value={partner ? partner.roads : '-'}
+          className={'w-25-l w-50-m w-100 mv1'}
+        />
+      </div>
+      <StatsInfoFooter />
     </div>
   );
 };