import Head from "next/head"; import Image from "next/image"; import Router from "next/router"; import styles from "../styles/Home.module.css"; import UserInfo from "../components/userInfo"; import Preview from "../components/borderPreview"; import Select from "../components/select"; import { alertService } from "../services"; import { useEffect, useState } from "react"; export default function Home() { const [data, setData] = useState([]); const [total, setTotal] = useState(0); const [borderData, setBorderData] = useState(null); const [selected, setSelected] = useState(0); // const pageSize = 36; const [cursor, setCursor] = useState(0); // const fetchMore = () => { // console.log("fetch more"); // fetch(`api/border/all?limit=${pageSize}&cursor=${cursor}`) // .then((res) => res.json()) // .then((res) => { // setData([...data, ...res.data]); // setTotal(res.count); // }); // }; const applyBorder = () => { // console.log("apply"); fetch("api/user/border/@me", { method: "POST", body: selected }) .then((res) => res.json()) .then((res) => { // console.log(res); if (res.error) { alertService.error(`error: ${res.error}`); } else { setBorderData(res); } }); }; useEffect(() => { fetch("api/user/border/@me") .then((res) => res.json()) .then((dat) => { // console.log("border data", dat); setBorderData(dat); setSelected(dat?.borderId || 0); }); }, [data]); useEffect(() => { fetch(`api/border/all`) .then((res) => res.json()) .then((data) => { setData(data.data); setTotal(data.count); }); }, []); // useEffect(() => { // let final = data?.[data?.length - 1]; // if (final) { // setCursor(parseInt(final.id) + 1); // console.log(cursor); // } // }, [data, cursor]); useEffect(() => { const timer = setTimeout(() => { // if data has not loaded in 5 seconds if (!data || !borderData) { // console.log(data, borderData); Router.reload(); } else { console.log("data loaded properly, not reloading."); } }, 5000); return () => clearTimeout(timer); }, [data, borderData]); return (

Borders

Steam Borders