Added support to gRPC

Author: acidonper

package-lock.json

@@ -14,6 +14,8 @@
     "@types/react-dom": "^16.9.9",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
+    "google-protobuf": "^3.19.1",
+    "grpc-web": "^1.3.0",
     "install": "^0.13.0",
     "npm": "^6.14.10",
     "react": "^17.0.1",

package.json

@@ -23,6 +23,6 @@ export const sentJump = async (
     return response.data;
   } catch (error) {
     console.log(error);
-    return error;
+    return {code: 500, message: "/jump - Farewell from Backend -" + url};
   }
 };

src/infrastructure/postJump.tsx

@@ -0,0 +1,38 @@
+import * as grpcWeb from 'grpc-web';
+import {JumpServiceClient} from '../utils/grpc/JumpServiceClientPb';
+import {JumpReq, Response} from '../utils/grpc/jump_pb';
+import { ResponseBack } from '../domain/ResponseBack';
+
+export const sentJumpGrpc = async (
+    url: string,
+    dataJump: string[]
+  ): Promise <ResponseBack> => {
+    return new Promise<ResponseBack>(function(resolve) {
+      const jumpService = new JumpServiceClient(url, null, null);
+      var finalResponse: Response.AsObject = {code: 500, message: "/jump - Farewell from Backend - " + url};
+
+      const request = new JumpReq();
+      request.setMessage('Hello from React!');
+      request.setCount(0)
+      request.setJumpsList(dataJump)
+
+      const call = jumpService.jump(request, {'Content-Type': 'application/grpc'},
+      (err: grpcWeb.RpcError, response: Response) => {
+          try {
+            console.log(response.getMessage());
+            finalResponse.code = response.getCode();
+            finalResponse.message = response.getMessage();
+            resolve(finalResponse);
+          } catch {
+            console.log("empty Response - ", err)
+            resolve(finalResponse);
+          }
+      });
+      call.on('status', (status: grpcWeb.Status) => {
+          if (status.metadata) {
+              console.log('Received metadata');
+              console.log(status);
+            }
+      });
+    });
+}

src/infrastructure/postJumpGrpc.tsx

