diff --git a/package.json b/package.json index 724f2fa..e330fdf 100644 --- a/package.json +++ b/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", diff --git a/src/app/eventrix/eventsNames/starWarsApi.js b/src/app/eventrix/eventsNames/starWarsApi.js new file mode 100644 index 0000000..5c24dd9 --- /dev/null +++ b/src/app/eventrix/eventsNames/starWarsApi.js @@ -0,0 +1,2 @@ +export const FETCH_CHARACTERS = 'Characters:fetch'; +export const FETCH_PLANETS = 'Planets:fetch'; diff --git a/src/app/eventrix/index.js b/src/app/eventrix/index.js index 5fd27a6..34817a8 100644 --- a/src/app/eventrix/index.js +++ b/src/app/eventrix/index.js @@ -6,6 +6,8 @@ const initialState = { value: 0, status: 'idle', }, + planets: [], + characters: [], } const eventrix = new Eventrix(initialState, receivers); diff --git a/src/app/eventrix/receivers/characters.js b/src/app/eventrix/receivers/characters.js new file mode 100644 index 0000000..956a11b --- /dev/null +++ b/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; diff --git a/src/app/eventrix/receivers/index.js b/src/app/eventrix/receivers/index.js index d776936..689d524 100644 --- a/src/app/eventrix/receivers/index.js +++ b/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]; \ No newline at end of file +export default [...counterReceivers, fetchPlanetsReceiver, fetchCharactersReceiver]; \ No newline at end of file diff --git a/src/app/eventrix/receivers/planets.js b/src/app/eventrix/receivers/planets.js new file mode 100644 index 0000000..e01a2be --- /dev/null +++ b/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; diff --git a/src/pages/characters/CharactersPage.jsx b/src/pages/characters/CharactersPage.jsx index 34a3378..00d7ef1 100644 --- a/src/pages/characters/CharactersPage.jsx +++ b/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 (