fix: create mock bug

sayjava · Sep 28, 2021 · ca68b88 · ca68b88
1 parent 5d4e7a1
commit ca68b88
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
         "build": "tsc",
         "watch": "nodemon",
         "dev": "ts-node src/deputy.ts",
+        "dev:ui": "yarn --cwd ui dev",
         "test": "jest",
         "fill": "NODE_TLS_REJECT_UNAUTHORIZED=0 node random.js"
     },

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -27,7 +27,6 @@ const App = () => {
                                 <Logo width="30" />
                                 <span style={{ color: 'white', paddingLeft: '10px' }}>Deputy</span>
                             </Row>
-
                             <Typography.Link href="https://sayjava.github.io/behave/" target="_blank">
                                 Docs
                             </Typography.Link>
@@ -42,9 +41,7 @@ const App = () => {
                                 <ServerControls />
                             </Col>
                         </Row>
-
                         <Divider dashed />
-
                         <div className="site-layout-content">
                             <Space direction="vertical" size="large">
                                 <Row justify="space-between">

diff --git a/ui/src/components/mocks/Export.tsx b/ui/src/components/mocks/Export.tsx
@@ -8,7 +8,7 @@ export const MockExport = () => {
     const {
         state: { mocks },
     } = useServerState();
-    const fileContent = Yaml.stringify(mocks, { indent: 2 });
+    const fileContent = Yaml.stringify(mocks, { indent: 4, mapAsMap: true });
     return (
         <Button icon={<ExportOutlined />} download="mocks.yml" href={URL.createObjectURL(new Blob([fileContent]))}>
             Export

diff --git a/ui/src/components/mocks/Mocks.tsx b/ui/src/components/mocks/Mocks.tsx
@@ -2,19 +2,11 @@ import React, { useState } from 'react';
 import { Badge, Button, Col, Drawer, Row, Space } from 'antd';
 import { PlusSquareOutlined } from '@ant-design/icons';
 import { MockList } from './List';
-import { DEFAULT_MOCK, useEditMocks } from './Provider';
+import { DEFAULT_MOCK } from './Provider';
 import { FileImport } from './FileImport';
 import { MockExport } from './Export';
 import { useServerState } from '../Provider';
-
-const NewMock = () => {
-    const { create = () => {} } = useEditMocks();
-    return (
-        <Button color="blue" icon={<PlusSquareOutlined />} type="primary" onClick={() => create(DEFAULT_MOCK)}>
-            New
-        </Button>
-    );
-};
+import { Create } from './Create';
 
 const MockCount = ({ children }) => {
     const {
@@ -24,23 +16,36 @@ const MockCount = ({ children }) => {
 };
 
 export const MocksView = () => {
-    const [state, setState] = useState({ showMockView: false });
+    const [state, setState] = useState({ showMockView: false, showCreateView: false });
 
     return (
         <>
             <MockCount>
-                <Button type="dashed" onClick={() => setState({ showMockView: true })}>
+                <Button type="dashed" onClick={() => setState({ showMockView: true, showCreateView: false })}>
                     Mocks
                 </Button>
             </MockCount>
             <Drawer
-                title="Expectations"
+                title="Mocks"
                 placement="left"
                 width={960}
                 closable
-                onClose={() => setState({ showMockView: false })}
+                onClose={() => setState({ showMockView: false, showCreateView: false })}
                 visible={state.showMockView}
             >
+                <Drawer
+                    title="Mock Editor"
+                    width={720}
+                    closable={true}
+                    onClose={() => setState({ showMockView: true, showCreateView: false })}
+                    visible={state.showCreateView}
+                    placement="left"
+                >
+                    <Create
+                        mock={DEFAULT_MOCK}
+                        onDone={() => setState({ showMockView: true, showCreateView: false })}
+                    />
+                </Drawer>
                 <Space
                     direction="vertical"
                     style={{
@@ -52,7 +57,15 @@ export const MocksView = () => {
                     <Row justify="space-between">
                         <Col>
                             <Space>
-                                <NewMock />
+                                {/* <NewMock /> */}
+                                <Button
+                                    color="blue"
+                                    icon={<PlusSquareOutlined />}
+                                    type="primary"
+                                    onClick={() => setState({ showMockView: true, showCreateView: true })}
+                                >
+                                    New Mock
+                                </Button>
                                 <FileImport />
                             </Space>
                         </Col>

diff --git a/ui/src/components/mocks/Provider.tsx b/ui/src/components/mocks/Provider.tsx
@@ -41,10 +41,10 @@ interface EditMockContextState {
     clear?: () => void;
 }
 
-const EditExpectationContext = React.createContext<EditMockContextState>({});
+const EditMockContext = React.createContext<EditMockContextState>({});
 
 export const useEditMocks = () => {
-    const ctx = React.useContext(EditExpectationContext);
+    const ctx = React.useContext(EditMockContext);
     if (!ctx) {
         throw new Error('Must be mused withing a EditExpectationProvider');
     }
@@ -56,10 +56,6 @@ export const EditMockProvider = ({ children }) => {
     const api = mock();
     const [state, setState] = useState<{ mock?: Mock; error: any }>({ error: null });
 
-    const createMock = (mock: Mock) => {
-        setState({ mock, error: null });
-    };
-
     const deleteMock = async (mock: Mock) => {
         try {
             await api.delete(Yaml.stringify(mock));
@@ -101,12 +97,11 @@ export const EditMockProvider = ({ children }) => {
     };
 
     return (
-        <EditExpectationContext.Provider
+        <EditMockContext.Provider
             value={{
                 clone: cloneMock,
                 delete: deleteMock,
                 update: updateMock,
-                create: createMock,
                 clear: clearRecords,
                 reset: resetServer,
             }}
@@ -135,6 +130,6 @@ export const EditMockProvider = ({ children }) => {
                 </Drawer>
                 {children}
             </>
-        </EditExpectationContext.Provider>
+        </EditMockContext.Provider>
     );
 };