fix: use Select value instead of defaultValue

when defaultValue is used to pass the current value of Select, a warning
is produced in the console: "cannot update a component while rendering a
different component `Controller`". an unrelated issue
(https://github.com/shadcn-ui/ui/issues/1253) that suggested using the
value prop instead of defaultValue somehow fixed this problem
This commit is contained in:
2024-12-02 11:10:59 +00:00
parent a92f5e8189
commit 3acb85abaf
3 changed files with 42 additions and 24 deletions

View File

@@ -29,6 +29,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { LoadingSpinner } from "@/components/ui/loading-spinner";
import type { BaseTemplate } from "./types";
const NewTemplateForm = object({
baseTemplate: nonempty(string()),
@@ -45,12 +46,34 @@ function NewTemplateDialog() {
Create a new template for workspaces
</DialogDescription>
</DialogHeader>
<TemplateForm />
<TemplateFormContainer />
</DialogContent>
);
}
function TemplateForm() {
function TemplateFormContainer() {
const { data: baseTemplates, isLoading, error } = useBaseTemplates();
if (isLoading) {
return (
<div className="w-full flex items-center justify-center">
<LoadingSpinner />
</div>
);
}
if (error || !baseTemplates) {
return (
<p className="opacity-80">
An error occurred when fetching available options.
</p>
);
}
return <TemplateForm baseTemplates={baseTemplates} />;
}
function TemplateForm({ baseTemplates }: { baseTemplates: BaseTemplate[] }) {
const router = useRouter();
const { createTemplate, isCreatingTemplate } = useCreateTemplate();
const form = useForm({
@@ -74,24 +97,6 @@ function TemplateForm() {
}
}
const { data: baseTemplates, isLoading, error } = useBaseTemplates();
if (isLoading) {
return (
<div className="w-full flex items-center justify-center">
<LoadingSpinner />
</div>
);
}
if (error || !baseTemplates) {
return (
<p className="opacity-80">
An error occurred when fetching available options.
</p>
);
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -101,7 +106,7 @@ function TemplateForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Base template</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a base template" />

View File

@@ -34,6 +34,8 @@ import {
useTemplateEditorStore,
} from "./template-editor-store";
import type { Template } from "./types";
import { useToast } from "@/hooks/use-toast";
import { ToastAction } from "@/components/ui/toast";
function TemplateEditor() {
const { templateName, _splat } = templateEditorRoute.useParams();
@@ -134,7 +136,18 @@ function Editor() {
error,
} = useTemplateFile(templateName, currentPath);
const saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
const { updateTemplateFile } = useUpdateTemplateFile(templateName);
const { updateTemplateFile, error: updateError } =
useUpdateTemplateFile(templateName);
const { toast } = useToast();
useEffect(() => {
if (updateError) {
toast({
variant: "destructive",
title: "Failed to save template",
});
}
}, [updateError, toast]);
useEffect(
() => () => {

View File

@@ -192,7 +192,7 @@ function NewWorkspaceForm({
render={({ field }) => (
<FormItem>
<FormLabel>Image for this workspace</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select an image" />
@@ -217,7 +217,7 @@ function NewWorkspaceForm({
render={({ field }) => (
<FormItem>
<FormLabel>Docker runtime</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a Docker runtime" />