Fetching data

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "axios": "^1.2.1",
     "eventrix": "^2.8.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/app/eventrix/eventsNames/starWarsApi.js

@@ -0,0 +1,2 @@
+export const FETCH_CHARACTERS = 'Characters:fetch';
+export const FETCH_PLANETS = 'Planets:fetch';

src/app/eventrix/index.js

@@ -6,6 +6,8 @@ const initialState = {
     value: 0,
     status: 'idle',
   },
+  planets: [],
+  characters: [],
 }
 
 const eventrix = new Eventrix(initialState, receivers);

src/app/eventrix/receivers/characters.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+import { EventsReceiver } from "eventrix";
+import { FETCH_CHARACTERS } from "../eventsNames/starWarsApi";
+
+const fetchCharactersReceiver = new EventsReceiver(
+  FETCH_CHARACTERS,
+  (eventName, eventData, stateManager) => {
+    return axios.get("https://swapi.dev/api/species/").then((response) => {
+      const charactersList = response.data.results;
+      stateManager.setState("characters", charactersList);
+    });
+  }
+);
+
+export default fetchCharactersReceiver;

src/app/eventrix/receivers/index.js

@@ -1,3 +1,5 @@
 import counterReceivers from './counter';
+import fetchPlanetsReceiver from './planets';
+import fetchCharactersReceiver from './characters';
 
-export default [...counterReceivers];
+export default [...counterReceivers, fetchPlanetsReceiver, fetchCharactersReceiver];

src/app/eventrix/receivers/planets.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+import { EventsReceiver } from "eventrix";
+import { FETCH_PLANETS } from "../eventsNames/starWarsApi";
+
+const fetchPlanetsReceiver = new EventsReceiver(
+  FETCH_PLANETS,
+  (eventName, eventData, stateManager) => {
+    return axios.get("https://swapi.dev/api/planets/").then((response) => {
+      const planetsList = response.data.results;
+      stateManager.setState("planets", planetsList);
+    });
+  }
+);
+
+export default fetchPlanetsReceiver;

src/pages/characters/CharactersPage.jsx

@@ -1,9 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import { useEventrixState, useEmit } from "eventrix";
+import CircularProgress from "@mui/material/CircularProgress";
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import { FETCH_CHARACTERS } from "../../app/eventrix/eventsNames/starWarsApi";
 
-const CharactersPage = () => (
+const CharactersPage = () => {
+  const [loading, setLoading] = useState(true);
+  const [characters] = useEventrixState("characters");
+  const emit = useEmit();
+
+  useEffect(() => {
+    emit(FETCH_CHARACTERS).then(() => setLoading(false));
+  }, []);
+
+  return (
     <div className="home">
-        Characters page
+      Characters page
+      {loading ? (
+        <Box sx={{ display: "flex" }}>
+          <CircularProgress />
+        </Box>
+      ) : (
+        Array.isArray(characters) &&
+        characters.length && (
+          <Stack direction="row" spacing={1}>
+            {characters.map((character) => {
+              return <Chip label={character.name} />;
+            })}
+          </Stack>
+        )
+      )}
     </div>
-)
+  );
+};
 
 export default CharactersPage;

src/pages/planets/PlanetsPage.jsx

@@ -1,9 +1,74 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import { useEventrixState, useEmit } from "eventrix";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import { FETCH_PLANETS } from "../../app/eventrix/eventsNames/starWarsApi";
 
-const PlanetsPage = () => (
+const PlanetsPage = () => {
+  const [loading, setLoading] = useState(true);
+  const [planets] = useEventrixState("planets");
+  const emit = useEmit();
+
+  useEffect(() => {
+    emit(FETCH_PLANETS).then(() => setLoading(false));
+  }, []);
+
+  return (
     <div className="home">
-        Planets page
+      Planets page
+      {loading ? (
+        <Box sx={{ display: "flex" }}>
+          <CircularProgress />
+        </Box>
+      ) : (
+        Array.isArray(planets) &&
+        planets.length && (
+          <Box sx={{ display: "flex" }}>
+            <TableContainer component={Paper}>
+              <Table
+                sx={{ maxWidth: 600 }}
+                size="small"
+                aria-label="a dense table"
+              >
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Name</TableCell>
+                    <TableCell align="right">Climate</TableCell>
+                    <TableCell align="right">Diameter</TableCell>
+                    <TableCell align="right">Population</TableCell>
+                    <TableCell align="right">Terrain</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {planets.map((planet) => (
+                    <TableRow
+                      key={planet.name}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    >
+                      <TableCell component="th" scope="row">
+                        {planet.name}
+                      </TableCell>
+                      <TableCell align="right">{planet.climate}</TableCell>
+                      <TableCell align="right">{planet.diameter}</TableCell>
+                      <TableCell align="right">{planet.population}</TableCell>
+                      <TableCell align="right">{planet.terrain}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Box>
+        )
+      )}
     </div>
-)
+  );
+};
 
 export default PlanetsPage;