mirror of https://github.com/kubeflow/examples.git
Search UI Components (#168)
* Initialize search UI. Needs connection to search service * Fix page title * Add component for code search results, dummy values for now * Fix title and manifest * Add mock loading UI. Need to fill in real API results * Wrap application into Dockerfile
This commit is contained in:
Sanyam Kapoor
k8s-ci-robot
parent
c5f13464b4
commit
d692db36e8
|
|
@ -0,0 +1,21 @@
|
||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
FROM node:10.6
|
||||||
|
|
||||||
|
EXPOSE 5000
|
||||||
|
|
||||||
|
RUN npm i -g serve
|
||||||
|
|
||||||
|
ADD ./build /webapp
|
||||||
|
|
||||||
|
ENTRYPOINT ["serve"]
|
||||||
|
|
||||||
|
CMD ["-l", "5000", "-n", "/webapp"]
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "ui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@material-ui/core": "^1.3.1",
|
||||||
|
"@material-ui/icons": "^1.1.0",
|
||||||
|
"react": "^16.4.1",
|
||||||
|
"react-dom": "^16.4.1",
|
||||||
|
"react-scripts": "1.1.4",
|
||||||
|
"react-syntax-highlighter": "^8.0.1"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#4279f4">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>Code Search Demo on Kubeflow</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"short_name": "Code Search Demo",
|
||||||
|
"name": "Code Search Demo on Kubeflow",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#4279f4",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
.App {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 5em;
|
||||||
|
padding: 1em;
|
||||||
|
height: 6em;
|
||||||
|
background: white;
|
||||||
|
border: solid #4279f4 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #4279f4;
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 4em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-intro {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Search-Wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding: 0.5em;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Search-Bar {
|
||||||
|
position: relative;
|
||||||
|
width: 30em;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid #eee 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Search-Button {
|
||||||
|
border-radius: 0.1em;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
background: #4279f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Search-Results {
|
||||||
|
position: relative;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Search-Results-Title {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Code-Url {
|
||||||
|
display: flex;
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Code-Url .Code-Icon {
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Code-Url p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import TextField from '@material-ui/core/TextField';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||||
|
import { MuiThemeProvider } from '@material-ui/core/styles';
|
||||||
|
import SearchIcon from '@material-ui/icons/Search';
|
||||||
|
|
||||||
|
import blueTheme from './theme';
|
||||||
|
import logo from './logo.svg';
|
||||||
|
import './App.css';
|
||||||
|
import CodeSample from './CodeSample';
|
||||||
|
import code_search_api from './CodeSearchApi';
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
state = {
|
||||||
|
codeResults: [],
|
||||||
|
queryStr: '',
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {codeResults, loading} = this.state;
|
||||||
|
return (
|
||||||
|
<MuiThemeProvider theme={blueTheme}>
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
<h1 className="App-title">Code Search Demo</h1>
|
||||||
|
</header>
|
||||||
|
<div className="Search-Wrapper">
|
||||||
|
<TextField
|
||||||
|
id="Search-Bar"
|
||||||
|
placeholder="Enter Search Query Here"
|
||||||
|
InputProps={{
|
||||||
|
disableUnderline: true,
|
||||||
|
}}
|
||||||
|
onChange={this.onSearchQueryChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="Search-Wrapper">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
id="Search-Button"
|
||||||
|
onClick={this.onSearchClick}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<SearchIcon/> Search Code
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
loading ?
|
||||||
|
<LinearProgress color="primary" /> :
|
||||||
|
<div className="Search-Results">
|
||||||
|
<h2 className="Search-Results-Title">Search Results</h2>
|
||||||
|
{
|
||||||
|
codeResults.map((attrs) => <CodeSample {...attrs}/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</MuiThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearchQueryChange = (e) => {
|
||||||
|
const {value} = e.target;
|
||||||
|
this.setState({queryStr: value});
|
||||||
|
};
|
||||||
|
|
||||||
|
onSearchClick = () => {
|
||||||
|
const {queryStr} = this.state;
|
||||||
|
if (queryStr) {
|
||||||
|
this.setState({loading: true});
|
||||||
|
code_search_api(queryStr, (response) => {
|
||||||
|
const {status, results} = response;
|
||||||
|
if (status === 200) {
|
||||||
|
this.setState({codeResults: results, loading: false});
|
||||||
|
} else {
|
||||||
|
this.setState({loading: false});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
it('renders without crashing', () => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
ReactDOM.render(<App />, div);
|
||||||
|
ReactDOM.unmountComponentAtNode(div);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||||
|
import { docco } from 'react-syntax-highlighter/styles/hljs';
|
||||||
|
import CodeIcon from '@material-ui/icons/Code';
|
||||||
|
|
||||||
|
class CodeSample extends Component {
|
||||||
|
render() {
|
||||||
|
const {nwo, path, function_string, lineno} = this.props;
|
||||||
|
|
||||||
|
const codeUrl = `${nwo}/blob/master/${path}#L${lineno}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="Code-Sample">
|
||||||
|
<div className="Code-Url">
|
||||||
|
<a
|
||||||
|
href={`//github.com/${codeUrl}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="nofollow noopener noreferrer"
|
||||||
|
>
|
||||||
|
<CodeIcon className="Code-Icon" />
|
||||||
|
</a>
|
||||||
|
<p><b>{nwo}/{path}#L{lineno}</b></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SyntaxHighlighter style={docco}>
|
||||||
|
{function_string}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CodeSample.propTypes = {
|
||||||
|
nwo: PropTypes.string.isRequired,
|
||||||
|
path: PropTypes.string.isRequired,
|
||||||
|
function_string: PropTypes.string.isRequired,
|
||||||
|
lineno: PropTypes.number.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CodeSample;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
const results = [
|
||||||
|
{
|
||||||
|
nwo: 'activatedgeek/torchrl',
|
||||||
|
path: 'torchrl/agents/random_gym_agent.py',
|
||||||
|
lineno: 19,
|
||||||
|
function_string: `
|
||||||
|
def act(self, obs):
|
||||||
|
return [[self.action_space.sample()] for _ in range(len(obs))]
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nwo: 'activatedgeek/torchrl',
|
||||||
|
path: 'torchrl/policies/epsilon_greedy.py',
|
||||||
|
lineno: 4,
|
||||||
|
function_string: `
|
||||||
|
distribution = np.ones((len(choices), action_size),
|
||||||
|
dtype=np.float32) * eps / action_size
|
||||||
|
distribution[np.arange(len(choices)), choices] += 1.0 - eps
|
||||||
|
actions = np.array([
|
||||||
|
np.random.choice(np.arange(action_size), p=dist)
|
||||||
|
for dist in distribution
|
||||||
|
])
|
||||||
|
return np.expand_dims(actions, axis=1)
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function code_search_api(str, callback) {
|
||||||
|
// TODO: make a real request, this is simulated
|
||||||
|
window.setTimeout(() => {
|
||||||
|
callback({status: 200, results: results});
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default code_search_api;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import registerServiceWorker from './registerServiceWorker';
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('root'));
|
||||||
|
registerServiceWorker();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.93 274.55"><g data-name="Layer 2"><g data-name="Layer 1"><path d="M95.9 62.15l4.1 102.1 73.75-94.12a6.79 6.79 0 0 1 9.6-1.11l46 36.92-15-65.61z" fill="#4279f4"/><path fill="#0028aa" d="M102.55 182.98h65.42l-40.17-32.23-25.25 32.23z"/><path fill="#014bd1" d="M180.18 83.92l-44 56.14 46.88 37.61 44.47-55.76-47.35-37.99z"/><path fill="#bedcff" d="M83.56 52.3l.01-.01 38.69-48.52-62.39 30.05-15.41 67.51 39.1-49.03z"/><path fill="#6ca1ff" d="M45.32 122.05l41.44 51.96-3.95-98.98-37.49 47.02z"/><path fill="#a1c3ff" d="M202.31 28.73L142.65 0l-37.13 46.56 96.79-17.83z"/><path d="M1.6 272v-44.78h5.74v23.41l20.48-23.41h6.4l-17.39 19.7 19 25.07H29.1l-15.92-20.8-5.84 6.65V272zm40.02-9.79V240h5.43v22.39a4.67 4.67 0 0 0 2.35 4.19 11 11 0 0 0 11 0 4.69 4.69 0 0 0 2.33-4.19V240h5.43v22.19a9.08 9.08 0 0 1-4.1 7.87 16.2 16.2 0 0 1-18.37 0 9.07 9.07 0 0 1-4.07-7.85zM77.46 272v-48h5.43v16.81a29.29 29.29 0 0 1 9.32-1.73 13.1 13.1 0 0 1 6.2 1.41 10.71 10.71 0 0 1 4.18 3.74 18.07 18.07 0 0 1 2.23 5.06 21.26 21.26 0 0 1 .73 5.58q0 8.43-4.38 12.79T87.35 272zm5.43-4.87h4.55q6.77 0 9.72-2.95t3-9.51a14.21 14.21 0 0 0-2-7.52 6.55 6.55 0 0 0-6-3.22 24.73 24.73 0 0 0-9.25 1.54zm29.47-11.19q0-7.71 4.09-12.3a13.75 13.75 0 0 1 10.8-4.59q13.35 0 13.36 18.86h-22.82a12.3 12.3 0 0 0 2.9 7.07q2.59 3.11 7.9 3.1a24.92 24.92 0 0 0 10.55-2v5a27.74 27.74 0 0 1-9.86 1.87 19.83 19.83 0 0 1-7.7-1.37 13.31 13.31 0 0 1-5.28-3.76 16.21 16.21 0 0 1-3-5.38 20.84 20.84 0 0 1-.94-6.5zm5.62-2.12h17.26a14.91 14.91 0 0 0-2.37-7.12 6.44 6.44 0 0 0-5.62-2.78 8.2 8.2 0 0 0-6.21 2.72 12.07 12.07 0 0 0-3.04 7.18z" fill="#4279f4" stroke="#4279f4" stroke-miterlimit="10" stroke-width="3.2"/><path d="M147.32 244.89V240h5v-7.59a8.14 8.14 0 0 1 2.31-6.05 7.79 7.79 0 0 1 5.69-2.28h7.86V229h-5c-2.21 0-3.67.45-4.37 1.34s-1.06 2.55-1.06 5V240h8.46v4.87h-8.46V272h-5.44v-27.1zM175.26 272v-48h5.43v48zm19.15-3.95a17.86 17.86 0 1 1 12.33 4.9 16.57 16.57 0 0 1-12.33-4.9zm3.84-20.65a13.16 13.16 0 0 0 0 17.2 12.07 12.07 0 0 0 17 0 13.09 13.09 0 0 0 0-17.2 12.07 12.07 0 0 0-17 0zm30.2-7.4h5.75l7.3 25.32 7.43-25.32h5.36l7.34 25.34L269 240h5.74l-10.04 32h-6.12l-6.83-24.58L245 272h-6.47z" fill="#0028aa" stroke="#0028aa" stroke-miterlimit="10" stroke-width="3.2"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,117 @@
|
||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
const isLocalhost = Boolean(
|
||||||
|
window.location.hostname === 'localhost' ||
|
||||||
|
// [::1] is the IPv6 localhost address.
|
||||||
|
window.location.hostname === '[::1]' ||
|
||||||
|
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||||
|
window.location.hostname.match(
|
||||||
|
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
// The URL constructor is available in all browsers that support SW.
|
||||||
|
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||||
|
if (publicUrl.origin !== window.location.origin) {
|
||||||
|
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||||
|
// from what our page is served on. This might happen if a CDN is used to
|
||||||
|
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
|
||||||
|
if (isLocalhost) {
|
||||||
|
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||||
|
checkValidServiceWorker(swUrl);
|
||||||
|
|
||||||
|
// Add some additional logging to localhost, pointing developers to the
|
||||||
|
// service worker/PWA documentation.
|
||||||
|
navigator.serviceWorker.ready.then(() => {
|
||||||
|
console.log(
|
||||||
|
'This web app is being served cache-first by a service ' +
|
||||||
|
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Is not local host. Just register service worker
|
||||||
|
registerValidSW(swUrl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerValidSW(swUrl) {
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.');
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkValidServiceWorker(swUrl) {
|
||||||
|
// Check if the service worker can be found. If it can't reload the page.
|
||||||
|
fetch(swUrl)
|
||||||
|
.then(response => {
|
||||||
|
// Ensure service worker exists, and that we really are getting a JS file.
|
||||||
|
if (
|
||||||
|
response.status === 404 ||
|
||||||
|
response.headers.get('content-type').indexOf('javascript') === -1
|
||||||
|
) {
|
||||||
|
// No service worker found. Probably a different app. Reload the page.
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister().then(() => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Service worker found. Proceed as normal.
|
||||||
|
registerValidSW(swUrl);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log(
|
||||||
|
'No internet connection found. App is running in offline mode.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { createMuiTheme } from '@material-ui/core/styles';
|
||||||
|
import blue from '@material-ui/core/colors/blue';
|
||||||
|
|
||||||
|
const theme = createMuiTheme({
|
||||||
|
palette: {
|
||||||
|
primary: blue,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default theme;
|
||||||
Loading…
Reference in New Issue