using the uppercase service + button to change title in uppercase

README.md

@@ -7,17 +7,17 @@ A Cloud ready Post it app composed of
 
 To run this demo:
 1. Fork this repo and modify the following button changing the URL on this README.md file:
-2. Start the workspace: [![Contribute](factory-contribute.svg)](https://blog.sunix.org/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app)
+2. Start the workspace: [![Contribute](factory-contribute.svg)](https://blog.sunix.org/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app/tree/uppercas)
 
-The URL should use your instance of Che/CodeReady Workspaces:
+The URL should use your instance of Che/CodeReady Workspaces (uppercas branch):
 
 ```
-https://<your-codeready-workspaces-instance>/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app
+https://<your-codeready-workspaces-instance>/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app/tree/uppercas
 ```
 
 Alternatively,
 1. Add your prefered Che or CodeReady Workspaces instance: https://blog.sunix.org/factory (that would just do the right redirection to the right server based on your preferences)
-2. Start the workspace: [![Contribute](factory-contribute.svg)](https://blog.sunix.org/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app)
+2. Start the workspace: [![Contribute](factory-contribute.svg)](https://blog.sunix.org/factory?url=https://github.com/redhat-developer-demos/quarkus-reactjs-postit-app/tree/uppercas)
 
 ![Application topology](topology.png "Application Topology")
 

devfile.yaml

@@ -5,6 +5,20 @@ metadata:
 
 components:
 
+  - type: dockerimage
+    image: sebi2706/uppercase-sg-service
+    memoryLimit: 32M
+    env:
+      - value: '8082'
+        name: QUARKUS_HTTP_PORT
+    endpoints:
+      - name: uppercase-sg-service
+        port: 8082
+        attributes:
+          path: /touppercase?p=uppercase%20service
+
+
+
   - alias: quarkus-backend-dev
     type: dockerimage
     image: quay.io/quarkus/centos-quarkus-maven:20.1.0-java11

node-frontend/src/components/Post.js

@@ -16,6 +16,7 @@ class Post extends React.Component {
             timestamp: this.props.timestamp,
         }
         this.deletePost = this.deletePost.bind(this);
+        this.toUppercase = this.toUppercase.bind(this);
     }
 
     render() {
@@ -38,7 +39,10 @@ class Post extends React.Component {
                     <Col className="delete-post-button" sm={1}>
                         <Button variant="danger" type="submit" onClick={this.deletePost}>
                             Delete
-            </Button>
+                        </Button>
+                        <Button variant="primary" onClick={this.toUppercase}>
+                            toUppercase
+                        </Button>
                     </Col>
                 </Row>
             </Container>
@@ -63,6 +67,16 @@ class Post extends React.Component {
         window.location.reload();
     }
 
+    toUppercase() {
+        fetch(`touppercase?p=${encodeURI(this.state.title)}`, {
+            method: 'GET'
+        })
+            .then(response => response.text())
+            .then(data => {
+                this.state.title = data;
+                this.setState(this.state);
+            })
+    }
 }
 
 export default Post

node-frontend/src/setupProxy.js

@@ -22,5 +22,24 @@ module.exports = function (app) {
         })
     );
 
+
+    var uppercase_quarkus_host = 'localhost';
+    var uppercase_quarkus_port = '8082';
+
+    if (process.env.COMPONENT_QUARKUS_UPPERCASE_HOST) {
+        uppercase_quarkus_host = process.env.COMPONENT_QUARKUS_UPPERCASE_HOST;
+    }
+
+    if (process.env.COMPONENT_QUARKUS_UPPERCASE_PORT) {
+        uppercase_quarkus_port = process.env.COMPONENT_QUARKUS_UPPERCASE_PORT;
+    }
+
+    app.use(
+        '/touppercase',
+        createProxyMiddleware({
+            target: `http://${uppercase_quarkus_host}:${uppercase_quarkus_port}`,
+            changeOrigin: true
+        })
+    );
 };