114 lines
2.9 KiB
JavaScript
114 lines
2.9 KiB
JavaScript
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 (
|
|
<div className={styles.container}>
|
|
<Head>
|
|
<title>Borders</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<header>
|
|
<h1 className={styles.title}>Steam Borders</h1>
|
|
<div className={styles.userinfo}>
|
|
<UserInfo borderData={borderData} />
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<Preview
|
|
data={data}
|
|
current={borderData?.borderId}
|
|
selected={selected}
|
|
apply={applyBorder}
|
|
/>
|
|
<Select
|
|
data={data}
|
|
total={total}
|
|
onSelect={setSelected}
|
|
selected={selected}
|
|
/>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|