client init

client/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/build
+/*.log

client/README.md

@@ -0,0 +1,19 @@
+# mcrates
+
+## CLI Commands
+*   `npm install`: Installs dependencies
+
+*   `npm run dev`: Run a development, HMR server
+
+*   `npm run serve`: Run a production-like server
+
+*   `npm run build`: Production-ready build
+
+*   `npm run lint`: Pass TypeScript files using ESLint
+
+*   `npm run test`: Run Jest and Enzyme with
+    [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
+    your tests
+
+
+For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).

client/package.json

@@ -0,0 +1,36 @@
+{
+    "private": true,
+    "name": "mcrates-client",
+    "version": "0.1.0",
+    "license": "MIT",
+    "scripts": {
+        "build": "preact build",
+        "start": "preact watch",
+        "lint": "eslint src"
+    },
+    "eslintConfig": {
+        "parser": "@typescript-eslint/parser",
+        "extends": [
+            "preact",
+            "plugin:@typescript-eslint/recommended"
+        ],
+        "ignorePatterns": [
+            "build/"
+        ]
+    },
+    "dependencies": {
+        "preact": "^10.10.0",
+        "preact-render-to-string": "^5.2.1",
+        "preact-router": "^3.2.1"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.30.6",
+        "@typescript-eslint/parser": "^5.30.6",
+        "eslint": "^8.20.0",
+        "eslint-config-preact": "^1.3.0",
+        "less": "^4.1.3",
+        "less-loader": "^7.3.0",
+        "preact-cli": "^3.4.0",
+        "typescript": "^4.5.2"
+    }
+}

client/src/components/app.tsx

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { Route, Router } from 'preact-router';
+
+import Header from './header';
+
+// Code-splitting is automated for `routes` directory
+import Home from '../routes/home';
+import Profile from '../routes/profile';
+
+const App = () => (
+	<div id="app">
+        <Header />
+        <Router>
+            <Route path="/" component={Home} />
+            <Route path="/profile/" component={Profile} user="me" />
+            <Route path="/profile/:user" component={Profile} />
+        </Router>
+    </div>
+);
+
+export default App;

client/src/components/header/index.tsx

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+import { Link } from 'preact-router/match';
+import style from './style.less';
+
+const Header = () => (
+	<header class={style.header}>
+		<h1>Mates Crates</h1>
+		<nav>
+			<Link activeClassName={style.active} href="/">Home</Link>
+			<Link activeClassName={style.active} href="/profile">Me</Link>
+			<Link activeClassName={style.active} href="/profile/john">John</Link>
+		</nav>
+	</header>
+);
+
+export default Header;

client/src/components/header/style.less

@@ -0,0 +1,48 @@
+.header {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 56px;
+	padding: 0;
+	background: #673AB7;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+	z-index: 50;
+}
+
+.header h1 {
+	float: left;
+	margin: 0;
+	padding: 0 15px;
+	font-size: 24px;
+	line-height: 56px;
+	font-weight: 400;
+	color: #FFF;
+}
+
+.header nav {
+	float: right;
+	font-size: 100%;
+}
+
+.header nav a {
+	display: inline-block;
+	height: 56px;
+	line-height: 56px;
+	padding: 0 15px;
+	min-width: 50px;
+	text-align: center;
+	background: rgba(255,255,255,0);
+	text-decoration: none;
+	color: #FFF;
+	will-change: background-color;
+}
+
+.header nav a:hover,
+.header nav a:active {
+	background: rgba(0,0,0,0.2);
+}
+
+.header nav a.active {
+	background: rgba(0,0,0,0.4);
+}

client/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module "*.less" {
+    const mapping: Record<string, string>;
+    export default mapping;
+}

client/src/index.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import App from './components/app';
+
+export default App;

client/src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "mcrates",
+  "short_name": "mcrates",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icons/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/icons/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

client/src/routes/home/index.tsx

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+import style from './style.less';
+
+const Home = () => (
+	<div class={style.home}>
+		<h1>Home</h1>
+		<p>This is the Home component.</p>
+	</div>
+);
+
+export default Home;

client/src/routes/home/style.less

@@ -0,0 +1,5 @@
+.home {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

client/src/routes/profile/index.tsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import style from './style.less';
+
+interface Props {
+    user: string;
+}
+
+// Note: `user` comes from the URL, courtesy of our router
+const Profile = ({ user }: Props) => {
+    const [time, setTime] = useState<number>(Date.now());
+    const [count, setCount] = useState<number>(0);
+
+
+    useEffect(() => {
+		let timer = setInterval(() => setTime(Date.now()), 1000);
+		return () => clearInterval(timer);
+	}, []);
+
+    return (
+		<div class={style.profile}>
+			<h1>Profile: {user}</h1>
+			<p>This is the user profile for a user named { user }.</p>
+
+			<div>Current time: {new Date(time).toLocaleString()}</div>
+
+			<p>
+				<button onClick={() => setCount((count) => count + 1)}>Click Me</button>
+				{' '}
+				Clicked {count} times.
+			</p>
+		</div>
+	);
+};
+
+export default Profile;

client/src/routes/profile/style.less

@@ -0,0 +1,5 @@
+.profile {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

client/src/style/index.less

@@ -0,0 +1,20 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background: #FAFAFA;
+	font-family: 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#app {
+	height: 100%;
+}

client/tsconfig.json

@@ -0,0 +1,64 @@
+{
+    "compilerOptions": {
+        /* Basic Options */
+        "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+        "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+        // "lib": [],                             /* Specify library files to be included in the compilation:  */
+        "allowJs": true,                          /* Allow javascript files to be compiled. */
+        // "checkJs": true,                       /* Report errors in .js files. */
+        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+        "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
+        "jsxFragmentFactory": "Fragment",         /* Specify the JSX fragment factory function to use when targeting react JSX emit with jsxFactory compiler option is specified, e.g. Fragment. */
+        // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+        // "outFile": "./",                       /* Concatenate and emit output to single file. */
+        // "outDir": "./",                        /* Redirect output structure to the directory. */
+        // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+        // "removeComments": true,                /* Do not emit comments to output. */
+        "noEmit": true,                           /* Do not emit outputs. */
+        // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+        /* Strict Type-Checking Options */
+        "strict": true,                           /* Enable all strict type-checking options. */
+        // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+        // "strictNullChecks": true,              /* Enable strict null checks. */
+        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+        /* Additional Checks */
+        // "noUnusedLocals": true,                /* Report errors on unused locals. */
+        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+        /* Module Resolution Options */
+        "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        "esModuleInterop": true,                  /* */
+        "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
+        "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+          "react": ["./node_modules/preact/compat"],
+          "react-dom": ["./node_modules/preact/compat"]
+        },
+        // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+        // "typeRoots": [],                       /* List of folders to include type definitions from. */
+        // "types": [],                           /* Type declaration files to be included in compilation. */
+        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+        /* Source Map Options */
+        // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+        // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+        // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+        /* Experimental Options */
+        // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+        /* Advanced Options */
+        "skipLibCheck": true                      /* Skip type checking of declaration files. */
+    },
+    "include": ["src/**/*"]
+}

