diff --git a/frontend/package.json b/frontend/package.json index 2b15dbc..5e27719 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "@chakra-ui/react": "^2.4.6", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", + "@fingerprintjs/fingerprintjs": "^5.0.1", "@next/font": "13.1.1", "eslint": "8.30.0", "eslint-config-next": "^12.0.4", diff --git a/frontend/pages/index.jsx b/frontend/pages/index.jsx index 5a35f5c..d2272b8 100644 --- a/frontend/pages/index.jsx +++ b/frontend/pages/index.jsx @@ -16,7 +16,7 @@ import InfiniteScroll from "react-infinite-scroll-component"; // prettier-ignore import { animateGreen, animateRed, scrollContainer, screenButtonContainer, createButton, sortText, relative } from "../styles/Card.module.css"; // Dependencies -import { v4 as uuidv4 } from "uuid"; +import FingerprintJS from "@fingerprintjs/fingerprintjs"; import ReactGA from "react-ga"; import { useErrorToast } from "../hooks/useErrorToast"; @@ -68,7 +68,7 @@ export default function Home() { try { const response = await fetch(`${API_URL}/posts?sort=${type}`, { headers: { - Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`, + Authorization: `Basic ${btoa(uuid)}`, }, }); const results = await response.json(); @@ -91,25 +91,21 @@ export default function Home() { ReactGA.initialize(TRACKING_ID); ReactGA.pageview(window.location.pathname); - // Check if user has visited already - if (localStorage.getItem("uuid") == null) { - // If not, add UUID to local storage. - localStorage.setItem("uuid", uuidv4()); - setUUID(localStorage.getItem("uuid")); - } else { - setUUID(localStorage.getItem("uuid")); - } + // Set UUID to fingerprint ID + (async () => { + const getFingerprintId = async () => { + if (typeof window === "undefined") { + return null; + } + const fpPromise = FingerprintJS.load(); + const fp = await fpPromise; + const result = await fp.get(); + return result.visitorId; + }; - // if (localStorage.getItem("sort") == null) localStorage.setItem("sort", "0"); - // setSortMethod(parseInt(localStorage.getItem("sort"))); - // if (localStorage.getItem("sort") !== "0") { - // fetchPosts(SORT_ICONS[parseInt(localStorage.getItem("sort")) % SORT_ICONS.length].name.toLowerCase()) - // .then((res) => setPosts(res)) - // .catch((error) => { - // console.error(error); - // addToast(error?.response?.data || error.message); - // }); - // } + const fingerprintId = await getFingerprintId(); + setUUID(fingerprintId); + })(); (async () => { const res = await fetchPosts(SORT_ICONS[sortMethod].name.toLowerCase()); @@ -119,10 +115,6 @@ export default function Home() { setHasMorePosts(!(posts.length === 0)); }, []); - // useEffect(() => { - // localStorage.setItem("sort", sortMethod); - // }, [sortMethod]); - async function loadMore() { try { console.log("Loading"); @@ -130,9 +122,9 @@ export default function Home() { `${API_URL}/posts?offset=${posts.length}&sort=${SORT_ICONS[sortMethod].name.toLowerCase()}`, { headers: { - Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`, + Authorization: `Basic ${btoa(uuid)}`, }, - }, + } ); const loadedPosts = await res.json(); if (loadedPosts.length == 0) { @@ -177,7 +169,7 @@ export default function Home() { fetchPosts( SORT_ICONS[ (sortMethod + 1) % SORT_ICONS.length - ].name.toLowerCase(), + ].name.toLowerCase() ) .then((res) => setPosts(res)) .catch((error) => { @@ -228,7 +220,7 @@ export default function Home() { {posts.map( ( post, - i, //TODO theres an error here...duplicate keys + i //TODO theres an error here...duplicate keys ) => (
{/* this is the left and right indicators */} @@ -266,7 +258,7 @@ export default function Home() { key={`${post._id}${i}`} />
- ), + ) )} diff --git a/frontend/pages/post/[id].jsx b/frontend/pages/post/[id].jsx index 5d1acce..5b1c7f1 100644 --- a/frontend/pages/post/[id].jsx +++ b/frontend/pages/post/[id].jsx @@ -21,7 +21,7 @@ import InfiniteScroll from "react-infinite-scroll-component"; // prettier-ignore import { animateGreen, animateRed, scrollContainer, screenButtonContainer, createButton, sortText, relative } from "../../styles/Card.module.css"; // Dependencies -import { v4 as uuidv4 } from "uuid"; +import FingerprintJS from "@fingerprintjs/fingerprintjs"; import ReactGA from "react-ga"; import { useErrorToast } from "../../hooks/useErrorToast"; @@ -78,7 +78,7 @@ export default function Home({ queriedPost, id }) { try { const response = await fetch(`${API_URL}/posts?sort=${type}`, { headers: { - Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`, + Authorization: `Basic ${btoa(uuid)}`, }, }); const results = await response.json(); @@ -101,25 +101,21 @@ export default function Home({ queriedPost, id }) { ReactGA.initialize(TRACKING_ID); ReactGA.pageview(window.location.pathname); - // Check if user has visited already - if (localStorage.getItem("uuid") == null) { - // If not, add UUID to local storage. - localStorage.setItem("uuid", uuidv4()); - setUUID(localStorage.getItem("uuid")); - } else { - setUUID(localStorage.getItem("uuid")); - } + // Set UUID to fingerprint ID + (async () => { + const getFingerprintId = async () => { + if (typeof window === "undefined") { + return null; + } + const fpPromise = FingerprintJS.load(); + const fp = await fpPromise; + const result = await fp.get(); + return result.visitorId; + }; - // if (localStorage.getItem("sort") == null) localStorage.setItem("sort", "0"); - // setSortMethod(parseInt(localStorage.getItem("sort"))); - // if (localStorage.getItem("sort") !== "0") { - // fetchPosts(SORT_ICONS[parseInt(localStorage.getItem("sort")) % SORT_ICONS.length].name.toLowerCase()) - // .then((res) => setPosts(res)) - // .catch((error) => { - // console.error(error); - // addToast(error?.response?.data || error.message); - // }); - // } + const fingerprintId = await getFingerprintId(); + setUUID(fingerprintId); + })(); (async () => { const res = await fetchPosts("hot"); @@ -140,9 +136,9 @@ export default function Home({ queriedPost, id }) { `${API_URL}/posts?offset=${posts.length}&sort=${SORT_ICONS[sortMethod].name.toLowerCase()}`, { headers: { - Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`, + Authorization: `Basic ${btoa(uuid)}`, }, - }, + } ); const loadedPosts = await res.json(); if (loadedPosts.length == 0) { @@ -191,7 +187,7 @@ export default function Home({ queriedPost, id }) { fetchPosts( SORT_ICONS[ (sortMethod + 1) % SORT_ICONS.length - ].name.toLowerCase(), + ].name.toLowerCase() ) .then((res) => setPosts(res)) .catch((error) => { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8d6b1d5..f0dc565 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1538,6 +1538,11 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@fingerprintjs/fingerprintjs@^5.0.1": + version "5.0.1" + resolved "https://artifactory.rbx.com/artifactory/api/npm/npm-all/@fingerprintjs/fingerprintjs/-/fingerprintjs-5.0.1.tgz#e6ca2f88719b90e54a0fa8ab2896eee970948bb7" + integrity sha512-KbaeE/rk2WL8MfpRP6jTI4lSr42SJPjvkyrjP3QU6uUDkOMWWYC2Ts1sNSYcegHC8avzOoYTHBj+2fTqvZWQBA== + "@humanwhocodes/config-array@^0.11.8": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"