Add interface package. Start adding auth stuff for refreshing tokens.
This commit is contained in:
jude
24
app/.gitignore
vendored
Normal file
24
app/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
1
app/.prettierrc.toml
Normal file
1
app/.prettierrc.toml
Normal file
@ -0,0 +1 @@
|
||||
tabWidth = 4
|
||||
13
app/index.html
Normal file
13
app/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>Playlist</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4534
app/package-lock.json
generated
Normal file
4534
app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
app/package.json
Normal file
23
app/package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "example",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"preact": "^10.13.1",
|
||||
"wouter-preact": "^2.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.5.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"prettier": "^3.0.3",
|
||||
"sass": "^1.66.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
}
|
||||
24
app/src/app.scss
Normal file
24
app/src/app.scss
Normal file
@ -0,0 +1,24 @@
|
||||
:root {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
width: 100vw;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.playlist-list {
|
||||
|
||||
}
|
||||
|
||||
.playlist {
|
||||
font-size: 1.125rem;
|
||||
margin: 8px 0;
|
||||
padding: 4px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: black;
|
||||
border-radius: 8px;
|
||||
}
|
||||
75
app/src/index.tsx
Normal file
75
app/src/index.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { render } from "preact";
|
||||
import { Route } from "wouter-preact";
|
||||
import "./app.scss";
|
||||
|
||||
export const App = () => {
|
||||
return (
|
||||
<section class={"app-wrapper"}>
|
||||
<div class={"app"}>
|
||||
<h1>Playlists</h1>
|
||||
<Route path={"/playlists"} component={ActivePlaylists} />
|
||||
<Route path={"/playlists/:id"} component={ViewPlaylist} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
type TrackedPlaylist = {
|
||||
rule_id: number;
|
||||
playlist_id: string | null;
|
||||
playlist_name: string | null;
|
||||
playlist_size: number;
|
||||
tracking_user: string | null;
|
||||
tracking_type: string | null;
|
||||
reduce_duplication_on: string | null;
|
||||
};
|
||||
|
||||
const ActivePlaylists = () => {
|
||||
const playlists: TrackedPlaylist[] = [
|
||||
{
|
||||
rule_id: 1,
|
||||
playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
|
||||
playlist_name: "Playlist 1",
|
||||
playlist_size: 25,
|
||||
tracking_user: "jellywx",
|
||||
tracking_type: "week",
|
||||
reduce_duplication_on: null,
|
||||
},
|
||||
{
|
||||
rule_id: 2,
|
||||
playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
|
||||
playlist_name: "Playlist 2",
|
||||
playlist_size: 25,
|
||||
tracking_user: "jellywx",
|
||||
tracking_type: "week",
|
||||
reduce_duplication_on: null,
|
||||
},
|
||||
{
|
||||
rule_id: 3,
|
||||
playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
|
||||
playlist_name: "Playlist 3",
|
||||
playlist_size: 25,
|
||||
tracking_user: "jellywx",
|
||||
tracking_type: "week",
|
||||
reduce_duplication_on: null,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={"playlist-list"}>
|
||||
{playlists.map((p) => (
|
||||
<div class={"playlist"}>{p.playlist_name}</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ViewPlaylist = ({ params }) => {
|
||||
return (
|
||||
<>
|
||||
<div>Subpage {params.id}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
render(<App />, document.getElementById("app"));
|
||||
13
app/tsconfig.json
Normal file
13
app/tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"noEmit": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact"
|
||||
},
|
||||
"include": ["node_modules/vite/client.d.ts", "**/*"]
|
||||
}
|
||||
7
app/vite.config.ts
Normal file
7
app/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import preact from '@preact/preset-vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [preact()],
|
||||
});
|
||||
Reference in New Issue
Block a user