acp stuff

client/src/routes/acp.tsx

@@ -0,0 +1,66 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+import actions from './../actions';
+import AcpOffer from './../components/acp.offer';
+
+function Item(item) {
+
+    console.log(item);
+
+    return (
+        <div key={item.id}>
+            <a href={item.listing.data.uri} target="_blank" >
+                <h4>{item.listing.data.release.description}</h4>
+            </a>
+            <h5 class='alt-text'>{item.total}</h5>
+            <h5>{item.status}</h5>
+        </div>
+    );
+}
+
+function SellerGroup(group) {
+    return (
+        <div class="bundle">
+           <section>
+                <h2>{group.username} - {group.seller}</h2>
+                <h3>{group.offers.length} offers</h3>
+                <h4>Ships: {group.mentionsAustralia && 'AU'} {group.mentionsWorldwide && 'WORLD'}</h4>
+            </section>
+
+            <div class='items'>
+                {group.offers.map(Item)}
+            </div>
+        </div>
+    )
+}
+
+function Home() {
+    const [offers, setOffers] = useState([]);
+
+    useEffect(() => {
+        async function getOffers() {
+            const [error, offers] = await actions.getOffersAcp();
+            if (error) return console.error(error);
+            setOffers(offers);
+        }
+        getOffers();
+    }, []);
+
+    if (!offers.length) {
+        return (
+            <div class={'offers'}>
+                loading...
+            </div>
+        );
+    }
+
+
+    return (
+        <div class='bundles'>
+            {offers.map(SellerGroup)}
+        </div>
+    );
+}
+
+export default Home;