@@ -70,7 +70,17 @@
 .jumps-box h1 {
   color: var(--on-secondary-color);
   padding-bottom: var(--m);
-  font-size: var(--body-size-xl);
+  font-size: var(--body-size-xxl);
+  align-self: center;
+}
+
+.jumps-box-grpc-section {
+  padding-bottom: var(--l);
+  display: flex;
+  align-items: center;
+  min-width: 25vh;
+  flex-direction: column;
+  font-size: var(--body-size-m);
 }
 
 .jumps-box-item {

src/ui/home/Home.module.css

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { bind } from '../../utils/bind';
 import styles from './Home.module.css';
 import { sentJump } from '../../infrastructure/postJump';
+import { sentJumpGrpc } from '../../infrastructure/postJumpGrpc';
 import { ResponseBack } from '../../domain/ResponseBack';
 import { AppService } from '../../domain/AppService';
 import { JumpLog } from '../../domain/JumpLog';
@@ -52,6 +53,7 @@ export const Home: React.FunctionComponent<Props> = () => {
   };
 
   const [data, setData] = useState(jumps);
+  const [grpc, setGrpc] = useState(false);
   const [calls, setCalls] = useState(1);
   const [callsInterval, setCallsInterval] = useState(1);
   const [callLogs, setCallLogs] = useState({ ...jumpLogTest });
@@ -67,11 +69,13 @@ export const Home: React.FunctionComponent<Props> = () => {
   const sendJumps = async () => {
     setCallLogs({ ...jumpLogTest });
 
+    const jumpsRequest = data.map((i) => i.jump)
+
     const finalJump: Jump = {
       message: 'hello',
       jump_path: '/jump',
       last_path: '/jump',
-      jumps: data.map((i) => i.jump)
+      jumps: jumpsRequest,
     };
 
     const timeout = async (ms: number) => {
@@ -83,7 +87,14 @@ export const Home: React.FunctionComponent<Props> = () => {
     for (let index = 0; index < calls; index++) {
       await timeout(callsInterval);
       setCallLogs({ ...jumpLogTest });
-      const jump: ResponseBack = await sentJump(appBack, finalJump);
+
+      var jump: ResponseBack = {} as any;
+      
+      if (!grpc) {
+        jump = await sentJump(appBack, finalJump);
+      } else {
+        jump = await sentJumpGrpc(appBack, jumpsRequest)
+      }
       const timeLog = new Date();
       const time = timeLog.getTime();
       const date = new Date(time);
@@ -185,7 +196,20 @@ export const Home: React.FunctionComponent<Props> = () => {
           </div>
         </div>
         <div role='jumpbox' className={cx('jumps-box')}>
-          <h1>Jumps</h1>
+          <h1>Jumps</h1> 
+          <div className={cx('jumps-box-grpc-section')}>          
+            <p>
+              <input 
+                  type="checkbox" 
+                  id="grpc" 
+                  name="grpc"
+                  defaultChecked={grpc} 
+                  onChange={(event) => 
+                    setGrpc(event.target.checked)
+                  }/>  
+            gRPC Enabled
+            </p>
+          </div>
           <DragDropContext onDragEnd={handleOnDragEnd}>
             <Droppable droppableId='jumps'>
               {(provided) => (

src/ui/home/Home.tsx

@@ -0,0 +1,79 @@
+/**
+ * @fileoverview gRPC-Web generated client stub for jump
+ * @enhanceable
+ * @public
+ */
+
+// GENERATED CODE -- DO NOT EDIT!
+
+
+/* eslint-disable */
+// @ts-nocheck
+import * as grpcWeb from 'grpc-web';
+
+import * as jump_jump_pb from './jump_pb';
+
+export class JumpServiceClient {
+  client_: grpcWeb.AbstractClientBase;
+  hostname_: string;
+  credentials_: null | { [index: string]: string; };
+  options_: null | { [index: string]: any; };
+
+  constructor (hostname: string,
+               credentials?: null | { [index: string]: string; },
+               options?: null | { [index: string]: any; }) {
+    if (!options) options = {};
+    if (!credentials) credentials = {};
+    options['format'] = 'binary';
+
+    this.client_ = new grpcWeb.GrpcWebClientBase(options);
+    this.hostname_ = hostname;
+    this.credentials_ = credentials;
+    this.options_ = options;
+  }
+
+  methodInfoJump = new grpcWeb.MethodDescriptor(
+    '/jump.JumpService/Jump',
+    grpcWeb.MethodType.UNARY,
+    jump_jump_pb.JumpReq,
+    jump_jump_pb.Response,
+    (request: jump_jump_pb.JumpReq) => {
+      return request.serializeBinary();
+    },
+    jump_jump_pb.Response.deserializeBinary
+  );
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null): Promise<jump_jump_pb.Response>;
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null,
+    callback: (err: grpcWeb.RpcError,
+               response: jump_jump_pb.Response) => void): grpcWeb.ClientReadableStream<jump_jump_pb.Response>;
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null,
+    callback?: (err: grpcWeb.RpcError,
+               response: jump_jump_pb.Response) => void) {
+    if (callback !== undefined) {
+      return this.client_.rpcCall(
+        this.hostname_ +
+          '/jump.JumpService/Jump',
+        request,
+        metadata || {},
+        this.methodInfoJump,
+        callback);
+    }
+    return this.client_.unaryCall(
+    this.hostname_ +
+      '/jump.JumpService/Jump',
+    request,
+    metadata || {},
+    this.methodInfoJump);
+  }
+
+}
+

src/utils/grpc/JumpServiceClientPb.ts

@@ -0,0 +1,54 @@
+import * as jspb from 'google-protobuf'
+
+
+
+export class JumpReq extends jspb.Message {
+  getCount(): number;
+  setCount(value: number): JumpReq;
+
+  getMessage(): string;
+  setMessage(value: string): JumpReq;
+
+  getJumpsList(): Array<string>;
+  setJumpsList(value: Array<string>): JumpReq;
+  clearJumpsList(): JumpReq;
+  addJumps(value: string, index?: number): JumpReq;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): JumpReq.AsObject;
+  static toObject(includeInstance: boolean, msg: JumpReq): JumpReq.AsObject;
+  static serializeBinaryToWriter(message: JumpReq, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): JumpReq;
+  static deserializeBinaryFromReader(message: JumpReq, reader: jspb.BinaryReader): JumpReq;
+}
+
+export namespace JumpReq {
+  export type AsObject = {
+    count: number,
+    message: string,
+    jumpsList: Array<string>,
+  }
+}
+
+export class Response extends jspb.Message {
+  getCode(): number;
+  setCode(value: number): Response;
+
+  getMessage(): string;
+  setMessage(value: string): Response;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): Response.AsObject;
+  static toObject(includeInstance: boolean, msg: Response): Response.AsObject;
+  static serializeBinaryToWriter(message: Response, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): Response;
+  static deserializeBinaryFromReader(message: Response, reader: jspb.BinaryReader): Response;
+}
+
+export namespace Response {
+  export type AsObject = {
+    code: number,
+    message: string,
+  }
+}
+