Skip to content

Commit e990375

Browse files
uid4oeuid4oe
committed
release
0 parents  commit e990375

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+6293
-0
lines changed

‎.dockerignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/build
3+
.git
4+
*.md
5+
.gitignore

‎.gitignore

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
26+
27+
package-lock.json
28+
29+
.eslintcache

‎Dockerfile

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
FROM node:10 AS builder
2+
WORKDIR /app
3+
COPY . .
4+
RUN npm install && npm run-script build
5+
6+
FROM nginx:alpine
7+
WORKDIR /etc/nginx/conf.d
8+
RUN rm -f default.conf
9+
COPY ./nginx /etc/nginx/conf.d
10+
WORKDIR /usr/share/nginx/html
11+
RUN rm -rf ./*
12+
COPY --from=builder /app/build .
13+
ENTRYPOINT ["nginx", "-g", "daemon off;"]

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# gRPC-Web Demo UI
2+
3+
![](./ui.gif)
4+
5+
A client app which uses gRPC for Web Clients to performing operations through microservices at
6+
7+
- [gRPC-Web Demo](https://github.com/uid4oe/grpc-web-demo)
8+
9+
## Installation
10+
11+
Make sure services from the above repository are running beforehand. Also, you can follow that readme to setup local development environment hassle free.
12+
13+
```bash
14+
npm install
15+
npm start
16+
```
17+
18+
## Route
19+
20+
```bash
21+
http://localhost:3000/
22+
```
23+
24+
## Contributing
25+
26+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

‎build_image.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
docker rmi uid4oe/alva-ui -f
2+
docker buildx build --platform=linux/amd64 . -t uid4oe/alva-ui:latest
3+
docker push uid4oe/alva-ui:latest

‎genarate-pb.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
cd src/grpc/catalogpb
2+
protoc --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. catalog.proto
3+
cd ../offerpb/
4+
protoc --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. offer.proto
5+
cd ../orderpb/
6+
protoc --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. order.proto

‎nginx/ui.conf

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
server {
2+
listen 80;
3+
server_name localhost;
4+
5+
location / {
6+
root /usr/share/nginx/html;
7+
index index.html index.htm;
8+
try_files $uri /index.html$is_args$args =404;
9+
}
10+
}

‎package.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "grpc-web-demo-alva-ui",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@ant-design/icons": "^4.6.4",
7+
"@testing-library/jest-dom": "^4.2.4",
8+
"@testing-library/react": "^9.5.0",
9+
"@testing-library/user-event": "^7.2.1",
10+
"antd": "^4.16.13",
11+
"google-protobuf": "^3.19.0",
12+
"grpc-web": "^1.1.0",
13+
"react": "^17.0.1",
14+
"react-dom": "^17.0.1",
15+
"react-router-dom": "^5.2.0",
16+
"react-scripts": "4.0.1",
17+
"uuid": "^8.3.2"
18+
},
19+
"scripts": {
20+
"start": "react-scripts start",
21+
"build": "react-scripts build",
22+
"test": "react-scripts test",
23+
"eject": "react-scripts eject"
24+
},
25+
"eslintConfig": {
26+
"extends": "react-app"
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
40+
}

‎public/alva.svg

Lines changed: 12 additions & 0 deletions
Loading

‎public/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/alva.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="gRPC-Web Demo Application" />
9+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/alva.svg" />
10+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11+
<title>gRPC-Web Demo</title>
12+
</head>
13+
14+
<body>
15+
<noscript>You need to enable JavaScript to run this app.</noscript>
16+
<div id="root"></div>
17+
</body>
18+
</html>

‎public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "gRPC-Web Demo - Alva",
3+
"name": "Demo application for gRPC-Web",
4+
"icons": [
5+
{
6+
"src": "alva.svg",
7+
"type": "image/svg+xml",
8+
"sizes": "512x512"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React, { useEffect, useState } from "react";
2+
import { Button, Col, Layout, Row } from "antd";
3+
import { v4 as uuidv4 } from "uuid";
4+
import "./app.css";
5+
import { ReactComponent as Alva } from "./alva.svg";
6+
7+
import { StateContext, steps, CatalogContext, OfferContext } from "./constant";
8+
import FlowSteps from "./components/flow-steps-card";
9+
import Icon, { MediumSquareFilled } from "@ant-design/icons";
10+
11+
const { Content, Footer } = Layout;
12+
13+
function App() {
14+
const [globalState, setGlobalState] = useState({
15+
step: 0,
16+
flow_id: uuidv4(),
17+
});
18+
const [selectedCatalogItem, setSelectedCatalogItem] = useState(null);
19+
const [selectedOffer, setSelectedOffer] = useState(null);
20+
21+
useEffect(() => {
22+
if (!globalState?.flow_id) {
23+
setGlobalState({ step: 0, flow_id: uuidv4() });
24+
setSelectedCatalogItem(null);
25+
setSelectedOffer(null);
26+
}
27+
}, [globalState]);
28+
29+
const disabled =
30+
(globalState.step === 0 && !selectedCatalogItem) ||
31+
(globalState.step === 1 && !selectedOffer);
32+
33+
return (
34+
<StateContext.Provider value={[globalState, setGlobalState]}>
35+
<Layout style={{ background: "white" }}>
36+
<Content style={{ padding: "4em 2em 6em 2em" }}>
37+
<FlowSteps steps={steps} />
38+
<CatalogContext.Provider
39+
value={[selectedCatalogItem, setSelectedCatalogItem]}
40+
>
41+
<OfferContext.Provider value={[selectedOffer, setSelectedOffer]}>
42+
<div style={{ marginTop: "2em" }}>
43+
{steps[globalState.step].app}
44+
</div>
45+
</OfferContext.Provider>
46+
</CatalogContext.Provider>
47+
</Content>
48+
<Footer
49+
style={{
50+
position: "fixed",
51+
zIndex: 1,
52+
width: "100%",
53+
bottom: 0,
54+
padding: "1em",
55+
}}
56+
>
57+
<Row justify="space-between">
58+
<Col>
59+
<Row gutter={[8, 8]}>
60+
<Col>
61+
<Button
62+
href="https://career.alvalabs.io/jobs"
63+
target="_blank"
64+
className="contact"
65+
>
66+
Alva Labs
67+
<Icon component={Alva} />
68+
</Button>
69+
</Col>
70+
<Col>
71+
<Button
72+
href="https://medium.com/alva-labs"
73+
target="_blank"
74+
className="contact"
75+
>
76+
<MediumSquareFilled />
77+
</Button>
78+
</Col>
79+
</Row>
80+
</Col>
81+
<Col>
82+
{steps[globalState.step]?.footer && (
83+
<Button
84+
className={!disabled && "alva shake"}
85+
shape="round"
86+
disabled={disabled}
87+
onClick={() =>
88+
setGlobalState({
89+
...globalState,
90+
step: steps[globalState.step].footer.step,
91+
})
92+
}
93+
>
94+
{steps[globalState.step].footer.title}
95+
</Button>
96+
)}
97+
</Col>
98+
</Row>
99+
</Footer>
100+
</Layout>
101+
</StateContext.Provider>
102+
);
103+
}
104+
105+
export default App;

‎src/alva.svg

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)