map feature requests

src/routes/Root.tsx

@@ -2,15 +2,19 @@ import { Box, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { useQuery } from "@tanstack/react-query";
 import { FC } from "react";
+import { FeatureRequestGetResponse } from "../api/generated";
+import FeatureRequest from "../components/FeatureRequest";
 import Layout from "../components/Layout";
 
 const Root: FC = () => {
+  const featureRequestsQuery = (): Promise<FeatureRequestGetResponse[]> =>
+    fetch(`${import.meta.env.VITE_API_ROOT}/api/v1/feature-request`).then(
+      (res) => res.json()
+    );
+
   const { isLoading, error, data } = useQuery({
     queryKey: ["feature-requests"],
-    queryFn: () =>
-      fetch(`${import.meta.env.VITE_API_ROOT}/api/v1/feature-request`).then(
-        (res) => res.json()
-      ),
+    queryFn: featureRequestsQuery,
   });
 
   if (isLoading)
@@ -24,12 +28,19 @@ const Root: FC = () => {
 
   if (error) return <Layout>Error: {error.message}</Layout>;
 
+  if (!data)
+    return <Layout>No data yet, try creating a feature request</Layout>;
+
   return (
     <Layout>
       <Grid container spacing={2}>
         <Grid item xs={12} key={1}>
-          <h2>{"test"}</h2>
-          <p>{"testste"}</p>
+          {data.map((featureRequest) => (
+            <FeatureRequest
+              key={featureRequest.id}
+              featureRequest={featureRequest}
+            />
+          ))}
         </Grid>
       </Grid>
     </Layout>