From b18498c19979b0e3014e13a1229cddfe557e31bd Mon Sep 17 00:00:00 2001 From: SamuraX Date: Fri, 29 Sep 2023 23:00:25 -0300 Subject: [PATCH 1/5] perf: make speeches and cabinet info request client sided' -m 'make speeches and cabinet info request client sided to decrease the bundle size of the /deputado-federal/[name], thus, decreasing it's loading time. --- pages/deputado-federal/[name].js | 57 ++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/pages/deputado-federal/[name].js b/pages/deputado-federal/[name].js index f6d163a..39cfd51 100644 --- a/pages/deputado-federal/[name].js +++ b/pages/deputado-federal/[name].js @@ -60,26 +60,6 @@ export async function getServerSideProps(ctx) { const politician = await api.get(`/deputados/${id}`); const experience = await api.get(`/deputados/${id}/ocupacoes`); - //get videos - try { - const speeches = await axios.get( - `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${name}.json`, - ); - data = { ...data, speeches: speeches?.data ? speeches?.data : [] }; - } catch (error) { - console.log("fail to get videos"); - } - - //get gabinete - try { - const gabinete = await axios.get( - `https://pub-bfddf9199db94ff8b19b7d931e548c52.r2.dev/${name}.json`, - ); - data = { ...data, gabinete: gabinete?.data ? gabinete?.data : [] }; - } catch (error) { - console.log("fail to get gabinete"); - } - if (data?.speeches?.length > 0) { fetchVideos(data?.speeches); try { @@ -184,10 +164,10 @@ ${total} em ${seoDates.month} de ${ title: title, }; - return { props: { data } }; + return { props: { data, routeParam: name } }; } -export default function FederalDeputy({ data }) { +export default function FederalDeputy({ data, routeParam }) { const router = useRouter(); const [isLoading, setIsLoading] = useState(true); @@ -196,6 +176,7 @@ export default function FederalDeputy({ data }) { fullMonth: "", year: "", }); + const [selectTab, setSelectedTab] = useState("gastos"); const { isOpen, onOpen, onOpenChange } = useDisclosure(); @@ -206,7 +187,30 @@ export default function FederalDeputy({ data }) { }, [router.events]); useEffect(() => { router.isReady && setIsLoading(false); - }, []); + + (async () => { + //get videos + try { + const speeches = await axios.get( + `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, + ); + console.log("SPEECHES", speeches.data); + // data = { ...data, speeches: speeches?.data ? speeches?.data : [] }; + } catch (error) { + console.log("fail to get videos"); + } + + // get gabinete (Adjust CORS policy from R2) + try { + const gabinete = await axios.get( + `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, + ); + // data = { ...data, gabinete: gabinete?.data ? gabinete?.data : [] }; + } catch (error) { + console.log("fail to get gabinete"); + } + })(); + }, [routeParam]); const handleOpenExpense = (document) => { onOpen(); @@ -357,10 +361,13 @@ export default function FederalDeputy({ data }) { )} - {(!isLoading && data?.expenses?.length > 0) && ( + {!isLoading && data?.expenses?.length > 0 && ( - + )} From 57c009720a89fd6d2caa35334acd178422d8ca3d Mon Sep 17 00:00:00 2001 From: SamuraX Date: Sat, 30 Sep 2023 09:34:01 -0300 Subject: [PATCH 2/5] perf: add loading screen and error handling to speeches and cabinet --- pages/deputado-federal/[name].js | 252 +++++++++++++++++++------------ 1 file changed, 156 insertions(+), 96 deletions(-) diff --git a/pages/deputado-federal/[name].js b/pages/deputado-federal/[name].js index 39cfd51..a82822a 100644 --- a/pages/deputado-federal/[name].js +++ b/pages/deputado-federal/[name].js @@ -77,7 +77,7 @@ export async function getServerSideProps(ctx) { events: events.data, }; } catch (error) { - console.log("fail to get the documents"); + console.error("fail to get the documents"); } } @@ -169,7 +169,6 @@ ${total} em ${seoDates.month} de ${ export default function FederalDeputy({ data, routeParam }) { const router = useRouter(); - const [isLoading, setIsLoading] = useState(true); const [currentDate, setCurrentDate] = useState({ numericMonth: "", @@ -177,37 +176,57 @@ export default function FederalDeputy({ data, routeParam }) { year: "", }); - const [selectTab, setSelectedTab] = useState("gastos"); + const [selectTab, setSelectedTab] = useState("videos"); const { isOpen, onOpen, onOpenChange } = useDisclosure(); const [openDocument, setOpenDocument] = useState(null); + const [isExpensesLoading, setIsExpensesLoading] = useState(true); + + const [isSpeechesLoading, setIsSpeechesLoading] = useState(true); + const [speeches, setSpeeches] = useState([]); + const [speechesError, setSpeechesError] = useState(null); + + const [isGabineteLoading, setIsGabineteLoading] = useState(true); + const [gabinete, setGabinete] = useState([]); + const [gabineteError, setGabineteError] = useState(null); + useEffect(() => { - router.events.on("routeChangeComplete", () => setIsLoading(false)); + router.events.on("routeChangeComplete", () => setIsExpensesLoading(false)); }, [router.events]); useEffect(() => { - router.isReady && setIsLoading(false); + router.isReady && setIsExpensesLoading(false); + + const requestsPromises = [ + // get videos + axios.get( + `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, + ), + // get gabinete (Adjust CORS policy from R2) + axios.get( + `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, + ), + ]; (async () => { - //get videos - try { - const speeches = await axios.get( - `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, - ); - console.log("SPEECHES", speeches.data); - // data = { ...data, speeches: speeches?.data ? speeches?.data : [] }; - } catch (error) { - console.log("fail to get videos"); + const [speechesResponse, gabineteResponse] = + await Promise.allSettled(requestsPromises); + + setIsSpeechesLoading(false); + setIsGabineteLoading(false); + + if (speechesResponse.status === "rejected") { + setSpeechesError(speechesResponse.reason); + console.error("failed to get speeches videos"); + } else { + setSpeeches(speechesResponse.value.data); } - // get gabinete (Adjust CORS policy from R2) - try { - const gabinete = await axios.get( - `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, - ); - // data = { ...data, gabinete: gabinete?.data ? gabinete?.data : [] }; - } catch (error) { - console.log("fail to get gabinete"); + if (gabineteResponse.status === "rejected") { + setGabineteError(gabineteResponse.reason); + console.error("failed to get cabinet data"); + } else { + setGabinete(gabineteResponse.data); } })(); }, [routeParam]); @@ -220,7 +239,7 @@ export default function FederalDeputy({ data, routeParam }) { }; //testing purposes const handleDateChange = (newDate) => { - setIsLoading(true); + setIsExpensesLoading(true); setCurrentDate(newDate); }; @@ -361,12 +380,12 @@ export default function FederalDeputy({ data, routeParam }) { )} - {!isLoading && data?.expenses?.length > 0 && ( + {!isExpensesLoading && data?.expenses?.length > 0 && ( )} @@ -393,7 +412,7 @@ export default function FederalDeputy({ data, routeParam }) { {data?.expenses?.length > 0 && ( <>
    - {isLoading ? ( + {isExpensesLoading ? (
    - {data?.gabinete?.active_secretaries?.map((secretary) => { - return ( - <> -
    - - Nome:{" "} - - {secretary?.name} -
    -
    - - Grupo funcional: - - {secretary?.group} -
    -
    - - Cargo:{" "} - - {secretary?.role} -
    -
    - - Período de exercício:{" "} - {" "} - {secretary?.period} -
    -
    - - Remuneração mensal:{" "} - - Em breve -
    - - ); - })} + {isGabineteLoading ? ( +
    + +

    + Buscando dados do gabinete do parlamentar, aguarde um momento. +

    +
    + ) : ( + + {gabineteError && ( + + Houve um erro ao buscar dados do gabinete + + )} + {!gabineteError && + gabinete.active_secretaries?.map( + (secretary, index) => { + return ( + +
    + + Nome:{" "} + + {secretary?.name} +
    +
    + + Grupo funcional: + + {secretary?.group} +
    +
    + + Cargo:{" "} + + {secretary?.role} +
    +
    + + Período de exercício:{" "} + {" "} + {secretary?.period} +
    +
    + + Remuneração mensal:{" "} + + Em breve +
    +     + ); + }, + )} +     + )}
    @@ -506,41 +547,60 @@ export default function FederalDeputy({ data, routeParam }) { - {data?.speeches?.length === 0 && ( - <> - - Não existe vídeos para esse parlamentar - - + {speechesError && ( + + Houve um erro ao buscar os vídeos para esse parlamentar + )} - {data?.speeches?.length > 0 && ( - <> -
    - Os vídeos abaixo foram capturados pela página do - deputado no site da câmara dos deputados, se não - conseguir visualizar aqui clique no link que redireciona - para a página da câmara. -
    -
      - {data?.speeches.map((speeche) => { - return ( - - ); - })} -
    - + {isSpeechesLoading ? ( +
    + +

    + Buscando videos, aguarde um momento. +

    +
    + ) : ( + + {!speechesError && speeches.length === 0 && ( + <> + + Não existe vídeos para esse parlamentar + + + )} + {!speechesError && speeches.length > 0 && ( + <> +
    + Os vídeos abaixo foram capturados pela página do + deputado no site da câmara dos deputados, se não + conseguir visualizar aqui clique no link que + redireciona para a página da câmara. +
    +
      + {speeches.map((speeche) => { + return ( + + ); + })} +
    + + )} +     )}     From 822b4bb236c3e23d805bbfc1ea74818c398e92a2 Mon Sep 17 00:00:00 2001 From: SamuraX Date: Sun, 1 Oct 2023 00:39:54 -0300 Subject: [PATCH 3/5] fix: make speeches and cabinet loading independent Speeches and Cabinet requests loading are now independent, this means that once only speeches request is done, it's respective loading will end. Same for the cabinet request --- pages/deputado-federal/[name].js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/pages/deputado-federal/[name].js b/pages/deputado-federal/[name].js index a82822a..25ca10c 100644 --- a/pages/deputado-federal/[name].js +++ b/pages/deputado-federal/[name].js @@ -176,7 +176,7 @@ export default function FederalDeputy({ data, routeParam }) { year: "", }); - const [selectTab, setSelectedTab] = useState("videos"); + const [selectTab, setSelectedTab] = useState("despesas"); const { isOpen, onOpen, onOpenChange } = useDisclosure(); const [openDocument, setOpenDocument] = useState(null); @@ -201,20 +201,21 @@ export default function FederalDeputy({ data, routeParam }) { // get videos axios.get( `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, - ), + ).finally(() => { + setIsSpeechesLoading(false); + }), // get gabinete (Adjust CORS policy from R2) axios.get( `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, - ), + ).finally(() => { + setIsGabineteLoading(false); + }), ]; (async () => { const [speechesResponse, gabineteResponse] = await Promise.allSettled(requestsPromises); - setIsSpeechesLoading(false); - setIsGabineteLoading(false); - if (speechesResponse.status === "rejected") { setSpeechesError(speechesResponse.reason); console.error("failed to get speeches videos"); From b470918d0ede8a758906f94bb6e46227adad4000 Mon Sep 17 00:00:00 2001 From: SamuraX Date: Sun, 1 Oct 2023 13:30:00 -0300 Subject: [PATCH 4/5] refact: remove obsolete code from [name] and utils --- pages/deputado-federal/[name].js | 50 ++++++++++---------------------- utils/index.js | 50 -------------------------------- 2 files changed, 16 insertions(+), 84 deletions(-) diff --git a/pages/deputado-federal/[name].js b/pages/deputado-federal/[name].js index 25ca10c..be04abf 100644 --- a/pages/deputado-federal/[name].js +++ b/pages/deputado-federal/[name].js @@ -28,8 +28,6 @@ import { formatCPFCNPJ, formatDate, formatPhoneNumberDf, - fetchVideos, - propertyValuesArray, } from "../../utils"; import { defaultSeoConfig } from "../../seoConfig"; @@ -60,27 +58,6 @@ export async function getServerSideProps(ctx) { const politician = await api.get(`/deputados/${id}`); const experience = await api.get(`/deputados/${id}/ocupacoes`); - if (data?.speeches?.length > 0) { - fetchVideos(data?.speeches); - try { - let eventsArray = propertyValuesArray( - data?.speeches || [], - "evento_id", - "number", - ); - eventsArray = eventsArray.map((id) => `id=${id}`).join("&"); - const events = await api.get( - `/eventos?${eventsArray}&ordem=ASC&ordenarPor=dataHoraInicio`, - ); - data = { - ...data, - events: events.data, - }; - } catch (error) { - console.error("fail to get the documents"); - } - } - let monthlyGabineteMoney = null; const monthNumber = (new Date().getMonth() + 1).toString().padStart(2, "0"); @@ -199,17 +176,21 @@ export default function FederalDeputy({ data, routeParam }) { const requestsPromises = [ // get videos - axios.get( - `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, - ).finally(() => { - setIsSpeechesLoading(false); - }), + axios + .get( + `https://pub-ef5d1d80d62c44a1a00e2d05a2d5b85c.r2.dev/${routeParam}.json`, + ) + .finally(() => { + setIsSpeechesLoading(false); + }), // get gabinete (Adjust CORS policy from R2) - axios.get( - `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, - ).finally(() => { - setIsGabineteLoading(false); - }), + axios + .get( + `https://pub-bfddf9199db94ff8b19b7d931548c52.r2.dev/${routeParam}.json`, + ) + .finally(() => { + setIsGabineteLoading(false); + }), ]; (async () => { @@ -489,7 +470,8 @@ export default function FederalDeputy({ data, routeParam }) { >

    - Buscando dados do gabinete do parlamentar, aguarde um momento. + Buscando dados do gabinete do parlamentar, aguarde + um momento.

    ) : ( diff --git a/utils/index.js b/utils/index.js index 2b12316..4dbc8c0 100644 --- a/utils/index.js +++ b/utils/index.js @@ -142,27 +142,6 @@ export function checkNullObject(obj) { return true; } -export function propertyValuesArray(arr, propertyKey, type) { - if (!Array.isArray(arr)) { - throw new TypeError("First argument must be an array"); - } - if (typeof propertyKey !== "string") { - throw new TypeError("Second argument must be a string"); - } - - return arr - .map((obj) => { - if (obj && typeof obj === "object" && obj.hasOwnProperty(propertyKey)) { - if (type === "number") { - return Number(obj[propertyKey]); - } - return String(obj[propertyKey]); - } - return null; - }) - .filter((value) => value !== null); -} - export function findFirstMp4Url(data) { for (let i = 0; i < data.length; i++) { const videoLinks = data[i].video_links; @@ -177,35 +156,6 @@ export function findFirstMp4Url(data) { return null; } -//this function is needed to be called in order to bypass Camara's media provider (.mp4 url) -export async function fetchVideos(video_links) { - video_links.forEach((item) => { - if (Array.isArray(item.video_links) && item.video_links.length > 0) { - item.video_links.forEach(async (videoLink) => { - const url = `https://www.camara.leg.br/evento-legislativo/${item.evento_id}/?${videoLink.video_param}&trechosOrador=${item.deputado}&crawl=no`; - - setTimeout(async () => { - await fetch(url) - .then((response) => { - console.log("tetando pegar o video ===> ".url); - - if (!response.ok) { - console.log("Network response was not ok ===> ".url); - } - return response.text(); - }) - .then((data) => { - console.log("processou ==> ", url); - }) - .catch((error) => { - console.log("erro fetching response was not ok ===> ".url); - }); - }, 249); - }); - } - }); -} - export function getCapitalizedPhrase(phrase) { const wordsFromPhrase = phrase.split(" "); From 94aa5f10aca38cf8a89088427ead74ef2c5ab5ec Mon Sep 17 00:00:00 2001 From: SamuraX Date: Sun, 1 Oct 2023 16:06:30 -0300 Subject: [PATCH 5/5] fix: add speeches and cabinet requests abortion The speeches and cabinet requests abortion will be triggered on FederalDeputy component cleanup function --- assets/SpinIcon.js | 2 +- pages/deputado-federal/[name].js | 73 +++++++++++++++++++++----------- 2 files changed, 50 insertions(+), 25 deletions(-) diff --git a/assets/SpinIcon.js b/assets/SpinIcon.js index e36ac4b..7561da4 100644 --- a/assets/SpinIcon.js +++ b/assets/SpinIcon.js @@ -3,7 +3,7 @@ import React from "react"; export const SpinIcon = ({ strokeWidth = 1.5, ...otherProps }) => (