Restructure code

2020-05-06 20:39:05 +08:00 · 2020-05-06 20:39:05 +08:00 · 872a42b7a5
parent df86cdef80
commit 872a42b7a5
15 changed files with 169 additions and 80 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
+  }
 }
--- a/src/App.js
+++ b/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;
--- a/src/App.test.js
+++ b/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();
-});
--- a/src/components/Footer.js
+++ b/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
--- a/src/components/InputInfo.js
+++ b/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
--- a/src/components/Qrcode.js
+++ b/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>
        );
    }
 }
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
--- a/src/components/app/App.js
+++ b/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;
--- a/src/components/footer/Footer.js
+++ b/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
--- a/src/components/header/Header.js
+++ b/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
--- a/src/containers/Layout.css
+++ b/src/containers/Layout.css
@ -1,4 +0,0 @@
-.Layout {
-    margin: 0;
-    padding: 0;
-}
--- a/src/containers/Layout.js
+++ b/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;
--- a/src/index.js
+++ b/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')
 );
--- a/src/reducers/index.js
+++ b/src/reducers/index.js