✨(feature) add config data to homepage

Author: abimourad

backend/app/main.py

@@ -25,7 +25,7 @@
     lifespan=lifespan,
 )
 
-app.include_router(api_router, dependencies=[Depends(get_current_user)], prefix=settings.API_V1_STR)
+app.include_router(api_router, prefix=settings.API_V1_STR)
 app.include_router(root_router, tags=["health"])
 
 app.add_middleware(

compose.yaml

@@ -19,6 +19,8 @@ services:
     build:
       context: backend
       dockerfile: Dockerfile
+    env_file:
+      - ./backend/.env
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
       interval: 5s

frontend/src/app/Common/DynamicIcon.jsx

@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+
+function DynamicIcon({ name }) {
+  const [Icon, setIcon] = React.useState(null);
+
+  React.useEffect(() => {
+    import("@ant-design/icons")
+      .then((icons) => {
+        const ImportedIcon = icons[name];
+        if (ImportedIcon) {
+          setIcon(() => ImportedIcon);
+        } else {
+          setIcon(null);
+        }
+      })
+      .catch(() => setIcon(null));
+  }, [name]);
+
+  return Icon ? <Icon /> : null;
+}
+
+export default DynamicIcon
+

frontend/src/app/Common/pageConfig.jsx

@@ -0,0 +1,33 @@
+import DynamicIcon from "./DynamicIcon";
+
+export const menuItem = (sideBarLinks) => [
+  {
+    key: "1",
+    label: "Homepagina",
+    icon: <DynamicIcon name={"HomeOutlined"} />,
+  },
+  {
+    type: "divider",
+  },
+  {
+    key: "grp",
+    label: "Mijn Favoriete Apps",
+    type: "group",
+    children: sideBarLinks?.map((value) => ({
+      key: value?.title,
+      label: value?.title,
+      icon: <DynamicIcon name={value?.icon} />,
+    })),
+  },
+];
+
+export function valueOrEmptyString(textContent) {
+  if (textContent) {
+    return textContent;
+  }
+  return "";
+}
+
+export const baseUrl = valueOrEmptyString(
+  process.env.NEXT_PUBLIC_BACKEND_BASE_URL
+);

frontend/src/app/Common/pageConfig.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { baseUrl } from "../Common/pageConfig";
+
+const AppContext = createContext();
+
+export function AppProvider({ children }) {
+  const [items, setitems] = useState(null);
+
+  useEffect(() => {
+    fetch(baseUrl + "/api/v1/config", {
+      method: "GET",
+      mode: "cors",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        // Authorization: `Bearer ${keycloak.token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((json) => setitems(json))
+      .catch((err) => console.error("Fetch error:", err));
+  }, []);
+
+  return <AppContext.Provider value={{ items }}>{children}</AppContext.Provider>;
+}
+
+export function useAppContext() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error("useAppContext must be used within AppProvider");
+  return ctx;
+}

frontend/src/app/Components/PageLayout.tsx

@@ -1,5 +1,5 @@
 import Keycloak from 'keycloak-js';
-import { valueOrEmptyString } from '../Common/pageConfig';
+import { valueOrEmptyString } from '../../Common/pageConfig';
 
 
 let keycloak: Keycloak;

frontend/src/app/Context/AppContext.jsx

@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { Avatar, Flex, Layout } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+import Link from "next/link";
+import Image from "next/image";
+
+const { Header } = Layout;
+
+function HeaderLayout() {
+  return (
+    <Header>
+      <Flex justify={"space-between"}>
+        <div>
+          <Image
+            src="/mijnbureau.svg"
+            alt="logo"
+            width="50"
+            height="50"
+            style={{ marginTop: 5 }}
+          />
+          <span style={{ color: "white" }}>Mijn Bureau</span>
+        </div>
+        <div>
+          <Link href="/#">
+            <Avatar icon={<UserOutlined />} />
+          </Link>
+        </div>
+      </Flex>
+    </Header>
+  );
+}
+
+export default HeaderLayout;