Surya4419/i330/unnecessary re render on sample selection

src/components/SampleDropdown.tsx

@@ -1,25 +1,27 @@
+import React from "react";
 import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 
-function SampleDropdown({
+const SampleDropdown = function SampleDropdown({
   setLoading,
 }: {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-  const { samples, loadSample } = useStoreWithEqualityFn(
+  const { samples, loadSample, sampleName } = useStoreWithEqualityFn(
     useAppStore,
     (state) => ({
       samples: state.samples,
       loadSample: state.loadSample as (key: string) => Promise<void>,
+      sampleName: state.sampleName
     }),
     shallow
   );
 
-  const [selectedSample, setSelectedSample] = useState<string | null>(null);
+
 
   const items: MenuProps["items"] = useMemo(
     () =>
@@ -37,7 +39,7 @@ function SampleDropdown({
         try {
           await loadSample(e.key);
           void message.info(`Loaded ${e.key} sample`);
-          setSelectedSample(e.key);
+
         } catch (error) {
           void message.error("Failed to load sample");
         } finally {
@@ -54,12 +56,11 @@ function SampleDropdown({
       <Dropdown menu={{ items, onClick: (e) => void handleMenuClick(e) }} trigger={["click"]}>
         <div className="samples-element">
           <Button aria-label="Load sample dropdown">
-            {selectedSample ? selectedSample : "Load Sample"} <DownOutlined />
+            {sampleName || "Load Sample"} <DownOutlined />
           </Button>
         </div>
       </Dropdown>
     </Space>
   );
 }
-
 export default SampleDropdown;

src/store/store.ts

@@ -90,7 +90,7 @@ const useAppStore = create<AppState>()(
         if (compressedData) {
           await get().loadFromLink(compressedData);
         } else {
-          await get().rebuild();
+          await get().loadSample(playground.NAME);
         }
       },
       loadSample: async (name: string) => {
@@ -107,76 +107,92 @@ const useAppStore = create<AppState>()(
             data: JSON.stringify(sample.DATA, null, 2),
             editorAgreementData: JSON.stringify(sample.DATA, null, 2),
           }));
-          await get().rebuild();
+          get().rebuild();
+
         }
       },
       rebuild: async () => {
         const { templateMarkdown, modelCto, data } = get();
         try {
           const result = await rebuildDeBounce(templateMarkdown, modelCto, data);
-          set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
+          set(() => ({ agreementHtml: result, error: undefined }));
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: error instanceof Error ? error.message : 'Unknown error' }));
         }
       },
       setTemplateMarkdown: async (template: string) => {
-        set(() => ({ templateMarkdown: template }));
+        set(() => ({
+  templateMarkdown: template,
+  editorValue: template 
+}));
         const { modelCto, data } = get();
         try {
           const result = await rebuildDeBounce(template, modelCto, data);
-          set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
+          set(() => ({ agreementHtml: result, error: undefined })); 
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: error instanceof Error ? error.message : 'Unknown error' }));
         }
       },
       setEditorValue: (value: string) => {
         set(() => ({ editorValue: value }));
       },
       setModelCto: async (model: string) => {
-        set(() => ({ modelCto: model }));
+        set(() => ({
+  modelCto: model,
+  editorModelCto: model 
+}));
         const { templateMarkdown, data } = get();
         try {
           const result = await rebuildDeBounce(templateMarkdown, model, data);
-          set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
+          set(() => ({ agreementHtml: result, error: undefined })); 
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: error instanceof Error ? error.message : 'Unknown error' }));
         }
       },
       setEditorModelCto: (value: string) => {
         set(() => ({ editorModelCto: value }));
       },
       setData: async (data: string) => {
-        set(() => ({ data }));
+        set(() => ({
+  data,
+  editorAgreementData: data 
+}));
         try {
           const result = await rebuildDeBounce(
             get().templateMarkdown,
             get().modelCto,
             data
           );
-          set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
+          set(() => ({ agreementHtml: result, error: undefined })); 
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: error instanceof Error ? error.message : 'Unknown error' }));
         }
       },
       setEditorAgreementData: (value: string) => {
         set(() => ({ editorAgreementData: value }));
       },
       generateShareableLink: () => {
-        const state = get();
-        const compressedData = compress({
-          templateMarkdown: state.templateMarkdown,
-          modelCto: state.modelCto,
-          data: state.data,
-          agreementHtml: state.agreementHtml,
-        });
-        return `${window.location.origin}?data=${compressedData}`;
+        try {
+          const state = get();
+          const compressedData = compress({
+            templateMarkdown: state.templateMarkdown,
+            modelCto: state.modelCto,
+            data: state.data,
+            agreementHtml: state.agreementHtml,
+          });
+          return `${window.location.origin}?data=${compressedData}`;
+        } catch (error) {
+          set(() => ({ error: 'Failed to generate share link: ' + (error instanceof Error ? error.message : 'Unknown error') }));
+          return window.location.href;
+        }
       },
       loadFromLink: async (compressedData: string) => {
         try {
-          const { templateMarkdown, modelCto, data, agreementHtml } = decompress(compressedData);
-          if (!templateMarkdown || !modelCto || !data) {
-            throw new Error("Invalid share link data");
+          const decompressed = decompress(compressedData);
+          if (!decompressed?.templateMarkdown || !decompressed?.modelCto || !decompressed?.data) {
+            throw new Error("Invalid share link - missing required fields");
           }
+          const { templateMarkdown, modelCto, data, agreementHtml } = decompressed;
           set(() => ({
             templateMarkdown,
             editorValue: templateMarkdown,
@@ -185,9 +201,9 @@ const useAppStore = create<AppState>()(
             data,
             editorAgreementData: data,
             agreementHtml,
-            error: undefined,
+            error: undefined
           }));
-          await get().rebuild();
+
         } catch (error) {
           set(() => ({
             error: "Failed to load shared content: " + (error instanceof Error ? error.message : "Unknown error"),
@@ -209,15 +225,3 @@ const useAppStore = create<AppState>()(
 
 
 export default useAppStore;
-
-function formatError(error: any): string {
-  console.error(error);
-  if (typeof error === "string") return error;
-  if (Array.isArray(error)) return error.map((e) => formatError(e)).join("\n");
-  if (error.code) {
-    const sub = error.errors ? formatError(error.errors) : "";
-    const msg = error.renderedMessage || "";
-    return `Error: ${error.code} ${sub} ${msg}`;
-  }
-  return error.toString();
-}