refactor: Add more types and remove unnused value property

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -28,7 +28,6 @@ import {
   getRandomKeyByssmm,
   groupByFamily,
 } from "../../../../utils/utils";
-import { NodeDataType } from "../../../../types/flow";
 
 export default function ParameterComponent({
   left,

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -9,7 +9,9 @@ import { alertContext } from "../../contexts/alertContext";
 import { AlertDropdownType } from "../../types/alerts";
 import SingleAlert from "./components/singleAlertComponent";
 
-export default function AlertDropdown({ children }: AlertDropdownType): JSX.Element {
+export default function AlertDropdown({
+  children,
+}: AlertDropdownType): JSX.Element {
   const {
     notificationList,
     clearNotificationList,

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

@@ -1,8 +1,9 @@
+import { crashComponentPropsType } from "../../types/components";
+
 export default function CrashErrorComponent({
   error,
   resetErrorBoundary,
-}): JSX.Element {
+}: crashComponentPropsType): JSX.Element {
-  console.log({error, resetErrorBoundary})
   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/cardComponent/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
-import { FlowType } from "../../types/flow";
+import { cardComponentPropsType } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import {
@@ -10,7 +10,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import { cardComponentPropsType } from "../../types/components";
 
 export const CardComponent = ({
   flow,

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -29,7 +29,7 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { darkContext } from "../../contexts/darkContext";
-import { FlowType } from "../../types/flow/index";
+import { codeTabsPropsType } from "../../types/components";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 
@@ -40,20 +40,7 @@ export default function CodeTabsComponent({
   setActiveTab,
   isMessage,
   tweaks,
-}: {
+}: codeTabsPropsType) {
-  flow?: FlowType;
-  tabs: any;
-  activeTab: string;
-  setActiveTab: any;
-  isMessage?: boolean;
-  tweaks?: {
-    tweak?: any;
-    tweaksList?: any;
-    buildContent?: any;
-    getValue?: any;
-    buildTweakObject?: any;
-  };
-}) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]["nodes"] : null);
   const [openAccordion, setOpenAccordion] = useState([]);

src/frontend/src/components/genericIconComponent/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, SVGProps, createElement } from "react";
+import { createElement } from "react";
 import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
@@ -7,10 +7,9 @@ export default function IconComponent({
   className,
   iconColor,
 }: IconComponentProps): JSX.Element {
-  // MAYBE PROBLEM HERE?
+  const TargetIcon = createElement(nodeIconsLucide[name], {
-  const TargetIcon = createElement(nodeIconsLucide[name] ?? nodeIconsLucide["unknown"], {
     className,
     style: { color: iconColor },
   });
-  return TargetIcon as JSX.Element
+  return TargetIcon as JSX.Element;
 }

src/frontend/src/contexts/undoRedoContext.tsx

@@ -12,8 +12,8 @@ import {
   UseUndoRedoOptions,
   undoRedoContextType,
 } from "../types/typesContext";
-import { TabsContext } from "./tabsContext";
 import { isWrappedWithClass } from "../utils/utils";
+import { TabsContext } from "./tabsContext";
 
 const initialValue = {
   undo: () => {},

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

@@ -15,7 +15,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, NodeDataType } from "../../types/flow/index";
+import { FlowType } from "../../types/flow/index";
 import { buildTweaks } from "../../utils/reactflowUtils";
 import {
   getCurlCode,

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

@@ -24,7 +24,6 @@ import {
 import { limitScrollFieldsModal } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
-import { editNodeToggleType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
@@ -61,7 +60,10 @@ const EditNodeModal = forwardRef(
       });
     }
 
-    const handleOnNewValue = (newValue: string | string[] | boolean, name: string) => {
+    const handleOnNewValue = (
+      newValue: string | string[] | boolean,
+      name: string
+    ) => {
       setMyData((old) => {
         let newData = cloneDeep(old);
         newData.node.template[name].value = newValue;

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

@@ -3,7 +3,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { ReactNode, useContext, useState } from "react";
+import { useContext, useState } from "react";
 import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -11,9 +11,8 @@ import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { postValidateCode } from "../../controllers/API";
-import { APIClassType } from "../../types/api";
-import BaseModal from "../baseModal";
 import { codeAreaModalPropsType } from "../../types/components";
+import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
   value,

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

@@ -8,72 +8,74 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
-const ExportModal = forwardRef((props: { children: ReactNode }, ref): JSX.Element => {
+const ExportModal = forwardRef(
-  const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
+  (props: { children: ReactNode }, ref): JSX.Element => {
-    useContext(TabsContext);
+    const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
-  const [checked, setChecked] = useState(false);
+      useContext(TabsContext);
-  const [name, setName] = useState(flows.find((f) => f.id === tabId)?.name);
+    const [checked, setChecked] = useState(false);
-  const [description, setDescription] = useState(
+    const [name, setName] = useState(flows.find((f) => f.id === tabId)?.name);
-    flows.find((f) => f.id === tabId)?.description
+    const [description, setDescription] = useState(
-  );
+      flows.find((f) => f.id === tabId)?.description
-  const [open, setOpen] = useState(false);
+    );
-  return (
+    const [open, setOpen] = useState(false);
-    <BaseModal size="smaller" open={open} setOpen={setOpen}>
+    return (
-      <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
+      <BaseModal size="smaller" open={open} setOpen={setOpen}>
-      <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
+        <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
-        <span className="pr-2">Export</span>
+        <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
-        <IconComponent
+          <span className="pr-2">Export</span>
-          name="Download"
+          <IconComponent
-          className="h-6 w-6 pl-1 text-foreground"
+            name="Download"
-          aria-hidden="true"
+            className="h-6 w-6 pl-1 text-foreground"
-        />
+            aria-hidden="true"
-      </BaseModal.Header>
-      <BaseModal.Content>
-        <EditFlowSettings
-          name={name}
-          description={description}
-          flows={flows}
-          tabId={tabId}
-          setName={setName}
-          setDescription={setDescription}
-          updateFlow={updateFlow}
-        />
-        <div className="mt-3 flex items-center space-x-2">
-          <Checkbox
-            id="terms"
-            onCheckedChange={(event: boolean): void => {
-              setChecked(event);
-            }}
           />
-          <label htmlFor="terms" className="export-modal-save-api text-sm ">
+        </BaseModal.Header>
-            Save with my API keys
+        <BaseModal.Content>
-          </label>
+          <EditFlowSettings
-        </div>
+            name={name}
-      </BaseModal.Content>
+            description={description}
+            flows={flows}
+            tabId={tabId}
+            setName={setName}
+            setDescription={setDescription}
+            updateFlow={updateFlow}
+          />
+          <div className="mt-3 flex items-center space-x-2">
+            <Checkbox
+              id="terms"
+              onCheckedChange={(event: boolean): void => {
+                setChecked(event);
+              }}
+            />
+            <label htmlFor="terms" className="export-modal-save-api text-sm ">
+              Save with my API keys
+            </label>
+          </div>
+        </BaseModal.Content>
 
-      <BaseModal.Footer>
+        <BaseModal.Footer>
-        <Button
+          <Button
-          onClick={() => {
+            onClick={() => {
-            if (checked)
+              if (checked)
-              downloadFlow(
+                downloadFlow(
-                flows.find((f) => f.id === tabId),
+                  flows.find((f) => f.id === tabId),
-                name,
+                  name,
-                description
+                  description
-              );
+                );
-            else
+              else
-              downloadFlow(
+                downloadFlow(
-                removeApiKeys(flows.find((f) => f.id === tabId)),
+                  removeApiKeys(flows.find((f) => f.id === tabId)),
-                name,
+                  name,
-                description
+                  description
-              );
+                );
-            setOpen(false);
+              setOpen(false);
-          }}
+            }}
-          type="submit"
+            type="submit"
-        >
+          >
-          Download Flow
+            Download Flow
-        </Button>
+          </Button>
-      </BaseModal.Footer>
+        </BaseModal.Footer>
-    </BaseModal>
+      </BaseModal>
-  );
+    );
-});
+  }
+);
 export default ExportModal;

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

@@ -5,8 +5,8 @@ import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import BaseModal from "../baseModal";
 import { FlowSettingsPropsType } from "../../types/components";
+import BaseModal from "../baseModal";
 
 export default function FlowSettingsModal({
   open,

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
-import { chatInputType } from "../../../types/components";
 import { Textarea } from "../../../components/ui/textarea";
+import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 
 export default function ChatInput({

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

@@ -9,10 +9,9 @@ import Robot from "../../../assets/robot.png";
 import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
 import CodeTabsComponent from "../../../components/codeTabsComponent";
 import IconComponent from "../../../components/genericIconComponent";
-import { ChatMessageType } from "../../../types/chat";
+import { chatMessagePropsType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 import FileCard from "../fileComponent";
-import { chatMessagePropsType } from "../../../types/components";
 
 export default function ChatMessage({
   chat,

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

@@ -1,4 +1,4 @@
-import { ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -15,14 +15,13 @@ import {
 import { TypeModal } from "../../constants/enums";
 import { alertContext } from "../../contexts/alertContext";
 import { postValidatePrompt } from "../../controllers/API";
-import { APIClassType } from "../../types/api";
+import { genericModalPropsType } from "../../types/components";
 import {
   classNames,
   getRandomKeyByssmm,
   varHighlightHTML,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import { genericModalPropsType } from "../../types/components";
 
 export default function GenericModal({
   field_name = "",

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

@@ -1,6 +1,5 @@
-import { ReactNode } from "react";
-import { classNames } from "../../../utils/utils";
 import { buttonBoxPropsType } from "../../../types/components";
+import { classNames } from "../../../utils/utils";
 
 export default function ButtonBox({
   onClick,

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

@@ -6,7 +6,6 @@ import ReactFlow, {
   Controls,
   Edge,
   EdgeChange,
-  Node,
   NodeChange,
   NodeDragHandler,
   OnEdgesDelete,
@@ -263,7 +262,6 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
             data: {
               ...data,
               id: newId,
-              value: null,
             },
           };
         } else {
@@ -275,7 +273,6 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
             data: {
               ...data,
               id: newId,
-              value: null,
             },
           };
 

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

@@ -7,7 +7,11 @@ import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { classNames } from "../../../../utils/utils";
 
-export default function NodeToolbarComponent({ data, setData, deleteNode }: nodeToolbarPropsType): JSX.Element {
+export default function NodeToolbarComponent({
+  data,
+  setData,
+  deleteNode,
+}: nodeToolbarPropsType): JSX.Element {
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node.template).filter(
       (t) =>

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

@@ -1,9 +1,9 @@
-import { ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, SVGProps } from "react";
+import { ReactElement, ReactNode } from "react";
-import { APIClassType, APITemplateType } from "../api";
-import { FlowStyleType, FlowType, NodeDataType } from "../flow/index";
-import { typesContextType } from "../typesContext";
-import { ChatMessageType } from "../chat";
 import { ReactFlowJsonObject } from "reactflow";
+import { APIClassType, APITemplateType } from "../api";
+import { ChatMessageType } from "../chat";
+import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
+import { typesContextType } from "../typesContext";
 
 export type InputComponentType = {
   value: string;
@@ -365,7 +365,7 @@ export type FlowSettingsPropsType = {
 
 export type groupDataType = {
   [char: string]: string;
-}
+};
 
 export type cardComponentPropsType = {
   flow: FlowType;
@@ -373,3 +373,53 @@ export type cardComponentPropsType = {
   onDelete?: () => void;
   button?: JSX.Element;
 };
+
+type tabsArrayType = {
+  code: string;
+  image: string;
+  language: string;
+  mode: string;
+  name: string;
+};
+
+type getValueNodeType = {
+  id: string;
+  node: NodeType;
+  type: string;
+  value: null;
+};
+
+type codeTabsFuncTempType = {
+  [key: string]: string | boolean;
+};
+
+export type codeTabsPropsType = {
+  flow?: FlowType;
+  tabs: Array<tabsArrayType>;
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+  isMessage?: boolean;
+  tweaks?: {
+    tweak?: { current: Array<tweakType> };
+    tweaksList?: { current: Array<string> };
+    buildContent?: (value: string) => ReactNode;
+    getValue?: (
+      value: string,
+      node: getValueNodeType,
+      template: codeTabsFuncTempType
+    ) => string;
+    buildTweakObject?: (
+      tw: string,
+      changes: string | string[] | boolean,
+      template: codeTabsFuncTempType
+    ) => string;
+  };
+};
+
+export type crashComponentPropsType = {
+  error: {
+    message: string;
+    stack: string;
+  };
+  resetErrorBoundary: (args) => void;
+};

src/frontend/src/types/flow/index.ts

@@ -18,7 +18,6 @@ export type NodeDataType = {
   type: string;
   node?: APIClassType;
   id: string;
-  value: null;
 };
 // FlowStyleType is the type of the style object that is used to style the
 // Flow card with an emoji and a color.

src/frontend/src/types/typesContext/index.ts

@@ -8,7 +8,7 @@ const data: { [char: string]: string } = {};
 
 export type typesContextType = {
   reactFlowInstance: ReactFlowInstance | null;
-  setReactFlowInstance: any;
+  setReactFlowInstance: () => void;
   deleteNode: (idx: string) => void;
   types: typeof types;
   setTypes: (newState: {}) => void;
@@ -56,8 +56,8 @@ export type locationContextType = {
     options?: Array<{
       name: string;
       href: string;
-      icon: any;
+      icon: React.ElementType;
-      children?: Array<any>;
+      children?: Array<JSX.Element>;
     }>;
   };
   setExtraNavigation: (newState: {
@@ -65,12 +65,12 @@ export type locationContextType = {
     options?: Array<{
       name: string;
       href: string;
-      icon: any;
+      icon: React.ElementType;
-      children?: Array<any>;
+      children?: Array<JSX.Element>;
     }>;
   }) => void;
   extraComponent: any;
-  setExtraComponent: (newState: any) => void;
+  setExtraComponent: (newState: JSX.Element) => void;
 };
 
 export type undoRedoContextType = {

src/frontend/src/utils/utils.ts

@@ -10,7 +10,6 @@ import {
 import { FlowType } from "../types/flow";
 import { TabsState } from "../types/tabs";
 import { buildTweaks } from "./reactflowUtils";
-import { APIClassType, APIObjectType, APITemplateType } from "../types/api";
 
 export function classNames(...classes: Array<string>): string {
   return classes.filter(Boolean).join(" ");
@@ -94,7 +93,12 @@ export function checkUpperWords(str: string): string {
 export const isWrappedWithClass = (event: any, className: string | undefined) =>
   event.target.closest(`.${className}`);
 
-export function groupByFamily(data: groupDataType, baseClasses: string, left: boolean, type: string): groupedObjType[] {
+export function groupByFamily(
+  data: groupDataType,
+  baseClasses: string,
+  left: boolean,
+  type: string
+): groupedObjType[] {
   let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string; component: string }[] = [];