From 7e6eab1ee7b8a5fed1b3866919eed3bd73e1fdec Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 24 Aug 2021 17:39:00 -0400
Subject: [PATCH] Addedlocation functions to main

---
 frontend/src/components/LocationBlock.js | 43 ++---------------
 frontend/src/components/main.js          | 59 +++++++++++++++++++-----
 2 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 8fdf953..7bcaa68 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,16 +1,18 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
+import { getLocation } from './main';
 
 const LocationBlock = () => {
-  const [locationData, setLocationData] = useState('');
+  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/')
       .then((response) => response.json())
-      .then((data) => {
-        setLocationData(data);
+      .then((json) => {
+        setData(getLocation(json));
         setDisplay(1);
       })
       .catch(() => {
@@ -18,41 +20,6 @@ const LocationBlock = () => {
       });
   }, []);
 
-  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
-
-  const data = [
-    {
-      key: 'country',
-      title: 'Country',
-      value: locationData.country,
-    },
-    {
-      key: 'regionName',
-      title: 'Region',
-      value: locationData.regionName,
-    },
-    {
-      key: 'lat',
-      title: 'City',
-      value: locationData.city,
-    },
-    {
-      key: 'zip',
-      title: 'Zip code',
-      value: locationData.zip,
-    },
-    {
-      key: 'lat',
-      title: 'Latitude',
-      value: locationData.lat,
-    },
-    {
-      key: 'lon',
-      title: 'Longitude',
-      value: locationData.lon,
-    },
-  ];
-
   return (
     <ScanBlock>
       <h1>Location</h1>
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index d4651ef..b1719ba 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -2,6 +2,54 @@ import md5 from 'crypto-js/md5';
 import Bowser from 'bowser';
 import axios from 'axios';
 
+export {
+  getLocation,
+  getSoftware,
+  getHardware,
+  getWebGL,
+  getBattery,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+};
+
+const getLocation = (locationData) => {
+  const data = [
+    {
+      key: 'country',
+      title: 'Country',
+      value: locationData.country,
+    },
+    {
+      key: 'regionName',
+      title: 'Region',
+      value: locationData.regionName,
+    },
+    {
+      key: 'lat',
+      title: 'City',
+      value: locationData.city,
+    },
+    {
+      key: 'zip',
+      title: 'Zip code',
+      value: locationData.zip,
+    },
+    {
+      key: 'lat',
+      title: 'Latitude',
+      value: locationData.lat,
+    },
+    {
+      key: 'lon',
+      title: 'Longitude',
+      value: locationData.lon,
+    },
+  ];
+  return data;
+};
+
 const getHardware = () => {
   const data = [
     {
@@ -229,14 +277,3 @@ const handleSave = (e, hash, setSaved) => {
   });
   setSaved(true);
 };
-
-export {
-  getSoftware,
-  getHardware,
-  getWebGL,
-  getBattery,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
-};