Feat/coord client

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "req-packager"]
+	path = req-packager
+	url = https://github.com/EOSC-Data-Commons/req-packager.git

README.md

@@ -124,6 +124,50 @@ docker run -p 5173:80 ghcr.io/eosc-data-commons/matchmaker-frontend:latest
 >
 > If running backend and frontend in separate containers, you may need to adjust CORS or network settings for them to communicate.
 
+## Coordinator server
+
+The matchmaker talk to backend services such as dataplayer, tool registry and file fetcher through the coordinator server.
+The messages in between follow the same protobuf as the contract.
+Matchmaker implement the client side of grpc in typescript by `grpc-js`.
+To synchronous the protobuf with the coordinator code base so to avaid contract out of sync in the local development, the coordinator code base (called `req-packager` for historical reason) is set as a submodule in the repo.
+
+For developer, clone the repo by:
+
+```console
+git clone --recurse-submodules https://github.com/EOSC-Data-Commons/matchmaker.git
+```
+
+If you already cloned the project and forgot `--recurse-submodules`, you can combine the `git submodule init` and `git submodule update` steps by running `git submodule update --init`. 
+To also initialize, fetch and checkout any nested submodules, you can use the foolproof `git submodule update --init --recursive`.
+
+Check https://git-scm.com/book/en/v2/Git-Tools-Submodules for more information for submodule management.
+
+### grpc codegen
+
+Generate the typescript code that whic grpc related types and functions by:
+
+```console
+npx protoc \
+  --plugin=./node_modules/.bin/protoc-gen-ts_proto \
+  --ts_proto_out=./src/lib/server/generated \
+  --ts_proto_opt=outputServices=grpc-js,esModuleInterop=true,env=node,useOptionals=messages \
+  --proto_path=./req-packager/proto \
+  ./req-packager/proto/coordinator.proto
+```
+
+This will generate a `./src/generated/coordinator.ts` file contains all types to be implemented for client.
+
+### data flow
+
+UI frontend `pages/FooPage.tsx` -\- `lib/coordinatorApi.ts` (implement wrapper of request call of `/api/bar...`)  
+
+<----> 
+
+UI server `server.ts` -\- `lib/server/grpcClient.ts` (grpc client run on the UI server talk to grpc server deployed by req-packager).
+
+<--HTTP/2--> 
+
+coordinator server run as a binary (as grpc server) which hide the backend services from UI.
 
 ## How to Search
 

eslint.config.js

@@ -7,6 +7,15 @@ import tseslint from 'typescript-eslint'
 export default tseslint.config(
     {ignores: ['dist', 'build', '.react-router']},
   {
+    languageOptions: {
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: globals.browser,
+    },
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
@@ -19,6 +28,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
+      "indent": ["warn", 4],
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },