Exercício 48: Conecta bloco com endpoint criado anteriormente

frontend/packages/volto-trepr-intranet/locales/en/LC_MESSAGES/volto.po

@@ -5,7 +5,7 @@ msgstr ""
 "POT-Creation-Date: \n"
 "PO-Revision-Date: \n"
 "Last-Translator: \n"
-"Language: en\n"
+"Language: \n"
 "Language-Team: \n"
 "Content-Type: \n"
 "Content-Transfer-Encoding: \n"

frontend/packages/volto-trepr-intranet/src/actions/Clima/Clima.js

@@ -0,0 +1,12 @@
+import { GET_CLIMA_DATA } from '../../constants/ActionTypes';
+
+export function getClimaData(location) {
+  const path = `/@clima?location=${location}`;
+  return {
+    type: GET_CLIMA_DATA,
+    request: {
+      op: 'get',
+      path: path,
+    },
+  };
+}

frontend/packages/volto-trepr-intranet/src/components/Blocks/Clima/View.jsx

@@ -1,19 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getClimaData } from '../../../actions/Clima/Clima';
 
 const ClimaView = (props) => {
   const { data } = props;
   // Pointer para o local com os dados
-  const previsao = {
-    events: {
-      sunrise: '08:00',
-      sunset: '18:00',
-    },
-    temperature: {
-      hourly: [],
-      now: 29.1,
-    },
-    weather: 'sun',
-  };
+  const loaded = useSelector((state) => state.climaData?.loaded || false);
+  const previsao = useSelector((state) => state.climaData?.data || {});
   const events = previsao?.events;
   const sunrise = events?.sunrise ? events.sunrise : '';
   const sunset = events?.sunset ? events.sunset : '';
@@ -22,21 +15,31 @@ const ClimaView = (props) => {
   const measure = data?.measure ? data.measure : '';
   const location = data?.location ? data.location : 'Terra';
 
+  const dispatch = useDispatch();
+  //Busca os dados quando o bloco é rederizado
+  useEffect(() => {
+    dispatch(getClimaData(location));
+  }, [dispatch, location]);
+
   return (
     <div className={'block climaBlock'}>
       <div className={'clima-wrapper'}>
-        <div className={'clima-card'}>
-          <div className={`clima-icon ${weather}`}></div>
-          <h1>{temperature}º</h1>
-          <p className={'local'}>{location}</p>
-          <p className={`evento ${measure}`}>
-            {measure === 'sunrise' ? (
-              <span>{sunrise}</span>
-            ) : (
-              <span>{sunset}</span>
-            )}
-          </p>
-        </div>
+        {loaded ? (
+          <div className={'clima-card'}>
+            <div className={`clima-icon ${weather}`}></div>
+            <h1>{temperature}º</h1>
+            <p className={'local'}>{location}</p>
+            <p className={`evento ${measure}`}>
+              {measure === 'sunrise' ? (
+                <span>{sunrise}</span>
+              ) : (
+                <span>{sunset}</span>
+              )}
+            </p>
+          </div>
+        ) : (
+          <div className={'loading'}>{'Please wait'}</div>
+        )}
       </div>
     </div>
   );

frontend/packages/volto-trepr-intranet/src/constants/ActionTypes.js

@@ -0,0 +1 @@
+export const GET_CLIMA_DATA = 'GET_CLIMA_DATA';

frontend/packages/volto-trepr-intranet/src/index.js

@@ -12,6 +12,8 @@ import { cloneDeep } from 'lodash';
 import ClimaEdit from './components/Blocks/Clima/Edit';
 import ClimaView from './components/Blocks/Clima/View';
 import climaSVG from '@plone/volto/icons/cloud.svg';
+// reducers
+import { climaData } from './reducers/climaData';
 
 const applyConfig = (config) => {
   config.settings = {
@@ -92,6 +94,11 @@ const applyConfig = (config) => {
     }
   });
 
+  config.addonReducers = {
+    ...config.addonReducers,
+    climaData,
+  };
+
   return config;
 };
 

frontend/packages/volto-trepr-intranet/src/reducers/climaData.js

@@ -0,0 +1,36 @@
+import { GET_CLIMA_DATA } from '../constants/ActionTypes';
+
+const initialState = {
+  data: {},
+};
+
+export const climaData = (state = initialState, action = {}) => {
+  switch (action?.type) {
+    case `${GET_CLIMA_DATA}_PENDING`:
+      return {
+        ...state,
+        loaded: false,
+        loading: true,
+        error: null,
+        data: {},
+      };
+    case `${GET_CLIMA_DATA}_FAIL`:
+      return {
+        ...state,
+        loaded: false,
+        loading: false,
+        error: action.error,
+        data: null,
+      };
+    case `${GET_CLIMA_DATA}_SUCCESS`:
+      return {
+        ...state,
+        loaded: true,
+        loading: false,
+        error: null,
+        data: action.result,
+      };
+    default:
+      return state;
+  }
+};