server/index.ts

@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import _ from 'lodash';
 import Bunyan from 'bunyan';
 import { PrismaClient } from '@prisma/client'
-import * as Bluebird from "bluebird";
+import Promise from "bluebird";
 
 import discogsService from './src/discogs';
 import pgService from './src/pg';
@@ -26,6 +26,7 @@ async function start(log) {
                 description: l.release.description,
                 price: l.price.value,
                 condition: l.condition,
+                uri: l.uri,
             }));
 
             const username = data[0]?.seller.username
@@ -41,34 +42,35 @@ async function start(log) {
         // return bundles;
     }
 
+
+    const usernames = [
+        'vanderbabe',
+        'margh',
+        'jmcdermid1',
+    ];
+
+    async function populateUserListings(user) {
+        log.info(user);
+        const wants = await discogs.wantlist(user);
+
+        // const latest = await discogs.wantlistLatest(user);
+        // if (wants.length !== latest.length)
+        log.info({ username: user.discogs, wantCount: wants.length });
+
+        return Promise.mapSeries(wants, async want => {
+            const listings = await discogs.listings(want);
+            const populated = listings.filter(l => l);
+            log.info({ id: want.id, release: want.release, populated: populated.length, total: listings.length });
+            return populated;
+        });
+    }
+
+    await Promise.mapSeries(usernames, async u => {
+        const user = await discogs.user(u)
+        return populateUserListings(user);
+    });
+
     return getBundles();
-
-    // const usernames = [
-    //     'vanderbabe',
-    //     'margh',
-    //     'jmcdermid1',
-    // ];
-
-    // async function populateUserListings(user) {
-    //     log.info(user);
-    //     const wants = await discogs.wantlist(user);
-
-    //     // const latest = await discogs.wantlistLatest(user);
-    //     // if (wants.length !== latest.length)
-    //     log.info({ username: user.discogs, wantCount: wants.length });
-
-    //     return Promise.mapSeries(wants, async want => {
-    //         const listings = await discogs.listings(want);
-    //         const populated = listings.filter(l => l);
-    //         log.info({ id: want.id, release: want.release, populated: populated.length, total: listings.length });
-    //         return populated;
-    //     });
-    // }
-
-    // return Promise.mapSeries(usernames, async u => {
-    //     const user = await discogs.user(u)
-    //     return populateUserListings(user);
-    // });
 }
 
 async function run() {

server/src/discogs.ts

@@ -2,6 +2,7 @@ import fs from 'fs/promises';
 
 import axios from 'axios';
 import cheerio from 'cheerio';
+import Bluebird from 'bluebird';
 
 import type Log from 'bunyan';
 import type { PrismaClient, Want, User, Listing } from '@prisma/client';
@@ -17,6 +18,8 @@ export default function discogs(log: Log, pg: Pg) {
     const api = axios.create({
         headers: {
             'Authorization': TOKEN,
+            // discogs only returns the first page without a desktop u/a
+            'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0',
         },
     });
 
@@ -45,7 +48,7 @@ export default function discogs(log: Log, pg: Pg) {
     async function wantlistLatest(user: User): Promise<Want[]> {
         const { username } = user.data as { username: string };
         const { data: { wants, pagination }} = await api.get(`${apiBase}/users/${username}/wants`);
-        return Promise.mapSeries(wants, async r => pg.wantUpsert(r, user));
+        return Bluebird.mapSeries(wants, async r => pg.wantUpsert(r, user));
     }
 
     async function inventory(user: string) {
@@ -54,7 +57,7 @@ export default function discogs(log: Log, pg: Pg) {
     }
 
     async function listings(want: Want) {
-        const res = await api.get(`https://www.discogs.com/sell/release/${want.release}`);
+        const res = await api.get(`https://www.discogs.com/sell/release/${want.release}?limit=250`);
         const $ = cheerio.load(res.data);
         const ids = $('.item_description_title[href]')
             .map(function getListingId() {
@@ -65,7 +68,7 @@ export default function discogs(log: Log, pg: Pg) {
 
         const unlisted = await pg.listingRmUnlisted(want, ids);
         if (unlisted) log.info({ wantId: want.id, unlisted: unlisted }, 'missing listings removed');
-        return Promise.mapSeries(ids, async id => listing(id, want));
+        return Bluebird.mapSeries(ids, async id => listing(id, want));
     }
 
     async function listing(id, want) {