- saving progress;

src/pages/UserActivity/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty, isNil } from 'ramda';
+import { isEmpty, isNil, pathOr } from 'ramda';
 import { klona } from 'klona';
 
 // store
@@ -23,17 +23,57 @@ import { classNames } from 'primereact/utils';
 import { Toast } from 'primereact/toast';
 import getDateFromISOstring from '../../helpers/getDateFromISOstring';
 import getBandoLabel from '../../helpers/getBandoLabel';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+import NumberFlow from '@number-flow/react';
 
 const UserActivity = () => {
     const [loading, setLoading] = useState(false);
     const toast = useRef(null);
     const navigate = useNavigate();
+    const { id } = useParams();
+    const [user, setUser] = useState({});
+    const [roles, setRoles] = useState([]);
 
     const goBack = () => {
         navigate(`/utenti`);
     }
 
+    const getUserCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setUser(resp.data)
+        }
+        setLoading(false);
+    }
+
+    const errGetUserCallback = (resp) => {
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const getRolesCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setRoles(resp.data)
+        }
+        setLoading(false);
+    }
+
+    const errGetRolesCallback = (resp) => {
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const getStatValue = (key, fallback = 0) => {
+        return pathOr(fallback, [key], {});
+    }
+
+    useEffect(() => {
+        if (id && !isEmpty(id)) {
+            setLoading(true);
+            UserService.getUser(id, getUserCallback, errGetUserCallback);
+            UserService.getRoles(getRolesCallback, errGetRolesCallback);
+        }
+    }, [id])
+
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -56,29 +96,56 @@ const UserActivity = () => {
             <div className="appPageSection__withBorder columns">
                 <p className="appPageSection__pMeta">
                     <span>{__('Nome utente', 'gepafin')}</span>
-                    <span></span>
+                    <span>{`${user.firstName} ${user.lastName}`}</span>
                 </p>
                 <p className="appPageSection__pMeta">
                     <span>{__('Email', 'gepafin')}</span>
-                    <span></span>
+                    <span>{user.email}</span>
                 </p>
                 <p className="appPageSection__pMeta">
                     <span>{__('Ruolo', 'gepafin')}</span>
-                    <span></span>
+                    <span>{user.role?.roleName}</span>
                 </p>
                 <p className="appPageSection__pMeta">
                     <span>{__('Data registrazione', 'gepafin')}</span>
-                    <span></span>
+                    <span>{getDateFromISOstring(user.createdDate)}</span>
                 </p>
                 <p className="appPageSection__pMeta">
                     <span>{__('Ultimo accesso', 'gepafin')}</span>
-                    <span></span>
+                    <span>{getDateFromISOstring(user.lastLogin)}</span>
                 </p>
                 <p className="appPageSection__pMeta">
                     <span>{__('Stato account', 'gepafin')}</span>
-                    <span></span>
+                    <span>{user.status}</span>
                 </p>
             </div>
+
+            <div className="appPageSection">
+                <h2>{__('Statistiche attività', 'gepafin')}</h2>
+                <div className="statsBigBadges__grid">
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Login totali', 'gepafin')}</span>
+                        <span>{<NumberFlow
+                            value={getStatValue('numberOfActiveCalls', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/>}</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Bandi gestiti', 'gepafin')}</span>
+                        <span>{<NumberFlow
+                            value={getStatValue('numberOfActiveCalls', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/>}</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Documenti da integrare', 'gepafin')}</span>
+                        <span>{<NumberFlow
+                            value={getStatValue('numberOfActiveCalls', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/>}</span>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }