From 352cb8bc8545d099a2727f0017ac0cb6c806e4b6 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Sun, 9 Jul 2023 11:12:41 -0300 Subject: [PATCH] formatting --- .../components/parameterComponent/index.tsx | 4 +- .../components/inputFileComponent/index.tsx | 1 - src/frontend/src/controllers/API/index.ts | 2 +- .../src/modals/EditNodeModal/index.tsx | 10 +- .../NodeModal/components/ModalField/index.tsx | 2 +- src/frontend/src/modals/baseModal/index.tsx | 121 ++++---- src/frontend/src/modals/codeAreaModal/v2.tsx | 274 +++++++++--------- src/frontend/src/utils.ts | 2 +- 8 files changed, 211 insertions(+), 205 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 0e4e42cd7..06b7ebaa8 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -268,9 +268,9 @@ export default function ParameterComponent({ > ) : left === true && type === "code" ? ( -
+
{ data.node = nodeClass; }} diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index ab8fd3fd1..fc69e5f95 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -91,7 +91,6 @@ export default function InputFileComponent({ input.click(); }; - return (
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index d2456eb40..fdfe721a9 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -345,4 +345,4 @@ export async function postCustomComponent( apiClass: APIClassType ): Promise> { return await axios.post(`/api/v1/custom_component`, { code }); -} \ No newline at end of file +} diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 2c84d7e56..2a5a686a0 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -66,7 +66,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { } } - useEffect(() => { }, [closePopUp, data.node.template]); + useEffect(() => {}, [closePopUp, data.node.template]); function changeAdvanced(node): void { Object.keys(data.node.template).filter((n, i) => { @@ -140,7 +140,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { {data.node.template[n].type === "str" && - !data.node.template[n].options ? ( + !data.node.template[n].options ? (
{data.node.template[n].list ? ( { data.node = nodeClass; }} diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx index dce616132..db63adc39 100644 --- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx +++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx @@ -63,7 +63,7 @@ export default function ModalField({ disabled={false} value={ !data.node.template[name].value || - data.node.template[name].value === "" + data.node.template[name].value === "" ? [""] : data.node.template[name].value } diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index e4d01e06b..13893d8c1 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -1,78 +1,69 @@ -import { ReactNode, useContext, useEffect, useRef } from "react"; +import { ReactNode, useContext } from "react"; -import _ from "lodash"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "../../components/ui/dialog"; import React from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; import { PopUpContext } from "../../contexts/popUpContext"; -type ContentProps = {children:ReactNode}; -type HeaderProps = {children:ReactNode,description:string}; - +type ContentProps = { children: ReactNode }; +type HeaderProps = { children: ReactNode; description: string }; const Content: React.FC = ({ children }) => { - return ( -
- {children} -
) -} + return
{children}
; +}; -const Header: React.FC<{ children: ReactNode, description:string }> = ({ children,description }) => { - return ( - - - {children} - - {description} - - ) -} +const Header: React.FC<{ children: ReactNode; description: string }> = ({ + children, + description, +}) => { + return ( + + {children} + {description} + + ); +}; interface BaseModalProps { - children: [React.ReactElement, React.ReactElement]; - open: boolean; - setOpen: (open: boolean) => void; + children: [React.ReactElement, React.ReactElement]; + open: boolean; + setOpen: (open: boolean) => void; +} +function BaseModal({ open, setOpen, children }: BaseModalProps) { + const { closePopUp, setCloseEdit } = useContext(PopUpContext); + + function setModalOpen(x: boolean) { + setOpen(x); + if (x === false) { + setTimeout(() => { + setCloseEdit("editcode"); + closePopUp(); + }, 300); + } } -function BaseModal({ - open, - setOpen, - children, -}: BaseModalProps) { - const {closePopUp, setCloseEdit} = useContext(PopUpContext) - - function setModalOpen(x: boolean) { - setOpen(x); - if (x === false) { - setTimeout(() => { - setCloseEdit("editcode"); - closePopUp(); - }, 300); - } - } - const headerChild = React.Children.toArray(children).find((child) => (child as React.ReactElement).type === Header); - const ContentChild = React.Children.toArray(children).find( - (child) => (child as React.ReactElement).type === Content - ); - //UPDATE COLORS AND STYLE CLASSSES - return ( - - - - {headerChild} -
- {ContentChild} -
- - - ); - + const headerChild = React.Children.toArray(children).find( + (child) => (child as React.ReactElement).type === Header + ); + const ContentChild = React.Children.toArray(children).find( + (child) => (child as React.ReactElement).type === Content + ); + //UPDATE COLORS AND STYLE CLASSSES + return ( + + + + {headerChild} +
{ContentChild}
+ + + ); } BaseModal.Content = Content; BaseModal.Header = Header; -export default BaseModal; \ No newline at end of file +export default BaseModal; diff --git a/src/frontend/src/modals/codeAreaModal/v2.tsx b/src/frontend/src/modals/codeAreaModal/v2.tsx index 13d522039..9655945f7 100644 --- a/src/frontend/src/modals/codeAreaModal/v2.tsx +++ b/src/frontend/src/modals/codeAreaModal/v2.tsx @@ -1,13 +1,13 @@ +// organize-imports-ignore import { useContext, useEffect, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; -import 'ace-builds/src-noconflict/ace'; +import "ace-builds/src-noconflict/ace"; import { darkContext } from "../../contexts/darkContext"; import { postCustomComponent, postValidateCode } from "../../controllers/API"; import { alertContext } from "../../contexts/alertContext"; import { Button } from "../../components/ui/button"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { APIClassType } from "../../types/api"; -import TwoColumnsModal from "../baseModal"; import { DialogTitle } from "@radix-ui/react-dialog"; import { TerminalSquare } from "lucide-react"; import AceEditor from "react-ace"; @@ -15,143 +15,157 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/ext-language_tools"; -import 'ace-builds/src-noconflict/ace'; -import { XCircle } from 'lucide-react'; +import "ace-builds/src-noconflict/ace"; import BaseModal from "../baseModal"; export default function CodeAreaModal({ - value, - setValue, - nodeClass, - setNodeClass, - dynamic + value, + setValue, + nodeClass, + setNodeClass, + dynamic, }: { - setValue: (value: string) => void; - value: string; - nodeClass: APIClassType; - setNodeClass: (Class: APIClassType) => void; - dynamic?: boolean; + setValue: (value: string) => void; + value: string; + nodeClass: APIClassType; + setNodeClass: (Class: APIClassType) => void; + dynamic?: boolean; }) { - const [open, setOpen] = useState(true); - const [code, setCode] = useState(value); - const [loading, setLoading] = useState(false); - const { dark } = useContext(darkContext); - const { setErrorData, setSuccessData } = useContext(alertContext); - const [activeTab, setActiveTab] = useState("0"); - const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null) - const { closePopUp, setCloseEdit } = useContext(PopUpContext); - const ref = useRef(); - function setModalOpen(x: boolean) { - setOpen(x); - if (x === false) { - setTimeout(() => { - setCloseEdit("editcode"); - closePopUp(); - }, 300); - } + const [open, setOpen] = useState(true); + const [code, setCode] = useState(value); + const [loading, setLoading] = useState(false); + const { dark } = useContext(darkContext); + const { setErrorData, setSuccessData } = useContext(alertContext); + const [activeTab, setActiveTab] = useState("0"); + const [error, setError] = useState<{ + detail: { error: string; traceback: string }; + }>(null); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); + const ref = useRef(); + function setModalOpen(x: boolean) { + setOpen(x); + if (x === false) { + setTimeout(() => { + setCloseEdit("editcode"); + closePopUp(); + }, 300); } - useEffect(() => { - setValue(code); - }, [code, setValue]) + } + useEffect(() => { + setValue(code); + }, [code, setValue]); - function handleClick() { - setLoading(true); - if (!dynamic) { - postValidateCode(code) - .then((apiReturn) => { - setLoading(false); - if (apiReturn.data) { - let importsErrors = apiReturn.data.imports.errors; - let funcErrors = apiReturn.data.function.errors; - if (funcErrors.length === 0 && importsErrors.length === 0) { - setSuccessData({ - title: "Code is ready to run", - }); - // setValue(code); - } else { - if (funcErrors.length !== 0) { - setErrorData({ - title: "There is an error in your function", - list: funcErrors, - }); - } - if (importsErrors.length !== 0) { - setErrorData({ - title: "There is an error in your imports", - list: importsErrors, - }); - } - } - } else { - setErrorData({ - title: "Something went wrong, please try again", - }); - } - }) - .catch((_) => { - setLoading(false); - setErrorData({ - title: "There is something wrong with this code, please review it", - }); + function handleClick() { + setLoading(true); + if (!dynamic) { + postValidateCode(code) + .then((apiReturn) => { + setLoading(false); + if (apiReturn.data) { + let importsErrors = apiReturn.data.imports.errors; + let funcErrors = apiReturn.data.function.errors; + if (funcErrors.length === 0 && importsErrors.length === 0) { + setSuccessData({ + title: "Code is ready to run", + }); + // setValue(code); + } else { + if (funcErrors.length !== 0) { + setErrorData({ + title: "There is an error in your function", + list: funcErrors, }); - } - else { - postCustomComponent(code, nodeClass).then((apiReturn) => { - const { data } = apiReturn; - if (data) { - setNodeClass(data); - setModalOpen(false); - } - }).catch((err) => { - setError(err.response.data); + } + if (importsErrors.length !== 0) { + setErrorData({ + title: "There is an error in your imports", + list: importsErrors, + }); + } + } + } else { + setErrorData({ + title: "Something went wrong, please try again", }); - } - + } + }) + .catch((_) => { + setLoading(false); + setErrorData({ + title: "There is something wrong with this code, please review it", + }); + }); + } else { + postCustomComponent(code, nodeClass) + .then((apiReturn) => { + const { data } = apiReturn; + if (data) { + setNodeClass(data); + setModalOpen(false); + } + }) + .catch((err) => { + setError(err.response.data); + }); } - const tabs = [{ name: "code" }, { name: "errors" }] + } + const tabs = [{ name: "code" }, { name: "errors" }]; - return ( - - - - Edit Code - - -
-
- { - setCode(value); - }} - className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600" - /> -
-
-
-

{error?.detail?.error}

- 
{error?.detail?.traceback}
-
-
-
-
-
- - - ); + return ( + + + + Edit Code + + + +
+
+ { + setCode(value); + }} + className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600" + /> +
+
+
+

+ {error?.detail?.error} +

+
+ 
+                  {error?.detail?.traceback}
+
+
+
+
+
+ +
+
+ + + ); } diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 710c27971..d9be31ad5 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -17,10 +17,10 @@ import { Paperclip, Rocket, Scissors, + Sparkles, TerminalSquare, Wand2, Wrench, - Sparkles, } from "lucide-react"; import { ComponentType, SVGProps } from "react"; import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";