Better layout

src/app.tsx

@@ -1,14 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { RouterProvider, createMemoryRouter } from 'react-router';
-import { styled } from 'styled-components';
 import React, { PureComponent } from 'react';
 import Root from './routes/root';
 import ErrorPage from './error-page';
 import { Home } from './routes/home';
-import ConnectionPage from './component/Connection/ConnectionPage';
 import TableLayout from './component/TableLayout';
-import ConnectionForm from './component/Connection/ConnectionForm';
 import { Tables } from './routes/tables';
+import Connect from './routes/connect';
+import Create from './routes/connect/create';
 
 const root = createRoot(document.getElementById('App'));
 
@@ -17,12 +16,6 @@ const root = createRoot(document.getElementById('App'));
 // export const history = createMemoryHistory();
 // <Router history={history}>
 
-const ModalLike = styled.div`
-  width: 50%;
-  min-width: 400px;
-  align-self: center;
-`;
-
 const router = createMemoryRouter([
   {
     path: '/',
@@ -38,19 +31,11 @@ const router = createMemoryRouter([
         children: [
           {
             index: true,
-            element: (
-              <ModalLike>
-                <ConnectionPage />
-              </ModalLike>
-            ),
+            element: <Connect />,
           },
           {
             path: 'create',
-            element: (
-              <ModalLike>
-                <ConnectionForm />
-              </ModalLike>
-            ),
+            element: <Create />,
           },
         ],
       },

src/component/Connection/ConnectionForm.tsx

@@ -6,10 +6,12 @@ import {
 } from '../../Contexts';
 import { ConnectionObject } from './types';
 import { PureComponent, useContext } from 'react';
+import { NavigateFunction, useNavigate } from 'react-router';
 
 interface ConnectionFormProps {
   connectTo: ConnectToFunc;
   addConnectionToConfig: (connection: ConnectionObject) => void;
+  navigate: NavigateFunction;
 }
 type ConnectionFormType = ConnectionObject & {
   save: boolean;
@@ -34,6 +36,8 @@ class ConnectionForm extends PureComponent<ConnectionFormProps> {
   }
 
   render() {
+    const { navigate } = this.props;
+
     const initialValues = {
       name: '',
       host: 'localhost',
@@ -86,6 +90,13 @@ class ConnectionForm extends PureComponent<ConnectionFormProps> {
         </Form.Item>
 
         <Form.Item<ConnectionFormType>>
+          <Button
+            onClick={() => {
+              navigate(-1);
+            }}
+          >
+            Cancel
+          </Button>
           <Button type="primary" htmlType="submit">
             Connect
           </Button>
@@ -98,9 +109,11 @@ class ConnectionForm extends PureComponent<ConnectionFormProps> {
 function ConnectionFormWithContext() {
   const { connectTo } = useContext(ConnectionContext);
   const { addConnectionToConfig } = useConfiguration();
+  const navigate = useNavigate();
 
   return (
     <ConnectionForm
+      navigate={navigate}
       connectTo={connectTo}
       addConnectionToConfig={addConnectionToConfig}
     />

src/component/Style/ModalLike.tsx

@@ -0,0 +1,23 @@
+import { styled } from 'styled-components';
+
+const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  width: 50%;
+  min-width: 400px;
+  align-self: center;
+`;
+
+export default function ModalLike({ children }: { children: React.ReactNode }) {
+  return (
+    <Container>
+      <Content>{children}</Content>
+    </Container>
+  );
+}

src/configuration/index.ts

@@ -10,6 +10,7 @@ import {
   EncryptedConfiguration,
 } from './type';
 
+// TODO use app.getPath('userData') to store the configuration file instead of env-paths
 const envPath = envPaths('TianaTables', { suffix: '' });
 const dataFilePath = resolve(envPath.config, 'config.json');
 

src/routes/connect.tsx

@@ -0,0 +1,10 @@
+import ModalLike from '../component/Style/ModalLike';
+import ConnectionPage from '../component/Connection/ConnectionPage';
+
+export default function Connect() {
+  return (
+    <ModalLike>
+      <ConnectionPage />
+    </ModalLike>
+  );
+}

src/routes/connect/create.tsx

@@ -0,0 +1,10 @@
+import ModalLike from '../../component/Style/ModalLike';
+import ConnectionFormWithContext from '../../component/Connection/ConnectionForm';
+
+export default function Create() {
+  return (
+    <ModalLike>
+      <ConnectionFormWithContext />
+    </ModalLike>
+  );
+}

src/routes/home.tsx

@@ -4,7 +4,7 @@ import { Button } from 'antd';
 export function Home() {
   return (
     <div>
-      <p>Welcome to Tiana Tables ! </p>
+      <p>Tiana Tables ! </p>
 
       <Button type="primary">
         <Link to="/connect">Please connect</Link>

src/routes/root.tsx

@@ -7,28 +7,40 @@ import {
 import { styled } from 'styled-components';
 import Debug from '../component/Debug';
 import ThemeSelector from '../component/ThemeSelector';
+import { Layout } from 'antd';
+import { getSetting } from '../theme';
 
-const HeaderDiv = styled.header`
+const Header = styled(Layout.Header)`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 46px;
+  background-color: ${({ theme }) => getSetting(theme, 'background')};
+`;
+
+const Content = styled(Layout.Content)`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
 `;
 
 export default function Root() {
   return (
     <ConfigurationContextProvider>
       <ThemeContextProvider>
         <ConnectionStack>
-          <Debug />
+          <Layout>
+            <Debug />
+            <Header>
+              <h2>Tiana Tables</h2>
+              <div>
+                Theme: <ThemeSelector />
+              </div>
+            </Header>
 
-          <HeaderDiv>
-            <h2>Welcome to Tiana Tables !</h2>
-            <div>
-              Theme: <ThemeSelector />
-            </div>
-          </HeaderDiv>
-          <Outlet />
+            <Content>
+              <Outlet />
+            </Content>
+          </Layout>
         </ConnectionStack>
       </ThemeContextProvider>
     </ConfigurationContextProvider>