refactor(hooks): rename use-problem-editor.ts to use-problem.ts

src/app/(app)/problems/[id]/layout.tsx

@@ -1,8 +1,12 @@
 import prisma from "@/lib/prisma";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 import { notFound } from "next/navigation";
+import { ProblemStoreProvider } from "@/providers/problem-store-provider";
 import { PlaygroundHeader } from "@/components/features/playground/header";
-import { ProblemEditorProvider } from "@/providers/problem-editor-provider";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 
 interface PlaygroundLayoutProps {
   params: Promise<{ id: string }>;
@@ -38,7 +42,7 @@ export default async function PlaygroundLayout({
 
   return (
     <div className="h-screen flex flex-col">
-      <ProblemEditorProvider
+      <ProblemStoreProvider
         problemId={id}
         templates={problemData.templates ?? []}
         editorLanguageConfigs={editorLanguageConfigs}
@@ -64,7 +68,7 @@ export default async function PlaygroundLayout({
             </ResizablePanel>
           </ResizablePanelGroup>
         </main>
-      </ProblemEditorProvider>
+      </ProblemStoreProvider>
     </div>
   );
 }

src/components/features/playground/workspace/editor/components/copy-button.tsx

@@ -10,10 +10,10 @@ import { cn } from "@/lib/utils";
 import { useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 export function CopyButton() {
-  const { editor } = useProblemEditor();
+  const { editor } = useProblem();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {

src/components/features/playground/workspace/editor/components/footer.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 interface WorkspaceEditorFooterProps {
   className?: string;
@@ -12,7 +12,7 @@ export function WorkspaceEditorFooter({
   className,
   ...props
 }: WorkspaceEditorFooterProps) {
-  const { editor } = useProblemEditor();
+  const { editor } = useProblem();
   const [position, setPosition] = useState<{ lineNumber: number; column: number } | null>(null);
 
   useEffect(() => {

src/components/features/playground/workspace/editor/components/format-button.tsx

@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/tooltip";
 import { Paintbrush } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 export function FormatButton() {
-  const { editor } = useProblemEditor();
+  const { editor } = useProblem();
 
   return (
     <TooltipProvider delayDuration={0}>

src/components/features/playground/workspace/editor/components/language-selector.tsx

@@ -8,14 +8,14 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Loading } from "@/components/loading";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 import { EditorLanguageIcons } from "@/config/editor-language-icons";
 
 export function LanguageSelector() {
-  const { hydrated, currentLang, changeLang, editorLanguageConfigs } = useProblemEditor();
+  const { hydrated, currentLang, changeLang, editorLanguageConfigs } = useProblem();
 
   if (!hydrated) {
-    return <Loading className="h-6 w-16 p-0" skeletonClassName="rounded-2xl" />
+    return <Loading className="h-6 w-16 p-0" skeletonClassName="rounded-2xl" />;
   }
 
   return (

src/components/features/playground/workspace/editor/components/redo-button.tsx

@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/tooltip";
 import { Redo2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 export function RedoButton() {
-  const { editor } = useProblemEditor();
+  const { editor } = useProblem();
 
   return (
     <TooltipProvider delayDuration={0}>

src/components/features/playground/workspace/editor/components/reset-button.tsx

@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/tooltip";
 import { RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 export function ResetButton() {
-  const { editor, currentTemplate } = useProblemEditor();
+  const { editor, currentTemplate } = useProblem();
 
   const handleReset = () => {
     if (editor) {

src/components/features/playground/workspace/editor/components/undo-button.tsx

@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/tooltip";
 import { Undo2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
+import { useProblem } from "@/hooks/use-problem";
 
 export function UndoButton() {
-  const { editor } = useProblemEditor();
+  const { editor } = useProblem();
 
   return (
     <TooltipProvider delayDuration={0}>

src/components/problem-editor.tsx

@@ -5,8 +5,8 @@ import { highlighter } from "@/lib/shiki";
 import type { editor } from "monaco-editor";
 import { Loading } from "@/components/loading";
 import { shikiToMonaco } from "@shikijs/monaco";
+import { useProblem } from "@/hooks/use-problem";
 import type { Monaco } from "@monaco-editor/react";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
 import { DefaultEditorOptionConfig } from "@/config/editor-option";
 
 // Dynamically import Monaco Editor with SSR disabled
@@ -25,8 +25,7 @@ const Editor = dynamic(
 );
 
 export function CodeEditor() {
-
+  const { setEditor, currentLang, currentPath, currentTheme, currentValue, changeValue } = useProblem();
-  const { setEditor, currentLang, currentPath, currentTheme, currentValue, changeValue } = useProblemEditor();
 
   const handleBeforeMount = (monaco: Monaco) => {
     shikiToMonaco(highlighter, monaco);
@@ -34,7 +33,7 @@ export function CodeEditor() {
 
   const handleOnMount = (editor: editor.IStandaloneCodeEditor) => {
     setEditor(editor);
-  }
+  };
 
   const handleOnChange = (value: string | undefined) => {
     if (value === undefined) return;

src/components/run-code.tsx

@@ -1,13 +1,18 @@
 "use client";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 import { judge } from "@/app/actions/judge";
 import { Button } from "@/components/ui/button";
+import { useProblem } from "@/hooks/use-problem";
 import { LoaderCircleIcon, PlayIcon } from "lucide-react";
-import { useProblemEditor } from "@/hooks/use-problem-editor";
 import { showExitCodeToast } from "@/lib/show-exit-code-toast";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface RunCodeProps {
   className?: string;
@@ -17,7 +22,7 @@ export function RunCode({
   className,
   ...props
 }: RunCodeProps) {
-  const { currentLang, editor } = useProblemEditor();
+  const { currentLang, editor } = useProblem();
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleJudge = async () => {

src/hooks/use-problem.ts

@@ -2,7 +2,7 @@ import { getPath } from "@/lib/utils";
 import { EditorLanguage } from "@prisma/client";
 import { useCallback, useEffect, useMemo } from "react";
 import { useMonacoTheme } from "@/hooks/use-monaco-theme";
-import { useProblemEditorStore } from "@/providers/problem-editor-provider";
+import { useProblemStore } from "@/providers/problem-store-provider";
 
 /**
  * Generates a localStorage key for storing the editor language of a problem.
@@ -34,27 +34,29 @@ const getStoredProblemValue = (
   language: EditorLanguage
 ) => localStorage.getItem(getProblemValueStorageKey(problemId, language)) ?? defaultValue;
 
-export const useProblemEditor = () => {
+export const useProblem = () => {
   const { currentTheme } = useMonacoTheme();
-
+  const {
-  const hydrated = useProblemEditorStore((state) => state.hydrated);
+    hydrated,
-  const editor = useProblemEditorStore((state) => state.editor);
+    editor,
-  const globalLang = useProblemEditorStore((state) => state.globalLang);
+    globalLang,
-  const currentLang = useProblemEditorStore((state) => state.currentLang);
+    currentLang,
-  const currentValue = useProblemEditorStore((state) => state.currentValue);
+    currentValue,
-  const setEditor = useProblemEditorStore((state) => state.setEditor);
+    setEditor,
-  const setGlobalLang = useProblemEditorStore((state) => state.setGlobalLang);
+    setGlobalLang,
-  const setCurrentLang = useProblemEditorStore((state) => state.setCurrentLang);
+    setCurrentLang,
-  const setCurrentValue = useProblemEditorStore((state) => state.setCurrentValue);
+    setCurrentValue,
-  const problemId = useProblemEditorStore((state) => state.problemId);
+    problemId,
-  const templates = useProblemEditorStore((state) => state.templates);
+    templates,
-  const editorLanguageConfigs = useProblemEditorStore((state) => state.editorLanguageConfigs);
+    editorLanguageConfigs,
-  const languageServerConfigs = useProblemEditorStore((state) => state.languageServerConfigs);
+    languageServerConfigs,
+  } = useProblemStore((state) => state);
 
   // Get the default template for the current language from the templates list
-  const currentTemplate = useMemo(() => {
+  const currentTemplate = useMemo(
-    return templates.find((t) => t.language === currentLang)?.template || "";
+    () => templates.find((t) => t.language === currentLang)?.template || "",
-  }, [templates, currentLang]);
+    [templates, currentLang]
+  );
 
   const currentEditorLanguageConfig = useMemo(
     () => editorLanguageConfigs.find((c) => c.language === currentLang),
@@ -66,9 +68,10 @@ export const useProblemEditor = () => {
     [languageServerConfigs, currentLang]
   );
 
-  const currentPath = useMemo(() => {
+  const currentPath = useMemo(
-    return currentEditorLanguageConfig ? getPath(currentEditorLanguageConfig) : "";
+    () => (currentEditorLanguageConfig ? getPath(currentEditorLanguageConfig) : ""),
-  }, [currentEditorLanguageConfig]);
+    [currentEditorLanguageConfig]
+  );
 
   // On initialization, load the stored language and corresponding code content
   useEffect(() => {