add orderApp

src/case/orderApp/src/App.css

@@ -0,0 +1,13 @@
+.App{
+    height: 100%;
+}
+
+.title{
+    font-size: 18px;
+    /*font-weight: bold;*/
+    text-align: center;
+    padding: 10px;
+    color: #fff;
+    background: #ccc;  
+}
+

src/case/orderApp/src/App.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+
+
+import './App.css';
+import TabBarBottom from './components/App/TabBarBottom'
+
+
+
+class App extends Component {
+  constructor(props){
+    super(props)
+  }
+  
+  render() {
+    return (
+      <div className="App">
+        <TabBarBottom />
+      </div>
+    );
+  }
+}
+
+export default App;

src/case/orderApp/src/App.test.js

@@ -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);
+});

src/case/orderApp/src/api/graphql/slides.js

@@ -0,0 +1,19 @@
+export const getSlidesByProps=`query slidsbyprops($admin_id: ID, $img: String, $name: String, $createdAt: String, $updatedAt: String) {
+    slidsbyprops: slids_by_props(admin_id: $admin_id img: $img name: $name createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        admin_id {
+            id
+            openid
+            username
+            password
+            telephone
+            email
+            createdAt
+            updatedAt
+        }
+        img
+        name
+        createdAt
+        updatedAt
+    }
+}`

src/case/orderApp/src/api/graphql/store.js

@@ -0,0 +1,24 @@
+export const getStoreByProps=`query storebyprops($address: String, $updatedAt: String, $telephone: String, $name: String, $describle: String, $createdAt: String, $admin_id: ID, $class: String, $recommended: String, $img: String) {
+    storebyprops: store_by_props(address: $address updatedAt: $updatedAt telephone: $telephone name: $name describle: $describle createdAt: $createdAt admin_id: $admin_id class: $class recommended: $recommended img: $img) {
+        address
+        updatedAt
+        telephone
+        name
+        describle
+        createdAt
+        admin_id {
+            id
+            openid
+            username
+            password
+            telephone
+            email
+            createdAt
+            updatedAt
+        }
+        id
+        class
+        recommended
+        img
+    }
+}`

src/case/orderApp/src/api/graphql_request.js

@@ -0,0 +1,12 @@
+import { request } from 'graphql-request'
+import URL from './url_config'
+
+
+export const graphqls=(query,variables)=>{
+   
+    //console.log(URL.HTTP_DATA_URL)
+    const http_request=URL.HTTP_DATA_URL
+      
+    return request(http_request, query,variables={}).then(data =>data)
+}
+

src/case/orderApp/src/api/url_config.js

@@ -0,0 +1,9 @@
+var config={
+    APPID:"wxc4831335ae194243",
+    HTTP_DATA_URL:'http://localhost:3001/graphql',
+    HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
+}
+export default config
+
+
+

src/case/orderApp/src/components/App/TabBarBottom.css

@@ -0,0 +1,12 @@
+/* .TabBarBottom{
+    position: absolute;
+    bottom: 0;
+} */
+.subTitle{
+    box-sizing: border-box;
+    text-align: center;
+    padding: 10px;
+    font-size: 17px;
+    color: #fff;
+    background:url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/black_line.png") repeat
+}

src/case/orderApp/src/components/App/TabBarBottom.jsx

@@ -0,0 +1,113 @@
+import React ,{Component} from 'react';
+import { TabBar } from 'antd-mobile';
+
+import UserPage from '../UserPage/userPage'
+import HomePage from '../HomePage/HomePage'
+
+import './TabBarBottom.css'
+
+class TabBarBottom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedTab: 'index',
+      hidden: false,
+      fullScreen: true
+    };
+  }
+
+  renderContent(page) { 
+    if(page==='index'){
+      //console.log(page)
+      return (
+        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
+          <HomePage />
+        </div>
+      );
+    }
+
+    if(page==='user'){
+      //console.log(page)
+      return (
+        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
+          <UserPage />
+        </div>
+      );
+    }
+    
+    
+  }
+
+  render() {
+    //这里渲染一次
+    return (
+      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }} className="TabBarBottom">
+        <TabBar
+          unselectedTintColor="#949494"
+          tintColor="#33A3F4"
+          barTintColor="white"
+          hidden={this.state.hidden}
+        >
+          <TabBar.Item
+            title="首页"
+            key="Life"
+            icon={<div style={{
+              width: '22px',
+              height: '22px',
+              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home.svg) center center /  21px 21px no-repeat' }}
+            />
+            }
+            selectedIcon={<div style={{
+              width: '22px',
+              height: '22px',
+              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home_s.svg) center center /  21px 21px no-repeat' }}
+            />
+            }
+            selected={this.state.selectedTab === 'index'}
+         
+            onPress={() => {
+              this.setState({
+                selectedTab: 'index',
+              });
+            }}
+            data-seed="logId"
+          >
+            {this.renderContent('index')}
+          </TabBar.Item>
+
+          <TabBar.Item
+            icon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            selectedIcon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            title="我的"
+            key="user"
+  
+            selected={this.state.selectedTab === 'user'}
+            onPress={() => {
+              this.setState({
+                selectedTab: 'user',
+              });
+            }}
+          >
+            {this.renderContent('user')}
+          </TabBar.Item>
+
+        </TabBar>
+      </div>
+    );
+  }
+}
+
+
+export default TabBarBottom

