From 3f97a7179f26e20a8758c0b98056dba0b213f751 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Fri, 22 May 2020 17:35:40 +0800 Subject: [PATCH] [Display download data] --- src/actions/index.js | 5 +++++ src/api/db.js | 25 ++++++++++++++++-------- src/components/app/App.js | 25 ++++++++++++++++++++---- src/components/app/PartDownload.js | 14 ++++++++++--- src/constant/ActionTypes.js | 1 + src/containers/app/PartDownloadViewer.js | 23 +++++++++++++++------- src/reducers/index.js | 6 ++++++ 7 files changed, 77 insertions(+), 22 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 2e24e3e..b58cc29 100644 --- a/src/actions/index.js +++ b/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 +}) diff --git a/src/api/db.js b/src/api/db.js index dfab144..a579d6a 100644 --- a/src/api/db.js +++ b/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) } }) diff --git a/src/components/app/App.js b/src/components/app/App.js index be8419b..2d32b07 100644 --- a/src/components/app/App.js +++ b/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 (
@@ -17,7 +34,7 @@ function App() { - +
@@ -27,4 +44,4 @@ function App() { ); } -export default App; +export default connect()(App); diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js index 43aa76f..bc998b4 100644 --- a/src/components/app/PartDownload.js +++ b/src/components/app/PartDownload.js @@ -5,19 +5,27 @@ import {isWeiXin} from "../../utils/navigatorUtils"; const WxMessage = () => { if (isWeiXin()) { - return
当前客户端不支持下载 SVG，
请下载 JPG 并长按二维码保存。
+ return ( +
+ 当前客户端不支持下载 SVG，
+ 请下载 JPG 并长按二维码保存。 +
+ ) } return null } -const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => { +const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => { const [imgData, setImgData] = useState(''); return (
Downloads
-

下载二维码 — {value}

+

+ 下载二维码 — {value} + {downloadCount} +

diff --git a/src/constant/ActionTypes.js b/src/constant/ActionTypes.js index 8ab4cfd..12a5c88 100644 --- a/src/constant/ActionTypes.js +++ b/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', } diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js index ece0a6f..135aeb3 100644 --- a/src/containers/app/PartDownloadViewer.js +++ b/src/containers/app/PartDownloadViewer.js @@ -1,11 +1,19 @@ -import { connect } from 'react-redux'; +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) } }) diff --git a/src/reducers/index.js b/src/reducers/index.js index 53d28e9..75a7b1f 100644 --- a/src/reducers/index.js +++ b/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 } }