yeh boi

api/index.ts

@@ -1,5 +1,6 @@
 import createServices from './src/services';
 import createLog from './src/log';
+import { Events } from './src/events';
 
 async function start() {
     const log = createLog();
@@ -14,8 +15,11 @@ async function start() {
         pg,
         discogs,
         api,
+        events,
     } = createServices(log);
 
+    events.emit(Events.StartupSync);
+
     await api.listen();
 }
 

api/src/api.ts

@@ -153,12 +153,9 @@ export default function createApi(log: Log, pg: Pg, discogs, events) {
         const { releaseId } = ctx.request.body;
         const user = await pg.userFindId(ctx.state.user.id);
         const release = await discogs.release(releaseId);
-        const want = await pg.wantCreate([release], user);
-
-        // fetch listings
-        const listings = await discogs.listings(want);
-
-        ctx.response.body = { want, listings };
+        const want = await pg.wantCreate(release, user);
+        events.emit(Events.WantsAdded, [want]);
+        ctx.response.body = [want];
     });
 
     router.post('/want/discogs', async function wantListPost(ctx, next) {

api/src/discogs.ts

@@ -84,7 +84,7 @@ export default function discogs(log: Log, pg: Pg) {
         try {
             log.debug('fetching listing', id);
             const res = await api.get(`${apiBase}/marketplace/listings/${id}`);
-            log.info(res.data);
+            log.debug(res.data);
             return pg.listingUpsert(res.data, want);
         } catch (e) {
             return handleApiError(e);

api/src/events.ts

@@ -1,25 +1,50 @@
 import { EventEmitter } from 'node:events';
 
 import type Log from 'bunyan';
-import type { Listing, User, Want, Prisma } from '@prisma/client';
+import type { Want } from '@prisma/client';
 
 import { Pg } from './pg';
 import routerAuth from './routers/router.auth';
 
 export enum Events {
     WantsAdded = 'WantsAdded',
+    StartupSync = 'StartupSync',
 }
 
 export function eventService(log: Log, pg: Pg, discogs) {
     const events = new EventEmitter({ captureRejections: true });
 
     events.on('error', function eventError(e) {
-        log.error(e);
+        log.error('event error', e);
     });
 
     events.on(Events.WantsAdded, async function wantsAdded(wants: Want[]) {
-        log.info('wants added', wants);
+        for (const want of wants) {
+            const listings = await discogs.listings(want);
+            log.info({ count: listings.length, title: want.id }, 'listings added')
+        }
+
+        log.info('finished fetching listings', { wants: wants.length });
     });
 
+    events.on(Events.StartupSync, async function wantsAdded() {
+        const wants = await pg.wantsToSync();
+
+        try {
+            for (const want of wants) {
+                const listings = await discogs.listings(want);
+                log.info({ count: listings.length, title: want.id }, 'listings added')
+            }
+
+            log.info('finished syncing', { wants: wants.length });
+        } catch (e) {
+            if (e.message === 'rate limited') {
+                log.warn('rate limited, trying again in 60s');
+                return setTimeout(() => events.emit(Events.StartupSync), 60 * 1000);
+            }
+        }
+    });
+
+
     return events;
 }

api/src/pg.ts

@@ -18,6 +18,7 @@ export interface Pg {
 
     wantCreate:         (discogsWant: any, user: User) => Promise<Want>,
     wantList:           (user: User) => Promise<Want[]>,
+    wantsToSync:        () => Promise<Want[]>,
     listingUpsert:      (listing: Listing, want: Want) => Promise<Listing>,
     listingFind:        (id: DiscogsListing) => Promise<Listing>,
     listingRmUnlisted:  (want: Want, ids: DiscogsListing[]) => Promise<number>,
@@ -60,6 +61,10 @@ export default function createPg(log: Log, prisma: PrismaClient): Pg {
         });
     }
 
+    async function wantsToSync() {
+        return prisma.want.findMany({});
+    }
+
     async function wantCreate(discogsRelease, user) {
         const data: { userId: UUID, release: DiscogsListing, data: any } = {
             data: discogsRelease,
@@ -149,6 +154,7 @@ export default function createPg(log: Log, prisma: PrismaClient): Pg {
 
         wantCreate,
         wantList,
+        wantsToSync,
         listingUpsert,
         listingFind,
         listingRmUnlisted,

client/src/actions.ts

@@ -1,5 +1,4 @@
-import axios from 'axios';
-import type { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios';
 
 type ApiResponse = [string | null, any | null];
 
@@ -20,20 +19,17 @@ const api = axios.create({
   withCredentials: true
 });
 
-// axios.interceptors.request.use(function onReq(config) {
-//     return config;
-// }, function onError(error) {
-//     // console.error(error);
-//     Promise.resolve(['Network Error', null]);
-// });
-
-api.interceptors.response.use(function onSuccess(response) {
+function onSuccess(response) {
     return [null, response.data];
-}, function onError(error) {
-    // console.error(error);
+}
+
+function onError(error) {
     if (error.response) return [error.response.data.error, null];
     if (error.request) return ['Network Error', null];
-});
+    return ['Unknown Error', null];
+}
+
+api.interceptors.response.use(onSuccess, onError);
 
 const actions = {
     getBundles: async function getBundles() {
@@ -52,6 +48,10 @@ const actions = {
         return api.get('/want/all');
     },
 
+    postWantSearch: async function postWantSearch(artist, title) {
+        return api.post('/want/search', { artist, title });
+    },
+
     postWant: async function postWant(releaseId) {
         return api.post('/want', { releaseId });
     },

client/src/app.tsx

@@ -18,7 +18,6 @@ function App() {
     useEffect(() => {
         async function getLogin() {
             const [error, user] = await actions.getLogin();
-            console.log(error, user);
             if (error) return route('/login');
             setUser(user);
             route('/search');

client/src/components/bundle.tsx

@@ -1,15 +1,14 @@
 import { h } from 'preact';
 
 export default function Bundle(bundle) {
-    console.log(bundle);
     return (
         <div class="bundle">
             <h2>{bundle.username} - {bundle.seller}</h2>
-            <h3>{bundle.items.length} items - {bundle.total} {bundle.currency}</h3>
+            <h3>{bundle.items.length} items - {bundle.total.toFixed(2)} {bundle.currency}</h3>
             <h4>Ships: {bundle.mentionsAustralia && 'AU'} {bundle.mentionsWorldwide && 'WORLD'}</h4>
             {bundle.items.map(i => (
                 <div key={i.id}>
-                    <a href={i.uri}>
+                    <a href={i.uri} target="_blank" >
                         <h4>{i.description}</h4>
                     </a>
                     <h5>{i.user.name}</h5>

client/src/components/want.tsx

@@ -9,7 +9,6 @@ function Want(want) {
             <div>
                 <h3>{r.artists_sort} - {r.title}</h3>
                 <h5 class='alt-text' >{r.year}</h5>
-                <h5 class='alt-text'>{r.country}</h5>
                 <h5 class='alt-text'>{r.formats[0].descriptions.join(' ')}</h5>
             </div>
             <img src={r.thumb} />

client/src/routes/home.tsx

@@ -11,7 +11,6 @@ function Home() {
         async function getBundles() {
             const [error, bundles] = await actions.getBundles();
             if (error) return console.error(error);
-            console.log(bundles, 'bundles')
             setBundles(bundles);
         }
         getBundles();

client/src/routes/list.tsx

@@ -18,7 +18,6 @@ const List = ({ user }: Props) => {
         async function getWants() {
             const [error, wants] = await actions.getWants();
             if (error) return console.error(error);
-            console.log(wants, 'wants')
             setOffers(wants);
         }
         getWants();

client/src/routes/search.tsx

@@ -1,20 +1,29 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import axios from 'axios';
-import { ExternalLink } from 'react-feather';
+import { ExternalLink, Check } from 'react-feather';
 
 import actions from '../actions';
 
-function result(r) {
-    function onClick() {
-        actions.postWant(r.id);
+function Result(r) {
+    const [added, setAdded] = useState(false)
+
+    async function onClick() {
+        const [error, want] = await actions.postWant(r.id);
+        if (error) return false;
+        setAdded(true);
     }
 
+    const classes = `${added ? 'added' : ''}`;
+    const btnText = added
+        ? <Check />
+        : '+';
+
     return (
         <article key={r.id}>
-            <button onClick={onClick}> + </button>
+            <button onClick={onClick} disabled={added} class={classes} >{btnText}</button>
             <div>
-                <h3>{r.title} <a href={`https://discogs.com${r.uri}`}><ExternalLink /></a></h3>
+                <h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank"><ExternalLink /></a></h3>
                 <h5 class='alt-text' >{r.year}</h5>
                 <h5 class='alt-text'>{r.country}</h5>
                 <h5 class='alt-text'>{r.format.join(' ')}</h5>
@@ -25,33 +34,32 @@ function result(r) {
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('nine inch nails')
-    const [title, setTitle] = useState('the fragile');
+    const [artist, setArtist] = useState('')
+    const [title, setTitle] = useState('');
     const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
     const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
-        const { data } = await axios.post(`http://localhost:41337/want/search`, {
-            artist,
-            title,
-        });
+        const [error, results] = await actions.postWantSearch(artist, title);
 
-        console.log(data);
-
-        if (data.length === 0) {
+        if (results.length === 0) {
             setResults([]);
             return setNoResults(true);
         }
 
         setNoResults(false);
-        setResults(data);
+        setResults(results);
     }
 
     async function submitWantlist() {
         const [error, wants] = await actions.postDiscogs(username);
-        // setNoResults(false);
-        // setResults(data);
+        if (results.length === 0) {
+            setResults([]);
+            return setNoResults(true);
+        }
+
+        console.log('synced', wants.length, 'wants');
     }
 
     function handleSubmit(e) {
@@ -88,15 +96,15 @@ const User = () => {
                     <p>Sync Discogs Wantlist</p>
                     <form action="" method="get">
                         <label for="Discogs">Discogs Username</label>
-                        <input type="text" name="username" placeholder="username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
-                        <input type="submit" value="Search" onClick={handleDiscogsSubmit} />
+                        <input type="text" name="username" placeholder="Discogs Username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
+                        <input type="submit" value="Sync" onClick={handleDiscogsSubmit} />
                     </form>
                 </div>
             </div>
             <div />
             <div>
                 {noResultsEl}
-                {results.map(result)}
+                {results.map(Result)}
                 {topEl}
             </div>
         </div>

client/src/style/index.less

@@ -56,6 +56,7 @@ html {
     --color-accent-blue: #5E9ED6;
 
     --color-blue-gray: #506485;
+    --color-green: #537a34;
 
     --base-accent-color: var(--color-accent-blue);
     --fg-color: var(--color-off-white);
@@ -200,14 +201,20 @@ article {
         margin-right: var(--base-spacing);
         background: var(--tertiary-background-color);
         border-color: var(--secondary-background-color);
+
+        &.added {
+            background: var(--color-green);
+            cursor: auto;
+        }
     }
 }
 
 .list {
     display: flex;
+    flex-flow: row wrap;
 
     article {
-        flex: 1;
+        flex: 1 1 20%;
         padding: var(--base-spacing);
         margin: var(--base-spacing-half);
     }