feat: fetching extra pixels a user has from the backend (#80)

* feat: fetching extra pixels a user has from the backend

* feat: resolved PR review

* feat: removed console statement

backend/routes/user.go

@@ -13,6 +13,7 @@ func InitUserRoutes() {
 }
 
 func getExtraPixels(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Access-Control-Allow-Origin", "*")
 	user := r.URL.Query().Get("address")
 
 	var available string

frontend/src/App.js

@@ -11,6 +11,7 @@ import TabPanel from './tabs/TabPanel.js';
 import { usePreventZoom } from './utils/Window.js';
 import logo from './resources/logo.png';
 import canvasConfig from "./configs/canvas.config.json"
+import backendConfig from "./configs/backend.config.json";
 
 function App() {
   // Window management
@@ -19,6 +20,7 @@ function App() {
   const isDesktopOrLaptop = useMediaQuery({
     query: '(min-width: 1224px)'
   })
+  const backendUrl = "http://" + backendConfig.host + ":" + backendConfig.port;
   const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
   const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
@@ -54,6 +56,21 @@ function App() {
   const [extraPixelsUsed, setExtraPixelsUsed] = useState(0);
   const [extraPixelsData, setExtraPixelsData] = useState([]);
 
+  useEffect(() => {
+    const address = 0;
+    let getExtraPixelsEndpoint = `${backendUrl}/getExtraPixels?address=${address}`;
+    fetch(getExtraPixelsEndpoint, { mode: "cors" }).then((response) => {
+      response
+        .json()
+        .then((data) => {
+          setExtraPixels(data);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    });
+  },[])
+
   const clearPixelSelection = () => {
     setSelectedPositionX(null);
     setSelectedPositionY(null);