Add Connection between MainPage and Server

add use Query to get data from the Server
2026-09-04 08:36:08 +02:00 · 2022-05-04 12:41:07 +02:00
parent 9f5fb06da5
commit 4d4ab2e08c
4 changed files with 100 additions and 6 deletions
@@ -3433,6 +3433,11 @@
        "tryer": "^1.0.1"
      }
    },
+    "big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
+    },
    "big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -3520,6 +3525,21 @@
        "fill-range": "^7.0.1"
      }
    },
+    "broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
    "browser-process-hrtime": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -7582,6 +7602,11 @@
        }
      }
    },
+    "js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7863,6 +7888,15 @@
        "tmpl": "1.0.5"
      }
    },
+    "match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
    "mdn-data": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -7910,6 +7944,11 @@
        "picomatch": "^2.2.3"
      }
    },
+    "microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
    "mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -8028,6 +8067,14 @@
      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
    },
+    "nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=",
+      "requires": {
+        "big-integer": "^1.6.16"
+      }
+    },
    "nanoid": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -8204,6 +8251,11 @@
        "es-abstract": "^1.19.1"
      }
    },
+    "oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
    "obuf": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -9457,6 +9509,16 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "react-query": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.38.1.tgz",
+      "integrity": "sha512-CM9hsz6oib17hsBguGaMJr+a0swMzou2gvNHHjAusnXvkfTx6CTzx0Iwuplox1jI2j3WiY91BGrcIN6bp1n1Iw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      }
+    },
    "react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -9645,6 +9707,11 @@
      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
    },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U="
+    },
    "renderkid": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -10792,6 +10859,15 @@
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
    },
+    "unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -12,6 +12,7 @@
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-query": "^3.38.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
@@ -16,11 +16,18 @@ import Registrierung from "./Pages/registrierung";
 import Warenkorb from "./Pages/warenkorb";
 import Listenansicht from "./Pages/listenansicht";
 import "./App.css";
+import MainPage from "./Components/mainpage";
+
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+
+const queryClient = new QueryClient();

 function App() {
  return (
    <div className="App">
-    
+      <QueryClientProvider client={queryClient}>
+        <MainPage></MainPage>
+      </QueryClientProvider>
    </div>
  );
 }
@@ -4,16 +4,26 @@ import ButtonPrimary from "./buttonPrimary";
 import img_paparoy from "../paparoy.jpg";
 import img_alaturca from "../alaturca.jpg";
 import Card from "./card";
+import { useQuery } from "react-query";

 function MainPage() {
+  const { isLoading, error, data } = useQuery("repoData", () =>
+    fetch("http://10.10.2.132:3000/restaurant").then((res) => res.json())
+  );
+  let listen = [];
+
+  if (isLoading) return "Loading...";
+  if (error) return "An error has occurred: " + error.message;
+
+  for (let index = 0; index < data.length; index++) {
+    console.log(data);
+    listen.push(<Card name={data[index].name} bild={img_paparoy} domain={data[index].domain} />);
+  }
+
  return (
    <div>
      <Header1 />
-      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
-        <Card name="Papa Roy" bild={img_paparoy} />
-        <Card name="A la Turca" bild={img_alaturca} />
-        <Card name="Pizza Olive" bild={img_paparoy} />
-      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">{listen}</div>
    </div>
  );
 }