[Display download data]

src/actions/index.js

@@ -24,3 +24,8 @@ export const changeParam = (rendererIndex, paramIndex, value) => ({
     type: actionTypes.CHANGE_PARAM,
     rendererIndex, paramIndex, value
 })
+
+export const loadDownloadData = (data) => ({
+    type: actionTypes.LOAD_DOWNLOAD_DATA,
+    data
+})

src/api/db.js

@@ -3,21 +3,26 @@ import * as tcb from 'tcb-js-sdk';
 const app = tcb.init({
     env: 'qrbtf-1d845d'
 });
-const auth = app.auth();
 
-async function login() {
+let isLogin;
+const auth = app.auth();
+const db = app.database();
+const _ = db.command
+
+export async function login() {
     await auth.signInAnonymously();
     const loginState = await auth.getLoginState();
     isLogin = loginState
 }
 
-login();
+export function getDownloadCount(callback) {
+    if (!isLogin) return;
+    db.collection('QRCounter').get().then(res => {
+        if (callback) callback(res);
+    });
+}
 
-let isLogin;
-const db = app.database();
-const _ = db.command
-
-export function increaseDownloadData(value) {
+export function increaseDownloadData(value, callback) {
     if (!isLogin) return;
     db.collection('QRCounter').where({
         value: _.eq(value)
@@ -28,6 +33,8 @@ export function increaseDownloadData(value) {
             }).update({
                 count: _.inc(1),
                 date: new Date().toString()
+            }).then(() => {
+                if (callback) callback();
             }).catch(console.error)
         }
         else {
@@ -35,6 +42,8 @@ export function increaseDownloadData(value) {
                 value: value,
                 count: 1,
                 date: new Date().toString()
+            }).then(() => {
+                if (callback) callback()
             }).catch(console.error)
         }
     })

src/components/app/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useEffect} from 'react';
 import './App.css';
 import '../Qrcode.css';
 import PartFooter from "./PartFooter";
@@ -7,8 +7,25 @@ import PartMore from "./PartMore";
 import PartParams from "./PartParams";
 import PartDownloadViewer from "../../containers/app/PartDownloadViewer";
 import PartStylesViewer from "../../containers/app/PartStylesViewer";
+import {getDownloadCount, login} from "../../api/db";
+import {connect} from 'react-redux';
+import {loadDownloadData} from "../../actions";
+
+function App({ dispatch }) {
+    const updateDownloadData = useCallback((downloadData) => dispatch(loadDownloadData(downloadData)), []);
+
+    useEffect(() => {
+        login().then(() => {
+            getDownloadCount((res) => {
+                let downloadData = [];
+                res.data.forEach((item) => {
+                    downloadData[item.value] = item.count;
+                });
+                dispatch(loadDownloadData(downloadData));
+            });
+        })
+    })
 
-function App() {
     return (
         <div className="App">
             <header className="App-header">
@@ -17,7 +34,7 @@ function App() {
                         <PartHeader/>
                         <PartStylesViewer/>
                         <PartParams/>
-                        <PartDownloadViewer/>
+                        <PartDownloadViewer updateDownloadData={updateDownloadData}/>
                         <PartMore/>
                         <PartFooter/>
                     </div>
@@ -27,4 +44,4 @@ function App() {
     );
 }
 
-export default App;
+export default connect()(App);

src/components/app/PartDownload.js

@@ -5,19 +5,27 @@ import {isWeiXin} from "../../utils/navigatorUtils";
 
 const WxMessage = () => {
     if (isWeiXin()) {
-        return <div className="note-font" id="wx-message-inner">当前客户端不支持下载 SVG，<br />请下载 JPG 并长按二维码保存。</div>
+        return (
+            <div className="note-font" id="wx-message-inner">
+                当前客户端不支持下载 SVG，<br />
+                请下载 JPG 并长按二维码保存。
+            </div>
+        )
     }
     return null
 }
 
-const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => {
+const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
     const [imgData, setImgData] = useState('');
 
     return (
         <div className="Qr-titled">
         <div className="Qr-Centered title-margin">
             <div className="Qr-s-title">Downloads</div>
-            <p className="Qr-s-subtitle">下载二维码 — {value}</p>
+            <p className="Qr-s-subtitle">
+                下载二维码 — {value}
+                <sup className="Gray"> {downloadCount}</sup>
+            </p>
         </div>
         <div className="Qr-Centered">
             <div className="btn-row">

src/constant/ActionTypes.js

@@ -4,4 +4,5 @@ export const actionTypes = {
     CHANGE_CORRECT_LEVEL: 'CHANGE_CORRECT_LEVEL',
     CREATE_PARAM: 'CREATE_PARAM',
     CHANGE_PARAM: 'CHANGE_PARAM',
+    LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
 }

src/containers/app/PartDownloadViewer.js

@@ -1,11 +1,19 @@
 import {connect} from 'react-redux';
 import PartDownload from "../../components/app/PartDownload";
 import {saveImg, saveSvg} from "../../utils/downloader";
-import {increaseDownloadData, recordDownloadDetail} from "../../api/db";
+import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db";
 import {getParamDetailedValue, outerHtml} from "../../utils/util";
 
-function saveDB(state, type) {
-    increaseDownloadData(state.value)
+function saveDB(state, type, updateDownloadData) {
+    increaseDownloadData(state.value, () => {
+        getDownloadCount((res) => {
+            let downloadData = [];
+            res.data.forEach((item) => {
+                downloadData[item.value] = item.count;
+            });
+            updateDownloadData(downloadData);
+        });
+    });
     recordDownloadDetail({
         text: state.textUrl,
         value: state.value,
@@ -23,14 +31,15 @@ function saveDB(state, type) {
     });
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, ownProps) => ({
     value: state.value,
+    downloadCount: state.downloadData[state.value],
     onSvgDownload: () => {
         saveSvg(state.value, outerHtml(state.selectedIndex))
-        saveDB(state, 'svg')
+        saveDB(state, 'svg', ownProps.updateDownloadData)
     },
     onJpgDownload: () => {
-        saveDB(state, 'jpg')
+        saveDB(state, 'jpg', ownProps.updateDownloadData)
         return saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500)
     }
 })

src/reducers/index.js

@@ -11,6 +11,7 @@ const initialState = {
     correctLevel: 0,
     textUrl: QRBTF_URL,
     history: [],
+    downloadData: [],
     qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
     paramInfo: new Array(16).fill(new Array(16)),
     paramValue: new Array(16).fill(new Array(16))
@@ -59,6 +60,11 @@ export default function appReducer(state = initialState, action) {
                 })
             });
         }
+        case actionTypes.LOAD_DOWNLOAD_DATA: {
+            return Object.assign({}, state, {
+                downloadData: action.data
+            });
+        }
         default: return state
     }
 }