From 99a3853af20d60253cb1fcafb168269b36f1442e Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Wed, 1 Jul 2020 22:27:20 +0800 Subject: [PATCH] GA for Scroll container --- src/actions/index.js | 2 +- src/api/{db.js => TcbHandler.js} | 1 + src/components/app/App.js | 2 +- src/components/app/PartMore.js | 31 ++++++++++++++--------- src/components/app/PartStyles.js | 2 ++ src/components/link/LinkTrace.js | 2 +- src/containers/app/InputText.js | 2 +- src/containers/app/PartDownloadViewer.js | 4 +-- src/containers/param/ParamUploadViewer.js | 2 +- src/utils/gaHelper.js | 10 +++++++- src/utils/util.js | 6 +---- 11 files changed, 39 insertions(+), 25 deletions(-) rename src/api/{db.js => TcbHandler.js} (98%) diff --git a/src/actions/index.js b/src/actions/index.js index a7e3ef6..06fdb4e 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,5 +1,5 @@ import {actionTypes} from "../constant/ActionTypes"; -import {handleStyle} from "../utils/gaHelper"; +import {handleStyle} from "../utils/GAHelper"; export const genQRInfo = text => ({ type: actionTypes.GENERATE_QR_INFO, diff --git a/src/api/db.js b/src/api/TcbHandler.js similarity index 98% rename from src/api/db.js rename to src/api/TcbHandler.js index 0c914b1..ec61d9b 100644 --- a/src/api/db.js +++ b/src/api/TcbHandler.js @@ -10,6 +10,7 @@ const db = app.database(); const _ = db.command export async function login() { + if (isLogin) return; await auth.signInAnonymously(); const loginState = await auth.getLoginState(); isLogin = loginState; diff --git a/src/components/app/App.js b/src/components/app/App.js index 43d94e9..d8b0ad5 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -7,7 +7,7 @@ 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 {getDownloadCount, login} from "../../api/TcbHandler"; import {connect} from 'react-redux'; import {loadDownloadData} from "../../actions"; import ReactGA from 'react-ga'; diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js index 972993c..7ec6921 100644 --- a/src/components/app/PartMore.js +++ b/src/components/app/PartMore.js @@ -8,15 +8,15 @@ import LinkButton from "../link/LinkButton"; import ImageZoom from "../../containers/app/ImageZoom"; import LinkTrace from "../link/LinkTrace"; import {isPC} from "../../utils/navigatorUtils"; +import {handleScroll} from "../../utils/GAHelper"; const pictures = [ - 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=5891c0a78a0220aefd58293ee4ec7db7&t=1593527651', - 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=f97850ff371131dcf5891b7185c6c16b&t=1593527984', - 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg?sign=86b896e0c7f9c66881a78a969551e47b&t=1593531244', + 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg', + 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg', + 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg', ] const PartMore = () => { - const zoom = React.useRef(mediumZoom()); return (
@@ -38,18 +38,12 @@ const PartMore = () => {
handleScroll('gallery')} hideScrollbars={false} horizontal={true} vertical={false}>
- { - pictures.map((url) => ( - - - - ) - ) - } +
@@ -107,4 +101,17 @@ const PartMore = () => { ) } +const Gallery = ({ contents }) => { + const zoom = React.useRef(mediumZoom()); + + return ( + contents.map((url) => ( + + + + ) + ) + ); +} + export default PartMore; diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js index 0786f20..4a2e44c 100644 --- a/src/components/app/PartStyles.js +++ b/src/components/app/PartStyles.js @@ -3,6 +3,7 @@ import './App.css'; import StyleListViewer from "../../containers/style/StyleListViewer"; import {isPC} from "../../utils/navigatorUtils"; import ScrollContainer from 'react-indiana-drag-scroll' +import {handleScroll} from "../../utils/GAHelper"; const PartStyles = ({ setParamInfo }) => { const [loaded, setLoaded] = useState(false); @@ -22,6 +23,7 @@ const PartStyles = ({ setParamInfo }) => {
handleScroll('style')} hideScrollbars={false} horizontal={true} vertical={false} diff --git a/src/components/link/LinkTrace.js b/src/components/link/LinkTrace.js index fbbc6c8..9b64152 100644 --- a/src/components/link/LinkTrace.js +++ b/src/components/link/LinkTrace.js @@ -1,5 +1,5 @@ import React from 'react'; -import {handleLink} from "../../utils/gaHelper"; +import {handleLink} from "../../utils/GAHelper"; const LinkTrace = (props) => { return ( diff --git a/src/containers/app/InputText.js b/src/containers/app/InputText.js index 2c98a53..58d5755 100644 --- a/src/containers/app/InputText.js +++ b/src/containers/app/InputText.js @@ -3,7 +3,7 @@ import {genQRInfo} from "../../actions"; import React, {useRef} from "react"; import {isPicture} from "../../utils/imageUtils"; import {decodeData} from "../../utils/qrcodeHandler"; -import { handleUpload, handleInputUrl } from "../../utils/gaHelper"; +import { handleUpload, handleInputUrl } from "../../utils/GAHelper"; const InputText = ({dispatch}) => { const textRef = useRef(); diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js index 11ab504..baf1d88 100644 --- a/src/containers/app/PartDownloadViewer.js +++ b/src/containers/app/PartDownloadViewer.js @@ -1,9 +1,9 @@ import {connect} from 'react-redux'; import PartDownload from "../../components/app/PartDownload"; import {saveImg, saveSvg} from "../../utils/downloader"; -import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db"; +import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/TcbHandler"; import {getParamDetailedValue, outerHtml} from "../../utils/util"; -import {handleDownloadJpg, handleDownloadSvg} from "../../utils/gaHelper"; +import {handleDownloadJpg, handleDownloadSvg} from "../../utils/GAHelper"; function saveDB(state, type, updateDownloadData) { return new Promise(resolve => { diff --git a/src/containers/param/ParamUploadViewer.js b/src/containers/param/ParamUploadViewer.js index daf1a0c..2649c45 100644 --- a/src/containers/param/ParamUploadViewer.js +++ b/src/containers/param/ParamUploadViewer.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import {changeParam} from "../../actions"; import ParamUpload from "../../components/param/ParamUpload"; import {isPicture, toBase64} from "../../utils/imageUtils"; -import {handleUpload} from "../../utils/gaHelper"; +import {handleUpload} from "../../utils/GAHelper"; const mapStateToProps = (state, ownProps) => ({ rendererIndex: ownProps.rendererIndex, diff --git a/src/utils/gaHelper.js b/src/utils/gaHelper.js index 9f331b8..825c9b8 100644 --- a/src/utils/gaHelper.js +++ b/src/utils/gaHelper.js @@ -52,4 +52,12 @@ export function handleInputUrl() { category: 'URL', action: 'Input', }); -} \ No newline at end of file +} + +export function handleScroll(label) { + ReactGA.event({ + category: 'ScrollContainer', + action: 'scroll', + label: label + }); +} diff --git a/src/utils/util.js b/src/utils/util.js index b2ef7da..b5745ba 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -1,10 +1,6 @@ import {ParamTypes} from "../constant/ParamTypes"; let seed = 0; -export function srand(sd) { - seed = sd; -} - export function rand(min, max) { seed = (seed * 9301 + 49297) % 233280; return min + (seed / 233280.0) * (max - min); @@ -64,4 +60,4 @@ function getScrollbarWidth() { export function setScrollbarWidthProp() { document.documentElement.style.setProperty('--scrollbar-width', getScrollbarWidth() + "px"); -} \ No newline at end of file +}