From cc26bb0c8f2459335bc6ac9d1232e1afb545348b Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Fri, 4 Aug 2023 19:35:39 -0300 Subject: [PATCH] add more types --- .../src/CustomNodes/GenericNode/index.tsx | 2 +- .../alerts/hooks/useOnClickOutside/index.ts | 2 +- .../EditFlowSettingsComponent/index.tsx | 8 +- .../components/codeTabsComponent/index.tsx | 6 +- src/frontend/src/contexts/SSEContext.tsx | 2 +- src/frontend/src/contexts/tabsContext.tsx | 52 ++--- src/frontend/src/contexts/typesContext.tsx | 4 +- src/frontend/src/controllers/API/api.tsx | 4 +- src/frontend/src/controllers/API/index.ts | 6 +- src/frontend/src/modals/ApiModal/index.tsx | 14 +- .../src/modals/EditNodeModal/index.tsx | 4 +- .../NodeModal/components/ModalField/index.tsx | 180 ------------------ .../src/modals/flowSettingsModal/index.tsx | 1 - src/frontend/src/modals/formModal/index.tsx | 10 +- .../src/modals/genericModal/index.tsx | 4 +- .../components/PageComponent/index.tsx | 32 ++-- src/frontend/src/types/api/index.ts | 4 +- src/frontend/src/types/components/index.ts | 34 +++- src/frontend/src/types/flow/index.ts | 2 +- src/frontend/src/types/tabs/index.ts | 8 +- src/frontend/src/types/typesContext/index.ts | 4 +- src/frontend/src/utils/reactflowUtils.ts | 14 +- src/frontend/src/utils/utils.ts | 7 +- 23 files changed, 127 insertions(+), 277 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 8f788cc02..994017d99 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -42,7 +42,7 @@ export default function GenericNode({ nodes: flow.data.nodes, }, updateEdge: (edge) => { - flow.data.edges = edge; + flow.data!.edges = edge; reactFlowInstance.setEdges(edge); updateNodeInternals(data.id); }, diff --git a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts index 249133d96..e11fd6cd5 100644 --- a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts +++ b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts @@ -2,7 +2,7 @@ import { useEffect } from "react"; export function useOnClickOutside(ref, handler) { useEffect(() => { - const listener = (event) => { + const listener = (event: Event) => { // Do nothing if clicking ref's element or its children if (!ref.current || ref.current.contains(event.target)) { return; diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index eedb36495..4518403b6 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx @@ -4,6 +4,7 @@ import { Label } from "../../components/ui/label"; import { Textarea } from "../../components/ui/textarea"; import { InputProps } from "../../types/components"; import { readFlowsFromDatabase } from "../../controllers/API"; +import { FlowType } from "../../types/flow"; export const EditFlowSettings: React.FC = ({ name, @@ -15,13 +16,12 @@ export const EditFlowSettings: React.FC = ({ tabId, setName, setDescription, - updateFlow, }: InputProps): JSX.Element => { const [isMaxLength, setIsMaxLength] = useState(false); const nameLists = useRef([]); useEffect(() => { readFlowsFromDatabase().then((flows) => { - flows.forEach((flow) => { + flows.forEach((flow: FlowType) => { nameLists.current.push(flow.name); }); }); @@ -35,9 +35,9 @@ export const EditFlowSettings: React.FC = ({ setIsMaxLength(false); } if (!nameLists.current.includes(value)) { - setInvalidName(false); + setInvalidName!(false); } else { - setInvalidName(true); + setInvalidName!(true); } setName(value); }; diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 97db8c4af..0cf18b02c 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -42,13 +42,13 @@ export default function CodeTabsComponent({ tweaks, }: codeTabsPropsType) { const [isCopied, setIsCopied] = useState(false); - const [data, setData] = useState(flow ? flow["data"]["nodes"] : null); + const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null); const [openAccordion, setOpenAccordion] = useState([]); const { dark } = useContext(darkContext); useEffect(() => { - if (flow && flow["data"]["nodes"]) { - setData(flow["data"]["nodes"]); + if (flow && flow["data"]!["nodes"]) { + setData(flow["data"]!["nodes"]); } }, [flow]); diff --git a/src/frontend/src/contexts/SSEContext.tsx b/src/frontend/src/contexts/SSEContext.tsx index 9db32310b..13daef890 100644 --- a/src/frontend/src/contexts/SSEContext.tsx +++ b/src/frontend/src/contexts/SSEContext.tsx @@ -1,4 +1,4 @@ -import { createContext, useCallback, useContext, useState } from "react"; +import { ReactNode, createContext, useCallback, useContext, useState } from "react"; const initialValue = { updateSSEData: ({}) => {}, diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index c90427670..ced7a2fee 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from "react"; -import { Node, addEdge } from "reactflow"; +import { Edge, Node, ReactFlowJsonObject, addEdge } from "reactflow"; import ShortUniqueId from "short-unique-id"; import { deleteFlowFromDatabase, @@ -18,8 +18,8 @@ import { uploadFlowsToDatabase, } from "../controllers/API"; import { APIClassType, APITemplateType } from "../types/api"; -import { FlowType, NodeDataType, NodeType } from "../types/flow"; -import { TabsContextType, TabsState } from "../types/tabs"; +import { FlowType, NodeDataType, NodeType, TweaksType } from "../types/flow"; +import { TabsContextType, TabsState, errorsVarType } from "../types/tabs"; import { addVersionToDuplicates, updateIds, @@ -78,7 +78,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { edges: any; } | null>(null); const [tabsState, setTabsState] = useState({}); - const [getTweak, setTweak] = useState([]); + const [getTweak, setTweak] = useState([]); const newNodeId = useRef(uid()); function incrementNodeId() { @@ -133,8 +133,8 @@ export function TabsProvider({ children }: { children: ReactNode }) { //get tabs from db return readFlowsFromDatabase(); } - function processDBData(DbData) { - DbData.forEach((flow) => { + function processDBData(DbData: FlowType[]) { + DbData.forEach((flow: FlowType) => { try { if (!flow.data) { return; @@ -147,7 +147,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); } - function processFlowEdges(flow) { + function processFlowEdges(flow: FlowType) { if (!flow.data || !flow.data.edges) return; flow.data.edges.forEach((edge) => { edge.className = ""; @@ -163,7 +163,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { node.data.node!.documentation = template["documentation"]; } - function processFlowNodes(flow) { + function processFlowNodes(flow: FlowType) { if (!flow.data || !flow.data.nodes) return; flow.data.nodes.forEach((node: NodeType) => { const template = templates[node.data.type]; @@ -191,7 +191,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { node: NodeType, template: APIClassType ) { - flow.data.edges.forEach((edge) => { + flow.data!.edges.forEach((edge) => { if (edge.source === node.id) { edge.sourceHandle = edge.sourceHandle ?.split("|") @@ -213,7 +213,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { ); } - function updateStateWithDbData(tabsData) { + function updateStateWithDbData(tabsData: FlowType[]) { setFlows(tabsData); } @@ -356,7 +356,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { */ function paste( - selectionInstance, + selectionInstance: {nodes: Node[], edges: Edge[]}, position: { x: number; y: number; paneX?: number; paneY?: number } ) { let minimumX = Infinity; @@ -364,7 +364,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { let idsMap = {}; let nodes: Node[] = reactFlowInstance!.getNodes(); let edges = reactFlowInstance!.getEdges(); - selectionInstance.nodes.forEach((n) => { + selectionInstance.nodes.forEach((n: Node) => { if (n.position.y < minimumY) { minimumY = n.position.y; } @@ -406,14 +406,14 @@ export function TabsProvider({ children }: { children: ReactNode }) { selectionInstance.edges.forEach((e) => { let source = idsMap[e.source]; let target = idsMap[e.target]; - let sourceHandleSplitted = e.sourceHandle.split("|"); + let sourceHandleSplitted = e.sourceHandle!.split("|"); let sourceHandle = sourceHandleSplitted[0] + "|" + source + "|" + sourceHandleSplitted.slice(2).join("|"); - let targetHandleSplitted = e.targetHandle.split("|"); + let targetHandleSplitted = e.targetHandle!.split("|"); let targetHandle = targetHandleSplitted.slice(0, -1).join("|") + "|" + target; let id = @@ -449,13 +449,13 @@ export function TabsProvider({ children }: { children: ReactNode }) { newProject?: Boolean ): Promise => { if (newProject) { - let flowData = extractDataFromFlow(flow); + let flowData = extractDataFromFlow(flow!); if (flowData.description == "") { flowData.description = getRandomDescription(); } // Create a new flow with a default name if no flow is provided. - const newFlow = createNewFlow(flowData, flow); + const newFlow = createNewFlow(flowData, flow!); processFlowEdges(newFlow); processFlowNodes(newFlow); @@ -480,13 +480,13 @@ export function TabsProvider({ children }: { children: ReactNode }) { } } else { paste( - { nodes: flow!.data.nodes, edges: flow!.data.edges }, + { nodes: flow!.data!.nodes, edges: flow!.data!.edges }, { x: 10, y: 10 } ); } }; - const extractDataFromFlow = (flow) => { + const extractDataFromFlow = (flow: FlowType) => { let data = flow?.data ? flow.data : null; const description = flow?.description ? flow.description : ""; @@ -499,17 +499,17 @@ export function TabsProvider({ children }: { children: ReactNode }) { return { data, description }; }; - const updateEdges = (edges) => { + const updateEdges = (edges: Edge[]) => { edges.forEach((edge) => { edge.className = - (edge.targetHandle.split("|")[0] === "Text" + (edge.targetHandle!.split("|")[0] === "Text" ? "stroke-gray-800 " : "stroke-gray-900 ") + " stroke-connection"; - edge.animated = edge.targetHandle.split("|")[0] === "Text"; + edge.animated = edge.targetHandle!.split("|")[0] === "Text"; }); }; - const updateNodes = (nodes, edges) => { + const updateNodes = (nodes: Node[], edges: Edge[]) => { nodes.forEach((node) => { const template = templates[node.data.type]; if (!template) { @@ -520,7 +520,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { node.data.node.base_classes = template["base_classes"]; edges.forEach((edge) => { if (edge.source === node.id) { - edge.sourceHandle = edge.sourceHandle + edge.sourceHandle = edge.sourceHandle! .split("|") .slice(0, 2) .concat(template["base_classes"]) @@ -536,14 +536,14 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); }; - const createNewFlow = (flowData, flow) => ({ + const createNewFlow = (flowData: { data: ReactFlowJsonObject | null; description: string; }, flow: FlowType) => ({ description: flowData.description, name: flow?.name ?? getRandomName(), data: flowData.data, id: "", }); - const addFlowToLocalState = (newFlow) => { + const addFlowToLocalState = (newFlow: FlowType) => { setFlows((prevState) => { return [...prevState, newFlow]; }); @@ -594,7 +594,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); } } catch (err) { - setErrorData(err); + setErrorData(err as errorsVarType); } } diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 3f7a1810b..2e02e5bcb 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -29,7 +29,7 @@ export function TypesProvider({ children }: { children: ReactNode }) { useEffect(() => { let delay = 1000; // Start delay of 1 second - let intervalId; + let intervalId: NodeJS.Timer; let retryCount = 0; // Count of retry attempts const maxRetryCount = 5; // Max retry attempts @@ -78,7 +78,7 @@ export function TypesProvider({ children }: { children: ReactNode }) { // Start the initial interval. intervalId = setInterval(getTypes, delay); - + console.log(intervalId) return () => { // This will clear the interval when the component unmounts, or when the dependencies of the useEffect hook change. clearInterval(intervalId!); diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 9c785e843..8771fa67e 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -8,7 +8,7 @@ const api: AxiosInstance = axios.create({ baseURL: "", }); -function ApiInterceptor() { +function ApiInterceptor(): null { const retryCounts = useRef([]); const { setErrorData } = useContext(alertContext); @@ -55,7 +55,7 @@ function ApiInterceptor() { } // Function to sleep for a given duration in milliseconds -function sleep(ms) { +function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 9491f8973..b7f19dd0b 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -23,7 +23,7 @@ export async function getAll(): Promise> { const GITHUB_API_URL = "https://api.github.com"; -export async function getRepoStars(owner, repo) { +export async function getRepoStars(owner: string, repo: string) { try { const response = await api.get(`${GITHUB_API_URL}/repos/${owner}/${repo}`); return response.data.stargazers_count; @@ -100,7 +100,7 @@ export async function getExamples(): Promise { export async function saveFlowToDatabase(newFlow: { name: string; id: string; - data: ReactFlowJsonObject; + data: ReactFlowJsonObject | null; description: string; style?: FlowStyleType; }): Promise { @@ -179,7 +179,7 @@ export async function downloadFlowsFromDatabase() { } } -export async function uploadFlowsToDatabase(flows) { +export async function uploadFlowsToDatabase(flows: FlowType[]) { try { const response = await api.post(`/api/v1/flows/upload/`, flows); diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index ec9915853..0b7b763bd 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -3,6 +3,7 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import { + MutableRefObject, ReactNode, forwardRef, useContext, @@ -15,7 +16,7 @@ import CodeTabsComponent from "../../components/codeTabsComponent"; import IconComponent from "../../components/genericIconComponent"; import { EXPORT_CODE_DIALOG } from "../../constants/constants"; import { TabsContext } from "../../contexts/tabsContext"; -import { FlowType } from "../../types/flow/index"; +import { FlowType, NodeType } from "../../types/flow/index"; import { buildTweaks } from "../../utils/reactflowUtils"; import { getCurlCode, @@ -25,6 +26,7 @@ import { } from "../../utils/utils"; import BaseModal from "../baseModal"; import { tweakType } from "../../types/components"; +import { APITemplateType } from "../../types/api"; const ApiModal = forwardRef( ( @@ -42,7 +44,7 @@ const ApiModal = forwardRef( const [open, setOpen] = useState(false); const [activeTab, setActiveTab] = useState("0"); const tweak = useRef([]); - const tweaksList = useRef([]); + const tweaksList = useRef([]); const { setTweak, getTweak, tabsState } = useContext(TabsContext); const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState); const curl_code = getCurlCode(flow, tweak.current, tabsState); @@ -180,7 +182,7 @@ const ApiModal = forwardRef( }, [flow["data"]["nodes"], open]); function filterNodes() { - let arrNodesWithValues = []; + let arrNodesWithValues: string[] = []; flow["data"]["nodes"].forEach((t) => { Object.keys(t["data"]["node"]["template"]) @@ -205,7 +207,7 @@ const ApiModal = forwardRef( return self.indexOf(value) === index; }); } - function buildTweakObject(tw, changes, template) { + function buildTweakObject(tw: string, changes: string | string[], template: APITemplateType) { if (template.type === "float") { changes = parseFloat(changes); } @@ -255,7 +257,7 @@ const ApiModal = forwardRef( setTweak(tweak.current); } - function buildContent(value) { + function buildContent(value: string) { const htmlContent = (
{value != null && value != "" ? value : "None"} @@ -264,7 +266,7 @@ const ApiModal = forwardRef( return htmlContent; } - function getValue(value, node, template) { + function getValue(value: string, node: NodeType, template: APITemplateType) { let returnValue = value ?? ""; if (getTweak.length > 0) { diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 50f7c41c1..ded0773fb 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -27,6 +27,7 @@ import { typesContext } from "../../contexts/typesContext"; import { NodeDataType } from "../../types/flow"; import { classNames } from "../../utils/utils"; import BaseModal from "../baseModal"; +import { TabsState } from "../../types/tabs"; const EditNodeModal = forwardRef( ( @@ -310,7 +311,8 @@ const EditNodeModal = forwardRef( className="mt-3" onClick={() => { setData(cloneDeep(myData)); //saves data with actual state of modal - setTabsState((prev) => { + //@ts-ignore + setTabsState((prev: TabsState) => { return { ...prev, [tabId]: { diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx index c7eb0b1e0..e69de29bb 100644 --- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx +++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx @@ -1,180 +0,0 @@ -import { useState } from "react"; -import CodeAreaComponent from "../../../../components/codeAreaComponent"; -import Dropdown from "../../../../components/dropdownComponent"; -import FloatComponent from "../../../../components/floatComponent"; -import InputComponent from "../../../../components/inputComponent"; -import InputFileComponent from "../../../../components/inputFileComponent"; -import InputListComponent from "../../../../components/inputListComponent"; -import IntComponent from "../../../../components/intComponent"; -import PromptAreaComponent from "../../../../components/promptComponent"; -import TextAreaComponent from "../../../../components/textAreaComponent"; -import ToggleComponent from "../../../../components/toggleComponent"; -import { classNames } from "../../../../utils/utils"; - -export default function ModalField({ - data, - title, - required, - id, - name, - type, - index, -}) { - const [enabled, setEnabled] = useState( - data.node.template[name]?.value ?? false - ); - const display = - type === "str" || - type === "int" || - type === "prompt" || - type === "bool" || - type === "float" || - type === "file" || - type === "code"; - - return ( -
- t.charAt(0) !== "_" && - data.node.template[t].advanced && - data.node.template[t].show - ).length - - 1 === - index - ? "pb-4" - : "" - )} - > - {display && ( -
- {title} - {required ? " *" : ""} -
- )} - - {type === "str" && !data.node.template[name].options ? ( -
- {data.node.template[name].list ? ( - { - data.node.template[name].value = t; - }} - /> - ) : data.node.template[name].multiline ? ( - { - data.node.template[name].value = t; - }} - /> - ) : ( - { - data.node.template[name].value = t; - }} - /> - )} -
- ) : type === "bool" ? ( -
- {" "} - { - data.node.template[name].value = t; - setEnabled(t); - }} - size="small" - /> -
- ) : type === "float" ? ( -
- { - data.node.template[name].value = t; - }} - /> -
- ) : type === "str" && data.node.template[name].options ? ( -
- (data.node.template[name].value = newValue)} - value={data.node.template[name].value ?? "Choose an option"} - > -
- ) : type === "int" ? ( -
- { - data.node.template[name].value = t; - }} - /> -
- ) : type === "file" ? ( -
- { - data.node.template[name].value = t; - }} - fileTypes={data.node.template[name].fileTypes} - suffixes={data.node.template[name].suffixes} - onFileChange={(t: string) => { - data.node.template[name].file_path = t; - }} - > -
- ) : type === "prompt" ? ( -
- { - data.node.template[name].value = t; - }} - /> -
- ) : type === "code" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={false} - value={data.node.template[name].value ?? ""} - onChange={(t: string | string[]) => { - data.node.template[name].value = t; - }} - /> -
- ) : ( -
- )} -
- ); -} diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index b06d59259..52465135c 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/src/frontend/src/modals/flowSettingsModal/index.tsx @@ -47,7 +47,6 @@ export default function FlowSettingsModal({ tabId={tabId} setName={setName} setDescription={setDescription} - updateFlow={updateFlow} /> diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index e18589cf5..c0ce2aa5f 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -25,6 +25,7 @@ import { Textarea } from "../../components/ui/textarea"; import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants"; import { TabsContext } from "../../contexts/tabsContext"; import { validateNodes } from "../../utils/reactflowUtils"; +import { TabsState, errorsVarType } from "../../types/tabs"; export default function FormModal({ flow, @@ -354,7 +355,8 @@ export default function FormModal({ name: flow.name, description: flow.description, }); - setTabsState((old) => { + //@ts-ignore + setTabsState((old: TabsState) => { if (!chatKey) return old; let newTabsState = _.cloneDeep(old); newTabsState[id.current].formKeysData.input_keys![chatKey] = ""; @@ -468,7 +470,8 @@ export default function FormModal({ tabsState[id.current].formKeysData.input_keys![i] } onChange={(e) => { - setTabsState((old) => { + //@ts-ignore + setTabsState((old: TabsState) => { let newTabsState = _.cloneDeep(old); newTabsState[id.current].formKeysData.input_keys![ i @@ -576,7 +579,8 @@ export default function FormModal({ sendMessage={sendMessage} setChatValue={(value) => { setChatValue(value); - setTabsState((old) => { + //@ts-ignore + setTabsState((old: TabsState) => { let newTabsState = _.cloneDeep(old); newTabsState[id.current].formKeysData.input_keys![ chatKey! diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 08f2b1f22..1b1da2c3a 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -42,7 +42,7 @@ export default function GenericModal({ const [wordsHighlight, setWordsHighlight] = useState([]); const { setErrorData, setSuccessData, setNoticeData } = useContext(alertContext); - const ref = useRef(); + const ref = useRef(); const divRef = useRef(null); const divRefPrompt = useRef(null); @@ -208,7 +208,7 @@ export default function GenericModal({ ) : type !== TypeModal.PROMPT ? (