From 6674adf371b2dc31021adc5f9989a732d3234214 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Sun, 19 Feb 2023 22:32:08 -0300 Subject: [PATCH 1/3] Types made as a context --- .../src/CustomNodes/GenericNode/index.tsx | 5 +- space_flow/src/contexts/index.tsx | 5 +- space_flow/src/contexts/typesContext.tsx | 23 ++ .../extraSidebarComponent/index.tsx | 199 ++++++++++-------- 4 files changed, 139 insertions(+), 93 deletions(-) create mode 100644 space_flow/src/contexts/typesContext.tsx diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index 0e1a71542..09a4315f8 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -7,9 +7,12 @@ import { snakeToNormalCase, } from "../../utils"; import ParameterComponent from "./components/parameterComponent"; +import { typesContext } from "../../contexts/typesContext"; +import { useContext } from "react"; export default function GenericNode({ data }) { const Icon = nodeIcons[data.type]; + const {types} = useContext(typesContext); return (
@@ -46,7 +49,7 @@ export default function GenericNode({ data }) { data={data} color={ - nodeColors[data.types[data.node.template[t].type]] ?? + nodeColors[types[data.node.template[t].type]] ?? "black" } title={ diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index 828ba1fa3..6eba87762 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -1,13 +1,16 @@ import { AlertProvider } from "./alertContext"; import { LocationProvider } from "./locationContext"; import PopUpProvider from "./popUpContext"; +import { TypesProvider } from "./typesContext"; export default function ContextWrapper({ children }) { return ( <> - {children} + + {children} + diff --git a/space_flow/src/contexts/typesContext.tsx b/space_flow/src/contexts/typesContext.tsx new file mode 100644 index 000000000..37f26a767 --- /dev/null +++ b/space_flow/src/contexts/typesContext.tsx @@ -0,0 +1,23 @@ +import { createContext, useState } from "react"; + +type typesContextType= +{ + types: {}; + setTypes:(newState:{})=>void; +} + +const initialValue= { + types: {}, + setTypes:()=>{}, +} + +export const typesContext = createContext(initialValue); + +export function TypesProvider({children}){ + const [types, setTypes] = useState({}); + return ( + + {children} + + ) +} diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 90503f5b3..3d558d6e2 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,20 +1,18 @@ import { Bars2Icon, ComputerDesktopIcon } from "@heroicons/react/24/outline"; import DisclosureComponent from "../DisclosureComponent"; -import { nodeColors, nodeIcons, nodeNames, toFirstUpperCase } from "../../../../utils"; -import { useEffect, useState } from "react"; +import { + nodeColors, + nodeIcons, + nodeNames, + toFirstUpperCase, +} from "../../../../utils"; +import { useContext, useEffect, useState } from "react"; import { getAll } from "../../../../controllers/NodesServices"; +import { typesContext } from "../../../../contexts/typesContext"; export default function ExtraSidebar() { const [data, setData] = useState({}); - - const types = Object.keys(data).reduce((acc, curr) => { - Object.keys(data[curr]).forEach((c) => { - acc[c] = curr; - data[curr][c].base_classes?.forEach((b) => {acc[b] = curr;}) - }); - // console.log(acc); - return acc; - }, {str: 'advanced', bool: 'advanced', chatOutput: 'chat', chatInput: 'chat'}); + const { setTypes } = useContext(typesContext); useEffect(() => { getAll().then((d) => { @@ -23,6 +21,31 @@ export default function ExtraSidebar() { }); }, []); + useEffect(() => { + if(data){ + setTypes( + Object.keys(data).reduce( + (acc, curr) => { + Object.keys(data[curr]).forEach((c) => { + acc[c] = curr; + data[curr][c].base_classes?.forEach((b) => { + acc[b] = curr; + }); + }); + // console.log(acc); + return acc; + }, + { + str: "advanced", + bool: "advanced", + chatOutput: "chat", + chatInput: "chat", + } + ) + ); + } + }, [data, setTypes]) + function onDragStart(event: React.DragEvent, data) { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("json", JSON.stringify(data)); @@ -46,7 +69,6 @@ export default function ExtraSidebar() { onDragStart(event, { type: d, name: t, - types: types, node: data[d][t], }) } @@ -62,94 +84,89 @@ export default function ExtraSidebar() { ))} -
-
-
- onDragStart(event, { - type: 'chat', - name: 'chatInput', - types, - }) - } - > -
- Chat Input - -
+ button={{ title: nodeNames["chat"], Icon: nodeIcons["chat"] }} + > +
+
+
+ onDragStart(event, { + type: "chat", + name: "chatInput", + }) + } + > +
+ Chat Input +
-
-
- onDragStart(event, { - type: 'chat', - name: 'chatOutput', - types, - }) - } - > -
- Chat Output - -
+
+
+
+ onDragStart(event, { + type: "chat", + name: "chatOutput", + }) + } + > +
+ Chat Output +
-
- +
+
+ -
-
-
- onDragStart(event, { - type: 'advanced', - name: 'str', - types, - }) - } - > -
- String - -
+ button={{ title: nodeNames["advanced"], Icon: nodeIcons["advanced"] }} + > +
+
+
+ onDragStart(event, { + type: "advanced", + name: "str", + }) + } + > +
+ String +
-
-
- onDragStart(event, { - type: 'advanced', - name: 'bool', - types, - }) - } - > -
- Boolean - -
+
+
+
+ onDragStart(event, { + type: "advanced", + name: "bool", + }) + } + > +
+ Boolean +
-
- - +
+
+
); } From 444d3b2107d36b7e924dbd4d9222f4554c7eb4a0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Sun, 19 Feb 2023 22:36:02 -0300 Subject: [PATCH 2/3] commented and removed some dead code and comments --- space_flow/src/App.tsx | 8 ++++---- space_flow/src/index.tsx | 4 ---- .../src/pages/FlowPage/components/connection/index.tsx | 1 - 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 7426d5dd9..9b1a39a0d 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -86,10 +86,10 @@ export default function App() { const userNavigation = [ { name: "Your Projects", href: "/" }, - { - name: "Account settings", - href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", - }, + // { + // name: "Account settings", + // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", + // }, { name: "Sign out", href: "/" }, ]; diff --git a/space_flow/src/index.tsx b/space_flow/src/index.tsx index 2272eb5ec..72d98cad6 100644 --- a/space_flow/src/index.tsx +++ b/space_flow/src/index.tsx @@ -15,8 +15,4 @@ root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); diff --git a/space_flow/src/pages/FlowPage/components/connection/index.tsx b/space_flow/src/pages/FlowPage/components/connection/index.tsx index 1ad344e54..7d5b15703 100644 --- a/space_flow/src/pages/FlowPage/components/connection/index.tsx +++ b/space_flow/src/pages/FlowPage/components/connection/index.tsx @@ -24,7 +24,6 @@ const ConnectionLineComponent = ({ fromNode={}, connectionLineStyle = {} // provide a default value for connectionLineStyle }) => { -// console.log(fromNode) return ( Date: Sun, 19 Feb 2023 22:41:09 -0300 Subject: [PATCH 3/3] commented and removed some dead code and comments --- space_flow/src/App.test.tsx | 9 --------- space_flow/src/setupTests.ts | 4 ---- 2 files changed, 13 deletions(-) delete mode 100644 space_flow/src/App.test.tsx diff --git a/space_flow/src/App.test.tsx b/space_flow/src/App.test.tsx deleted file mode 100644 index 2a68616d9..000000000 --- a/space_flow/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/space_flow/src/setupTests.ts b/space_flow/src/setupTests.ts index 8f2609b7b..7b0828bfa 100644 --- a/space_flow/src/setupTests.ts +++ b/space_flow/src/setupTests.ts @@ -1,5 +1 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom';