sample wip

TODO.md

@@ -1,7 +1,6 @@
 # TODO
-contact options on landing page
 
-move want add to rpc
+listing ids overflowing
 
 skip unofficial release
 
@@ -10,6 +9,7 @@ status stepper
 queue up wantlist adds to gracefully handle rate limiting
 
 push offers
+cover off admin routes and commands
 
 listen / notify
     on offers

api/index.ts

@@ -28,7 +28,7 @@ async function start() {
         events,
     } = createServices(log);
 
-    // events.emit(Events.Sync);
+    // events.emit(Events.StartupSync);
     // events.emit(Events.ListingsUpdated);
 
     api.listen();

api/prisma/schema.prisma

@@ -11,8 +11,8 @@ datasource db {
 }
 
 model Listing {
-    id         BigInt      @id
-    seller     BigInt
+    id         Int      @id
+    seller     Int
     data       Json
 
     wantId     String   @db.Uuid
@@ -43,7 +43,7 @@ model User {
 
 model Want {
     id         String     @id       @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-    release    BigInt
+    release    Int
     data       Json
 
     userId     String     @db.Uuid
@@ -71,7 +71,7 @@ model Offer {
     shipping        Decimal    @db.Money
     total           Decimal    @db.Money
 
-    listingId       BigInt
+    listingId       Int
     listing         Listing    @relation(fields: [listingId], references: [id])
 
     userId          String     @db.Uuid
@@ -80,9 +80,6 @@ model Offer {
     wantId          String     @db.Uuid
     want            Want       @relation(fields: [wantId], references: [id], onDelete: Cascade)
 
-    createdAt  DateTime   @default(now())
-    updatedAt  DateTime   @default(now())
-
     // only one offer per want for a user
     // @@unique([userId, wantId])
     @@unique([listingId])

api/src/api.ts

@@ -13,11 +13,9 @@ import Bluebird from 'bluebird';
 import type Log from 'bunyan';
 import type { Listing, User, Want, Prisma } from '@prisma/client';
 
-import type { Pg } from './pg';
-import type { Discogs } from './discogs';
-import type { Offers } from './offers';
-import type { Rpc } from './rpc';
-
+import { Pg } from './pg';
+import { Discogs } from './discogs';
+import { Offers } from './offers';
 import routerAuth from './routers/router.auth';
 import { Events } from './events';
 import createRpc, { RpcMessageType } from './rpc';
@@ -63,6 +61,13 @@ export default function createApi(log: Log, pg: Pg, discogs: Discogs, offers: Of
         ctx.status = 200;
     });
 
+    router.get('/user/offers', async function userOffersGet(ctx, next) {
+        ctx.assert(ctx.isAuthenticated(), 401, 'log in required');
+        const user = ctx.state.user;
+        const offers = await pg.userOffers(user);
+        ctx.response.body = offers;
+    });
+
     router.post('/want', async function wantPost(ctx, next) {
         ctx.assert(ctx.isAuthenticated(), 401, 'log in required');
         const { releaseId } = ctx.request.body;
@@ -82,6 +87,14 @@ export default function createApi(log: Log, pg: Pg, discogs: Discogs, offers: Of
         ctx.response.body = wants;
     });
 
+    router.get('/want/all', async function wantGet(ctx, next) {
+        ctx.assert(ctx.isAuthenticated(), 401, 'log in required');
+        const user = ctx.state.user;
+        const wants = await pg.wantList(user);
+
+        ctx.response.body = wants;
+    });
+
     router.post('/want/search', async function wantSearch(ctx, next) {
         const { query } = ctx.request.body;
         const results = await discogs.search(query);
@@ -107,7 +120,7 @@ export default function createApi(log: Log, pg: Pg, discogs: Discogs, offers: Of
             // log.child...
 
             const ws = ctx.websocket;
-            const rpc = createRpc(log, pg, ws, discogs, offers, events, ctx.state.user as User | null);
+            const rpc = createRpc(log, pg, ws, discogs, offers, ctx.state.user);
 
             if (ctx.state.user) events.emit(Events.Connection, { ws, id: ctx.state.user.id });
             ws.on('message', async function incoming(message) {

api/src/discogs.ts

@@ -48,7 +48,7 @@ export default function createDiscogs(log: Log, pg: Pg) {
         // @ts-ignore
         const additions = results.filter(r => r.status === 'fulfilled').map(r => r.value);
 
-        log.info('want list additions', additions);
+        log.info(additions);
 
         return additions;
     }

api/src/events.ts

@@ -10,7 +10,7 @@ import routerAuth from './routers/router.auth';
 
 export enum Events {
     WantsAdded = 'WantsAdded',
-    Sync = 'Sync',
+    StartupSync = 'StartupSync',
     ListingsUpdated = 'ListingsUpdated',
     Connection = 'Connection',
 }
@@ -51,12 +51,11 @@ export default function createEvents(log: Log, pg: Pg, discogs, offers) {
         log.info({ event: Events.WantsAdded, wants: wants.map(w => wantDetails(w)) }, 'starting listings population');
         await updateWantListings(wants);
         log.info({ event: Events.WantsAdded, wants: wants.map(w => wantDetails(w)) }, 'finished populating listings');
-        events.emit(Events.ListingsUpdated);
     });
 
-    events.on(Events.Sync, async function sync() {
+    events.on(Events.StartupSync, async function startupSync() {
         const wants = await pg.wantsToSync();
-        log.info({ event: Events.Sync, wants: wants.length });
+        log.info({ event: Events.StartupSync, wants: wants.length });
         await updateWantListings(wants);
         events.emit(Events.ListingsUpdated);
     });

api/src/offers.ts

@@ -51,7 +51,8 @@ export default function createOffers(log: Log, pg: Pg) {
         // TODO probably need to take one of each condition of record from a store
         // eg. they have a VG+ and a M we should make offers for each
 
-        log.trace('generated offers', sorted);
+        log.info(sorted);
+
         const inserts = await pg.offersUpdate(sorted);
 
         return inserts;
@@ -112,14 +113,12 @@ export default function createOffers(log: Log, pg: Pg) {
         const offers = await pg.userOffers(user);
         const groups = Object.values(groupBy(offers, (o) => o.wantId))
             .map(g => {
+                const offers = sortBy(g, sortOffers);
+
                 // the offer status is just the most advanced status
                 // based on sort
-                const offers = sortBy(g, sortOffers);
                 const status = offers[0].status;
 
-                // now actually sort them by price
-                offers.sort((a, b) => a.total - b.total);
-
                 const details = offers[0].want.data;
 
                 return {
@@ -135,8 +134,7 @@ export default function createOffers(log: Log, pg: Pg) {
     async function samples() {
        const user = await pg.userFindEmail('ntr@mnml.gg');
        const offerGroups = await userOffers(user);
-       const i = Math.floor(Math.random() * offerGroups.length / 2);
-       return offerGroups[i];
+       return offerGroups.slice(0, 1);
     }
 
     return {

api/src/pg.ts

@@ -21,10 +21,7 @@ export default function createPg(log: Log, prisma: PrismaClient) {
     }
 
     async function userWants(user: User) {
-        return prisma.want.findMany({
-            where: { userId: user.id },
-            include: { _count: { select: { offers: true }} },
-        });
+        return prisma.want.findMany({ where: { userId: user.id }});
     }
 
     async function userOffers(user: User) {
@@ -37,7 +34,6 @@ export default function createPg(log: Log, prisma: PrismaClient) {
                 want: true,
             },
             orderBy: [
-                { updatedAt: 'asc' },
                 { total: 'asc' },
                 { listingId: 'asc' },
             ],
@@ -173,8 +169,6 @@ export default function createPg(log: Log, prisma: PrismaClient) {
                 }
             });
 
-            log.info({ count }, 'second stage open offers removed');
-
             return count;
         });
     }
@@ -227,7 +221,6 @@ export default function createPg(log: Log, prisma: PrismaClient) {
         // but for ease of abstraction we get the listings themselves
         // grouped by seller
         const candidates = await prisma.$queryRaw`
-            WITH groups AS (
             select
                 seller, count(distinct("wantId")), array_agg(id) as listings
             from
@@ -238,10 +231,7 @@ export default function createPg(log: Log, prisma: PrismaClient) {
                 seller
             order by
                 count desc
-            )
-            select *
-            from groups
-            where count >= 5;
+            limit 5;
         ` as BundleCandidate[];
 
         return Promise.all(candidates.map(async c => prisma.listing.findMany({

api/src/rpc.ts

@@ -1,3 +1,5 @@
+import { EventEmitter } from 'node:events';
+import { setTimeout } from 'timers/promises';
 import assert from 'assert/strict';
 
 import type Log from 'bunyan';
@@ -10,7 +12,6 @@ import type { Offers } from './offers';
 
 import { Status } from './offers';
 import { isAdmin } from './utils';
-import { Events } from './events';
 
 function checkMsgType(msgType: RpcMessageType): msgType is RpcMessageType {
     if (RpcMessageType[msgType]) {
@@ -20,7 +21,7 @@ function checkMsgType(msgType: RpcMessageType): msgType is RpcMessageType {
 }
 
 // rpc is created per connection from the api
-export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers: Offers, events, user: User | null) {
+export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers: Offers, user: User | null) {
     async function ping(): Promise<PongMessage> {
         return [RpcMessageType.Pong, []];
     }
@@ -70,12 +71,6 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
         return [RpcMessageType.AcpOffers, await offers.acpOffers()];
     }
 
-    async function acpListingsSync(): Promise<AcpListingsSyncMessage> {
-        assert(isAdmin(user), 'not authorised');
-        events.emit(Events.Sync);
-        return [RpcMessageType.AcpListingsSync, []];
-    }
-
     async function receive(message: any): Promise<RpcMessage> {
         const [msgType, params] = message;
 
@@ -106,8 +101,6 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
                 return acpOfferStatusSet(params);
             case RpcMessageType.AcpOffers:
                 return acpOffers();
-            case RpcMessageType.AcpListingsSync:
-                return acpListingsSync();
 
             default:
                 throw new Error(`Message type ${msgType} is known but unhandled`);
@@ -120,12 +113,9 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
     }
 
     async function anonConnection() {
-
-    }
-
-    async function adminConnection() {
-        // don't need it, requested on route
-        // send(await acpOffers());
+        const samples = await offers.samples();
+        const sampleMsg: OfferSamplesMessage = [RpcMessageType.OfferSamples, samples];
+        send(sampleMsg);
     }
 
     async function onConnection() {
@@ -134,15 +124,9 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
         const userMsg: UserMessage = [RpcMessageType.User, user];
         send(userMsg);
 
-        const userOffers = await offers.userOffers(user);
-        const offersMsg: OffersMessage = [RpcMessageType.Offers, userOffers];
-        send(offersMsg);
-
         const wants = await pg.userWants(user);
         const wantsMsg: WantsMessage = [RpcMessageType.Wants, wants];
         send(wantsMsg);
-
-        if (isAdmin(user)) return adminConnection();
     }
 
     function send(msg: RpcMessage) {
@@ -160,8 +144,6 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
     }
 }
 
-export type Rpc = ReturnType<typeof createRpc>;
-
 export enum RpcMessageType {
     Ping = 'Ping',
     Pong = 'Pong',
@@ -182,7 +164,6 @@ export enum RpcMessageType {
 
     AcpOfferStatusSet = 'AcpOfferStatusSet',
     AcpOffers = 'AcpOffers',
-    AcpListingsSync = 'AcpListingsSync',
 
     WantRm = 'WantRm',
 }
@@ -199,7 +180,6 @@ type OfferSamplesMessage = [RpcMessageType.OfferSamples, Offer[]];
 
 type AcpOfferStatusSetMessage = [RpcMessageType.AcpOfferStatusSet, Offer[]];
 type AcpOffersMessage = [RpcMessageType.AcpOffers, Offer[]];
-type AcpListingsSyncMessage = [RpcMessageType.AcpListingsSync, []];
 
 export type RpcMessage =
     PingMessage |
@@ -216,7 +196,6 @@ export type RpcMessage =
 
     AcpOfferStatusSetMessage |
     AcpOffersMessage |
-    AcpListingsSyncMessage |
 
     ErrorMessage;
 

client/package-lock.json

@@ -10,7 +10,6 @@
             "license": "MIT",
             "dependencies": {
                 "@reduxjs/toolkit": "^1.8.5",
-                "izitoast": "^1.4.0",
                 "lodash": "^4.17.21",
                 "logrocket": "^3.0.1",
                 "preact": "^10.10.0",
@@ -10845,11 +10844,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/izitoast": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
-            "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
-        },
         "node_modules/jake": {
             "version": "10.8.5",
             "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -29572,11 +29566,6 @@
                 "istanbul-lib-report": "^3.0.0"
             }
         },
-        "izitoast": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
-            "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
-        },
         "jake": {
             "version": "10.8.5",
             "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",

client/package.json

@@ -10,7 +10,6 @@
     },
     "dependencies": {
         "@reduxjs/toolkit": "^1.8.5",
-        "izitoast": "^1.4.0",
         "lodash": "^4.17.21",
         "logrocket": "^3.0.1",
         "preact": "^10.10.0",

client/src/components/want.tsx

@@ -30,8 +30,8 @@ function Want(want) {
             </div>
             <img src={r.thumb} />
             <div class='details'>
-                <div class='alt'>{r.year} - {r.formats[0].descriptions.join(' ')}</div>
-                <div class='alt'>{want._count.offers} offers</div>
+                <div class='alt'>{r.year}</div>
+                <div class='alt'>{r.formats[0].descriptions.join(' ')}</div>
             </div>
             <button onClick={onClick} >{text}</button>
         </article>

client/src/http.ts

@@ -32,7 +32,21 @@ function onError(error) {
 api.interceptors.response.use(onSuccess, onError);
 
 const actions = {
-    // TODO move to rpc
+    getBundles: async function getBundles() {
+        return api.get('/acp/bundles');
+    },
+
+    getOffers: async function getOffers() {
+        return api.get('/user/offers');
+    },
+
+    getOffersAcp: async function getOffersAcp() {
+        return api.get('/acp/offers');
+    },
+
+    getWants: async function getWants() {
+        return api.get('/want/all');
+    },
 
     postWantSearch: async function postWantSearch(query) {
         return api.post('/want/search', { query });
@@ -46,9 +60,6 @@ const actions = {
         return api.post('/want/discogs', { username });
     },
 
-    // --------------------------------
-    // require as http to set cookies
-
     getLogin: async function getLogin() {
         return api.get('/auth/login')
     },

client/src/index.ts

@@ -1,6 +1,4 @@
-import 'izitoast/dist/css/iziToast.min.css';
 import './style/index.less';
-
 import App from './app';
 
 export default App;

client/src/routes/acp.tsx

@@ -70,19 +70,22 @@ function Home() {
     const offers = useSelector((state: State) => state.acpOffers);
     const ws = useSelector((state: State) => state.ws);
 
-    function sync() {
-        ws.sendAcpListingsSync();
+    // useEffect(() => {
+    //     ws.sendAcpOffers();
+    // }, [offers, ws]);
+
+    if (!offers.length) {
+        return (
+            <div class={'offers'}>
+                loading...
+            </div>
+        );
     }
 
     return (
-        <div>
-            <button onClick={sync}> sync listings </button>
-            <button onClick={sync}> generate offers </button>
-            <hr />
         <div class='bundles'>
             {offers.map(SellerGroup)}
         </div>
-        </div>
     );
 }
 

client/src/routes/list.tsx

@@ -4,20 +4,23 @@ import { useSelector } from 'react-redux'
 import { route } from 'preact-router';
 
 import { State } from './../store'
-import * as toast from './../toast';
 
 import Want from './../components/want';
 
-const List = () => {
+interface Props {
+    user: any,
+    wants: any[],
+    getUserOffers: (userId: string) => void,
+}
+
+const List = ({ user }: Props) => {
     const wants = useSelector((state: State) => state.wants);
-    const user = useSelector((state: State) => state.user);
 
     if (!wants) {
         return <div> loading... </div>;
     }
 
     if (!wants.length) {
-        toast.info('List Empty', 'You have no items in your list, add some with search.');
         route('/search');
     }
 

client/src/routes/login.tsx

@@ -6,19 +6,19 @@ import { useSelector, useDispatch } from 'react-redux'
 import http from './../http';
 import { State, userState } from './../store';
 import Swirl from './../components/swirl';
+import OfferGroup from './../components/offer.group';
 
 const Login = ({ mode }) => {
     const dispatch = useDispatch()
     const user = useSelector((state: State) => state.user);
     const ws = useSelector((state: State) => state.ws);
 
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
     const [error, setError] = useState('');
 
-    function gotoRegister() {
-        return route('/register');
-    }
-
-    async function postLogin(email, password) {
+    async function postLogin() {
         const [error, user] = await http.postLogin(email, password);
         if (error) return setError(error);
         route('/');
@@ -27,23 +27,17 @@ const Login = ({ mode }) => {
         ws.connect();
     }
 
-    async function postRegister(email, password, confirm) {
-        if (password !== confirm) return setError('passwords do not match');
-
+    async function postRegister() {
         const [error, user] = await http.postRegister(email, password);
         if (error) return setError(error);
         route('/search');
         dispatch(userState.actions.set(user));
-        // reconnect ws to get logged in methods
-        ws.connect();
     }
 
     function handleSubmit(e) {
         e.preventDefault();
-
-        console.log(e.target.email, e.target.password, e.target.confirm);
-        if (mode === 'login') return postLogin(e.target.email.value, e.target.password.value);
-        if (mode === 'register') return postRegister(e.target.email.value, e.target.password.value, e.target.confirm.value);
+        if (mode === 'login') return postLogin()
+        if (mode === 'register') return postRegister();
     }
 
     const emailRef = useRef<HTMLInputElement>()
@@ -59,21 +53,21 @@ const Login = ({ mode }) => {
     if (mode === 'register') return (
         <div class="login">
             {errorEl}
-            <form action="" onSubmit={handleSubmit}>
+            <form action="">
                 <div class="item">
                     <label for="email">email</label>
-                    <input type="email" name="email" id="email" ref={emailRef} required />
+                    <input type="email" name="email" id="email" ref={emailRef} value={email} required onInput={(e) => setEmail((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">password</label>
-                    <input type="password" name="password" id="password" required />
+                    <input type="password" name="password" id="password" value={password} required onInput={(e) => setPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">confirm password</label>
-                    <input type="password" name="confirm" id="confirm" required />
+                    <input type="password" name="password" id="password" value={confirmPassword} required onInput={(e) => setConfirmPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
-                    <input type="submit" value="register" />
+                    <input type="submit" value="register" onClick={handleSubmit} />
                 </div>
             </form>
         </div>
@@ -83,33 +77,38 @@ const Login = ({ mode }) => {
     return (
         <div class="login">
             {errorEl}
-            <form action="" onSubmit={handleSubmit}>
+            <form action="">
                 <div class="item">
                     <label for="email">email</label>
-                    <input type="email" name="email" id="email" ref={emailRef} />
+                    <input type="email" name="email" id="email" ref={emailRef} value={email} required onInput={(e) => setEmail((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">password</label>
-                    <input type="password" name="password" id="password" />
+                    <input type="password" name="password" id="password" value={password} required onInput={(e) => setPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
-                    <input type="submit" value="login"/>
+                    <input type="submit" value="login" onClick={handleSubmit} />
                 </div>
             </form>
-            <button onClick={gotoRegister}> create account </button>
         </div>
     );
 };
 
 function LoginPage({ mode }) {
+    const offers = useSelector((state: State) => state.offers);
+
     return (
         <div class="landing">
             <Login mode={mode} />
+            <div class='offers'>
+               {offers.map(OfferGroup)}
+               <div>
                 <Swirl />
                 <div class='words'>
-                <p>Mates Crates is a record importing service.</p>
                     <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
-                <p>Records can then be picked up from Preston.</p>
+                    <p>Based in Preston.</p>
+                </div>
+                </div>
             </div>
         </div>
     )

client/src/routes/offers.tsx

@@ -1,17 +1,18 @@
 import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 
-import { State } from './../store';
-import * as toast from './../toast';
+import http from './../http';
+import { State, offersState } from './../store';
 
 import OfferGroup from './../components/offer.group';
 
 function Home() {
+    const dispatch = useDispatch()
     const offers = useSelector((state: State) => state.offers);
 
     if (offers && offers.length === 0) {
-        toast.info('no offers', 'You have no offers yet, search for some more items.');
         route('/search');
     }
 

client/src/routes/search.tsx

@@ -1,13 +1,10 @@
 import { h } from 'preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { ExternalLink, Check } from 'react-feather';
-import { useSelector } from 'react-redux'
-
-import { State } from './../store';
 
 import http from '../http';
 
-function Result(r, wants) {
+function Result(r) {
     const [added, setAdded] = useState(false)
 
     async function onClick() {
@@ -16,9 +13,7 @@ function Result(r, wants) {
         setAdded(true);
     }
 
-    const wanted = wants.some(w => w.release === r.id);
-
-    const classes = `${added || wanted ? 'added' : ''}`;
+    const classes = `${added ? 'added' : ''}`;
     const btnText = added
         ? <Check />
         : '+';
@@ -44,8 +39,6 @@ const User = () => {
     const [results, setResults] = useState([]);
     const [infoText, setInfoText] = useState('');
 
-    const wants = useSelector((state: State) => state.wants);
-
     async function fetchResults() {
         const [error, results] = await http.postWantSearch(query);
 
@@ -113,7 +106,7 @@ const User = () => {
             </div>
             <div class='results'>
                 {infoEl}
-                {results.map(r => Result(r, wants))}
+                {results.map(Result)}
                 {topEl}
             </div>
         </div>

client/src/store.tsx

@@ -11,7 +11,7 @@ export const userState = createSlice({
 
 export const offersState = createSlice({
   name: 'offers',
-  initialState: null,
+  initialState: [],
   reducers: {
     set: (state, action) => action.payload
   },
@@ -52,7 +52,6 @@ const reducer = combineReducers({
 
 const store = createStore(
   reducer,
-  // @ts-ignore -- devtools window exists on dev
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 

client/src/style/index.less

@@ -217,6 +217,7 @@ button, [type=submit] {
     grid-gap: calc(var(--spacing-double) * 2);
     grid-template-areas:
         "login swirl"
+        "login sample"
         "login words";
 
     .login {
@@ -227,8 +228,8 @@ button, [type=submit] {
     }
 
     .swirl {
-        grid-area: swirl;
-        height: 15rem;
+        // grid-area: swirl;
+        height: 5rem;
     }
 
     .words {
@@ -344,8 +345,6 @@ article {
 }
 
 form {
-    margin-bottom: var(--spacing);
-
     label, input {
         display: block;
     }
@@ -365,7 +364,6 @@ form {
         text-transform: uppercase;
         margin-bottom: var(--spacing-half);
     }
-
 }
 
 a {
@@ -541,21 +539,3 @@ header {
     }
 }
 
-
-// ------------
-// toasts
-
-.iziToast {
-    border-radius: 0;
-    border-color: var(--base-border-color);
-
-    .iziToast-body {
-        font-family: var(--base-font-family);
-        font-size: var(--base-font-size);
-    }
-
-    .iziToast-title {
-        font-family: var(--secondary-font-family);
-        text-transform: uppercase;
-    }
-}

client/src/toast.tsx

@@ -1,15 +0,0 @@
-import toast from 'izitoast';
-
-export function info(title, message) {
-    toast.info({
-        title,
-        message,
-        position: 'bottomCenter',
-        color: '#1f2128',
-        titleColor: '#F4F1D0',
-        messageColor: '#F4F1D0',
-        iconColor: '#F4F1D0',
-        icon: '',
-        theme: 'dark',
-    });
-}

client/src/ws.ts

@@ -50,10 +50,6 @@ export default function createSocket(dispatch) {
         send(['AcpOfferStatusSet', { id, status }]);
     }
 
-    function sendAcpListingsSync() {
-        send(['AcpListingsSync', {}]);
-    }
-
     let pongTimeout;
     function onPong() {
         pongTimeout = setTimeout(sendPing, 5000);
@@ -88,6 +84,7 @@ export default function createSocket(dispatch) {
         Offers: onOffers,
         User: onUser,
 
+        OfferSamples: onOffers,
         AcpOffers: onAcpOffers,
 
         Pong: onPong,
@@ -115,6 +112,9 @@ export default function createSocket(dispatch) {
     function onOpen() {
         console.log('websocket connected', SOCKET_URL)
         sendPing();
+        sendAcpOffers();
+        sendOffers();
+        sendWants();
     }
 
     function onError(event) {
@@ -158,6 +158,5 @@ export default function createSocket(dispatch) {
 
         sendAcpOffers,
         sendAcpOfferStatusSet,
-        sendAcpListingsSync,
     };
 }