feat: handling SSR on evaluation

components/evaluation/client-wrapper.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useUser } from "@/hooks/use-user-context";
+import { UserEvaluation, Team } from "@/lib/types";
+import {
+  updateSkillLevel as updateSkillLevelAction,
+  updateSkillMentorStatus as updateSkillMentorStatusAction,
+  updateSkillLearningStatus as updateSkillLearningStatusAction,
+  addSkillToEvaluation as addSkillToEvaluationAction,
+  removeSkillFromEvaluation as removeSkillFromEvaluationAction,
+} from "@/lib/evaluation-actions";
+
+interface EvaluationClientWrapperProps {
+  userEvaluation: UserEvaluation;
+  teams: Team[];
+  children: React.ReactNode;
+}
+
+export function EvaluationClientWrapper({
+  userEvaluation,
+  teams,
+  children,
+}: EvaluationClientWrapperProps) {
+  const { setUserInfo } = useUser();
+  const router = useRouter();
+
+  // Wrapper functions that refresh the page after API calls
+  const updateSkillLevel = async (
+    category: string,
+    skillId: string,
+    level: any
+  ) => {
+    await updateSkillLevelAction(category, skillId, level);
+    router.refresh();
+  };
+
+  const updateSkillMentorStatus = async (
+    category: string,
+    skillId: string,
+    canMentor: boolean
+  ) => {
+    await updateSkillMentorStatusAction(category, skillId, canMentor);
+    router.refresh();
+  };
+
+  const updateSkillLearningStatus = async (
+    category: string,
+    skillId: string,
+    wantsToLearn: boolean
+  ) => {
+    await updateSkillLearningStatusAction(category, skillId, wantsToLearn);
+    router.refresh();
+  };
+
+  const addSkillToEvaluation = async (category: string, skillId: string) => {
+    await addSkillToEvaluationAction(category, skillId);
+    router.refresh();
+  };
+
+  const removeSkillFromEvaluation = async (
+    category: string,
+    skillId: string
+  ) => {
+    await removeSkillFromEvaluationAction(category, skillId);
+    router.refresh();
+  };
+
+  // Update user info in navigation when user evaluation is loaded
+  useEffect(() => {
+    if (userEvaluation) {
+      const teamName =
+        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
+      setUserInfo({
+        firstName: userEvaluation.profile.firstName,
+        lastName: userEvaluation.profile.lastName,
+        teamName,
+      });
+    } else {
+      setUserInfo(null);
+    }
+  }, [userEvaluation, teams, setUserInfo]);
+
+  // Provide evaluation functions to children through React context or props
+  return (
+    <EvaluationProvider
+      updateSkillLevel={updateSkillLevel}
+      updateSkillMentorStatus={updateSkillMentorStatus}
+      updateSkillLearningStatus={updateSkillLearningStatus}
+      addSkillToEvaluation={addSkillToEvaluation}
+      removeSkillFromEvaluation={removeSkillFromEvaluation}
+    >
+      {children}
+    </EvaluationProvider>
+  );
+}
+
+// Simple context provider for evaluation functions
+import { createContext, useContext } from "react";
+
+interface EvaluationContextType {
+  updateSkillLevel: (categoryId: string, skillId: string, level: any) => void;
+  updateSkillMentorStatus: (
+    categoryId: string,
+    skillId: string,
+    canMentor: boolean
+  ) => void;
+  updateSkillLearningStatus: (
+    categoryId: string,
+    skillId: string,
+    wantsToLearn: boolean
+  ) => void;
+  addSkillToEvaluation: (categoryId: string, skillId: string) => void;
+  removeSkillFromEvaluation: (categoryId: string, skillId: string) => void;
+}
+
+const EvaluationContext = createContext<EvaluationContextType | undefined>(
+  undefined
+);
+
+function EvaluationProvider({
+  children,
+  updateSkillLevel,
+  updateSkillMentorStatus,
+  updateSkillLearningStatus,
+  addSkillToEvaluation,
+  removeSkillFromEvaluation,
+}: {
+  children: React.ReactNode;
+} & EvaluationContextType) {
+  return (
+    <EvaluationContext.Provider
+      value={{
+        updateSkillLevel,
+        updateSkillMentorStatus,
+        updateSkillLearningStatus,
+        addSkillToEvaluation,
+        removeSkillFromEvaluation,
+      }}
+    >
+      {children}
+    </EvaluationContext.Provider>
+  );
+}
+
+export function useEvaluationContext() {
+  const context = useContext(EvaluationContext);
+  if (context === undefined) {
+    throw new Error(
+      "useEvaluationContext must be used within an EvaluationProvider"
+    );
+  }
+  return context;
+}