add dataContext

src/app/context/data-context.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { createContext, useContext, ReactNode } from 'react'
+
+interface Data {
+	id: number
+	name: string
+	family: string
+}
+
+interface DataContextType {
+	dataContext: Data | null
+	isLoading: boolean
+	error: string | null
+}
+
+const DataContext = createContext<DataContextType | undefined>(undefined)
+
+export function DataProvider({
+	children,
+	dataContext
+}: {
+	children: ReactNode
+	dataContext: any
+}) {
+	return (
+		<DataContext.Provider value={{
+			dataContext,
+			isLoading: false,
+			error: null
+		}}>
+			{children}
+		</DataContext.Provider>
+	)
+}
+
+export function useDataContext() {
+	const context = useContext(DataContext)
+	if (context === undefined) {
+		throw new Error('useDataContext must be used within a DataProvider')
+	}
+	return context
+}

src/app/lib/action.ts

@@ -14,6 +14,17 @@ export async function fetchFruits() {
 	}
 }
 
+export async function fetchFruit(id: number) {
+	try {
+		const response = await fetch(FRUITS_URL + id, { 'method': 'GET' });
+		let parsed = await response.json();
+		return parsed;
+	} catch (error) {
+		console.error('Error:', error);
+		throw new Error('Failed to fetch fruits data.');
+	}
+}
+
 export async function testConnect() {
 	try {
 		const response = await fetch('http://localhost:8080/api/auth/register', {

src/app/pages/layout.tsx

@@ -1,17 +1,26 @@
 import NavLinks from '@/app/ui/nav-links'
 import styles from '@/app/page.module.scss'
 import HeaderPanel from '../ui/header/headerPanel';
+import { DataProvider } from '@/app/context/data-context';
+import { fetchFruit } from '@/app/lib/action';
+import { getSessionToken } from '@/app/lib/session';
+
+export default async function Layout({ children }: { children: React.ReactNode }) {
+
+	const fruitsData = await fetchFruit(100);
+	const token = await getSessionToken();
 
-export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="flex">
-			<NavLinks />
-			<div className={`${styles.mainContainter}`}>
-				<HeaderPanel />
-				<main>
-					{children}
-				</main>
+		<DataProvider dataContext={fruitsData}>
+			<div className="flex">
+				<NavLinks />
+				<div className={`${styles.mainContainter}`}>
+					<HeaderPanel />
+					<main>
+						{children}
+					</main>
+				</div>
 			</div>
-		</div>
+		</DataProvider>
 	);
 }

src/app/ui/header/notificationsButton.tsx

@@ -12,7 +12,6 @@ export default function NotificationsButton() {
 	const [error, setError] = useState<string | null>(null);
 	const menuRef = useRef<HTMLDivElement | null>(null);
 
-
 	useClickOutside(menuRef, () => {
 		setIsOpen(false);
 	});

src/app/ui/header/userMenuButton.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useState, useRef } from 'react';
-
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import Link from 'next/link';
+import { useDataContext } from '@/app/context/data-context';
+
 export default function UserMenuButton() {
 	const [isOpen, setIsOpen] = useState(false);
 	const menuRef = useRef<HTMLDivElement | null>(null);
+	const { dataContext } = useDataContext()
 
 
 	useClickOutside(menuRef, () => {
@@ -15,6 +17,7 @@ export default function UserMenuButton() {
 
 	const handleButtonClick = () => {
 		if (!isOpen) {
+			console.log(dataContext);
 			setIsOpen(true);
 		} else {
 			setIsOpen(false);