Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(api): Update data fetch functions #14

Merged
merged 3 commits into from
Apr 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 18 additions & 64 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,23 @@
import "./App.css";
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import ResponsiveDrawer from "./Components/Nav";
import Loader from "./Components/Loader";
import Footer from "./Components/Footer";
import Toggle from "./Components/ThemeToggle";
import { fetchData } from "./Utils/FetchData";
import Help from "./Pages/Help";
import Contact from "./Pages/Contact";
import Data from "./Pages/TableDialog";
import PageNotFound from "./Pages/404";
import Reliability from "./Pages/Reliability";
import Resilience from "./Pages/Resilience";

const reliabilityApiUrl = process.env.REACT_APP_RELIABILITY_URL;

function App(selectedCountry, selectedDate, selectedOperator) {
const [isLoading, setIsLoading] = useState(true);
const [filteredRows, setFilteredRows] = useState([]);
function App() {
const [darkMode, setDarkMode] = useState(
localStorage.getItem("darkMode") === "true" ? true : false
);

useEffect(() => {
fetchData(reliabilityApiUrl)
.then((data) => {
setFilteredRows(data);
setIsLoading(false);
})
.catch((error) => {
console.error("Error fetching data:", error);
setIsLoading(false);
});
}, []);

const toggleDarkMode = () => {
const newMode = !darkMode;
setDarkMode(newMode);
@@ -79,50 +61,22 @@ function App(selectedCountry, selectedDate, selectedOperator) {
});

return (
<>
{isLoading ? (
<Loader />
) : (
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<ResponsiveDrawer darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
<Toggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
<Routes>
<Route
path="/"
element={
<Reliability
rows={filteredRows}
selectedCountry={selectedCountry}
selectedOperator={selectedOperator}
selectedDate={selectedDate}
filteredRows={filteredRows}
/>
}
/>
<Route
path="/resilience"
element={
<Resilience
rows={filteredRows}
selectedCountry={selectedCountry}
selectedOperator={selectedOperator}
selectedDate={selectedDate}
filteredRows={filteredRows}
/>
}
/>
<Route path="/help" element={<Help />} />
<Route path="/contact" element={<Contact />} />
<Route path="/data" element={<Data />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
<Footer />
</Router>
</ThemeProvider>
)}
</>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<ResponsiveDrawer darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
<Toggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
<Routes>
<Route path="/" element={<Reliability />} />
<Route path="/resilience" element={<Resilience />} />
<Route path="/help" element={<Help />} />
<Route path="/contact" element={<Contact />} />
<Route path="/data" element={<Data />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
<Footer />
</Router>
</ThemeProvider>
);
}

2 changes: 1 addition & 1 deletion src/Components/CountrySearch.js
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ export default function CountrySearch({ onSelectCountry, apiUrl }) {
<Stack spacing={2} sx={{ width: "100%" }}>
{loading ? (
<TextField label="Loading..." variant="standard" disabled fullWidth />
) : countries.length > 1 ? (
) : countries.length > 0 ? (
<Autocomplete
id="country-search"
size="small"
22 changes: 9 additions & 13 deletions src/Components/DateSearch.js
Original file line number Diff line number Diff line change
@@ -2,27 +2,23 @@ import React, { useState, useEffect } from "react";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import Autocomplete from "@mui/material/Autocomplete";
import { fetchData } from "../Utils/FetchData";

export default function DateSearch({ onSelectDate, apiUrl }) {
const [dates, setDates] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchDates = async () => {
try {
const response = await fetch(apiUrl);
const data = await response.json();
const dateKey = Object.prototype.hasOwnProperty.call(data[0], "date") ? "date" : "regdate";
const uniqueDates = Array.from(new Set(data.map((item) => item[dateKey])));
fetchData(apiUrl)
.then((data) => {
const uniqueDates = Array.from(new Set(data.map((item) => item?.last_published_date)));
setDates(uniqueDates);
setLoading(false);
} catch (error) {
console.error("Error fetching dates:", error);
})
.catch((error) => {
console.error("Error fetching countries:", error);
setLoading(false);
}
};

fetchDates();
});
}, []);

const handleSelectDate = (selectedDate) => {
@@ -33,7 +29,7 @@ export default function DateSearch({ onSelectDate, apiUrl }) {
<Stack spacing={2} sx={{ width: "100%" }}>
{loading ? (
<TextField label="Loading..." variant="standard" disabled fullWidth />
) : dates.length > 1 ? (
) : dates.length > 0 ? (
<Autocomplete
id="date-search"
size="small"
26 changes: 11 additions & 15 deletions src/Pages/Reliability.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import CountrySearch from "../Components/CountrySearch";
import OperatorSearch from "../Components/OperatorSearch";
import DateSearch from "../Components/DateSearch";
import { useNavigate } from "react-router-dom";
import { fetchData } from "../Utils/FetchData";

const apiUrl = process.env.REACT_APP_RELIABILITY_URL;

@@ -29,28 +30,22 @@ export default function Reliability() {
};

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(apiUrl);
const jsonData = await response.json();

const mappedData = jsonData.map((item) => ({
id: item.id || null,
fetchData(apiUrl)
.then((data) => {
const mappedData = data.map((item) => ({
msisdn: item.msisdn,
country: item.country,
operator: item.operator,
resilience: item.resiliance,
date: item.date,
testdata: item.testdata
date: item.last_published_date,
testdata: item.test_data
}));
const filteredData = mappedData.filter((row) => row.id !== null);
const filteredData = mappedData.filter((row) => row.msisdn !== null);
setData(filteredData);
} catch (error) {
})
.catch((error) => {
console.error("Error fetching data:", error);
}
};

fetchData();
});
}, []);

const handleRowClick = useCallback(
@@ -121,6 +116,7 @@ export default function Reliability() {
</Grid>
</Grid>
<DataGrid
getRowId={(row) => row.msisdn}
onRowClick={handleRowClick}
rows={filteredRows}
columns={columns}
33 changes: 12 additions & 21 deletions src/Pages/Resilience.js
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { Grid, Box, Card, Typography } from "@mui/material";
import CountrySearch from "../Components/CountrySearch";
import OperatorSearch from "../Components/OperatorSearch";
import DateSearch from "../Components/DateSearch";
import { fetchData } from "../Utils/FetchData";

const apiUrl = process.env.REACT_APP_RESILIENCE_URL;

@@ -26,29 +27,21 @@ export default function Resilience() {
};

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(apiUrl);
const jsonData = await response.json();

const mappedData = jsonData.map((item) => ({
id: item.id || null,
fetchData(apiUrl)
.then((data) => {
const mappedData = data.map((item) => ({
msisdn: item.msisdn,
country: item.country,
operator: item.operator,
regdate: new Date(item.regdate).toLocaleDateString(),
protocols: item.protocols,
status: item.status,
error: item.error
date: item.last_published_date
}));
const filteredData = mappedData.filter((row) => row.id !== null);
const filteredData = mappedData.filter((row) => row.msisdn !== null);
setData(filteredData);
} catch (error) {
})
.catch((error) => {
console.error("Error fetching data:", error);
}
};

fetchData();
});
}, []);

const filteredRows = data.filter(
@@ -59,14 +52,11 @@ export default function Resilience() {
);

const columns = [
{ field: "id", headerName: "ID", width: 90 },
{ field: "msisdn", headerName: "MSISDN", width: 150 },
{ field: "country", headerName: "Country", width: 130 },
{ field: "operator", headerName: "Operator", width: 130 },
{ field: "regdate", headerName: "Reg Date", width: 130 },
{ field: "protocols", headerName: "Protocols", width: 130 },
{ field: "status", headerName: "Status", width: 130 },
{ field: "error", headerName: "Error", width: 130 }
{ field: "date", headerName: "Date", width: 130 },
{ field: "protocols", headerName: "Protocols", width: 130 }
];

return (
@@ -114,6 +104,7 @@ export default function Resilience() {
</Grid>
</Grid>
<DataGrid
getRowId={(row) => row.msisdn}
rows={filteredRows}
columns={columns}
pageSize={5}
10 changes: 4 additions & 6 deletions src/Pages/TableDialog.js
Original file line number Diff line number Diff line change
@@ -9,11 +9,10 @@ export default function Data() {
const testData = state?.test_data || [];

const columns = [
{ field: "test_id", headerName: "Test ID", width: 120 },
{ field: "sent_time", headerName: "Sent Time", width: 120 },
{ field: "sms_sent", headerName: "SMS Sent", width: 120 },
{ field: "sms_received", headerName: "SMS Received", width: 120 },
{ field: "published", headerName: "Published", width: 120 },
{ field: "start_time", headerName: "Start Time", width: 120 },
{ field: "sms_sent_time", headerName: "SMS Sent Time", width: 120 },
{ field: "sms_received_time", headerName: "SMS Received Time", width: 120 },
{ field: "sms_routed_time", headerName: "Routed Time", width: 120 },
{ field: "operator_difference", headerName: "Operator Difference", width: 120 },
{ field: "publisher_difference", headerName: "Publisher Difference", width: 120 },
{ field: "total_difference", headerName: "Total Difference", width: 120 }
@@ -30,7 +29,6 @@ export default function Data() {
</Box>
<Box sx={{ width: "100%" }}>
<DataGrid
getRowId={(row) => row.test_id}
rows={testData}
columns={columns}
pageSize={5}