andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SeachInput: log GA events on searches & tags

Browse Source
This commit is contained in:
rektdeckard
2020-10-10 01:16:35 -04:00
parent 496c14c8c6
commit 9a4d545dc5
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/SearchInput/SearchInput.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { useRecoilState } from "recoil";
import { useDebounce } from "react-use";
import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
import ReactGA from "react-ga";
import { searchQueryAtom } from "../../state/atoms";
import "./SearchInput.css";
@@ -12,16 +13,24 @@ const SearchInput: React.FC<SearchInputProps> = () => {
const [value, setValue] = useState<string>("");
const [query, setQuery] = useRecoilState(searchQueryAtom);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => void (value !== query && setValue(query)), [query]);
/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
if (value !== query) {
setValue(query);
ReactGA.event({ category: "Search", action: "Tag", label: query });
}
}, [query]);
/* eslint-enable react-hooks/exhaustive-deps */
const [isReady] = useDebounce(
() => {
setQuery(value);
value &&
void document
.getElementById("beacon")
?.scrollIntoView({ block: "start", behavior: "smooth" });
if (value !== query) {
setQuery(value);
!!value && ReactGA.event({ category: "Search", action: "Query", label: value });
}
!!value && void document
.getElementById("beacon")
?.scrollIntoView({ block: "start", behavior: "smooth" });
},
250,
[value]