offers wip

client/disclaimers.txt

@@ -1 +1,2 @@
-This application uses Discogs’ API but is not affiliated with, sponsored or endorsed by Discogs. ‘Discogs’ is a trademark of Zink Media, LLC.
+This application uses Discogs’ API but is not affiliated with, sponsored or endorsed by Discogs. ‘Discogs’ is a trademark of Zink Media, LLC.
+Data provided by Discogs.

client/src/app.tsx

@@ -20,7 +20,7 @@ function App() {
             const [error, user] = await actions.getLogin();
             if (error) return route('/login');
             setUser(user);
-            route('/search');
+            route('/bundles');
         }
 
         getLogin();

client/src/components/bundle.tsx

@@ -1,21 +1,43 @@
 import { h } from 'preact';
 
 export default function Bundle(bundle) {
+
+
     return (
         <div class="bundle">
-            <h2>{bundle.username} - {bundle.seller}</h2>
-            <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} target="_blank" >
-                        <h4>{i.description}</h4>
-                    </a>
-                    <h5>{i.user.name}</h5>
-                    <h5>{i.price} {i.currency}</h5>
-                    <hr />
-                </div>
-            ))}
+           <section>
+                <h2>{bundle.username} - {bundle.seller}</h2>
+                <h3>{bundle.items.length} items - {bundle.total.toFixed(2)} {bundle.currency}</h3>
+                <h4>Ships: {bundle.mentionsAustralia && 'AU'} {bundle.mentionsWorldwide && 'WORLD'}</h4>
+            </section>
+
+            <section>
+                <form action="">
+                    <div class="item">
+                        <label for="shipping">Full Shipping Cost</label>
+                        <input type="number" name="shipping" id="shipping" required />
+                    </div>
+                    <div class="item">
+                        <label for="baseShipping">Base Shipping Cost</label>
+                        <input type="number" name="baseShipping" id="baseShipping" required />
+                    </div>
+                    <div class="item">
+                        <input type="submit" value="Generate Offers" />
+                    </div>
+                </form>
+            </section>
+
+            <div class='items'>
+                {bundle.items.map(i => (
+                    <div key={i.id}>
+                        <a href={i.uri} target="_blank" >
+                            <h4>{i.description}</h4>
+                        </a>
+                        <h5>{i.user.name}</h5>
+                        <h5>{i.price.toFixed(2)} {i.currency}</h5>
+                    </div>
+                ))}
+            </div>
         </div>
     )
 }

client/src/components/offer.tsx

@@ -1,19 +1,15 @@
 import { h } from 'preact';
+import { ExternalLink } from 'react-feather';
 
-export default function Bundle(bundle) {
+export default function Offer(offer) {
+    const { want: { data: details } } = offer;
     return (
-        <div class="bundle">
-            <h3>{bundle.items.length} items - {bundle.total.toFixed(2)} {bundle.currency}</h3>
-            {bundle.items.map(i => (
-                <div key={i.id}>
-                    <a href={i.uri} target="_blank" >
-                        <h4>{i.description}</h4>
-                    </a>
-                    <h5>{i.user.name}</h5>
-                    <h5>{i.price} {i.currency}</h5>
-                    <hr />
-                </div>
-            ))}
+        <div class="offer">
+            <h2>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h2>
+            <h5 class='alt-text' >{details.year}</h5>
+            <h5 class='alt-text'>{details.formats[0].descriptions.join(' ')}</h5>
+            <img src={details.thumb} />
+            <h5>${offer.total}</h5>
         </div>
     )
 }

client/src/routes/bundles.tsx

@@ -18,7 +18,7 @@ function Bundles() {
 
     if (!bundles.length) {
         return (
-            <div class={'home'}>
+            <div class={'bundles'}>
                 loading...
             </div>
         );
@@ -26,7 +26,7 @@ function Bundles() {
 
 
     return (
-        <div class={'home'}>
+        <div class={'bundles'}>
             {bundles.map(Bundle)}
         </div>
     );

client/src/routes/home.tsx

@@ -11,6 +11,7 @@ function Home() {
         async function getOffers() {
             const [error, offers] = await actions.getOffers();
             if (error) return console.error(error);
+            console.log(offers);
             setOffers(offers);
         }
         getOffers();
@@ -18,7 +19,7 @@ function Home() {
 
     if (!offers.length) {
         return (
-            <div class={'home'}>
+            <div class={'offers'}>
                 loading...
             </div>
         );
@@ -26,7 +27,7 @@ function Home() {
 
 
     return (
-        <div class={'home'}>
+        <div class={'offers'}>
             {offers.map(Offer)}
         </div>
     );

client/src/style/index.less

@@ -283,12 +283,30 @@ header {
     padding-bottom: var(--base-spacing);
 }
 
-.home {
-    display: flex;
+.bundles {
+    flex-flow: row;
 
     .bundle {
-        flex: 1;
-        padding-right: 1em;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        margin-bottom: var(--base-spacing);
+
+        .items {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            align-items: stretch;
+
+            div {
+                margin-right: var(--base-spacing);
+                margin-bottom: var(--base-spacing);
+            }
+        }
     }
 }
 
+.offers {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+