From 28ee97782c3332e1718d3e793e494a8618439ac0 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Sun, 3 Aug 2025 14:04:10 +0200
Subject: [PATCH] fix context error

---
 frontend/src/app/layout.tsx                | 20 ++------------------
 frontend/src/app/nominations/page.tsx      |  2 +-
 frontend/src/contexts/AnimationContext.tsx | 21 +++++++++++++++++++++
 frontend/tsconfig.json                     |  3 ++-
 4 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/contexts/AnimationContext.tsx

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 7017628..5972164 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,29 +1,13 @@
 "use client";
 import "./style.css";
-import { useState, createContext, useContext } from "react";
+import { useState } from "react";
 import { AuthProvider } from "react-oidc-context";
 import { oidcConfig, userManager } from "muzak/config/auth";
 import { Source_Sans_3, Nunito } from "next/font/google";
 import AuthStatus from "muzak/components/AuthStatus";
 import NavigationBar from "muzak/components/NavigationBar";
 import Quota from "muzak/components/Quota";
-
-interface AnimationContextType {
-  isAnimate: boolean;
-  setIsAnimate: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const AnimationContext = createContext<AnimationContextType | undefined>(
-  undefined,
-);
-
-export const useAnimation = () => {
-  const context = useContext(AnimationContext);
-  if (context === undefined) {
-    throw new Error("useAnimation must be used within an AnimationProvider");
-  }
-  return context;
-};
+import { AnimationContext } from "muzak/contexts/AnimationContext";
 
 const nunito = Nunito({
   subsets: ["latin"],
diff --git a/frontend/src/app/nominations/page.tsx b/frontend/src/app/nominations/page.tsx
index 7be6f5c..0e00ad6 100644
--- a/frontend/src/app/nominations/page.tsx
+++ b/frontend/src/app/nominations/page.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { Nunito } from "next/font/google";
 import { api } from "muzak/data/fetcher";
-import { useAnimation } from "../layout";
+import { useAnimation } from "muzak/contexts/AnimationContext";
 
 const nunito = Nunito({
   weight: "900",
diff --git a/frontend/src/contexts/AnimationContext.tsx b/frontend/src/contexts/AnimationContext.tsx
new file mode 100644
index 0000000..fb7925a
--- /dev/null
+++ b/frontend/src/contexts/AnimationContext.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { createContext, useContext } from "react";
+
+interface AnimationContextType {
+  isAnimate: boolean;
+  setIsAnimate: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const AnimationContext = createContext<AnimationContextType | undefined>(
+  undefined,
+);
+
+export const useAnimation = () => {
+  const context = useContext(AnimationContext);
+  if (context === undefined) {
+    throw new Error("useAnimation must be used within an AnimationProvider");
+  }
+  return context;
+};
+
+export { AnimationContext };
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 1317fc2..e2b8577 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -9,7 +9,8 @@
       "muzak/config/*": ["./src/config/*"],
       "muzak/data/*": ["./src/data/*"],
       "muzak/app/*": ["./src/app/*"],
-      "muzak/components/*": ["./src/components/*"]
+      "muzak/components/*": ["./src/components/*"],
+      "muzak/contexts/*": ["./src/contexts/*"]
     },
 
     "allowJs": false,