From 003a3e0783af355d64d2a8da143167cc49750bda Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 21 Nov 2023 21:30:25 -0300 Subject: [PATCH] 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 --- .../EditFlowSettingsComponent/index.tsx | 30 ++----------------- src/frontend/src/controllers/API/index.ts | 5 ++++ .../src/modals/flowSettingsModal/index.tsx | 24 ++++++++++++--- src/frontend/src/modals/shareModal/index.tsx | 20 ++++++++++++- src/frontend/src/types/components/index.ts | 3 +- 5 files changed, 48 insertions(+), 34 deletions(-) diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index ac3932132..8952612b4 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/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 = ({ name, - invalidName, - setInvalidName, + invalidNameList, description, maxLength = 50, setName, setDescription, }: InputProps): JSX.Element => { const [isMaxLength, setIsMaxLength] = useState(false); - const nameLists = useRef([]); - useEffect(() => { - readFlowsFromDatabase().then((flows) => { - flows.forEach((flow: FlowType) => { - nameLists.current.push(flow.name); - }); - }); - }, []); const handleNameChange = (event: ChangeEvent) => { const { value } = event.target; @@ -32,19 +21,6 @@ export const EditFlowSettings: React.FC = ({ } 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 = ({ {isMaxLength && ( Character limit reached )} - {invalidName && ( + {invalidNameList?.includes(name ?? "") && ( Name already in use )} diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 863596d64..da16ba531 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/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 | null; }): Promise { 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}`); diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index 9cd42ad61..d2f87efa4 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/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([]); + useEffect(() => { + const tempNameList: string[] = []; + readFlowsFromDatabase().then((flows) => { + flows.forEach((flow: FlowType) => { + tempNameList.push(flow.name); + }); + setNameList(tempNameList.filter((name) => name !== flow!.name)); + }); + }, []); + return ( @@ -36,8 +49,7 @@ export default function FlowSettingsModal({ - diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 4041d4e3c..792186ea6 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/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(false); const [sharePublic, setSharePublic] = useState(true); const [selectedTags, setSelectedTags] = useState([]); + const [unavaliableNames, setUnavaliableNames] = useState([]); 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 = []; + 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({