Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-07 19:55:46 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fetch data from server to route

Browse Source
This commit is contained in:
Kalle (Sendou)
2021-11-14 01:46:15 +02:00
parent 8edbd6b515
commit ca16aa5d07
12 changed files with 212 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
App.tsx
View File

@@ -1,11 +1,14 @@
import { Router } from "solid-app-router";
import type { Component } from "solid-js";
import Layout from "./scenes/layout";
import { Routes } from "./Routes";
import { Layout } from "./scenes/layout/components/Layout";
const App: Component = () => {
return (
<Router>
<Layout>routes here</Layout>
<Layout>
<Routes />
</Layout>
</Router>
);
};

32
Routes.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { Routes as SolidAppRoutes, Route } from "solid-app-router";
import { lazy } from "solid-js";
import HelloData from "./scenes/tournament/components/TournamentsPage.data";
const TournamentsPage = lazy(
() => import("./scenes/tournament/components/TournamentsPage")
);
export function Routes() {
return (
<SolidAppRoutes>
{/* <Route path="/users/:id" element={<User />}>
<Route path="/" element={<UserHome />} />
<Route path="/settings" element={<UserSettings />} />
<Route path="/*all" element={<UserNotFound />} />
</Route> */}
<Route
path="/to/:identifier"
element={<TournamentsPage />}
data={HelloData}
>
<Route path="/*all" element={() => <>overview</>} />
<Route path="/map-pool" element={() => <>map pool</>} />
<Route path="/bracket" element={() => <>bracket</>} />
<Route path="/teams" element={() => <>teams</>} />
<Route path="/streams" element={() => <>streams</>} />
</Route>
<Route path="/" element={() => <>home!</>} />
<Route path="/*all" element={() => <>Not found</>} />
</SolidAppRoutes>
);
}

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<link rel="shortcut icon" type="image/ico" href="/img/layout/logo.webp" />
<title>sendou.ink</title>
</head>
<body>

83
package-lock.json generated
View File

@@ -1,14 +1,15 @@
{
"name": "vite-template-solid",
"name": "sendou.ink",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vite-template-solid",
"name": "sendou.ink",
"version": "0.0.0",
"license": "MIT",
"dependencies": {
"@trpc/client": "^9.13.0",
"normalize.css": "^8.0.1",
"solid-app-router": "^0.1.11",
"solid-js": "^1.1.3"
@@ -397,6 +398,17 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.16.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
@@ -444,6 +456,26 @@
"node": ">=6.9.0"
}
},
"node_modules/@trpc/client": {
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/@trpc/client/-/client-9.13.0.tgz",
"integrity": "sha512-HnXGi141+dZ/M02NXZI5FdFPSr2p8kkYn8qI2h2VrrOC05H6qZHZdmVnoOCRF5qdmDO/PY6b7eQzXSMr+ApeiA==",
"dependencies": {
"@babel/runtime": "^7.9.0"
},
"peerDependencies": {
"@trpc/server": "9.13.0"
}
},
"node_modules/@trpc/server": {
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/@trpc/server/-/server-9.13.0.tgz",
"integrity": "sha512-UooZvh9mCsP43fEC9DVsjxGwj/XzBhiHcvmPe5QbOVME+s1s18oUIcliGp8KX5bHJSA3C2Yuqu72jLhB2kuxtg==",
"peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1030,6 +1062,11 @@
"url": "https://opencollective.com/postcss/"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -1140,6 +1177,12 @@
"integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
"dev": true
},
"node_modules/tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"peer": true
},
"node_modules/typescript": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
@@ -1479,6 +1522,14 @@
"@babel/plugin-transform-typescript": "^7.16.0"
}
},
"@babel/runtime": {
"version": "7.16.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
@@ -1517,6 +1568,23 @@
"to-fast-properties": "^2.0.0"
}
},
"@trpc/client": {
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/@trpc/client/-/client-9.13.0.tgz",
"integrity": "sha512-HnXGi141+dZ/M02NXZI5FdFPSr2p8kkYn8qI2h2VrrOC05H6qZHZdmVnoOCRF5qdmDO/PY6b7eQzXSMr+ApeiA==",
"requires": {
"@babel/runtime": "^7.9.0"
}
},
"@trpc/server": {
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/@trpc/server/-/server-9.13.0.tgz",
"integrity": "sha512-UooZvh9mCsP43fEC9DVsjxGwj/XzBhiHcvmPe5QbOVME+s1s18oUIcliGp8KX5bHJSA3C2Yuqu72jLhB2kuxtg==",
"peer": true,
"requires": {
"tslib": "^2.1.0"
}
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1916,6 +1984,11 @@
"source-map-js": "^0.6.2"
}
},
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -1998,6 +2071,12 @@
"integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
"dev": true
},
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"peer": true
},
"typescript": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",

