[Display download data]
This commit is contained in:
parent
def7806829
commit
3f97a7179f
|
@ -24,3 +24,8 @@ export const changeParam = (rendererIndex, paramIndex, value) => ({
|
||||||
type: actionTypes.CHANGE_PARAM,
|
type: actionTypes.CHANGE_PARAM,
|
||||||
rendererIndex, paramIndex, value
|
rendererIndex, paramIndex, value
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const loadDownloadData = (data) => ({
|
||||||
|
type: actionTypes.LOAD_DOWNLOAD_DATA,
|
||||||
|
data
|
||||||
|
})
|
||||||
|
|
|
@ -3,21 +3,26 @@ import * as tcb from 'tcb-js-sdk';
|
||||||
const app = tcb.init({
|
const app = tcb.init({
|
||||||
env: 'qrbtf-1d845d'
|
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();
|
await auth.signInAnonymously();
|
||||||
const loginState = await auth.getLoginState();
|
const loginState = await auth.getLoginState();
|
||||||
isLogin = loginState
|
isLogin = loginState
|
||||||
}
|
}
|
||||||
|
|
||||||
login();
|
export function getDownloadCount(callback) {
|
||||||
|
if (!isLogin) return;
|
||||||
|
db.collection('QRCounter').get().then(res => {
|
||||||
|
if (callback) callback(res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let isLogin;
|
export function increaseDownloadData(value, callback) {
|
||||||
const db = app.database();
|
|
||||||
const _ = db.command
|
|
||||||
|
|
||||||
export function increaseDownloadData(value) {
|
|
||||||
if (!isLogin) return;
|
if (!isLogin) return;
|
||||||
db.collection('QRCounter').where({
|
db.collection('QRCounter').where({
|
||||||
value: _.eq(value)
|
value: _.eq(value)
|
||||||
|
@ -28,6 +33,8 @@ export function increaseDownloadData(value) {
|
||||||
}).update({
|
}).update({
|
||||||
count: _.inc(1),
|
count: _.inc(1),
|
||||||
date: new Date().toString()
|
date: new Date().toString()
|
||||||
|
}).then(() => {
|
||||||
|
if (callback) callback();
|
||||||
}).catch(console.error)
|
}).catch(console.error)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
@ -35,6 +42,8 @@ export function increaseDownloadData(value) {
|
||||||
value: value,
|
value: value,
|
||||||
count: 1,
|
count: 1,
|
||||||
date: new Date().toString()
|
date: new Date().toString()
|
||||||
|
}).then(() => {
|
||||||
|
if (callback) callback()
|
||||||
}).catch(console.error)
|
}).catch(console.error)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react';
|
import React, {useCallback, useEffect} from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import '../Qrcode.css';
|
import '../Qrcode.css';
|
||||||
import PartFooter from "./PartFooter";
|
import PartFooter from "./PartFooter";
|
||||||
|
@ -7,8 +7,25 @@ import PartMore from "./PartMore";
|
||||||
import PartParams from "./PartParams";
|
import PartParams from "./PartParams";
|
||||||
import PartDownloadViewer from "../../containers/app/PartDownloadViewer";
|
import PartDownloadViewer from "../../containers/app/PartDownloadViewer";
|
||||||
import PartStylesViewer from "../../containers/app/PartStylesViewer";
|
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 (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header className="App-header">
|
<header className="App-header">
|
||||||
|
@ -17,7 +34,7 @@ function App() {
|
||||||
<PartHeader/>
|
<PartHeader/>
|
||||||
<PartStylesViewer/>
|
<PartStylesViewer/>
|
||||||
<PartParams/>
|
<PartParams/>
|
||||||
<PartDownloadViewer/>
|
<PartDownloadViewer updateDownloadData={updateDownloadData}/>
|
||||||
<PartMore/>
|
<PartMore/>
|
||||||
<PartFooter/>
|
<PartFooter/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,4 +44,4 @@ function App() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default connect()(App);
|
||||||
|
|
|
@ -5,19 +5,27 @@ import {isWeiXin} from "../../utils/navigatorUtils";
|
||||||
|
|
||||||
const WxMessage = () => {
|
const WxMessage = () => {
|
||||||
if (isWeiXin()) {
|
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
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => {
|
const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
|
||||||
const [imgData, setImgData] = useState('');
|
const [imgData, setImgData] = useState('');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Qr-titled">
|
<div className="Qr-titled">
|
||||||
<div className="Qr-Centered title-margin">
|
<div className="Qr-Centered title-margin">
|
||||||
<div className="Qr-s-title">Downloads</div>
|
<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>
|
||||||
<div className="Qr-Centered">
|
<div className="Qr-Centered">
|
||||||
<div className="btn-row">
|
<div className="btn-row">
|
||||||
|
|
|
@ -4,4 +4,5 @@ export const actionTypes = {
|
||||||
CHANGE_CORRECT_LEVEL: 'CHANGE_CORRECT_LEVEL',
|
CHANGE_CORRECT_LEVEL: 'CHANGE_CORRECT_LEVEL',
|
||||||
CREATE_PARAM: 'CREATE_PARAM',
|
CREATE_PARAM: 'CREATE_PARAM',
|
||||||
CHANGE_PARAM: 'CHANGE_PARAM',
|
CHANGE_PARAM: 'CHANGE_PARAM',
|
||||||
|
LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,19 @@
|
||||||
import { connect } from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import PartDownload from "../../components/app/PartDownload";
|
import PartDownload from "../../components/app/PartDownload";
|
||||||
import {saveImg, saveSvg} from "../../utils/downloader";
|
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";
|
import {getParamDetailedValue, outerHtml} from "../../utils/util";
|
||||||
|
|
||||||
function saveDB(state, type) {
|
function saveDB(state, type, updateDownloadData) {
|
||||||
increaseDownloadData(state.value)
|
increaseDownloadData(state.value, () => {
|
||||||
|
getDownloadCount((res) => {
|
||||||
|
let downloadData = [];
|
||||||
|
res.data.forEach((item) => {
|
||||||
|
downloadData[item.value] = item.count;
|
||||||
|
});
|
||||||
|
updateDownloadData(downloadData);
|
||||||
|
});
|
||||||
|
});
|
||||||
recordDownloadDetail({
|
recordDownloadDetail({
|
||||||
text: state.textUrl,
|
text: state.textUrl,
|
||||||
value: state.value,
|
value: state.value,
|
||||||
|
@ -23,14 +31,15 @@ function saveDB(state, type) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
value: state.value,
|
value: state.value,
|
||||||
|
downloadCount: state.downloadData[state.value],
|
||||||
onSvgDownload: () => {
|
onSvgDownload: () => {
|
||||||
saveSvg(state.value, outerHtml(state.selectedIndex))
|
saveSvg(state.value, outerHtml(state.selectedIndex))
|
||||||
saveDB(state, 'svg')
|
saveDB(state, 'svg', ownProps.updateDownloadData)
|
||||||
},
|
},
|
||||||
onJpgDownload: () => {
|
onJpgDownload: () => {
|
||||||
saveDB(state, 'jpg')
|
saveDB(state, 'jpg', ownProps.updateDownloadData)
|
||||||
return saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500)
|
return saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -11,6 +11,7 @@ const initialState = {
|
||||||
correctLevel: 0,
|
correctLevel: 0,
|
||||||
textUrl: QRBTF_URL,
|
textUrl: QRBTF_URL,
|
||||||
history: [],
|
history: [],
|
||||||
|
downloadData: [],
|
||||||
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
|
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
|
||||||
paramInfo: new Array(16).fill(new Array(16)),
|
paramInfo: new Array(16).fill(new Array(16)),
|
||||||
paramValue: 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
|
default: return state
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue