refactor: Change types to types folder

src/frontend/src/modals/baseModal/index.tsx

@@ -10,7 +10,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { ContentProps, HeaderProps } from "../../types/components";
+import { ContentProps, HeaderProps, headerConstType } from "../../types/components";
 
 const Content: React.FC<ContentProps> = ({ children }) => {
   return <div className="h-full w-full">{children}</div>;
@@ -19,7 +19,7 @@ const Content: React.FC<ContentProps> = ({ children }) => {
 const Header: React.FC<{ children: ReactNode; description: string }> = ({
   children,
   description,
-}) => {
+}: headerConstType): JSX.Element => {
   return (
     <DialogHeader>
       <DialogTitle className="flex items-center">{children}</DialogTitle>
@@ -32,10 +32,10 @@ interface BaseModalProps {
   open: boolean;
   setOpen: (open: boolean) => void;
 }
-function BaseModal({ open, setOpen, children }: BaseModalProps) {
+function BaseModal({ open, setOpen, children }: BaseModalProps): JSX.Element {
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       setTimeout(() => {

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

@@ -15,18 +15,14 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import BaseModal from "../baseModal";
+import { codeAreaModalPropsType } from "../../types/components";
 
 export default function CodeAreaModal({
   value,
   setValue,
   nodeClass,
   setNodeClass,
-}: {
-  setValue: (value: string) => void;
-  value: string;
-  nodeClass: APIClassType;
-  setNodeClass: (Class: APIClassType) => void;
-}): JSX.Element {
+}: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);

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

@@ -12,15 +12,12 @@ import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils/utils";
 import FileCard from "../fileComponent";
 import { CodeBlock } from "./codeBlock";
+import { chatMessagePropsType } from "../../../types/components";
 export default function ChatMessage({
   chat,
   lockChat,
   lastMessage,
-}: {
-  chat: ChatMessageType;
-  lockChat: boolean;
-  lastMessage: boolean;
-}): JSX.Element {
+}: chatMessagePropsType): JSX.Element {
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
   const template = chat.template;

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

@@ -25,6 +25,7 @@ import {
   varHighlightHTML,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import { genericModalPropsType } from "../../types/components";
 
 export default function GenericModal({
   field_name = "",
@@ -35,16 +36,7 @@ export default function GenericModal({
   type,
   nodeClass,
   setNodeClass,
-}: {
-  field_name?: string;
-  setValue: (value: string) => void;
-  value: string;
-  buttonText: string;
-  modalTitle: string;
-  type: number;
-  nodeClass?: APIClassType;
-  setNodeClass?: (Class: APIClassType) => void;
-}): JSX.Element {
+}: genericModalPropsType): JSX.Element {
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
   const [myModalType] = useState(type);

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

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { classNames } from "../../../utils/utils";
+import { buttonBoxPropsType } from "../../../types/components";
 
 export default function ButtonBox({
   onClick,
@@ -10,16 +11,7 @@ export default function ButtonBox({
   textColor,
   deactivate,
   size,
-}: {
-  onClick: () => void;
-  title: string;
-  description: string;
-  icon: ReactNode;
-  bgColor: string;
-  textColor: string;
-  deactivate?: boolean;
-  size: "small" | "medium" | "big";
-}): JSX.Element {
+}: buttonBoxPropsType): JSX.Element {
   let bigCircle: string;
   let smallCircle: string;
   let titleFontSize: string;

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

@@ -1,7 +1,8 @@
 import { ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, SVGProps } from "react";
 import { APIClassType } from "../api";
-import { FlowStyleType, NodeDataType } from "../flow/index";
+import { FlowStyleType, FlowType, NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
+import { ChatMessageType } from "../chat";
 
 export type InputComponentType = {
   value: string;
@@ -303,9 +304,55 @@ export type SanitizedHTMLWrapperType = {
   className: string;
   content: string;
   onClick: () => void;
-  suppressWarning: boolean;
+  suppressWarning?: boolean;
 };
 
 export type iconsType = {
   [key: string]: React.ElementType;
 };
+
+export type headerConstType = {
+  children: ReactNode;
+  description: string;
+};
+
+export type codeAreaModalPropsType = {
+  setValue: (value: string) => void;
+  value: string;
+  nodeClass: APIClassType;
+  setNodeClass: (Class: APIClassType) => void;
+};
+
+export type chatMessagePropsType = {
+  chat: ChatMessageType;
+  lockChat: boolean;
+  lastMessage: boolean;
+};
+
+export type formModalPropsType = {
+  open: boolean;
+  setOpen: Function;
+  flow: FlowType;
+};
+
+export type genericModalPropsType = {
+  field_name?: string;
+  setValue: (value: string) => void;
+  value: string;
+  buttonText: string;
+  modalTitle: string;
+  type: number;
+  nodeClass?: APIClassType;
+  setNodeClass?: (Class: APIClassType) => void;
+};
+
+export type buttonBoxPropsType = {
+  onClick: () => void;
+  title: string;
+  description: string;
+  icon: ReactNode;
+  bgColor: string;
+  textColor: string;
+  deactivate?: boolean;
+  size: "small" | "medium" | "big";
+};