trims the user context value, updates the message displayed when the user context is empty and also adds a default value to the text area field

Author: steven-mpawulo

apps/desktop/src/components/settings/views/user-context.tsx

@@ -5,86 +5,89 @@ import { load } from "@tauri-apps/plugin-store";
 import React, { useEffect, useRef, useState } from "react";
 
 export default function UserContext() {
-  const [isLoading, setIsLoading] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [userContext, setUserContext] = useState<{ value: string } | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    const [userContext, setUserContext] = useState<{ value: string } | null>(null);
 
-  const showUserContextToast = (content: string) => {
-    toast({
-      id: "user-context",
-      title: "User Context",
-      content: content,
-      dismissible: true,
-    });
-  };
+    const showUserContextToast = (content: string) => {
+        toast({
+            id: "user-context",
+            title: "User Context",
+            content: content,
+            dismissible: true,
+        });
+    };
 
-  const getStore = async () => {
-    return await load("store.json", { autoSave: false });
-  };
+    const getStore = async () => {
+        return await load("store.json", { autoSave: false });
+    };
 
-  const getUserContext = async (): Promise<{ value: string } | null> => {
-    let store = await getStore();
-    let userContext = await store.get("user_context");
+    const getUserContext = async (): Promise<{ value: string } | null> => {
+        let store = await getStore();
+        let userContext = await store.get("user_context");
 
-    return userContext as { value: string } | null;
-  };
+        return userContext as { value: string } | null;
+    };
 
-  const handleSave = async () => {
-    try {
-      setIsLoading(true);
-      let store = await getStore();
+    const handleSave = async () => {
+        try {
+            setIsLoading(true);
+            let store = await getStore();
 
-      if (!store) {
-        showUserContextToast("Failed to retrieve user store");
-        setIsLoading(false);
-        return;
-      }
+            const value = textAreaRef.current?.value?.trim();
 
-      if (!textAreaRef?.current?.value) {
-        showUserContextToast("Failed to save user context");
-        setIsLoading(false);
-        return;
-      }
+            if (!store) {
+                showUserContextToast("Failed to retrieve user store");
+                setIsLoading(false);
+                return;
+            }
 
-      store.set("user_context", { value: textAreaRef?.current?.value });
-      await store.save();
-      showUserContextToast("User context saved successfully");
-      setIsLoading(false);
-    } catch (error) {
-      setIsLoading(false);
-      console.log("Failed to save user context with error ", error);
-    }
-  };
+            if (!value) {
+                showUserContextToast("Please enter some content before saving.");
+                setIsLoading(false);
+                return;
+            }
 
-  useEffect(() => {
-    getUserContext().then((val) => {
-      setUserContext(val);
-    }).catch((e) => {
-      console.log(e);
-    });
-  }, []);
+            store.set("user_context", { value });
+            await store.save();
+            showUserContextToast("User context saved successfully");
+            setIsLoading(false);
+        } catch (error) {
+            setIsLoading(false);
+            console.log("Failed to save user context with error ", error);
+        }
+    };
 
-  return (
-    <div className="flex-1 ">
-      <div className="mb-2">
-        <p className="text-black ">User Context</p>
-      </div>
-      <Textarea
-        className="h-full"
-        ref={textAreaRef}
-        placeholder={`${userContext?.value || "Enter details about yourself"}`}
-      >
-      </Textarea>
+    useEffect(() => {
+        getUserContext().then((val) => {
+            setUserContext(val);
+        }).catch((e) => {
+            console.log(e);
+        });
+    }, []);
 
-      <div className="mt-2 flex flex-row w-full justify-center">
-        <Button
-          isLoading={isLoading}
-          className="w-3/4"
-          onClick={handleSave}
-        >
-          <span className="text-white">Save</span>
-        </Button>
-      </div>
-    </div>
-  );
+    return (
+        <div className="flex-1 ">
+            <div className="mb-2">
+                <p className="text-black ">User Context</p>
+            </div>
+            <Textarea
+                className="h-full"
+                ref={textAreaRef}
+                placeholder="Enter details about yourself"
+                defaultValue={userContext?.value ?? ""}
+            >
+            </Textarea>
+
+            <div className="mt-2 flex flex-row w-full justify-center">
+                <Button
+                    isLoading={isLoading}
+                    className="w-3/4"
+                    onClick={handleSave}
+                >
+                    <span className="text-white">Save</span>
+                </Button>
+            </div>
+        </div>
+    );
 }