Merge pull request #31 from projkov/30-history-side-panel

30 history side panel

Author: projkov

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
     "fhirpath": "^3.14.1",
+    "js-yaml": "^4.1.0",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.css

@@ -1,77 +1,14 @@
 import React from 'react';
-import './App.css';
-import { useFHIRPathUI } from './hooks';
-import Editor from '@monaco-editor/react';
-import { Allotment } from "allotment";
-import "allotment/dist/style.css";
-import { Play, ShareFat, FileArrowDown, Gear, Copy, Info, ClockCounterClockwise } from "@phosphor-icons/react";
-import Loader from './components/loader';
-import logo from './assets/logo.png';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { ResultOutput } from './components/ResultOutput';
-import { DrawerButton } from './components/DrawerButton';
-import { SettingsContainer } from './containers/Settings';
-import { CredentialsContainer } from './containers/Credentials';
-import { HistoryContainer } from './containers/HistoryContainer';
-
+import { AppHeader } from './containers/AppHeader';
+import { AppContainer } from './containers/AppContainer';
+import { AppContent } from './containers/AppContent';
 
 const App: React.FC = () => {
-    const { url, setUrl, handleUrlChange, handleFetch,
-        resource, expression, setExpression, setResource,
-        handleExecute, result, handleShare, isLoading, isExecuteActive, isGetResourceActive, isShareActive, handleShareResult, isShareResultActive, copyToClipboard  } = useFHIRPathUI();
-
     return (
-        <div className="App">
-            {isLoading ? <Loader /> : null}
-            <div className='header'>
-                <img src={logo} alt="Logo" className='logo' />
-                <div className='searchBlock'>
-                    <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
-                </div>
-                <div className="buttonsBlock">
-                    <button onClick={() => handleFetch(url)} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
-                    <button onClick={() => handleExecute(resource, expression)} disabled={!isExecuteActive}><Play fontSize={24} /></button>
-                    <DrawerButton
-                        content={
-                            <HistoryContainer
-                                setResource={setResource}
-                                setUrl={setUrl}
-                                setExpression={setExpression}
-                                copyToClickboard={copyToClipboard }
-                            />
-                        }
-                        button={<button><ClockCounterClockwise fontSize={24} /></button>}
-                        title="History"
-                        size="large"
-                    />
-                    <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
-                    <button onClick={handleShareResult} disabled={!isShareResultActive}><Copy fontSize={24} /></button>
-                    <DrawerButton content={<SettingsContainer />} button={<button><Gear fontSize={24} /></button>} title="Settings" size="large" />
-                    <DrawerButton content={<CredentialsContainer />} button={<button><Info fontSize={24} /></button>} title="Credentials" />
-                </div>
-            </div>
-            <div className='editor'>
-                <Allotment defaultSizes={[550, 250]}>
-                    <div className='editorWrapper'>
-                        <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
-                    </div>
-                    <div style={{ height: '100vh' }}>
-                        <Allotment defaultSizes={[100, 300]} vertical>
-                            <div className='editorWrapper'>
-                                <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{
-                                    formatOnPaste: true, formatOnType: true, minimap: {
-                                        enabled: false,
-                                    },
-                                }} />
-                            </div>
-                            <ResultOutput resultItems={result} />
-                        </Allotment>
-                    </div>
-                </Allotment>
-            </div>
-            <ToastContainer />
-        </div>
+        <AppContainer
+            header={<AppHeader />}
+            content={<AppContent />}
+        />
     );
 };
 

src/App.tsx

@@ -0,0 +1,39 @@
+import Editor from '@monaco-editor/react';
+import "allotment/dist/style.css";
+import 'react-toastify/dist/ReactToastify.css';
+import { Button } from 'antd';
+import { FHIRPathUIEditorProps } from '../types';
+import { styles } from '../../../styles';
+
+export function ExpressionContainer(props: FHIRPathUIEditorProps) {
+    const { handleExecute, resource, expression, isExecuteActive, setExpression } = props;
+    const onClick = () => handleExecute(resource, expression)
+    const onChange = (value: string | undefined) => setExpression(value ?? "")
+    const editorOptions = {
+        formatOnPaste: true,
+        formatOnType: true,
+        minimap: {
+            enabled: false,
+        },
+    }
+
+    return (
+        <div style={styles.expressionEditorWrapper}>
+            <div style={styles.contextActions}>
+                <Button
+                    type="primary"
+                    onClick={onClick}
+                    disabled={!isExecuteActive}
+                >
+                    Execute
+                </Button>
+            </div>
+            <Editor
+                defaultLanguage="ruby"
+                value={expression}
+                onChange={onChange}
+                options={editorOptions}
+            />
+        </div>
+    )
+}

src/components/Editor/ExpressionContainer/index.tsx

@@ -0,0 +1,38 @@
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { FHIRPathUIEditorProps } from '../types';
+import { styles } from '../../../styles';
+
+export function ResourceContainer(props: FHIRPathUIEditorProps) {
+    const { url, handleUrlChange, handleFetch, resourceFormat, setResource, resource } = props;
+    const onSearch = () => handleFetch(url);
+    const onChange = (value: string | undefined) => setResource(value ?? "");
+    const editorOptions = {
+        formatOnPaste: true,
+        formatOnType: true
+    };
+
+    return (
+        <div style={styles.resourceBlockWrapper}>
+            <Input.Search
+                addonBefore="GET"
+                placeholder="You can paste the URL to get the FHIR Resource"
+                allowClear
+                enterButton="Request"
+                size="middle"
+                value={url}
+                loading={props.isLoading}
+                onChange={handleUrlChange}
+                onSearch={onSearch}
+            />
+            <Editor
+                height="85vh"
+                key={resourceFormat}
+                defaultLanguage={resourceFormat}
+                value={resource}
+                onChange={onChange}
+                options={editorOptions}
+            />
+        </div>
+    );
+}

src/components/Editor/ResourceContainer/index.tsx

@@ -0,0 +1,38 @@
+import "allotment/dist/style.css";
+import 'react-toastify/dist/ReactToastify.css';
+import { Button } from 'antd';
+import { FHIRPathUIEditorProps } from '../types';
+import { styles } from '../../../styles';
+import { List } from "antd";
+
+export function ResultContainer(props: FHIRPathUIEditorProps) {
+    return (
+        <div style={{ padding: '16px' }}>
+            <div style={styles.contextActions}>
+                <Button
+                    type="primary"
+                    onClick={props.handleShareResult}
+                    disabled={!props.isShareResultActive}
+                >
+                    Copy
+                </Button>
+                <Button
+                    type="primary"
+                    onClick={props.handleShare}
+                    disabled={!props.isShareActive}>
+                    Share
+                </Button>
+            </div>
+            <List
+                style={{ overflow: 'hidden' }}
+                size="small"
+                dataSource={props.result}
+                renderItem={(item) => (
+                    <List.Item>
+                        <pre>{JSON.stringify(item, null, 2)}</pre>
+                    </List.Item>
+                )}
+            />
+        </div>
+    )
+}