Make save button disappear on save

Fixes a bug where often the "Save" button wouldn't disappear as expected the first time you clicked it.
This commit is contained in:
Kyle Corbitt
2023-07-14 17:35:57 -07:00
parent ab9c721d09
commit 74c201d3a8
2 changed files with 10 additions and 7 deletions

View File

@@ -5,7 +5,8 @@ import { type PromptVariant } from "./types";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { useAppStore } from "~/state/store"; import { useAppStore } from "~/state/store";
import { editorBackground } from "~/state/sharedVariantEditor.slice"; import { editorBackground } from "~/state/sharedVariantEditor.slice";
export default function VariantConfigEditor(props: { variant: PromptVariant }) {
export default function VariantEditor(props: { variant: PromptVariant }) {
const monaco = useAppStore.use.sharedVariantEditor.monaco(); const monaco = useAppStore.use.sharedVariantEditor.monaco();
const editorRef = useRef<ReturnType<NonNullable<typeof monaco>["editor"]["create"]> | null>(null); const editorRef = useRef<ReturnType<NonNullable<typeof monaco>["editor"]["create"]> | null>(null);
const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`); const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`);
@@ -17,10 +18,12 @@ export default function VariantConfigEditor(props: { variant: PromptVariant }) {
const checkForChanges = useCallback(() => { const checkForChanges = useCallback(() => {
if (!editorRef.current) return; if (!editorRef.current) return;
const currentConfig = editorRef.current.getValue(); const currentFn = editorRef.current.getValue();
setIsChanged(currentConfig !== lastSavedFn); setIsChanged(currentFn.length > 0 && currentFn !== lastSavedFn);
}, [lastSavedFn]); }, [lastSavedFn]);
useEffect(checkForChanges, [checkForChanges, lastSavedFn]);
const replaceVariant = api.promptVariants.replaceVariant.useMutation(); const replaceVariant = api.promptVariants.replaceVariant.useMutation();
const utils = api.useContext(); const utils = api.useContext();
const toast = useToast(); const toast = useToast();
@@ -75,9 +78,9 @@ export default function VariantConfigEditor(props: { variant: PromptVariant }) {
}); });
} }
await utils.promptVariants.list.invalidate(); setIsChanged(false);
checkForChanges(); await utils.promptVariants.list.invalidate();
}, [checkForChanges]); }, [checkForChanges]);
useEffect(() => { useEffect(() => {

View File

@@ -3,7 +3,7 @@ import { api } from "~/utils/api";
import NewScenarioButton from "./NewScenarioButton"; import NewScenarioButton from "./NewScenarioButton";
import NewVariantButton from "./NewVariantButton"; import NewVariantButton from "./NewVariantButton";
import ScenarioRow from "./ScenarioRow"; import ScenarioRow from "./ScenarioRow";
import VariantConfigEditor from "./VariantEditor"; import VariantEditor from "./VariantEditor";
import VariantHeader from "./VariantHeader"; import VariantHeader from "./VariantHeader";
import { cellPadding } from "../constants"; import { cellPadding } from "../constants";
import { BsPencil } from "react-icons/bs"; import { BsPencil } from "react-icons/bs";
@@ -94,7 +94,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
{variants.data.map((variant) => ( {variants.data.map((variant) => (
<GridItem key={variant.uiId}> <GridItem key={variant.uiId}>
<VariantConfigEditor variant={variant} /> <VariantEditor variant={variant} />
</GridItem> </GridItem>
))} ))}
{variants.data.map((variant) => ( {variants.data.map((variant) => (