Restructure code

package-lock.json

@@ -6087,6 +6087,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha1-7OCsr3HWLClpwuxZ/v9CpLGoW0U=",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npm.taobao.org/hosted-git-info/download/hosted-git-info-2.8.8.tgz",
@@ -10917,6 +10925,18 @@
       "resolved": "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz",
       "integrity": "sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ="
     },
+    "react-redux": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npm.taobao.org/react-redux/download/react-redux-7.2.0.tgz",
+      "integrity": "sha1-+XD2IZKzmBZC/sRv0NsYoHT+h50=",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npm.taobao.org/react-scripts/download/react-scripts-3.4.1.tgz",
@@ -11079,6 +11099,36 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npm.taobao.org/redux/download/redux-4.0.5.tgz?cache=0&sync_timestamp=1577154206919&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fredux%2Fdownload%2Fredux-4.0.5.tgz",
+      "integrity": "sha1-TbXeWBbheJHeioDEJCMtBvBR2T8=",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-devtools": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npm.taobao.org/redux-devtools/download/redux-devtools-3.5.0.tgz",
+      "integrity": "sha1-1pq3bU8Pir320kvPWVTXoaoraCc=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.2.0",
+        "prop-types": "^15.5.7",
+        "redux-devtools-instrument": "^1.9.0"
+      }
+    },
+    "redux-devtools-instrument": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npm.taobao.org/redux-devtools-instrument/download/redux-devtools-instrument-1.9.6.tgz",
+      "integrity": "sha1-a0EllfdLnUjP1OzBPlhbFYjtbn4=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.2.0",
+        "symbol-observable": "^1.0.2"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz",
@@ -12526,6 +12576,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/symbol-observable/download/symbol-observable-1.2.0.tgz",
+      "integrity": "sha1-wiaIrtTqs83C3+rLtWFmBWCgCAQ="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.4.tgz",

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -31,5 +34,8 @@
       "last 1 safari version"
     ]
   },
-  "homepage": "./"
+  "homepage": "./",
+  "devDependencies": {
+    "redux-devtools": "^3.5.0"
+  }
 }

src/App.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import './App.css';
-import Layout from './containers/Layout'
-import Qrcode from "./components/Qrcode";
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <Layout>
-          <Qrcode></Qrcode>
-        </Layout>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/Footer.js

@@ -1,20 +0,0 @@
-import React from "react";
-import './Qrcode.css';
-
-const currentYear = new Date().getFullYear();
-
-class Footer extends React.Component {
-    render() {
-        return (
-            <div className="Qr-titled">
-                <div className="Qr-Centered Qr-footer note-font">
-                    <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener noreferrer" target="_blank">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener noreferrer" target="_blank">CPunisher</a></div>
-                    <div className="Gray">Copyright © {currentYear} QRBTF. 保留所有权利。</div>
-                    <div className="Gray"><a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">浙 ICP 备 19005869 号 </a></div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Footer

src/components/InputInfo.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const InputInfo = ({ onChange, onBlur, onKeyPress }) => (
+    <div className="Qr-Centered">
+        <input
+            className="Qr-input big-input"
+            placeholder="Input your URL here"
+            onChange={onChange}
+            onBlur={onBlur}
+            onKeyPress={onKeyPress}
+        />
+    </div>
+)
+
+InputInfo.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    onKeyPress: PropTypes.func.isRequired
+}
+
+export default InputInfo

src/components/Qrcode.js

@@ -8,7 +8,7 @@ import {isWeiXin} from "../utils/util";
 import './Qrcode.css';
 import logo from '../qrbtf-logo.svg';
 
-import Footer from "./Footer";
+import Footer from "./footer/Footer";
 import QrItem from "./QrItem";
 import QrRendererBase from "./QrRendererBase";
 import QrRendererRound from "./QrRendererRound";
@@ -17,11 +17,6 @@ import QrRendererBlank from "./QrRendererBlank";
 import QrRendererRandRect from "./QrRendererRandRect";
 import QrRendererDSJ from "./QrRendererDSJ";
 
-const logoStyle = {
-    background: `url(${logo})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'left'
-};
 
 const styleList = [
     {value: "A1", renderer: QrRendererBase},
@@ -150,12 +145,8 @@ class Qrcode extends React.Component {
 
     render() {
         return (
-            <div className="Qr-outer">
                 <div className="Qr-Centered">
-                    <div style={logoStyle}>
+
-                        <h1 className="Qr-title">&ensp;</h1>
-                    </div>
-                    <p className="Qr-subtitle">参数化二维码生成器</p>
                     <input
                         className="Qr-input big-input"
                         placeholder="Input your URL here"
@@ -256,8 +247,6 @@ class Qrcode extends React.Component {
                         </div>
                     </div>
                 </div>
-                <Footer />
-            </div>
         );
     }
 }

src/components/app/App.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import '../Qrcode.css';
+import Footer from "../footer/Footer";
+import Header from "../header/Header";
+
+function App() {
+    return (
+        <div className="App">
+            <header className="App-header">
+                <div className="Qr-outer">
+                    <Header/>
+
+                    <Footer/>
+                </div>
+            </header>
+        </div>
+    );
+}
+
+export default App;

src/components/footer/Footer.js

@@ -0,0 +1,32 @@
+import React from "react";
+import '../Qrcode.css';
+
+const currentYear = new Date().getFullYear();
+
+const Footer = () => (
+    <div className="Qr-titled">
+        <div className="Qr-Centered Qr-footer note-font">
+            <div>
+                <strong>作者</strong>&emsp;
+                <a href="https://blog.ciaochaos.com/"
+                   rel="noopener noreferrer"
+                   target="_blank">ciaochaos
+                </a>&emsp;
+                <a href="https://github.com/CPunisher/"
+                   rel="noopener noreferrer"
+                   target="_blank">CPunisher</a>
+            </div>
+            <div className="Gray">
+                Copyright © {currentYear} QRBTF. 保留所有权利。
+            </div>
+            <div className="Gray">
+                <a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">
+                    浙
+                ICP 备 19005869 号
+                </a>
+            </div>
+        </div>
+    </div>
+)
+
+export default Footer

src/components/header/Header.js

@@ -0,0 +1,20 @@
+import React from "react";
+import '../Qrcode.css';
+import logo from "../../qrbtf-logo.svg";
+
+const logoStyle = {
+    background: `url(${logo})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'left'
+};
+
+const Header = () => (
+    <div className="Qr-Centered">
+        <div style={logoStyle}>
+            <h1 className="Qr-title">&ensp;</h1>
+        </div>
+        <p className="Qr-subtitle">参数化二维码生成器</p>
+    </div>
+)
+
+export default Header

src/containers/Layout.css

@@ -1,4 +0,0 @@
-.Layout {
-    margin: 0;
-    padding: 0;
-}

src/containers/Layout.js

@@ -1,12 +0,0 @@
-import React from "react";
-import './Layout.css'
-
-const Layout = (props) => {
-    return (
-        <div className="Layout">
-            {props.children}
-        </div>
-    );
-}
-
-export default Layout;

src/index.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/app/App';
 import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import rootReducer from './reducers';
+import {createStore} from "redux";
+
+const store = createStore(rootReducer);
 
 ReactDOM.render(
   <React.StrictMode>
+      <Provider store={store}>
           <App />
+      </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );