Handle errors and allow selecting output Docker compose version

itwks · Nov 12, 2023 · d1440d8 · d1440d8
1 parent e34cf18
commit d1440d8
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/packages/composerize-website/package.json b/packages/composerize-website/package.json
@@ -13,6 +13,7 @@
     "react-dom": "16.x",
     "react-is": "16.x",
     "react-portal-tooltip": "^2.4.7",
+    "react-select": "^5.8.0",
     "styled-components": "5.x"
   },
   "devDependencies": {

diff --git a/packages/composerize-website/src/Main.js b/packages/composerize-website/src/Main.js
@@ -18,23 +18,49 @@ export default class Main extends Component {
         this.state = {
             command: defaultCommand,
             compose: '',
+            version: 'latest',
             output: Composerize(defaultCommand),
+            error: '',
         };
         this.onCommandInputChange = this.onCommandInputChange.bind(this);
         this.onComposeInputChange = this.onComposeInputChange.bind(this);
+        this.onSelectChange = this.onSelectChange.bind(this);
     }
 
     onComposeInputChange(value) {
-        this.setState(state => ({
+        this.setState(() => ({
             compose: value,
-            output: Composerize(state.command, value),
         }));
+        this.updateConversion();
     }
+
     onCommandInputChange(value) {
-        this.setState(state => ({
+        this.setState(() => ({
             command: value,
-            output: Composerize(value, state.compose),
         }));
+        this.updateConversion();
+    }
+
+    onSelectChange(value) {
+        this.setState(() => ({
+            version: value.value,
+        }));
+        this.updateConversion();
+    }
+
+    updateConversion() {
+        this.setState(state => {
+            try {
+                return {
+                    output: Composerize(state.command, state.compose, state.version),
+                    error: '',
+                };
+            } catch (e) {
+                return {
+                    error: e.toString(),
+                };
+            }
+        });
     }
 
     render() {
@@ -44,10 +70,12 @@ export default class Main extends Component {
                 <Entry
                     command={this.state.command}
                     compose={this.state.compose}
+                    version={this.state.version}
+                    onSelectChange={this.onSelectChange}
                     onCommandInputChange={this.onCommandInputChange}
                     onComposeInputChange={this.onComposeInputChange}
                 />
-                <Output output={this.state.output} />
+                <Output output={this.state.output} error={this.state.error} />
                 <Footer />
             </div>
         );

diff --git a/packages/composerize-website/src/components/Entry.js b/packages/composerize-website/src/components/Entry.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/macro';
+import Select from 'react-select';
 
 import Section from './Section';
 import TextInput from './TextInput';
@@ -13,6 +14,11 @@ const Blurb = styled.div`
 `;
 
 export default function Entry(props) {
+    const options = [
+        { value: 'v2x', label: 'V2 - 2.x' },
+        { value: 'v3x', label: 'V2 - 3.x' },
+        { value: 'latest', label: 'CommonSpec' },
+    ];
     return (
         <Section topPadding>
             <div
@@ -55,6 +61,12 @@ export default function Entry(props) {
                         </p>
                     </Blurb>
                     <TextInput value={props.command} rows={3} onInputChange={props.onCommandInputChange} />
+                    <span>Docker Compose version:</span>
+                    <Select
+                        onChange={props.onSelectChange}
+                        options={options}
+                        value={options.filter(({ value }) => value === props.version)}
+                    />
                     <details
                         style={{
                             marginBottom: '1em',

diff --git a/packages/composerize-website/src/components/Output.js b/packages/composerize-website/src/components/Output.js
@@ -37,6 +37,7 @@ export default props => (
                 documentation.
             </p>
         </Blurb>
+        <pre style={{ color: 'red' }}>{props.error}</pre>
         <Results output={props.output} />
     </Section>
 );