Microcredit Dashboard Page (#313)

Co-authored-by: Hugo Marques <[email protected]>

src/apis/api.ts

@@ -13,6 +13,7 @@ import {
     IGlobalDashboard,
     IGlobalNumbers,
     IManager,
+    IMicrocredit,
     IStories
 } from './types';
 import { Numbers } from 'humanify-numbers';
@@ -151,6 +152,12 @@ export default class Api {
             general: ubiDailyEntityZero.data.ubidailyEntity
         };
     }
+    static async getMicrocreditData(): Promise<IMicrocredit[]> {
+        const result = await getRequest<IMicrocredit[]>('/protocol/microcredit');
+
+        return result ? result : [];
+    }
+
     static async getPendingCommunities(requestOptions: CommunityListRequestArguments): Promise<any> {
         const params = ['country', 'extended', 'filter', 'limit', 'name', 'offset', 'orderBy'];
         const baseOptions = { extended: false, limit: 4, orderBy: 'bigger', page: 1 };

src/apis/types.ts

@@ -38,6 +38,26 @@ export interface IClaimLocation {
     gps: IClaimLocationGps;
 }
 
+export interface IMicrocreditData {
+    totalApplications: number;
+    inReview: number;
+    estimatedMaturity: number;
+    avgBorrowedAmount: number;
+    apr: number;
+    totalBorrowed: number;
+    currentDebt: number;
+    paidBack: number;
+    earnedInterest: number;
+    activeBorrowers: number;
+    totalDebitsRepaid: number;
+    liquidityAvailable: number;
+}
+
+export interface IMicrocredit {
+    data: IMicrocreditData[];
+    success: boolean;
+}
+
 export interface IStory {
     storyMediaPath: string;
 }

src/components/MicrocreditDashboardProvider/MicrocreditDashboardProvider.tsx

@@ -0,0 +1,54 @@
+import React, { createContext } from 'react';
+
+const initialData: {
+    data?: {
+        [key: string]: number;
+    };
+} = {
+    data: {
+        activeBorrowers: 0,
+        apr: 0,
+        avgBorrowedAmount: 0,
+        currentDebt: 0,
+        earnedInterest: 0,
+        estimatedMaturity: 0,
+        inReview: 0,
+        liquidityAvailable: 0,
+        paidBack: 0,
+        totalApplicants: 0,
+        totalBorrowed: 0,
+        totalDebitsRepaid: 0
+    }
+};
+
+export const MicrocreditDashboardContext = createContext(initialData);
+
+type ProviderProps = {
+    children?: any;
+    data: {
+        activeBorrowers: number;
+        apr: number;
+        avgBorrowedAmount: number;
+        currentDebt: number;
+        earnedInterest: number;
+        estimatedMaturity: number;
+        inReview: number;
+        liquidityAvailable: number;
+        paidBack: number;
+        totalApplicants: number;
+        totalBorrowed: number;
+        totalDebtisRepaid: number;
+    };
+};
+
+export const MicrocreditDashboardProvider = ({ children, data }: ProviderProps) => {
+    return <MicrocreditDashboardContext.Provider value={{ data }}>{children}</MicrocreditDashboardContext.Provider>;
+};
+
+export const useData = () => {
+    const { data } = React.useContext(MicrocreditDashboardContext);
+
+    return data;
+};
+
+export const MicrocreditDashboardConsumer = MicrocreditDashboardContext.Consumer;

src/page-components/Microcredit/Dashboard.tsx

@@ -0,0 +1,65 @@
+import { Div, Row, Text } from '../../theme/components';
+import { MicrocreditDashboardProvider } from '../../components/MicrocreditDashboardProvider/MicrocreditDashboardProvider';
+import { colors } from '../../theme';
+import { usePrismicData } from '../../lib/Prismic/components/PrismicDataProvider';
+import Api from '../../apis/api';
+import React, { useEffect, useState } from 'react';
+import Slices from '../../lib/Prismic/components/Slices';
+import styled from 'styled-components';
+
+const HeadingRow = styled(Row)`
+    align-items: center;
+    flex-direction: column;
+    max-width: 800px;
+    text-align: center;
+    margin: 2rem auto 0 auto;
+`;
+
+export const MicrocreditDashboard = () => {
+    const { page } = usePrismicData();
+    const slices = page?.data?.body;
+    const { heading, smallHeading } = page?.data;
+    const [microcreditData, setMicrocreditData] = useState() as any;
+
+    useEffect(() => {
+        const getMicrocredit = async () => {
+            const microcreditData = await Api.getMicrocreditData();
+
+            setMicrocreditData(microcreditData);
+        };
+
+        getMicrocredit();
+    }, []);
+
+    return (
+        <MicrocreditDashboardProvider data={microcreditData?.data}>
+            <Div sFlexDirection="column" style={{ backgroundColor: colors.p25 }}>
+                <HeadingRow>
+                    {smallHeading && (
+                        <Text sColor={colors.p700} sFontWeight={600}>
+                            {smallHeading}
+                        </Text>
+                    )}
+                    {heading && (
+                        <Text
+                            mt={0.75}
+                            sColor={colors.g900}
+                            sFontSize={{
+                                md: 3,
+                                xs: 2
+                            }}
+                            sFontWeight={600}
+                            sLineHeight={{
+                                md: 2.75,
+                                xs: 2.5
+                            }}
+                        >
+                            {heading}
+                        </Text>
+                    )}
+                </HeadingRow>
+                <Slices slices={slices} />
+            </Div>
+        </MicrocreditDashboardProvider>
+    );
+};

src/page-components/Microcredit/Microcredit.tsx

@@ -0,0 +1,10 @@
+import { usePrismicData } from '../../lib/Prismic/components/PrismicDataProvider';
+import React from 'react';
+import Slices from '../../lib/Prismic/components/Slices';
+
+export const Microcredit = () => {
+    const { page } = usePrismicData();
+    const slices = page?.data?.body;
+
+    return <Slices slices={slices} />;
+};

src/page-components/Ubi/Dashboard/ChartGroups/ChartGroups.tsx

@@ -0,0 +1,31 @@
+import { GlobalDashboardChartGroup } from './GlobalDashboardChartGroup';
+import { IGlobalDashboard } from '../../../../apis/types';
+import React from 'react';
+
+type ChartGroupsProps = {
+    data?: IGlobalDashboard;
+    items?: {
+        [key: string]: {
+            charts: any[];
+        };
+    };
+};
+
+export const ChartGroups = (props: ChartGroupsProps) => {
+    const { data, items } = props;
+    const chartGroups = ['distribution', 'fundraising', 'economic'];
+
+    return (
+        <>
+            {chartGroups.map((name, index) => (
+                <GlobalDashboardChartGroup
+                    data={data}
+                    key={index}
+                    name={name}
+                    pb={index + 1 === chartGroups.length ? { sm: 4, xs: 2 } : 0}
+                    {...items[name]}
+                />
+            ))}
+        </>
+    );
+};

src/page-components/Ubi/Dashboard/ChartGroups/GlobalDashboardChartGroup.tsx

@@ -0,0 +1,42 @@
+import { DashboardChartGroup } from '../../../../components';
+import { IGlobalDashboard } from '../../../../apis/types';
+import { distribution } from '../../../../apis/distribution';
+import { economic } from '../../../../apis/economic';
+import { fundraising } from '../../../../apis/fundraising';
+import { useTranslation } from '../../../../components/TranslationProvider/TranslationProvider';
+import React from 'react';
+
+const api: { [key: string]: any } = {
+    distribution,
+    economic,
+    fundraising
+};
+
+type GlobalDashboardChartGroupProps = {
+    data?: IGlobalDashboard;
+    charts: any[];
+    name: string;
+    pb: object | number;
+};
+
+export const GlobalDashboardChartGroup = (props: GlobalDashboardChartGroupProps) => {
+    const { data, charts, name, ...forwardProps } = props;
+    const { t } = useTranslation();
+
+    const chartsConfig = charts.map(({ labelKey, name: helper }) => {
+        const helperData = api[name][helper] ? api[name][helper](data, t) : {};
+
+        return {
+            ...helperData,
+            heading: t(labelKey || helper)
+        };
+    });
+
+    const composedProps = {
+        ...forwardProps,
+        heading: t(`page.globalDashboard.${name}.heading`),
+        text: t(`page.globalDashboard.${name}.text`)
+    };
+
+    return <DashboardChartGroup charts={chartsConfig} {...composedProps} />;
+};