diff --git a/.gitignore b/.gitignore index 4e6e2c4..ceea336 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,5 @@ yarn-error.log* # prisma data /prisma/migrations /prisma/borders.db + +/public/images \ No newline at end of file diff --git a/components/select.js b/components/select.js new file mode 100644 index 0000000..5c94a37 --- /dev/null +++ b/components/select.js @@ -0,0 +1,43 @@ +import Image from "next/image"; +import styles from "../styles/Components.module.css"; + +export default function Select(props) { + const { data, onSelect, selected = {} } = props; + console.log("data", data, "selected", selected); + return ( +
+ {data && + data.map((border, index) => { + return ( +
+ user image { + onSelect(border.id); + }} + /> + {`border { + onSelect(border.id); + }} + /> +
+ ); + })} +
+ ); +} diff --git a/components/userInfo.js b/components/userInfo.js index 18c440d..a871f72 100644 --- a/components/userInfo.js +++ b/components/userInfo.js @@ -2,44 +2,23 @@ import { useSession, signIn, signOut } from "next-auth/react"; import { useEffect, useState } from "react"; import styles from "../styles/Components.module.css"; -export default function UserInfo(borderInfo) { +export default function UserInfo(props) { const { data: session } = useSession(); - const [isLoading, setLoading] = useState(false); - const [borderData, setBorderData] = useState(undefined); - - useEffect(async () => { - setLoading(true); - const res = await fetch('api/user/border/@me'); - const data = await res.json(); - setBorderData(data); - setLoading(false); - }, []); + const { borderData } = props; return ( -
{ - isLoading ? -

Loading...

- : -
-

- {session ? `Signed in as ${session.user.name} (${borderData.discordId})` : "Not signed in"} -
- {session ? ( - - ) : ( - - )} -

- { - !!borderData ? - (
- - -
) - : undefined - } -
- } +
+

+ {session + ? `Signed in as ${session.user.name} (${borderData?.discordId})` + : "Not signed in"} +
+ {session ? ( + + ) : ( + + )} +

); } diff --git a/lib/borders.js b/lib/borders.js index 7d31646..1c6a864 100644 --- a/lib/borders.js +++ b/lib/borders.js @@ -4,10 +4,14 @@ import prisma from "./prisma"; export const getBorderById = async (id) => { return await prisma.borderImage.findFirst({ where: { - id: parseInt(id) - } + id: parseInt(id), + }, }); -} +}; + +export const getAllBorders = async () => { + return await prisma.borderImage.findMany(); +}; export const getUserBorders = async (req) => { const session = await getSession({ req }); diff --git a/pages/api/border/[id].js b/pages/api/border/[id].js index b5de21a..9c5ffdb 100644 --- a/pages/api/border/[id].js +++ b/pages/api/border/[id].js @@ -1,14 +1,8 @@ import { getBorderById } from "../../../lib/borders"; export default function handler(req, res) { - const id = req.query.id; - - console.log(id); - - getBorderById(id).then((result) => { - const imageName = result?.imageName ?? "default.png"; - - // return res.status(200).json(result); - return res.redirect(301, `/images/${imageName}`) - }); - } \ No newline at end of file + const id = req.query.id; + getBorderById(id).then((result) => { + return res.status(200).json(result); + }); +} diff --git a/pages/api/border/all.js b/pages/api/border/all.js new file mode 100644 index 0000000..b189ccf --- /dev/null +++ b/pages/api/border/all.js @@ -0,0 +1,7 @@ +import { getAllBorders } from "../../../lib/borders"; + +export default function handler(req, res) { + getAllBorders().then((result) => { + return res.status(200).json(result); + }); +} diff --git a/pages/index.js b/pages/index.js index 4596f3b..065805e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,8 +2,29 @@ import Head from "next/head"; import Image from "next/image"; import styles from "../styles/Home.module.css"; import UserInfo from "../components/userInfo"; +import Select from "../components/select"; +import { useEffect, useState } from "react"; export default function Home() { + const [data, setData] = useState(null); + const [borderData, setBorderData] = useState(null); + const [selected, setSelected] = useState(0); + + useEffect(() => { + fetch("api/border/all") + .then((res) => res.json()) + .then((data) => setData(data)); + }, []); + + useEffect(() => { + fetch("api/user/border/@me") + .then((res) => res.json()) + .then((data) => { + setBorderData(data); + setSelected(data?.borderId || 0); + }); + }, []); + return (
@@ -11,10 +32,14 @@ export default function Home() { - -
+

Steam Borders

- +
+ +
+
+
+