src/case/orderApp/src/components/HomePage/Cards.css

@@ -0,0 +1,45 @@
+*{
+    box-sizing: border-box;
+}
+
+div.Card{
+    font-size:15px;
+}
+.sidebar{
+    flex-grow:1;
+    flex-basis:178px;
+    
+}
+div.imgWrap{
+    text-align: left;
+    flex-basis:145px;
+}
+.bodyWrap{
+   display: flex; 
+}
+
+.p1{
+    text-align: left;
+    color:#d24a58;
+    font-size: 14px;
+}
+
+.p2{
+    text-align: left;
+    font-size: 12px;
+}
+
+.buttonWrap{
+    flex-basis:30px;
+    display: flex;
+    align-items: center;
+}
+
+
+.button{
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    border: none;
+    background: #d24a58;
+}

src/case/orderApp/src/components/HomePage/Cards.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+import { Item } from 'antd-mobile/lib/tab-bar';
+import './Cards.css'
+
+
+class Cards extends Component{
+    constructor(props){
+        //console.log('111',props)
+        super(props)
+    }
+
+    onClickChange(e,d){
+        //console.log('onClickChange',e,d)
+    }
+    
+    render(){
+        //console.log(this.props.products)
+        const Cardss=this.props.store.map((item,index)=>{
+            //console.log(item)
+            return (
+                <WingBlank size="lg" key={index} className="Card">
+                    <WhiteSpace size="lg" />
+                        <Card>
+                            <Card.Header
+                                title={item.name}
+                                extra={<span>this is extra</span>} 
+                            />
+                            <Card.Body>
+                                <div className="bodyWrap">
+                                    <div className="imgWrap">
+                                        <img src={item.img} alt="icon" height="100px" width="100px"/>
+                                    </div>
+                                    <div className="sidebar">
+                                        <p className="p1">{item.describle}</p>
+                                        <p className="p2">{item.address}</p>
+                                    </div>
+                                    <div className="buttonWrap">
+                                        <button onClick={(e)=>{this.onClickChange(e,item.id)}} className="button">详情</button>
+                                    </div>
+                                </div>
+                            </Card.Body>
+                            <Card.Footer content="" extra={<div></div>}/>
+                        </Card>
+                    <WhiteSpace size="lg" />
+                </WingBlank>
+            )
+        })
+
+        return (
+            <div>
+               {Cardss}
+            </div>
+        )
+    }
+}
+export default Cards
+
+
+
+
+
+
+
+

src/case/orderApp/src/components/HomePage/HomePage.jsx

@@ -0,0 +1,40 @@
+import React ,{Component} from 'react';
+
+import Slide from '../HomePage/Slide'
+import Cards from '../HomePage/Cards'
+
+import {graphqls} from '../../api/graphql_request'
+import {getStoreByProps} from '../../api/graphql/store'
+
+export default class HomePage extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            store:[]
+        }
+    }
+
+    getStores(){
+        //获取所有商家
+        graphqls(getStoreByProps,{}).then((e)=>{
+          console.log(e.storebyprops)
+          this.setState({
+            store:e.storebyprops
+          })
+        })
+      }
+    
+    componentDidMount(){
+        this.getStores()
+    }
+
+    render(){
+        return (
+            <div>
+                <Slide />
+                <div className="subTitle">推荐店铺</div>
+                <Cards store={this.state.store||[]}/>
+            </div>
+        )
+    }
+}

src/case/orderApp/src/components/HomePage/Search.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { SearchBar } from 'antd-mobile';
+
+class Search extends Component {
+    state = {
+        value: '输入要搜索的商品',
+      };
+      componentDidMount() {
+        //this.autoFocusInst.focus();
+      }
+      onChange= (value) => {
+        this.setState({ value });
+      };
+      clear = () => {
+        this.setState({ value: '' });
+      };
+      handleClick = () => {
+        this.manualFocusInst.focus();
+      }
+      render() {
+        return (<div>
+          <SearchBar
+            value={this.state.value}
+            placeholder="Search"
+            onSubmit={value => console.log(value, 'onSubmit')}
+            onClear={value => console.log(value, 'onClear')}
+            onFocus={() => console.log('onFocus')}
+            onBlur={() => console.log('onBlur')}
+            onCancel={() => console.log('onCancel')}
+            showCancelButton
+            onChange={this.onChange}
+          />
+        </div>);
+      }
+}
+
+export default Search

src/case/orderApp/src/components/HomePage/Slide.css

@@ -0,0 +1,7 @@
+div.am-wingblank ,div.am-wingblank.am-wingblank-lg {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+

src/case/orderApp/src/components/HomePage/Slide.jsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { Carousel, WingBlank } from 'antd-mobile';
+import {graphqls} from '../../api/graphql_request'
+import {getSlidesByProps} from '../../api/graphql/slides'
+
+import './Slide.css'
+
+class Slide extends React.Component {
+    constructor(props){
+      super(props)
+      this.state = {
+        data: ['1', '2', '3'],
+        imgHeight: 176,
+      }
+    }
+
+    getSlides(){
+      return graphqls(getSlidesByProps,{}).then((e)=>{
+        return e.slidsbyprops
+      })
+    }
+    
+    componentDidMount() {
+      // simulate img loading
+     this.getSlides().then((e)=>{
+       console.log(e)
+       this.setState({
+        data:e
+       })
+     })
+    }
+
+    
+    render() {
+      return (
+        <WingBlank>
+          <Carousel
+            autoplay={false}
+            infinite
+            autoplay
+            slideWidth={1}
+            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
+            afterChange={index => console.log('slide to', index)}
+          >
+            {this.state.data.map(item => (
+              <a
+                key={item.toString()}
+                href="http://www.alipay.com"
+                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
+              >
+                <img
+                  src={item.img}
+                  alt=""
+                  style={{ width: '100%', verticalAlign: 'top' }}
+                  onLoad={() => {
+                    // fire window resize event to change height
+                    window.dispatchEvent(new Event('resize'));
+                    this.setState({ imgHeight: 'auto' });
+                  }}
+                />
+              </a>
+            ))}
+          </Carousel>
+        </WingBlank>
+      );
+    }
+  }
+
+
+  export default Slide
+  

src/case/orderApp/src/components/HomePage/TabBarTop.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+
+import { Tabs, WhiteSpace } from 'antd-mobile';
+import Cards from './Cards'
+
+import {graphqls} from '../../api/graphql_request'
+import {getProductByProps} from '../../api/graphql/product'
+
+
+const query=getProductByProps
+let variables={}
+
+//获取所有商品
+function getGoods(){
+  return graphqls(query,variables).then((data)=>{
+    //console.log("data",data.productbyprops)
+    let products=data.productbyprops
+
+    let arr=products.map((item)=>{
+      return item.category
+    })
+
+    arr = Array.from(new Set(arr))
+
+    let tabs=arr.map((item)=>{
+      return {title:item}
+    })
+
+    return {tabs,products}
+  })
+}
+
+
+class TabBarTop extends Component {
+    constructor(props){
+      super(props)
+      this.state={
+        tabs:[],
+        product_s:[],
+        products:[],
+        select:'所有果品'
+      }
+    }
+
+
+    componentDidMount () {
+      //console.log('tets')
+      getGoods().then((data)=>{
+        this.setState({
+          tabs:[{title: '所有果品'},...data.tabs],
+          products:data.products,
+          select:'所有果品'
+        })
+        sessionStorage.setItem("products",JSON.stringify(data.products))
+      })
+    }
+    tabChange(e){
+
+      let category=e.title,
+          products = JSON.parse(sessionStorage.getItem("products"));
+      if(category==='所有果品'){
+        this.setState({
+          products:products
+        })
+      }else{
+        let arr =products.filter((item)=>{
+          return item.category===category
+        })
+  
+        this.setState({
+          products:arr
+        })
+      } 
+    }
+    
+    render() {
+      //console.log('this.state.products',this.state.products)
+      return (
+        <div>
+          <WhiteSpace />
+            <Tabs onChange={this.tabChange.bind(this)} tabs={this.state.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
+            </Tabs>
+          <WhiteSpace />
+          <Cards products={this.state.products ?this.state.products:[]}/>
+        </div>
+      );
+    }
+  }
+
+  export default TabBarTop
+

src/case/orderApp/src/components/ShopCarPage/shopCar.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class ShopCar extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+
+        }
+    }
+
+    render(){
+        return(
+            <div>ShopCar</div>
+        )
+    }
+}
+
+
+
+
+export default ShopCar

src/case/orderApp/src/components/UserPage/userPage.jsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class UserPage extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+
+        }
+    }
+
+    render(){
+        return(
+            <div>UserPage</div>
+        )
+    }
+}
+
+export default UserPage

src/case/orderApp/src/images/user.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#707070"></path></svg>

src/case/orderApp/src/images/user_select.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#1296db"></path></svg>

src/case/orderApp/src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

src/case/orderApp/src/index.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+
+
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+//import { Button } from 'antd-mobile';
+
+
+class MainApp extends Component{
+    render(){
+        return(
+            <Router>
+                <Route exact path="/" component={App}/>
+            </Router>
+        )
+    }
+}
+
+
+ReactDOM.render(<MainApp />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
+
+

src/case/orderApp/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// 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 subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read http://bit.ly/CRA-PWA
+
+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 function register(config) {
+  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.href);
+    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/facebook/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. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // 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 http://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } 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.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // 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.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.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, config);
+      }
+    })
+    .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();
+    });
+  }
+}