fix: update workspace name and models

Author: peppescg

src/features/workspace/components/workspace-name.tsx

@@ -12,7 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { useFormState } from "@/hooks/useFormState";
 import { FormButtons } from "@/components/FormButtons";
-import { FormEvent } from "react";
+import { FormEvent, useEffect } from "react";
 
 export function WorkspaceName({
   className,
@@ -29,10 +29,14 @@ export function WorkspaceName({
   const formState = useFormState({
     workspaceName,
   });
-  const { values, updateFormValues } = formState;
+  const { values, updateFormValues, setInitialValues } = formState;
   const isDefault = workspaceName === "default";
   const isUneditable = isArchived || isPending || isDefault;
 
+  useEffect(() => {
+    setInitialValues({ workspaceName });
+  }, [setInitialValues, workspaceName]);
+
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
 

src/features/workspace/hooks/use-muxing-rules-form-workspace.ts

@@ -5,32 +5,41 @@ import { v4 as uuidv4 } from "uuid";
 
 export type PreferredMuxRule = MuxRule & { id: string };
 
+type MuxingRulesFormState = {
+  rules: PreferredMuxRule[];
+};
+
 const DEFAULT_STATE: PreferredMuxRule = {
-  id: "",
+  id: uuidv4(),
   provider_id: "",
   model: "",
   matcher: "",
   matcher_type: MuxMatcherType.CATCH_ALL,
 };
 
 export const useMuxingRulesFormState = (initialValues: MuxRule[]) => {
-  const formState = useFormState<{
-    rules: PreferredMuxRule[];
-  }>({
+  const formState = useFormState<MuxingRulesFormState>({
     rules: [{ ...DEFAULT_STATE, id: uuidv4() }],
   });
   const { values, updateFormValues, setInitialValues } = formState;
 
   useEffect(() => {
-    if (initialValues.length === 0) return;
     setInitialValues({
-      rules: initialValues.map((item) => ({ ...item, id: uuidv4() })),
+      rules:
+        initialValues.length == 0
+          ? [DEFAULT_STATE]
+          : initialValues.map((item) => ({ ...item, id: uuidv4() })),
     });
   }, [initialValues, setInitialValues]);
 
   const addRule = useCallback(() => {
+    const newRules = [
+      ...values.rules.slice(0, values.rules.length - 1),
+      { ...DEFAULT_STATE, id: uuidv4() },
+      ...values.rules.slice(values.rules.length - 1),
+    ];
     updateFormValues({
-      rules: [...values.rules, { ...DEFAULT_STATE, id: uuidv4() }],
+      rules: newRules,
     });
   }, [updateFormValues, values.rules]);