Use useSWR to fetch tournament on frontend

This commit is contained in:
Kalle (Sendou)
2021-10-25 01:42:00 +03:00
parent 081df8284e
commit 1d24abebad
10 changed files with 129 additions and 6 deletions

View File

@@ -2,6 +2,7 @@
"name": "sendou.ink",
"version": "1.0.0",
"workspaces": [
"packages/server"
"packages/server",
"packages/frontend"
]
}

6
packages/frontend/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

View File

@@ -5,9 +5,10 @@
"packages": {
"": {
"dependencies": {
"next": "latest",
"next": "^11.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"swr": "^1.0.1"
},
"devDependencies": {
"@types/react": "^17.0.32",
@@ -1616,6 +1617,14 @@
"node": ">= 0.6"
}
},
"node_modules/dequal": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
"integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
"engines": {
"node": ">=6"
}
},
"node_modules/des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -4199,6 +4208,17 @@
"node": ">=4"
}
},
"node_modules/swr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.0.1.tgz",
"integrity": "sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==",
"dependencies": {
"dequal": "2.0.2"
},
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0"
}
},
"node_modules/tailwindcss": {
"version": "2.2.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.17.tgz",
@@ -5932,6 +5952,11 @@
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
},
"dequal": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
"integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
},
"des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -7876,6 +7901,14 @@
"has-flag": "^3.0.0"
}
},
"swr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.0.1.tgz",
"integrity": "sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==",
"requires": {
"dequal": "2.0.2"
}
},
"tailwindcss": {
"version": "2.2.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.17.tgz",

View File

@@ -1,4 +1,5 @@
{
"name": "frontend.sendou.ink",
"private": true,
"scripts": {
"dev": "next dev",
@@ -8,7 +9,8 @@
"dependencies": {
"next": "^11.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"swr": "^1.0.1"
},
"devDependencies": {
"@types/react": "^17.0.32",

View File

@@ -1,8 +1,21 @@
import type { AppProps } from "next/app";
import { SWRConfig } from "swr";
import "tailwindcss/tailwind.css";
import "./_app.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
function MyApp({ Component, pageProps }: AppProps) {
return (
<SWRConfig
value={{
fetcher: (resource, init) =>
fetch(process.env.NEXT_PUBLIC_BACKEND_URL + resource, init).then(
(res) => res.json()
),
}}
>
<Component {...pageProps} />
</SWRConfig>
);
}
export default MyApp;

View File

@@ -0,0 +1,11 @@
import { useRouter } from "next/dist/client/router";
import useSWR from "swr";
export default function TournamentPage() {
const router = useRouter();
const { data, error } = useSWR(
`/tournaments/${router.query.organization}/${router.query.tournament}`
);
console.log("error", error);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

View File

@@ -0,0 +1,32 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}

View File

@@ -16,6 +16,7 @@
"passport-discord": "^0.1.4"
},
"devDependencies": {
"@tinyhttp/cors": "^2.0.0",
"@types/node": "^16.11.4",
"@types/passport": "^1.0.7",
"@types/passport-discord": "^0.1.5",
@@ -147,6 +148,18 @@
"node": ">=12.4.0"
}
},
"node_modules/@tinyhttp/cors": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.0.tgz",
"integrity": "sha512-IwQsPBnK+gRrhTsPA4FPOfbNzZZt8cVsOIMNFb6HzoScaiWcoLEogL0Bz/aBSm8KM13uieVXoVT6udMqhqUS2A==",
"dev": true,
"dependencies": {
"es-vary": "^0.1.1"
},
"engines": {
"node": ">=12.4 || 14.x || >=16"
}
},
"node_modules/@tinyhttp/encode-url": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.0.3.tgz",
@@ -1066,6 +1079,15 @@
"resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.0.2.tgz",
"integrity": "sha512-lyIdDzLILp6T2fymJn9zKBgXwlZMIUiqMUIEd4x/ZGFNvnNs/zeYDBQFdAygBtv4Bgl5Zpf6tN+e6fkj6TlMYQ=="
},
"@tinyhttp/cors": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.0.tgz",
"integrity": "sha512-IwQsPBnK+gRrhTsPA4FPOfbNzZZt8cVsOIMNFb6HzoScaiWcoLEogL0Bz/aBSm8KM13uieVXoVT6udMqhqUS2A==",
"dev": true,
"requires": {
"es-vary": "^0.1.1"
}
},
"@tinyhttp/encode-url": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.0.3.tgz",

View File

@@ -17,6 +17,7 @@
"passport-discord": "^0.1.4"
},
"devDependencies": {
"@tinyhttp/cors": "^2.0.0",
"@types/node": "^16.11.4",
"@types/passport": "^1.0.7",
"@types/passport-discord": "^0.1.5",

View File

@@ -3,6 +3,7 @@ config();
import { App } from "@tinyhttp/app";
import { logger } from "@tinyhttp/logger";
import { cors } from "@tinyhttp/cors";
import passport from "passport";
import { Strategy as DiscordStrategy } from "passport-discord";
import routes from "./routes/index";
@@ -53,6 +54,7 @@ passport.deserializeUser(async (id, done) => {
app
.use(logger())
.use(cors())
// @ts-expect-error - Mismatch of types but seems to work fine
.use(passport.initialize())
.get("/auth/discord", passport.authenticate("discord"))