refactor[modals]: Add types to functions that didnt have it

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -1,4 +1,7 @@
-export default function CrashErrorComponent({ error, resetErrorBoundary }): JSX.Element {
+export default function CrashErrorComponent({
+  error,
+  resetErrorBoundary,
+}): JSX.Element {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
       <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -8,10 +8,15 @@ import {
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants/constants";
 import { alertContext } from "../../../contexts/alertContext";
-import IconComponent from "../../genericIconComponent";
 import { chatTriggerPropType } from "../../../types/components";
+import IconComponent from "../../genericIconComponent";
 
-export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }: chatTriggerPropType): JSX.Element {
+export default function ChatTrigger({
+  open,
+  setOpen,
+  isBuilt,
+  canOpen,
+}: chatTriggerPropType): JSX.Element {
   const { setErrorData } = useContext(alertContext);
 
   function handleClick(): void {

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -13,9 +13,9 @@ import { Link, useNavigate } from "react-router-dom";
 import { alertContext } from "../../../../contexts/alertContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
+import { menuBarPropsType } from "../../../../types/components";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
-import { menuBarPropsType } from "../../../../types/components";
 
 export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);

src/frontend/src/components/loadingComponent/index.tsx

@@ -1,6 +1,8 @@
 import { LoadingComponentProps } from "../../types/components";
 
-export default function LoadingComponent({ remSize }: LoadingComponentProps): JSX.Element {
+export default function LoadingComponent({
+  remSize,
+}: LoadingComponentProps): JSX.Element {
   return (
     <div role="status" className="m-auto w-min">
       <svg

src/frontend/src/components/toggleComponent/index.tsx

@@ -8,7 +8,6 @@ export default function ToggleComponent({
   setEnabled,
   disabled,
 }: ToggleComponentType): JSX.Element {
-
   // set component state as disabled
   useEffect(() => {
     if (disabled) {

src/frontend/src/modals/ApiModal/index.tsx

@@ -53,7 +53,7 @@ import {
   getPythonApiCode,
   getPythonCode,
 } from "../../utils/utils";
-export default function ApiModal({ flow }: { flow: FlowType }) {
+export default function ApiModal({ flow }: { flow: FlowType }): JSX.Element {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -36,7 +36,11 @@ import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
 
-export default function EditNodeModal({ data }: { data: NodeDataType }) {
+export default function EditNodeModal({
+  data,
+}: {
+  data: NodeDataType;
+}): JSX.Element {
   const [open, setOpen] = useState(true);
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node.template).filter(
@@ -66,7 +70,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     closePopUp();
   }
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       closePopUp();

src/frontend/src/modals/NodeModal/index.tsx

@@ -9,7 +9,11 @@ import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, toTitleCase } from "../../utils/utils";
 import ModalField from "./components/ModalField";
 
-export default function NodeModal({ data }: { data: NodeDataType }) {
+export default function NodeModal({
+  data,
+}: {
+  data: NodeDataType;
+}): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -26,21 +26,21 @@ export default function CodeAreaModal({
   value: string;
   nodeClass: APIClassType;
   setNodeClass: (Class: APIClassType) => void;
-}) {
+}): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     if (x === false) {
       setCloseEdit("codearea");
       closePopUp();
     }
   }
 
-  // Check for custom code errors 
-  function handleClick() {
+  // Check for custom code errors
+  function handleClick(): void {
     postValidateCode(code)
       .then((apiReturn) => {
         if (apiReturn.data) {

src/frontend/src/modals/exportModal/index.tsx

@@ -18,7 +18,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 
-export default function ExportModal() {
+export default function ExportModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const ref = useRef();

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

@@ -16,7 +16,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 
-export default function FlowSettingsModal() {
+export default function FlowSettingsModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
@@ -28,7 +28,7 @@ export default function FlowSettingsModal() {
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       setTimeout(() => {
@@ -36,7 +36,7 @@ export default function FlowSettingsModal() {
       }, 300);
     }
   }
-  function handleClick() {
+  function handleClick(): void {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
     savedFlow.description = description;

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
+import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 
 export default function ChatInput({
@@ -9,7 +10,7 @@ export default function ChatInput({
   setChatValue,
   inputRef,
   noInput,
-}) {
+}: chatInputType): JSX.Element {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();

src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx

@@ -9,7 +9,7 @@ interface Props {
   value: string;
 }
 
-export function CodeBlock({ language, value }) {
+export function CodeBlock({ language, value }: Props): JSX.Element {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -20,7 +20,7 @@ export default function ChatMessage({
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
-}) {
+}): JSX.Element {
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
   const template = chat.template;

src/frontend/src/modals/formModal/index.tsx

@@ -34,7 +34,7 @@ export default function FormModal({
   open: boolean;
   setOpen: Function;
   flow: FlowType;
-}) {
+}): JSX.Element {
   const { tabsState, setTabsState } = useContext(TabsContext);
   const [chatValue, setChatValue] = useState(() => {
     try {
@@ -147,7 +147,7 @@ export default function FormModal({
     });
   }
 
-  function handleOnClose(event: CloseEvent) {
+  function handleOnClose(event: CloseEvent): void {
     if (isOpen.current) {
       setErrorData({ title: event.reason });
       setTimeout(() => {
@@ -157,7 +157,10 @@ export default function FormModal({
     }
   }
 
-  function getWebSocketUrl(chatId, isDevelopment = false) {
+  function getWebSocketUrl(
+    chatId: string,
+    isDevelopment: boolean = false
+  ): string {
     const isSecureProtocol = window.location.protocol === "https:";
     const webSocketProtocol = isSecureProtocol ? "wss" : "ws";
     const host = isDevelopment ? "localhost:7860" : window.location.host;
@@ -238,7 +241,7 @@ export default function FormModal({
     }
   }
 
-  function connectWS() {
+  function connectWS(): void {
     try {
       const urlWs = getWebSocketUrl(
         id.current,
@@ -305,7 +308,7 @@ export default function FormModal({
     // do not add connectWS on dependencies array
   }, [lockChat]);
 
-  async function sendAll(data: sendAllProps) {
+  async function sendAll(data: sendAllProps): Promise<void> {
     try {
       if (ws) {
         ws.current.send(JSON.stringify(data));
@@ -332,7 +335,7 @@ export default function FormModal({
     }
   }, [open]);
 
-  function sendMessage() {
+  function sendMessage(): void {
     let nodeValidationErrors = validateNodes(reactFlowInstance);
     if (nodeValidationErrors.length === 0) {
       setLockChat(true);
@@ -365,17 +368,17 @@ export default function FormModal({
       });
     }
   }
-  function clearChat() {
+  function clearChat(): void {
     setChatHistory([]);
     ws.current.send(JSON.stringify({ clear_history: true }));
     if (lockChat) setLockChat(false);
   }
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
   }
 
-  function handleOnCheckedChange(checked: boolean, i: string) {
+  function handleOnCheckedChange(checked: boolean, i: string): void {
     if (checked === true) {
       setChatKey(i);
       setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);

src/frontend/src/modals/genericModal/index.tsx

@@ -44,7 +44,7 @@ export default function GenericModal({
   type: number;
   nodeClass?: APIClassType;
   setNodeClass?: (Class: APIClassType) => void;
-}) {
+}): JSX.Element {
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
   const [myModalType] = useState(type);
@@ -56,7 +56,7 @@ export default function GenericModal({
     useContext(alertContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     if (x === false) {
       setCloseEdit("generic");
       closePopUp();
@@ -65,7 +65,7 @@ export default function GenericModal({
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
 
-  function checkVariables(valueToCheck) {
+  function checkVariables(valueToCheck: string): void {
     const regex = /\{([^{}]+)\}/g;
     const matches = [];
     let match;
@@ -111,7 +111,7 @@ export default function GenericModal({
     .replace(regexHighlight, varHighlightHTML({ name: "$1" }))
     .replace(/\n/g, "<br />");
 
-  const TextAreaContentView = () => {
+  const TextAreaContentView = (): JSX.Element => {
     return (
       <SanitizedHTMLWrapper
         className={getClassByNumberLength()}
@@ -124,7 +124,7 @@ export default function GenericModal({
     );
   };
 
-  function getClassByNumberLength() {
+  function getClassByNumberLength(): string {
     let sumOfCaracteres: number = 0;
     wordsHighlight.forEach((element) => {
       sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length;

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -19,7 +19,7 @@ export default function ButtonBox({
   textColor: string;
   deactivate?: boolean;
   size: "small" | "medium" | "big";
-}) {
+}): JSX.Element {
   let bigCircle: string;
   let smallCircle: string;
   let titleFontSize: string;

src/frontend/src/modals/importModal/index.tsx

@@ -24,7 +24,7 @@ import { FlowType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
 import ButtonBox from "./buttonBox";
 
-export default function ImportModal() {
+export default function ImportModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { setErrorData } = useContext(alertContext);
   const { closePopUp } = useContext(PopUpContext);
@@ -33,7 +33,7 @@ export default function ImportModal() {
   const [loadingExamples, setLoadingExamples] = useState(false);
   const [examples, setExamples] = useState<FlowType[]>([]);
   const { uploadFlow, addFlow } = useContext(TabsContext);
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       setTimeout(() => {
@@ -42,7 +42,7 @@ export default function ImportModal() {
     }
   }
 
-  function handleExamples() {
+  function handleExamples(): void {
     setLoadingExamples(true);
     getExamples()
       .then((result) => {

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -5,7 +5,6 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { classNames } from "../../../../utils/utils";
-import { nodeToolbarType } from "../../../../types/components";
 
 const NodeToolbarComponent = (props): JSX.Element => {
   const [nodeLength, setNodeLength] = useState(

src/frontend/src/pages/MainPage/index.tsx

@@ -8,7 +8,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 export default function HomePage(): JSX.Element {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
-  
+
   // Set a null id
   useEffect(() => {
     setTabId("");