jane/borders
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

merge

Browse source
This commit is contained in:
jane 2022-04-16 18:29:21 -04:00
parent 379dcdcd51
commit 01e778edad
6 changed files with 56 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/select.js Normal file
View file

@ -0,0 +1,5 @@
export default function Select(props) {
const { data, onSelect } = props;
console.log(data);
return <div></div>;
}

33
components/userInfo.js
View file

@ -2,27 +2,22 @@ import { useSession, signIn, signOut } from "next-auth/react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import styles from "../styles/Components.module.css"; import styles from "../styles/Components.module.css";
export default function UserInfo(borderInfo) { export default function UserInfo() {
const { data: session } = useSession(); const { data: session } = useSession();
const [isLoading, setLoading] = useState(false); const [borderData, setBorderData] = useState(null);
const [borderData, setBorderData] = useState(undefined);
useEffect(async () => { useEffect(() => {
setLoading(true); fetch("api/user/border/@me")
const res = await fetch('api/user/border/@me'); .then((res) => res.json())
const data = await res.json(); .then((data) => setBorderData(data));
setBorderData(data);
setLoading(false);
}, []); }, []);
return ( return (
<div>{
isLoading ?
<p>Loading...</p>
:
<div> <div>
<p className={styles.description}> <p className={styles.description}>
{session ? `Signed in as ${session.user.name} (${borderData.discordId})` : "Not signed in"} {session
? `Signed in as ${session.user.name} (${borderData?.discordId})`
: "Not signed in"}
<br /> <br />
{session ? ( {session ? (
<button onClick={() => signOut()}>Sign Out</button> <button onClick={() => signOut()}>Sign Out</button>
@ -30,16 +25,6 @@ export default function UserInfo(borderInfo) {
<button onClick={() => signIn()}>Sign In</button> <button onClick={() => signIn()}>Sign In</button>
)} )}
</p> </p>
{
!!borderData ?
(<div>
<img src={session.user.image} />
<img src={`/api/border/${borderData.imageId ?? '0'}`} />
</div>)
: undefined
}
</div>
}
</div> </div>
); );
} }

10
lib/borders.js
View file

@ -4,10 +4,14 @@ import prisma from "./prisma";
export const getBorderById = async (id) => { export const getBorderById = async (id) => {
return await prisma.borderImage.findFirst({ return await prisma.borderImage.findFirst({
where: { where: {
id: parseInt(id) id: parseInt(id),
} },
}); });
} };
export const getAllBorders = async () => {
return await prisma.borderImage.findMany();
};
export const getUserBorders = async (req) => { export const getUserBorders = async (req) => {
const session = await getSession({ req }); const session = await getSession({ req });

8
pages/api/border/[id].js
View file

@ -2,13 +2,7 @@ import { getBorderById } from "../../../lib/borders";
export default function handler(req, res) { export default function handler(req, res) {
const id = req.query.id; const id = req.query.id;
console.log(id);
getBorderById(id).then((result) => { getBorderById(id).then((result) => {
const imageName = result?.imageName ?? "default.png"; return res.status(200).json(result);
// return res.status(200).json(result);
return res.redirect(301, `/images/${imageName}`)
}); });
} }

7
pages/api/border/all.js Normal file
View file

@ -0,0 +1,7 @@
import { getAllBorders } from "../../../lib/borders";
export default function handler(req, res) {
getAllBorders().then((result) => {
return res.status(200).json(result);
});
}

16
pages/index.js
View file

@ -2,8 +2,18 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
import UserInfo from "../components/userInfo"; import UserInfo from "../components/userInfo";
import Select from "../components/select";
import { useEffect, useState } from "react";
export default function Home() { export default function Home() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("api/border/all")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Head> <Head>
@ -11,10 +21,12 @@ export default function Home() {
<meta name="description" content="Generated by create next app" /> <meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<header clasName={styles.main}>
<main className={styles.main}>
<h1 className={styles.title}>Steam Borders</h1> <h1 className={styles.title}>Steam Borders</h1>
<UserInfo /> <UserInfo />
</header>
<main className={styles.main}>
<Select data={data} onSelect={console.log} />
</main> </main>
</div> </div>
); );