From d06ce4958ebf2d2424bbb6a93f1e49e7a89538ef Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Sat, 18 Dec 2021 00:42:28 +0100 Subject: [PATCH] feat: add /editor/create to create a flow --- packages/web/src/config/urls.ts | 4 +- .../web/src/graphql/mutations/create-flow.ts | 10 +++++ packages/web/src/index.tsx | 9 ++--- packages/web/src/locales/en.json | 4 +- packages/web/src/pages/Application/index.tsx | 4 +- packages/web/src/pages/Editor/create.tsx | 40 +++++++++++++++++++ packages/web/src/pages/Editor/index.tsx | 11 +++++ packages/web/src/routes.tsx | 14 ++++--- 8 files changed, 80 insertions(+), 16 deletions(-) create mode 100644 packages/web/src/graphql/mutations/create-flow.ts create mode 100644 packages/web/src/pages/Editor/create.tsx create mode 100644 packages/web/src/pages/Editor/index.tsx diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index 479d166b..1aedfebc 100644 --- a/packages/web/src/config/urls.ts +++ b/packages/web/src/config/urls.ts @@ -3,6 +3,7 @@ export const APPS = '/apps'; export const CONNECTIONS = '/connections'; export const FLOWS = '/flows'; export const EXPLORE = '/explore'; +export const EDITOR = '/editor'; export const APP = (appKey: string) => `/app/${appKey}`; export const APP_PATTERN = '/app/:appKey'; export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`; @@ -14,5 +15,6 @@ export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:appKey/connections/:conne export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`; export const APP_FLOWS_PATTERN = '/app/:appKey/flows'; export const NEW_APP_CONNECTION = '/apps/new'; +export const CREATE_FLOW = '/editor/create'; export const FLOW = (flowKey: string) => `/flows/${flowKey}`; -export const FLOW_PATTERN = '/flows/:flowKey'; \ No newline at end of file +export const FLOW_PATTERN = '/flows/:flowKey'; diff --git a/packages/web/src/graphql/mutations/create-flow.ts b/packages/web/src/graphql/mutations/create-flow.ts new file mode 100644 index 00000000..93b07d9e --- /dev/null +++ b/packages/web/src/graphql/mutations/create-flow.ts @@ -0,0 +1,10 @@ +import { gql } from '@apollo/client'; + +export const CREATE_FLOW = gql` + mutation createFlow { + createFlow { + id + name + } + } +`; diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx index 1cb82623..48da2b62 100644 --- a/packages/web/src/index.tsx +++ b/packages/web/src/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Layout from 'components/Layout'; import ThemeProvider from 'components/ThemeProvider'; import IntlProvider from 'components/IntlProvider'; import ApolloProvider from 'components/ApolloProvider'; @@ -14,11 +13,9 @@ ReactDOM.render( - - - {routes} - - + + {routes} + diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 979513ab..ff5cbde2 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -29,6 +29,6 @@ "connection.reconnect": "Reconnect", "connection.delete": "Delete", "connection.deletedMessage": "The connection has been deleted.", - "connection.addedAt": "added {datetime}" - + "connection.addedAt": "added {datetime}", + "createFlow.creating": "Creating a flow..." } \ No newline at end of file diff --git a/packages/web/src/pages/Application/index.tsx b/packages/web/src/pages/Application/index.tsx index 01da5ed2..4e574d4e 100644 --- a/packages/web/src/pages/Application/index.tsx +++ b/packages/web/src/pages/Application/index.tsx @@ -70,9 +70,9 @@ export default function Application() { linkProps, ref, ) { - return ; + return ; }), - [appKey], + [], ); return ( diff --git a/packages/web/src/pages/Editor/create.tsx b/packages/web/src/pages/Editor/create.tsx new file mode 100644 index 00000000..4ffc6284 --- /dev/null +++ b/packages/web/src/pages/Editor/create.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useMutation } from '@apollo/client'; +import CircularProgress from '@mui/material/CircularProgress'; +import Typography from '@mui/material/Typography'; + +import * as URLS from 'config/urls'; +import useFormatMessage from 'hooks/useFormatMessage'; +import { CREATE_FLOW } from 'graphql/mutations/create-flow'; + +import Box from '@mui/material/Box'; + +export default function CreateFlow() { + const navigate = useNavigate(); + const formatMessage = useFormatMessage(); + const [createFlow] = useMutation(CREATE_FLOW); + + React.useEffect(() => { + async function initiate() { + const response = await createFlow(); + const flowId = response.data?.createFlow?.id; + + setTimeout(() => { + navigate(URLS.FLOW(flowId)); + }, 1234); + } + + initiate(); + }, [createFlow, navigate]); + + return ( + + + + + {formatMessage('createFlow.creating')} + + + ) +} diff --git a/packages/web/src/pages/Editor/index.tsx b/packages/web/src/pages/Editor/index.tsx new file mode 100644 index 00000000..0986d8d1 --- /dev/null +++ b/packages/web/src/pages/Editor/index.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { Routes, Route } from 'react-router-dom'; +import CreateFlowPage from './create'; + +export default function Editor() { + return ( + + } /> + + ) +} diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index bad97cde..8fd9bf1b 100644 --- a/packages/web/src/routes.tsx +++ b/packages/web/src/routes.tsx @@ -1,22 +1,26 @@ import { Route, Routes, Navigate } from 'react-router-dom'; +import Layout from 'components/Layout'; import Applications from 'pages/Applications'; import Application from 'pages/Application'; import Flows from 'pages/Flows'; import Explore from 'pages/Explore'; +import Editor from 'pages/Editor'; import * as URLS from 'config/urls'; export default ( - } /> + } /> - } /> + } /> - } /> + } /> - } /> + } /> + + } /> } /> - 404} /> +
404
} /> );