List documents on the screen

.env.development

@@ -0,0 +1 @@
+REACT_APP_ADMIN_ADDR=http://localhost:8080

README.md

@@ -1,5 +1,56 @@
 # Yorkie House
 
+Yorkie House is a service that allows you to manage your Document.
+
+## How Yorkie House works
+
+Yorkie House uses gRPC-web for communicating with Yorkie agent built on gRPC.
+
+```
+ +--Browser--+           +--Envoy---------+         +--Yorkie------+
+ |           |           |                |         |              |
+ | gRPC-web  <- HTTP1.1 -> gRPC-web proxy <- HTTP2 -> Admin server |
+ |           |           |                |         |              |
+ +-----------+           +----------------+         +--------------+
+```
+
+For more details: https://grpc.io/blog/state-of-grpc-web/
+
+## Developing Yorkie House
+
+### Building Yorkie House
+
+For building yorkie-house, You'll first need Node.js installed(Node.js version 16+ and npm version 7.10+ are required).
+```
+# install packages
+npm install
+
+# build
+npm run build
+```
+
+For generating proto messages and the service client stub classes with protoc and the protoc-gen-grpc-web.
+How to install protoc-gen-grpc-web: [https://github.com/grpc/grpc-web#code-generator-plugin](https://github.com/grpc/grpc-web#code-generator-plugin)
+```
+# generate proto messages and the service client stub classes
+npm run build:proto
+```
+> Primary "source of truth" location of protobuf message is in [yorkie](https://github.com/yorkie-team/yorkie/tree/main/api). We manage the messages in the repository.
+
+### Running Yorkie House
+
+Yorkie House needs backend servers like Yorkie and Envoy. We can simply run them using `docker-compose`.
+To start Yorkie and Envoy proxy in a terminal:
+```
+$ docker-compose -f docker/docker-compose.yml up --build -d
+```
+
+In the project directory, you can run:
+
+```
+$ npm start
+```
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template and [Tailwind CSS](https://tailwindcss.com/docs/guides/create-react-app).
 
 <details>
@@ -48,3 +99,7 @@ You can learn more in the [Create React App documentation](https://facebook.gith
 To learn React, check out the [React documentation](https://reactjs.org/).
 
 </details>
+
+## Contributing
+
+See [CONTRIBUTING](CONTRIBUTING.md) for details on submitting patches and the contribution workflow.

docker/docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3.3'
+
+services:
+  envoy:
+    build:
+      context: ./
+      dockerfile: ./envoy.Dockerfile
+    image: 'grpcweb:envoy'
+    container_name: 'envoy'
+    restart: always
+    ports:
+      - '8080:8080'
+      - '9901:9901'
+    command: ['/etc/envoy/envoy.yaml']
+    depends_on:
+      - yorkie
+    # If you're using Mac or Windows, this special domain name("host.docker.internal" which makes containers able to connect to the host)
+    # is supported by default.
+    # But if you're using Linux and want an envoy container to communicate with the host,
+    # it may help to define "host.docker.internal" in extra_hosts. 
+    # (Actually, other hostnames are available, but in that case you should update clusters[].host configurations of envoy.yaml)
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+  yorkie:
+    image: 'yorkieteam/yorkie:admin-api'
+    container_name: 'yorkie'
+    command: [
+      'agent',
+      '--enable-pprof',
+    ]
+    restart: always
+    ports:
+      - '11101:11101'
+      - '11102:11102'

docker/envoy.Dockerfile

@@ -0,0 +1,7 @@
+FROM envoyproxy/envoy:v1.19.0
+
+COPY ./envoy.yaml /etc/envoy/envoy.yaml
+
+ENTRYPOINT ["/usr/local/bin/envoy", "-c"]
+
+CMD /etc/envoy/envoy.yaml

docker/envoy.yaml

@@ -0,0 +1,59 @@
+admin:
+  access_log_path: /tmp/admin_access.log
+  address:
+    socket_address: { address: 0.0.0.0, port_value: 9901 }
+
+static_resources:
+  listeners:
+  - name: listener_0
+    address:
+      socket_address: { address: 0.0.0.0, port_value: 8080 }
+    filter_chains:
+    - filters:
+      - name: envoy.filters.network.http_connection_manager
+        typed_config:
+          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+          stat_prefix: ingress_http
+          route_config:
+            name: local_route
+            virtual_hosts:
+            - name: local_service
+              domains: ["*"]
+              routes:
+              - match: { prefix: "/" }
+                route:
+                  cluster: yorkie_service
+                  # https://github.com/grpc/grpc-web/issues/361
+                  max_stream_duration:
+                    grpc_timeout_header_max: 0s
+              cors:
+                allow_origin_string_match:
+                - prefix: "*"
+                allow_methods: GET, PUT, DELETE, POST, OPTIONS
+                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout,authorization
+                max_age: "1728000"
+                expose_headers: custom-header-1,grpc-status,grpc-message
+          http_filters:
+          - name: envoy.filters.http.grpc_web
+          - name: envoy.filters.http.cors
+          - name: envoy.filters.http.router
+  clusters:
+  - name: yorkie_service
+    connect_timeout: 0.25s
+    type: logical_dns
+    http2_protocol_options: {}
+    lb_policy: round_robin
+    # Input the address which envoy can connect to as a yorkie server.
+    # When you want envoy container to communicate with your host machine, you should set as the following
+    # - Windows/Mac: Input host.docker.internal
+    # - Linux: an IP address of the host machine or docker-0 interface or some addresses defined in extra hosts of docker-compose.yml
+    # you can simply use the yorkie container name(e.g. yorkie) in docker-compose whatever your OS is.
+    load_assignment:
+      cluster_name: cluster_0
+      endpoints:
+      - lb_endpoints:
+        - endpoint:
+            address:
+              socket_address:
+                address: host.docker.internal
+                port_value: 11101

package.json

@@ -12,6 +12,8 @@
     "@types/react": "^16.14.24",
     "@types/react-dom": "^16.9.14",
     "@types/react-redux": "^7.1.23",
+    "google-protobuf": "^3.20.1-rc.1",
+    "grpc-web": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
@@ -22,7 +24,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "build:proto": "protoc -I=./src/api --js_out=import_style=commonjs:./src/api --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:./src/api ./src/api/*.proto"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.test.tsx

@@ -11,5 +11,5 @@ test('renders learn react link', () => {
     </Provider>
   );
 
-  expect(getByText(/learn/i)).toBeInTheDocument();
+  expect(getByText(/hello world/i)).toBeInTheDocument();
 });

src/App.tsx

@@ -1,59 +1,14 @@
 import React from 'react';
-import logo from './logo.svg';
-import { Counter } from './features/counter/Counter';
-import './App.css';
+
+import { DocumentList } from './features/documents/DocumentList';
 
 function App() {
   return (
     <div className="App">
       <h1 className="text-3xl font-bold underline">
         Hello world!
       </h1>
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-        </span>
-      </header>
+      <DocumentList />
     </div>
   );
 }

src/api/admin.proto

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2022 The Yorkie Authors. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+syntax = "proto3";
+
+package api;
+
+import "resources.proto";
+
+// Admin is a service that provides a API for Admin.
+service Admin {
+  rpc ListDocuments (ListDocumentsRequest) returns (ListDocumentsResponse) {}
+}
+
+message ListDocumentsRequest {
+  string previous_id = 1;
+  int32 page_size = 2;
+}
+
+message ListDocumentsResponse {
+  repeated DocumentSummary documents = 1;
+}