refactor(code-toolbar): standardize component exports and simplify reset logic

- Changed all toolbar action components from named exports with curly braces to default exports
- Simplified ResetButton by moving template logic to useProblemEditorActions hook
- Updated useProblemEditorActions to handle template selection internally using store data
- Renamed problem-editor-store import to problem-editor for consistency
This commit is contained in:
cfngc4594 2025-05-13 15:56:28 +08:00
parent eea16a8224
commit f9cbc5e085
7 changed files with 48 additions and 40 deletions

View File

@ -7,7 +7,7 @@ import { useTranslations } from "next-intl";
import { TooltipButton } from "@/components/tooltip-button";
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
const CopyButton = () => {
export const CopyButton = () => {
const t = useTranslations("WorkspaceEditorHeader.CopyButton");
const [copied, setCopied] = useState(false);
const { canExecute, handleCopy } = useProblemEditorActions();
@ -52,5 +52,3 @@ const CopyButton = () => {
</TooltipButton>
);
};
export { CopyButton };

View File

@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
import { TooltipButton } from "@/components/tooltip-button";
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
const FormatButton = () => {
export const FormatButton = () => {
const t = useTranslations("WorkspaceEditorHeader.FormatButton");
const { canExecute, handleFormat } = useProblemEditorActions();
@ -20,5 +20,3 @@ const FormatButton = () => {
</TooltipButton>
);
};
export { FormatButton };

View File

@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
import { TooltipButton } from "@/components/tooltip-button";
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
const RedoButton = () => {
export const RedoButton = () => {
const t = useTranslations("WorkspaceEditorHeader.RedoButton");
const { canExecute, handleRedo } = useProblemEditorActions();
@ -20,5 +20,3 @@ const RedoButton = () => {
</TooltipButton>
);
};
export { RedoButton };

View File

@ -1,37 +1,18 @@
"use client";
import { useMemo } from "react";
import { RotateCcw } from "lucide-react";
import { useTranslations } from "next-intl";
import type { Template } from "@/generated/client";
import { TooltipButton } from "@/components/tooltip-button";
import { useProblemEditorStore } from "@/stores/problem-editor-store";
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
interface ResetButtonProps {
templates: Template[];
}
const ResetButton = ({ templates }: ResetButtonProps) => {
export const ResetButton = () => {
const t = useTranslations("WorkspaceEditorHeader.ResetButton");
const { language } = useProblemEditorStore();
const { canExecute, handleReset } = useProblemEditorActions();
const currentTemplate = useMemo(() => {
return (
templates.find((template) => template.language === language)?.template ??
""
);
}, [language, templates]);
const handleClick = () => {
handleReset(currentTemplate);
};
return (
<TooltipButton
tooltipContent={t("TooltipContent")}
onClick={handleClick}
onClick={handleReset}
aria-label={t("TooltipContent")}
disabled={!canExecute}
>
@ -39,5 +20,3 @@ const ResetButton = ({ templates }: ResetButtonProps) => {
</TooltipButton>
);
};
export { ResetButton };

View File

@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
import { TooltipButton } from "@/components/tooltip-button";
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
const UndoButton = () => {
export const UndoButton = () => {
const t = useTranslations("WorkspaceEditorHeader.UndoButton");
const { canExecute, handleUndo } = useProblemEditorActions();
@ -20,5 +20,3 @@ const UndoButton = () => {
</TooltipButton>
);
};
export { UndoButton };

View File

@ -0,0 +1,34 @@
import { cn } from "@/lib/utils";
import {
CopyButton,
FormatButton,
LanguageSelector,
RedoButton,
ResetButton,
UndoButton,
} from "@/features/problems/code/components/toolbar";
interface CodeToolbarProps {
className?: string;
}
export const CodeToolbar = async ({ className }: CodeToolbarProps) => {
return (
<header
className={cn("relative flex h-8 flex-none items-center", className)}
>
<div className="absolute flex w-full items-center justify-between px-2">
<div className="flex items-center gap-2">
<LanguageSelector />
</div>
<div className="flex items-center gap-2">
<ResetButton />
<UndoButton />
<RedoButton />
<FormatButton />
<CopyButton />
</div>
</div>
</header>
);
};

View File

@ -1,8 +1,8 @@
import { useCallback } from "react";
import { useProblemEditorStore } from "@/stores/problem-editor-store";
import { useProblemEditorStore } from "@/stores/problem-editor";
export const useProblemEditorActions = () => {
const { editor } = useProblemEditorStore();
const { editor, problem, language } = useProblemEditorStore();
const handleCopy = useCallback(async () => {
try {
@ -26,12 +26,15 @@ export const useProblemEditorActions = () => {
editor?.trigger("redo", "redo", null);
}, [editor]);
const handleReset = useCallback((template: string) => {
if (!editor) return;
const handleReset = useCallback(() => {
if (!editor || !problem) return;
const model = editor.getModel();
if (!model) return;
const template =
problem.templates.find((t) => t.language === language)?.content ?? "";
const fullRange = model.getFullModelRange();
editor.pushUndoStop();
editor.executeEdits("reset-code", [
@ -42,7 +45,7 @@ export const useProblemEditorActions = () => {
},
]);
editor.pushUndoStop();
}, [editor]);
}, [editor, language, problem]);
return {
handleCopy,