fix(EditFlowSettingsComponent): remove unused code and improve performance by removing unnecessary API calls to read flows from the database

feat(EditFlowSettingsComponent): add support for checking if the entered name is already in use by passing the list of unavailable names as a prop
fix(FlowSettingsModal): remove unused state variable invalidName and setInvalidName function
feat(FlowSettingsModal): add support for checking if the entered name is already in use by passing the list of unavailable names as a prop
fix(ShareModal): add support for checking if the entered name is already in use by passing the list of unavailable names as a prop
feat(ShareModal): add support for fetching the list of unavailable names from the API to check if the entered name is already in use
fix(types): remove unused invalidName property from InputProps type

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -1,29 +1,18 @@
-import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
-import { readFlowsFromDatabase } from "../../controllers/API";
 import { InputProps } from "../../types/components";
-import { FlowType } from "../../types/flow";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
-  invalidName,
+  invalidNameList,
-  setInvalidName,
   description,
   maxLength = 50,
   setName,
   setDescription,
 }: InputProps): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
-  const nameLists = useRef<string[]>([]);
-  useEffect(() => {
-    readFlowsFromDatabase().then((flows) => {
-      flows.forEach((flow: FlowType) => {
-        nameLists.current.push(flow.name);
-      });
-    });
-  }, []);
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -32,19 +21,6 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-    if (invalidName !== undefined) {
-      if (!nameLists.current.includes(value)) {
-        setInvalidName!(false);
-      } else {
-        setInvalidName!(true);
-      }
-
-      if (!nameLists.current.includes(value)) {
-        setInvalidName!(false);
-      } else {
-        setInvalidName!(true);
-      }
-    }
     setName(value);
   };
 
@@ -60,7 +36,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           {isMaxLength && (
             <span className="edit-flow-span">Character limit reached</span>
           )}
-          {invalidName && (
+          {invalidNameList?.includes(name ?? "") && (
             <span className="edit-flow-span">Name already in use</span>
           )}
         </div>

src/frontend/src/controllers/API/index.ts

@@ -603,6 +603,7 @@ export async function getStoreComponents({
   isPrivate = null,
   search = null,
   filterByUser = null,
+  fields = null,
 }: {
   page?: number;
   limit?: number;
@@ -613,6 +614,7 @@ export async function getStoreComponents({
   isPrivate?: boolean | null;
   search?: string | null;
   filterByUser?: boolean | null;
+  fields?: Array<string> | null;
 }): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
@@ -626,6 +628,9 @@ export async function getStoreComponents({
     if (tags !== undefined && tags !== null && tags.length > 0) {
       queryParams.push(`tags=${tags.join(encodeURIComponent(","))}`);
     }
+    if (fields !== undefined && fields !== null && fields.length > 0) {
+      queryParams.push(`fields=${fields.join(encodeURIComponent(","))}`);
+    }
 
     if (sort !== undefined && sort !== null) {
       queryParams.push(`sort=${sort}`);

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -4,7 +4,9 @@ import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
 import { FlowsContext } from "../../contexts/flowsContext";
+import { readFlowsFromDatabase } from "../../controllers/API";
 import { FlowSettingsPropsType } from "../../types/components";
+import { FlowType } from "../../types/flow";
 import BaseModal from "../baseModal";
 
 export default function FlowSettingsModal({
@@ -19,7 +21,6 @@ export default function FlowSettingsModal({
   }, [flow!.name, flow!.description]);
   const [name, setName] = useState(flow!.name);
   const [description, setDescription] = useState(flow!.description);
-  const [invalidName, setInvalidName] = useState(false);
 
   function handleClick(): void {
     let savedFlow = flows.find((flow) => flow.id === tabId);
@@ -28,6 +29,18 @@ export default function FlowSettingsModal({
     saveFlow(savedFlow!);
     setOpen(false);
   }
+
+  const [nameLists, setNameList] = useState<string[]>([]);
+  useEffect(() => {
+    const tempNameList: string[] = [];
+    readFlowsFromDatabase().then((flows) => {
+      flows.forEach((flow: FlowType) => {
+        tempNameList.push(flow.name);
+      });
+      setNameList(tempNameList.filter((name) => name !== flow!.name));
+    });
+  }, []);
+
   return (
     <BaseModal open={open} setOpen={setOpen} size="smaller">
       <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
@@ -36,8 +49,7 @@ export default function FlowSettingsModal({
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings
-          invalidName={invalidName}
+          invalidNameList={nameLists}
-          setInvalidName={setInvalidName}
           name={name}
           description={description}
           setName={setName}
@@ -46,7 +58,11 @@ export default function FlowSettingsModal({
       </BaseModal.Content>
 
       <BaseModal.Footer>
-        <Button disabled={invalidName} onClick={handleClick} type="submit">
+        <Button
+          disabled={nameLists.includes(name) && name !== flow!.name}
+          onClick={handleClick}
+          type="submit"
+        >
           Save
         </Button>
       </BaseModal.Footer>

src/frontend/src/modals/shareModal/index.tsx

@@ -6,7 +6,11 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { getStoreTags, saveFlowStore } from "../../controllers/API";
+import {
+  getStoreComponents,
+  getStoreTags,
+  saveFlowStore,
+} from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
@@ -38,10 +42,12 @@ export default function ShareModal({
   const [loadingTags, setLoadingTags] = useState<boolean>(false);
   const [sharePublic, setSharePublic] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [unavaliableNames, setUnavaliableNames] = useState<string[]>([]);
   const tagListId = useRef<{ id: string; name: string }[]>([]);
 
   useEffect(() => {
     handleGetTags();
+    handleGetNames();
   }, []);
 
   function handleGetTags() {
@@ -51,6 +57,16 @@ export default function ShareModal({
       setLoadingTags(false);
     });
   }
+  function handleGetNames() {
+    const unavaliableNames: Array<string> = [];
+    getStoreComponents({ fields: ["name"], filterByUser: true }).then((res) => {
+      res?.results?.forEach((element: any) => {
+        unavaliableNames.push(element.name);
+      });
+      console.log(unavaliableNames);
+      setUnavaliableNames(unavaliableNames);
+    });
+  }
 
   useEffect(() => {
     setName(component?.name ?? "");
@@ -117,6 +133,7 @@ export default function ShareModal({
       <BaseModal.Content>
         <EditFlowSettings
           name={name}
+          invalidNameList={unavaliableNames}
           description={description}
           setName={setName}
           setDescription={setDescription}
@@ -162,6 +179,7 @@ export default function ShareModal({
 
       <BaseModal.Footer>
         <Button
+          disabled={unavaliableNames.includes(name)}
           onClick={() => {
             handleShareComponent();
             if (setOpen) setOpen(false);

src/frontend/src/types/components/index.ts

@@ -223,10 +223,9 @@ export type InputProps = {
   name: string | null;
   description: string | null;
   maxLength?: number;
-  invalidName?: boolean;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
-  setInvalidName?: (invalidName: boolean) => void;
+  invalidNameList?: string[];
 };
 
 export type TooltipProps = {