Created fetchAPI function

frontend/.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'one-var': 'off',
     'one-var-declaration-per-line': 'off',
     'object-curly-newline': 'off',
+    'implicit-arrow-linebreak': 'off',
     'import/extensions': [
       'error',
       'ignorePackages',

frontend/src/components/ConnectionBlock.js

@@ -1,28 +1,20 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getConnection } from './main';
+import { fetchAPI, getConnection } from './main';
 
 const ConnectionBlock = () => {
   const [data, setData] = useState('');
   const [display, setDisplay] = useState('');
 
   useEffect(() => {
-    fetch('https://api.vytal.io/ip/')
+    fetchAPI(setData, setDisplay);
-      .then((response) => response.json())
-      .then((json) => {
-        setData(getConnection(json));
-        setDisplay(1);
-      })
-      .catch(() => {
-        setDisplay(0);
-      });
   }, []);
 
   return (
     <ScanBlock>
       <h1>Connection</h1>
-      {display === 1 && <Table data={data} />}
+      {display === 1 && <Table data={getConnection(data)} />}
       {display === 0 && (
         <div className="boxWrap">
           Unable to fetch info. Adblock or content filter may have prevented

frontend/src/components/LocationBlock.js

@@ -1,23 +1,14 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getLocation } from './main';
+import { fetchAPI, getLocation, getMap } from './main';
 
 const LocationBlock = () => {
   const [data, setData] = useState([]);
   const [display, setDisplay] = useState('');
-  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
 
   useEffect(() => {
-    fetch('https://api.vytal.io/ip/')
+    fetchAPI(setData, setDisplay);
-      .then((response) => response.json())
-      .then((json) => {
-        setData(getLocation(json));
-        setDisplay(1);
-      })
-      .catch(() => {
-        setDisplay(0);
-      });
   }, []);
 
   return (
@@ -25,8 +16,8 @@ const LocationBlock = () => {
       <h1>Location</h1>
       {display === 1 && (
         <>
-          <img src={mapUrl} alt="Map of current location" />
+          <img src={getMap(data)} alt="Map of current location" />
-          <Table data={data} />
+          <Table data={getLocation(data)} />
         </>
       )}
       {display === 0 && (

frontend/src/components/main.js

@@ -3,7 +3,9 @@ import Bowser from 'bowser';
 import axios from 'axios';
 
 export {
+  fetchAPI,
   getLocation,
+  getMap,
   getConnection,
   detectTor,
   getSoftware,
@@ -16,6 +18,18 @@ export {
   handleSave,
 };
 
+const fetchAPI = (setData, setDisplay) => {
+  fetch('https://api.vytal.io/ip/')
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json);
+      setDisplay(1);
+    })
+    .catch(() => {
+      setDisplay(0);
+    });
+};
+
 const getLocation = (json) => {
   const data = [
     {
@@ -52,6 +66,9 @@ const getLocation = (json) => {
   return data;
 };
 
+const getMap = (data) =>
+  `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
+
 const getConnection = (json) => {
   const data = [
     {