1
package.json
View File

@@ -14,6 +14,7 @@
"vite-plugin-solid": "^2.0.3"
},
"dependencies": {
"@trpc/client": "^9.13.0",
"normalize.css": "^8.0.1",
"solid-app-router": "^0.1.11",
"solid-js": "^1.1.3"

1
scenes/layout/index.tsx
View File

@@ -1 +0,0 @@
export { Layout as default } from "./components/Layout";

19
scenes/tournament/components/TournamentsPage.data.ts Normal file
View File

@@ -0,0 +1,19 @@
import { useData } from "solid-app-router";
import { createResource } from "solid-js";
import { trpcClient } from "../../../utils/trpc";
function fetchHello(input: string) {
return trpcClient.query("hello", input);
}
export default function HelloData({
params,
}: {
params: { identifier: string };
}) {
const [user] = createResource(() => params.identifier, fetchHello);
return user;
}
export const useHelloData = () => useData<() => string>();

14
scenes/tournament/components/TournamentsPage.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Outlet, useData } from "solid-app-router";
export default function TournamentsPage() {
const user = useData<() => string>();
return (
<>
response: "{user()}"
<p>
<Outlet />
</p>
</>
);
}

3
server/index.ts
View File

@@ -1,5 +1,6 @@
import { EventEmitter } from "events";
import express from "express";
import cors from "cors";
import * as trpc from "@trpc/server";
import { z } from "zod";
import * as trpcExpress from "@trpc/server/adapters/express/dist/trpc-server-adapters-express.cjs";
@@ -121,6 +122,8 @@ async function main() {
// express implementation
const app = express();
app.use(cors());
app.use((req, _res, next) => {
// request logger
console.log("⬅️ ", req.method, req.path, req.body ?? req.query);

48
server/package-lock.json generated
View File

@@ -10,10 +10,12 @@
"license": "ISC",
"dependencies": {
"@trpc/server": "^9.13.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"zod": "^3.11.6"
},
"devDependencies": {
"@types/cors": "^2.8.12",
"@types/express": "^4.17.13",
"ts-node": "^10.4.0"
}
@@ -90,6 +92,12 @@
"@types/node": "*"
}
},
"node_modules/@types/cors": {
"version": "2.8.12",
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
"dev": true
},
"node_modules/@types/express": {
"version": "4.17.13",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -251,6 +259,18 @@
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
},
"node_modules/cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"dependencies": {
"object-assign": "^4",
"vary": "^1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/create-require": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -495,6 +515,14 @@
"node": ">= 0.6"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -815,6 +843,12 @@
"@types/node": "*"
}
},
"@types/cors": {
"version": "2.8.12",
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
"dev": true
},
"@types/express": {
"version": "4.17.13",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -949,6 +983,15 @@
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
},
"cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"requires": {
"object-assign": "^4",
"vary": "^1"
}
},
"create-require": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -1139,6 +1182,11 @@
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

2
server/package.json
View File

@@ -12,10 +12,12 @@
"license": "ISC",
"dependencies": {
"@trpc/server": "^9.13.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"zod": "^3.11.6"
},
"devDependencies": {
"@types/cors": "^2.8.12",
"@types/express": "^4.17.13",
"ts-node": "^10.4.0"
}

6
utils/trpc.ts Normal file
View File

@@ -0,0 +1,6 @@
import type { AppRouter } from "../server";
import { createTRPCClient } from "@trpc/client";
export const trpcClient = createTRPCClient<AppRouter>({
url: "http://localhost:2021/trpc",
});