Merge pull request #407 from dadosjusbr/agency-extra-info

Accordion nos títulos das páginas de informações
dadosjusbr · Jul 19, 2023 · d8511f1 · d8511f1
2 parents 031a4f2 + 860654e
commit d8511f1
Show file tree

Hide file tree

Showing 7 changed files with 243 additions and 17 deletions.
diff --git a/src/components/AgencyWithNavigation.tsx b/src/components/AgencyWithNavigation.tsx
@@ -34,10 +34,12 @@ import light from '../styles/theme-light';
 import { formatAgency } from '../functions/format';
 import Drawer from './Drawer';
 import IndexTabGraph from './TransparencyChart/IndexTabChart';
+import MoreInfoAccordion from './MoreInfoAccordion';
 
 export interface AgencyPageWithNavigationProps {
   id: string;
   year: number;
+  mi: SummaryzedMI[];
   agency: Agency;
   title: string;
   setYear: (y: number) => void;
@@ -50,6 +52,7 @@ export interface AgencyPageWithNavigationProps {
 
 const AgencyPageWithNavigation: React.FC<AgencyPageWithNavigationProps> = ({
   id,
+  mi,
   title,
   year,
   agency,
@@ -84,9 +87,22 @@ const AgencyPageWithNavigation: React.FC<AgencyPageWithNavigationProps> = ({
   return (
     <Container fixed>
       <Box>
-        <Typography variant="h2" textAlign="center">
-          {title} ({formatAgency(id.toLocaleUpperCase('pt'))})
-        </Typography>
+        <MoreInfoAccordion
+          ombudsman={agency?.ouvidoria}
+          twitterHandle={agency?.twitter_handle}
+          timestamp={data?.map(d => d.timestamp.seconds).at(-1)}
+          repository={mi[0]?.dados_coleta.repositorio_coletor}
+        >
+          <Typography
+            variant="h2"
+            title="Mais informações sobre o órgão"
+            textAlign="center"
+            width="100%"
+            pb={0}
+          >
+            {title} ({formatAgency(id.toLocaleUpperCase('pt'))})
+          </Typography>
+        </MoreInfoAccordion>
         {agency && agency.coletando && !data ? (
           <></>
         ) : (

diff --git a/src/components/AgencyWithoutNavigation.tsx b/src/components/AgencyWithoutNavigation.tsx
@@ -27,6 +27,7 @@ import ShareModal from './ShareModal';
 import light from '../styles/theme-light';
 import { formatAgency } from '../functions/format';
 import Drawer from './Drawer';
+import MoreInfoAccordion from './MoreInfoAccordion';
 
 const AnnualRemunerationGraph = dynamic(
   () => import('./AnnualRemunerationGraph'),
@@ -43,6 +44,7 @@ const IndexTabGraph = dynamic(
 
 export interface AgencyPageWithoutNavigationProps {
   id: string;
+  agencyTotals: v2AgencyTotalsYear;
   year: number;
   agency: Agency;
   title: string;
@@ -53,17 +55,32 @@ export interface AgencyPageWithoutNavigationProps {
 
 const AgencyPageWithoutNavigation: React.FC<
   AgencyPageWithoutNavigationProps
-> = ({ id, title, year, agency, data, dataLoading, plotData }) => {
+> = ({
+  id,
+  agencyTotals,
+  title,
+  year,
+  agency,
+  data,
+  dataLoading,
+  plotData,
+}) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const matches = useMediaQuery('(max-width:900px)');
   const router = useRouter();
-
   return (
     <Container fixed sx={{ mb: 12 }}>
       <Box>
-        <Typography variant="h2" textAlign="center">
-          {title} ({formatAgency(id.toLocaleUpperCase('pt'))})
-        </Typography>
+        <MoreInfoAccordion
+          ombudsman={agency?.ouvidoria}
+          twitterHandle={agency?.twitter_handle}
+          timestamp={agencyTotals?.meses?.at(-1).timestamp.seconds}
+          repository=""
+        >
+          <Typography variant="h2" textAlign="center" width="100%">
+            {title} ({formatAgency(id.toLocaleUpperCase('pt'))})
+          </Typography>
+        </MoreInfoAccordion>
         {agency && agency.coletando && !agency.possui_dados ? (
           <></>
         ) : (

diff --git a/src/components/MoreInfoAccordion/index.tsx b/src/components/MoreInfoAccordion/index.tsx
@@ -0,0 +1,102 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from '@mui/material';
+import { ExpandMore, Info } from '@mui/icons-material';
+import PublicIcon from '@mui/icons-material/Public';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { useState } from 'react';
+
+type MoreInfoAccordionProps = {
+  children: React.ReactNode;
+  ombudsman: string;
+  twitterHandle: string;
+  timestamp: number;
+  repository: string;
+};
+
+const MoreInfoAccordion = ({
+  children,
+  ombudsman,
+  repository,
+  timestamp,
+  twitterHandle,
+}: MoreInfoAccordionProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+  return (
+    <Accordion elevation={0}>
+      <AccordionSummary
+        onClick={handleClick}
+        expandIcon={open ? <ExpandMore /> : <Info />}
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+      >
+        {children}
+      </AccordionSummary>
+      <AccordionDetails sx={{ pt: 0 }}>
+        <Typography variant="h6" textAlign="center">
+          - Mais informações sobre o órgão -
+        </Typography>
+        <List dense sx={{ display: 'flex', justifyContent: 'center' }}>
+          <ListItem disablePadding sx={{ width: 'fit-content' }}>
+            <ListItemButton
+              href={ombudsman && new URL(ombudsman).origin}
+              target="_blank"
+            >
+              <ListItemIcon>
+                <PublicIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="Portal de transparência"
+                secondary={ombudsman && new URL(ombudsman).hostname}
+              />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding sx={{ width: 'fit-content' }}>
+            <ListItemButton
+              href={twitterHandle ? `https://twitter.com/${twitterHandle}` : ''}
+              target="_blank"
+            >
+              <ListItemIcon>
+                <TwitterIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="Twitter"
+                secondary={twitterHandle ? `@${twitterHandle}` : 'Não possui'}
+              />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding sx={{ width: 'fit-content' }}>
+            <ListItemButton href={repository} target="_blank">
+              <ListItemIcon>
+                <AccessTimeIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="Data da coleta"
+                secondary={
+                  timestamp
+                    ? new Date(1000 * timestamp).toLocaleDateString('pt-BR')
+                    : 'Não Coletado'
+                }
+              />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default MoreInfoAccordion;
diff --git a/src/pages/grupo/[summary].tsx b/src/pages/grupo/[summary].tsx
@@ -153,14 +153,17 @@ const GraphWithNavigation: React.FC<{ id: string; title: string }> = ({
   const [data, setData] = useState<any[]>([]);
   const [year, setYear] = useState(getCurrentYear());
   const [agencyData, setAgencyData] = useState<any>();
+  const [agencyTotals, setAgencyTotals] = useState<v2AgencyTotalsYear>();
   const [dataLoading, setDataLoading] = useState(true);
   const [plotData, setPlotData] = useState<AggregateIndexes[]>([]);
 
   useEffect(() => {
     setDataLoading(true);
-    Promise.all([fetchAgencyData(), fetchPlotData()]).finally(() =>
-      setDataLoading(false),
-    );
+    Promise.all([
+      fetchAgencyData(),
+      fetchPlotData(),
+      fetchAgencyTotalData(),
+    ]).finally(() => setDataLoading(false));
   }, [year]);
   async function fetchAgencyData() {
     try {
@@ -172,7 +175,6 @@ const GraphWithNavigation: React.FC<{ id: string; title: string }> = ({
       console.log(err);
     }
   }
-
   async function fetchPlotData() {
     try {
       const { data: transparencyPlot } = await api.default.get(
@@ -183,10 +185,32 @@ const GraphWithNavigation: React.FC<{ id: string; title: string }> = ({
       console.log(err);
     }
   }
+  const fetchAgencyTotalData = async () => {
+    const currentYear = getCurrentYear();
+    await fetchAgencyTotalDataRecursive(currentYear);
+  };
+
+  const fetchAgencyTotalDataRecursive = async (yearParam: number) => {
+    try {
+      const { data: agencyTotalsResponse } = await api.ui.get(
+        `/v2/orgao/totais/${id}/${year}`,
+      );
+
+      if (agencyTotalsResponse.meses) {
+        setAgencyTotals(agencyTotalsResponse);
+      } else {
+        const previousYear = yearParam - 1;
+        await fetchAgencyTotalDataRecursive(previousYear);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
   return (
     <div id={id}>
       <AgencyWithoutNavigation
         data={data}
+        agencyTotals={agencyTotals}
         dataLoading={dataLoading}
         id={id}
         title={title}

diff --git a/src/pages/orgao/[agency]/[year]/[month].tsx b/src/pages/orgao/[agency]/[year]/[month].tsx
@@ -23,6 +23,7 @@ import api from '../../../../services/api';
 import OMASummary from '../../../../components/OmaChart';
 import ErrorTable from '../../../../components/ErrorTable';
 import MonthPopover from '../../../../components/MonthPopover';
+import MoreInfoAccordion from '../../../../components/MoreInfoAccordion';
 
 function UnixToHumanDate(unix) {
   const d = new Date(unix * 1000);
@@ -48,6 +49,7 @@ export default function OmaPage({
 }) {
   const [chartData, setChartData] = useState<AgencyRemuneration>();
   const [loading, setLoading] = useState(true);
+  const [agencyInfo, setAgencyInfo] = useState<Agency>();
   function getNextDate() {
     let m = +month;
     let y = +year;
@@ -78,7 +80,7 @@ export default function OmaPage({
   useEffect(() => {
     // then it checks the next and the previous year to block the navigation buttons or to help to choose the right year
     // finally it fetchs the data from the api to fill the chart with the agency/month/year data
-    fetchChartData();
+    Promise.all([fetchChartData(), fetchAgencyInfo()]);
   }, [year, month]);
   async function fetchChartData() {
     try {
@@ -94,6 +96,17 @@ export default function OmaPage({
       setLoading(false);
     }
   }
+  async function fetchAgencyInfo() {
+    try {
+      const { data: agencyObj }: { data: Agency } = await api.default.get(
+        `orgao/${agency}`,
+      );
+      setAgencyInfo(agencyObj);
+    } catch (error) {
+      console.log(error);
+      router.push('/404');
+    }
+  }
   function handleNavigateToNextSummaryOption() {
     const { m, y } = getNextDate();
     setLoading(true);
@@ -126,10 +139,23 @@ export default function OmaPage({
       <Header />
       <Container fixed>
         <Box py={4}>
-          <Typography variant="h2" textAlign="center">
-            {oma ? oma?.orgao : 'Coleta não realizada!'} (
-            {agency.toLocaleUpperCase('pt')})
-          </Typography>
+          <MoreInfoAccordion
+            ombudsman={agencyInfo?.ouvidoria}
+            timestamp={oma?.timestamp.seconds}
+            twitterHandle={agencyInfo?.twitter_handle}
+            repository={mi?.dados_coleta.repositorio_coletor}
+          >
+            <Typography
+              variant="h2"
+              title="Mais informações sobre o órgão"
+              textAlign="center"
+              width="100%"
+              pb={0}
+            >
+              {oma ? oma?.orgao : 'Coleta não realizada!'} (
+              {agency.toLocaleUpperCase('pt')})
+            </Typography>
+          </MoreInfoAccordion>
           <Grid container justifyContent="center" alignItems="center">
             <Grid item>
               <IconButton

diff --git a/src/pages/orgao/[agency]/[year]/index.tsx b/src/pages/orgao/[agency]/[year]/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Head from 'next/head';
 import { GetServerSideProps } from 'next';
@@ -27,11 +28,25 @@ export default function AgencyPage({
   summaryPackage: Backup;
   plotData: AggregateIndexes[];
 }) {
+  const [MI, setMI] = useState<SummaryzedMI[]>([]);
   const router = useRouter();
   function navigateToGivenYear(y: number) {
     router.push(`/orgao/${id}/${y}`);
   }
   const pageTitle = `${id.toUpperCase()} - ${year}`;
+
+  useEffect(() => {
+    fetchMIData();
+  }, []);
+  const fetchMIData = async () => {
+    try {
+      const { data: mi } = await api.default.get(`/dados/${id}/${year}`);
+      setMI(mi);
+    } catch (error) {
+      console.log(error);
+      router.push(`/404`);
+    }
+  };
   return (
     <Page>
       <Head>
@@ -51,6 +66,7 @@ export default function AgencyPage({
         <AgencyWithNavigation
           data={data}
           id={id}
+          mi={MI}
           year={year}
           agency={agency}
           dataLoading={false}