➕ Lagt til SWR for enklere bruk av hooks med axios (Kudos: Emil)

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Co-authored-by: Amalie Mansåker <amalie.erdal.mansaker@nav.no>

frontend/package.json

@@ -24,6 +24,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.14.0",
+    "swr": "^2.2.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.5"
   },

frontend/pages/index.tsx

@@ -1,28 +1,25 @@
 import "@navikt/ds-css";
 import { Button, Heading } from "@navikt/ds-react";
-import axios , { AxiosError } from "axios";
+import axios , { Axios, AxiosError } from "axios";
-import { log } from "console";
+import useSWR from "swr";
-import { useState } from "react"; //useSWR hilsen Emil ;D
 
-async function getWorld() {
+const fetcher = (url: any) => axios.get(url).then(res => res.data)
-  try {
+
-    const {data} : {data: any} = await axios.get("http://0.0.0.0:8080/");
+function fetching() {
-    console.log(data);
+  const {data, error, isLoading} = useSWR('http://0.0.0.0:8080/', fetcher);
-    return data
+  if (error) return <div>failed to load: {error.message}</div>
-  } catch (error) {
+  if (isLoading) return <div>Loading...</div>
-    console.log(error);
+  return <div>{data.data}</div>
-  }
 }
 
 export default function Home() {
-  getWorld();
   return (
     <main className="flex justify-center">
       <div className="w-1/2 flex flex-col gap-4 justify-center text-center">
         <Heading level="1" size="xlarge">Sprik</Heading>
         <Button variant="primary">Meld inn feil</Button>
         <Button variant="secondary">Meld inn funksjonalitetsønsker</Button>
-        {/* <p>{getWorld()}</p> */}
+        {fetching()}
       </div>
     </main>
   )

frontend/yarn.lock

@@ -3203,6 +3203,13 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
 
+swr@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.0.tgz#575c6ac1bec087847f4c86a39ccbc0043c834d6a"
+  integrity sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
 synckit@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
@@ -3400,6 +3407,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"