Skip to content

Commit

Permalink
Numbers from API (#338)
Browse files Browse the repository at this point in the history 
Co-authored-by: Hugo Marques <[email protected]>
  • Loading branch information
@hugomarquesdev
hugomarquesdev and Hugo Marques authored Jul 17, 2023
1 parent 5eac295 commit 3f73911
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 39 deletions.
26 changes: 19 additions & 7 deletions src/apis/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,19 @@ export const dashboard: { [key: string]: Function } = {
getAvgCumulativeUbi: (data: IGlobalDashboard, t: Function) => ({
prefix: '~',
suffix: `/${t('beneficiary')}`,
value: currencyValue(humanifyNumber(data?.monthly?.[0]?.avgComulativeUbi), { decimals: false, symbol: '$' })
value: currencyValue(
humanifyNumber(data?.monthly?.[0]?.avgComulativeUbi),
{ decimals: false, symbol: '$' }
)
}),

getAvgUbiDuration: (data: IGlobalDashboard, t: Function) => ({
prefix: '~',
suffix: `${t('months')} / ${t('beneficiary')}`,
value: numericalValue(data?.monthly?.[0]?.avgUbiDuration.toString(), false)
value: numericalValue(
data?.monthly?.[0]?.avgUbiDuration?.toString(),
false
)
}),

getBackers: (data: IGlobalDashboard) => ({
Expand All @@ -24,8 +30,14 @@ export const dashboard: { [key: string]: Function } = {
value: numericalValue(data?.general?.beneficiaries)
}),

getHelper: (helper: string, data: IGlobalDashboard, t: Function): Function => {
const method: string = `get${`${helper.charAt(0).toUpperCase()}${helper.slice(1)}`}`;
getHelper: (
helper: string,
data: IGlobalDashboard,
t: Function
): Function => {
const method: string = `get${`${helper
.charAt(0)
.toUpperCase()}${helper.slice(1)}`}`;

const helperFunction: any = dashboard[method];

Expand All @@ -39,17 +51,17 @@ export const dashboard: { [key: string]: Function } = {
getRatePerBacker: (data: IGlobalDashboard, t: Function) => ({
prefix: '~',
suffix: `/${t('day')}`,
value: currencyValue(data?.monthly?.[0]?.givingRate.toString())
value: currencyValue(data?.monthly?.[0]?.givingRate?.toString())
}),

getRatePerBeneficiary: (data: IGlobalDashboard, t: Function) => ({
prefix: '~',
suffix: `/${t('day')}`,
value: currencyValue(data?.monthly?.[0]?.ubiRate.toString())
value: currencyValue(data?.monthly?.[0]?.ubiRate?.toString())
}),

getReach: (data: IGlobalDashboard) => ({
value: numericalValue(data?.monthly?.[0]?.totalReach.toString())
value: numericalValue(data?.monthly?.[0]?.totalReach?.toString())
}),

getSpendingRate: () => ({
Expand Down
45 changes: 45 additions & 0 deletions src/helpers/formatData.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
export const formatData = (numbers: object, format: boolean) => {
function addCommas(number: string | number) {
const parts = number.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
}

function formatNumber(number: number, format: boolean) {
if (format) {
if (number >= 1000000) {
return addCommas((number / 1000000).toFixed(1)) + 'M';
} else if (number >= 1000) {
return addCommas((number / 1000).toFixed(0)) + 'k';
}
}

const decimalPart =
number % 1 !== 0 ? number.toFixed(3).split('.')[1] : '';
const formattedNumber = decimalPart
? number.toFixed(3)
: number.toFixed(0);
return addCommas(formattedNumber);
}

let formattedData = null;

if (numbers) {
formattedData = {};

Object.entries(numbers).forEach(([key, value]) => {
if (typeof value === 'string' && value.includes('$')) {
formattedData[key] = value; // Return the value as is if it contains "$"
} else {
const number = parseFloat(value as string);
if (Number.isNaN(number)) {
formattedData[key] = value; // Return the value as is if it's not a number
} else {
formattedData[key] = formatNumber(number, format);
}
}
});
}

return formattedData;
};
20 changes: 18 additions & 2 deletions src/page-components/Homepage/Homepage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { usePrismicData } from '../../lib/Prismic/components/PrismicDataProvider
import PromotionalBanner from './PromotionalBanner/PromotionBanner';
import React, { useEffect, useState } from 'react';
import Slices from '../../lib/Prismic/components/Slices';
import { formatData } from '../../helpers/formatData';

import { CommunityMetricsProvider } from '../../components/CommunityMetricsProvider/CommunityMetricsProvider';
import Api from '../../apis/api';
Expand All @@ -16,15 +17,30 @@ export const Homepage = () => {
const getNumbers = async () => {
try {
const numbers = (await Api.getGlobalNumbers()) as any;
const microcredit = (await Api.getMicrocreditData()) as any;
const global = (await Api.getGlobalValues()) as any;

setNumbers(numbers);
const mergedData = {
...global?.general,
...microcredit?.data,
...numbers
};

const numbersFromAPI = slices.find((item: any) =>
item.sliceType.includes('numbers_from_api')
);
const formatNumbers = numbersFromAPI?.primary?.formatNumbers;

const format = formatData(mergedData, formatNumbers);

setNumbers(format);
} catch (error) {
console.log(error);
}
};

getNumbers();
}, []);
}, [slices]);

return (
<CommunityMetricsProvider metrics={numbers}>
Expand Down
20 changes: 18 additions & 2 deletions src/page-components/Ubi/Ubi.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Slices from '../../lib/Prismic/components/Slices';

import { CommunityMetricsProvider } from '../../components/CommunityMetricsProvider/CommunityMetricsProvider';
import Api from '../../apis/api';
import { formatData } from '../../helpers/formatData';

export const Ubi = () => {
const { page } = usePrismicData();
Expand All @@ -15,15 +16,30 @@ export const Ubi = () => {
const getNumbers = async () => {
try {
const numbers = (await Api.getGlobalNumbers()) as any;
const microcredit = (await Api.getMicrocreditData()) as any;
const global = (await Api.getGlobalValues()) as any;

setNumbers(numbers);
const mergedData = {
...global?.general,
...microcredit?.data,
...numbers
};

const numbersFromAPI = slices.find((item: any) =>
item.sliceType.includes('numbers_from_api')
);
const formatNumbers = numbersFromAPI?.primary?.formatNumbers;

const format = formatData(mergedData, formatNumbers);

setNumbers(format);
} catch (error) {
console.log(error);
}
};

getNumbers();
}, []);
}, [slices]);

return (
<CommunityMetricsProvider metrics={numbers}>
Expand Down
88 changes: 60 additions & 28 deletions src/slices/NumbersFromApi.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Button, Col, Div, Grid, Row, Section, Text } from '../theme/components';
import {
Button,
Col,
Div,
Grid,
Row,
Section,
Text
} from '../theme/components';
import { PrismicRichTextType } from '../lib/Prismic/types';
import { colors } from '../theme';
import { mq } from 'styled-gen';
Expand All @@ -10,8 +18,10 @@ import { useData } from '../components/CommunityMetricsProvider/CommunityMetrics

type NumbersFromApiSliceType = {
items: {
helperName?: string;
helperNameDropdown?: string;
label?: string;
prefix?: string;
suffix?: string;
}[];
primary: {
content?: PrismicRichTextType;
Expand All @@ -33,7 +43,7 @@ const Heading = styled(Row)`

const Box = styled(Row)<{ columns: number }>`
display: grid;
grid-template-columns: ${props => `repeat(${props.columns}, auto)`};
grid-template-columns: ${(props) => `repeat(${props.columns}, auto)`};
gap: 2rem 0;
${mq.upTo(
Expand Down Expand Up @@ -68,12 +78,14 @@ export const NumbersFromApi = (props: NumbersFromApiSliceType) => {
const { items, primary } = props;
const { content, ctaLabel, ctaUrl, heading, id, smallHeading } = primary;
const metrics = useData();
const metricsLength = metrics ? Object.keys(metrics).length : 0;
const itemsLength = items ? items?.length : 0;

// Send to component X if url has hash
useEffect(() => {
if (document.getElementById(location.hash.slice(1))) {
document.getElementById(location.hash.slice(1)).scrollIntoView({ block: 'center' });
document
.getElementById(location.hash.slice(1))
.scrollIntoView({ block: 'center' });
}
}, [location.hash]);

Expand All @@ -91,7 +103,12 @@ export const NumbersFromApi = (props: NumbersFromApiSliceType) => {
{(heading || content || smallHeading) && (
<Heading>
{smallHeading && (
<Text mb={1} sColor={colors.p700} sFontSize={1} sFontWeight={600}>
<Text
mb={1}
sColor={colors.p700}
sFontSize={1}
sFontWeight={600}
>
{smallHeading}
</Text>
)}
Expand Down Expand Up @@ -119,28 +136,43 @@ export const NumbersFromApi = (props: NumbersFromApiSliceType) => {
)}
<Row>
<Col center mt={{ md: 4, xs: 3 }} xs={12}>
<Box columns={metricsLength}>
{items.map(({ helperName, label }, index) => (
<Content center column key={index}>
<Text
sColor={colors.brandPrimary}
sFontSize={{ sm: 3.75, xs: 2.75 }}
sFontWeight={600}
sLineHeight={4.5}
>
{metrics?.[helperName] || '--'}
</Text>
<Text
sColor={colors.g900}
sFontSize={1.125}
sFontWeight={500}
sLineHeight={1.75}
style={{ textTransform: 'capitalize' }}
>
{label}
</Text>
</Content>
))}
<Box columns={itemsLength}>
{items.map(
(
{
label,
prefix,
suffix,
helperNameDropdown
},
index
) => (
<Content center column key={index}>
<Text
sColor={colors.brandPrimary}
sFontSize={{ sm: 3.75, xs: 2.75 }}
sFontWeight={600}
sLineHeight={4.5}
>
{prefix}
{metrics?.[helperNameDropdown] ||
'--'}
{suffix}
</Text>
<Text
sColor={colors.g900}
sFontSize={1.125}
sFontWeight={500}
sLineHeight={1.75}
style={{
textTransform: 'capitalize'
}}
>
{label}
</Text>
</Content>
)
)}
</Box>
{!!ctaUrl && (
<Button
Expand Down

1 comment on commit 3f73911

@vercel
Copy link

@vercel vercel bot commented on 3f73911 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web – ./

web-ipct.vercel.app
www.impactmarket.com
web-git-production-ipct.vercel.app
impactmarket.com

Please sign in to comment.