From b4fa706f73335d358d12f4f5e32aaebfaece4924 Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Mon, 20 Jul 2020 02:30:51 -0700
Subject: [PATCH] Use material ui (#97)

* Use material-ui

* Clean up frontend dockerfile
---
 docker/frontend/Dockerfile            | 12 +-----------
 frontend/squeak-frontend/package.json |  3 ++-
 frontend/squeak-frontend/src/App.js   | 14 +++++++++-----
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/docker/frontend/Dockerfile b/docker/frontend/Dockerfile
index 1a7904d8..5df992e8 100644
--- a/docker/frontend/Dockerfile
+++ b/docker/frontend/Dockerfile
@@ -27,24 +27,14 @@ RUN cd src && \
 	--js_out=import_style=commonjs:. \
 	--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.
 
-
 # Copy the eslint prepend script.
 COPY "docker/frontend/pb_disable-eslint.sh" .
 RUN chmod +x pb_disable-eslint.sh
 RUN ./pb_disable-eslint.sh src/proto/
 
-# RUN npm install && \
-# 	npm link grpc-web && \
-# 	npx webpack client.js
-
-# RUN npm link grpc-web
-RUN npm install async --save
-RUN npm install grpc-web --save
-RUN npm install google-protobuf --save
-
+RUN npm install
 RUN npm run build
 RUN npm install -g serve
 
 EXPOSE 8081
-# CMD ["python", "-m", "SimpleHTTPServer", "8081"]
 CMD ["serve", "-s", "build", "-l", "8081"]
diff --git a/frontend/squeak-frontend/package.json b/frontend/squeak-frontend/package.json
index 58b00bba..008747ef 100644
--- a/frontend/squeak-frontend/package.json
+++ b/frontend/squeak-frontend/package.json
@@ -13,7 +13,8 @@
     "@grpc/proto-loader": "~0.5.4",
     "async": "~1.5.2",
     "google-protobuf": "~3.12.0",
-    "grpc-web": "~1.2.0"
+    "grpc-web": "~1.2.0",
+    "@material-ui/core": "~4.11.0"
   },
   "scripts": {
     "start": "EXTEND_ESLINT=true react-scripts start",
diff --git a/frontend/squeak-frontend/src/App.js b/frontend/squeak-frontend/src/App.js
index b6583497..ee916521 100644
--- a/frontend/squeak-frontend/src/App.js
+++ b/frontend/squeak-frontend/src/App.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import Button from '@material-ui/core/Button';
 import './App.css';
 
 import { HelloRequest,
@@ -26,11 +27,14 @@ function App() {
     getMsg()
   },[]);
 
-  return (
-    <div>
-      Message : {msg}
-    </div>
-  );
+    return (
+	    <div>
+	    Message : {msg}
+            <Button variant="contained" color="primary">
+	    Reload message
+	</Button>
+	    </div>
+    );
 }
 
 export default App;