perf(SampleDropdown & Store): Memoization & Redundancy fix with Readability & Modularity (#122)

* enhancing readability, and reducing unnecessary re-renders(sampleDropdown)

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* conditionally rendered template name

Signed-off-by: nitro56565 <nitro56565@gmail.com>

---------

Signed-off-by: nitro56565 <nitro56565@gmail.com>

Author: nitro56565

package-lock.json

@@ -1,47 +1,62 @@
-import { Button, Dropdown, Space, message } from "antd";
+import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-
+import { memo, useCallback, useMemo, useState } from "react";
 import useAppStore from "../store/store";
+import { shallow } from "zustand/shallow";
 
-function SampleDropdown({ setLoading }: { setLoading: any }) {
-  const samples = useAppStore((state) => state.samples);
-  const loadSample = useAppStore((state) => state.loadSample);
+function SampleDropdown({
+  setLoading,
+}: {
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}): JSX.Element {
+  const { samples, loadSample } = useAppStore(
+    (state) => ({
+      samples: state.samples,
+      loadSample: state.loadSample as (key: string) => Promise<void>,
+    }),
+    shallow
+  );
 
-  const items = samples.map((s) => ({
-    label: s.NAME,
-    key: s.NAME,
-  }));
+  const [selectedSample, setSelectedSample] = useState<string | null>(null);
 
-  const handleMenuClick = async (e: any) => {
-    if (e.key) {
-      setLoading(true);
-      try {
-        await loadSample(e.key);
-        message.info(`Loaded ${e.key} sample`);
-      } catch (error) {
-        message.error("Failed to load sample");
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
+  const items: MenuProps["items"] = useMemo(
+    () =>
+      samples.map((s) => ({
+        label: s.NAME,
+        key: s.NAME,
+      })),
+    [samples]
+  );
 
-  const menuProps = {
-    items,
-    onClick: handleMenuClick,
-  };
+  const handleMenuClick = useCallback(
+    async (e: any) => {
+      if (e.key) {
+        setLoading(true);
+        try {
+          await loadSample(e.key);
+          message.info(`Loaded ${e.key} sample`);
+          setSelectedSample(e.key);
+        } catch (error) {
+          message.error("Failed to load sample");
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [loadSample, setLoading]
+  );
 
   return (
     <Space>
-      <Dropdown menu={menuProps} trigger={["click"]}>
+      <Dropdown menu={{ items, onClick: handleMenuClick }} trigger={["click"]}>
         <div className="samples-element">
           <Button>
-            Load Sample <DownOutlined />
+            {selectedSample ? selectedSample : "Load Sample"} <DownOutlined />
           </Button>
         </div>
       </Dropdown>
     </Space>
   );
 }
 
-export default SampleDropdown;
+export default memo(SampleDropdown);

src/components/SampleDropdown.tsx

@@ -44,6 +44,8 @@ export interface DecompressedData {
   agreementHtml: string;
 }
 
+const rebuildDeBounce = debounce(rebuild, 500);
+
 async function rebuild(template: string, model: string, dataString: string) {
   const modelManager = new ModelManager({ strict: true });
   modelManager.addCTOModel(model, undefined, true);
@@ -67,8 +69,6 @@ async function rebuild(template: string, model: string, dataString: string) {
   );
 }
 
-const rebuildDeBounce = debounce(rebuild, 500);
-
 const useAppStore = create<AppState>()(
   immer(
     devtools((set, get) => ({
@@ -120,45 +120,42 @@ const useAppStore = create<AppState>()(
         }
       },
       rebuild: async () => {
+        const { templateMarkdown, modelCto, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            get().templateMarkdown,
-            get().modelCto,
-            get().data
-          );
+          const result = await rebuildDeBounce(templateMarkdown, modelCto, data);
           set(() => ({ agreementHtml: result, error: undefined }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
       },
       setTemplateMarkdown: async (template: string) => {
+        const { modelCto, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            template,
-            get().modelCto,
-            get().data
-          );
-          set(() => ({ agreementHtml: result, error: undefined }));
+          const result = await rebuildDeBounce(template, modelCto, data);
+          set(() => ({
+            templateMarkdown: template,
+            agreementHtml: result,
+            error: undefined,
+          }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
-        set(() => ({ templateMarkdown: template }));
       },
       setEditorValue: (value: string) => {
         set(() => ({ editorValue: value }));
       },
       setModelCto: async (model: string) => {
+        const { templateMarkdown, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            get().templateMarkdown,
-            model,
-            get().data
-          );
-          set(() => ({ agreementHtml: result, error: undefined }));
+          const result = await rebuildDeBounce(templateMarkdown, model, data);
+          set(() => ({
+            modelCto: model,
+            agreementHtml: result,
+            error: undefined,
+          }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
-        set(() => ({ modelCto: model }));
       },
       setEditorModelCto: (value: string) => {
         set(() => ({ editorModelCto: value }));