➕ 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/pages/index.tsx

@@ -1,28 +1,25 @@
 import "@navikt/ds-css";
 import { Button, Heading } from "@navikt/ds-react";
-import axios , { AxiosError } from "axios";
-import { log } from "console";
-import { useState } from "react"; //useSWR hilsen Emil ;D
+import axios , { Axios, AxiosError } from "axios";
+import useSWR from "swr";
 
-async function getWorld() {
-  try {
-    const {data} : {data: any} = await axios.get("http://0.0.0.0:8080/");
-    console.log(data);
-    return data
-  } catch (error) {
-    console.log(error);
-  }
+const fetcher = (url: any) => axios.get(url).then(res => res.data)
+
+function fetching() {
+  const {data, error, isLoading} = useSWR('http://0.0.0.0:8080/', fetcher);
+  if (error) return <div>failed to load: {error.message}</div>
+  if (isLoading) return <div>Loading...</div>
+  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>
   )