offers page

client/src/actions.ts

@@ -36,12 +36,8 @@ const actions = {
         return api.get('/bundles');
     },
 
-    getUserOffers: async function getUserOffers(state, userId) {
-        return api.get(`/user/${userId}/offers`);
-    },
-
-    getOffers: async function getOffers(userId) {
-        return api.get(`/user/${userId}/offers`);
+    getOffers: async function getOffers() {
+        return api.get('/user/offers');
     },
 
     getWants: async function getWants() {

client/src/app.tsx

@@ -7,10 +7,10 @@ import actions from './actions';
 import Header from './components/header';
 
 import Home from './routes/home';
+import Bundles from './routes/bundles';
 import Login from './routes/login';
 import Search from './routes/search';
 import List from './routes/list';
-import Offers from './routes/offers';
 
 function App() {
     const [user, setUser] = useState(null);
@@ -36,10 +36,10 @@ function App() {
             <Header user={user} />
             <Router>
                 <Route path="/" component={Home} />
+                <Route path="/bundles" component={Bundles} />
                 <Route path="/login" component={Login} success={loginSuccess} />
                 <Route path="/search" component={Search} />
                 <Route path="/list" component={List} user={user} />
-                <Route path="/offers" component={Offers} user={user} />
             </Router>
         </main>
     );

client/src/components/header.tsx

@@ -1,10 +1,11 @@
 import { h } from 'preact';
-import { Link } from 'preact-router/match';
+// import { Link } from 'preact-router/match';
 
 const Header = ({ user }) => {
     const nav = () => (
         <nav>
             <a href="/">Offers</a>
+            <a href="/bundles">Bundles</a>
             <a href='/list'>List</a>
             <a href="/search">Search</a>
         </nav>

client/src/components/offer.tsx

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+
+export default function Bundle(bundle) {
+    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>
+    )
+}

client/src/routes/bundles.tsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+import actions from './../actions';
+import Bundle from './../components/bundle';
+
+function Bundles() {
+    const [bundles, setBundles] = useState([]);
+
+    useEffect(() => {
+        async function getBundles() {
+            const [error, bundles] = await actions.getBundles();
+            if (error) return console.error(error);
+            setBundles(bundles);
+        }
+        getBundles();
+    }, []);
+
+    if (!bundles.length) {
+        return (
+            <div class={'home'}>
+                loading...
+            </div>
+        );
+    }
+
+
+    return (
+        <div class={'home'}>
+            {bundles.map(Bundle)}
+        </div>
+    );
+}
+
+export default Bundles;

client/src/routes/home.tsx

@@ -2,21 +2,21 @@ import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 import actions from './../actions';
-import Bundle from './../components/bundle';
+import Offer from './../components/offer';
 
 function Home() {
-    const [bundles, setBundles] = useState([]);
+    const [offers, setOffers] = useState([]);
 
     useEffect(() => {
-        async function getBundles() {
-            const [error, bundles] = await actions.getBundles();
+        async function getOffers() {
+            const [error, offers] = await actions.getOffers();
             if (error) return console.error(error);
-            setBundles(bundles);
+            setOffers(offers);
         }
-        getBundles();
+        getOffers();
     }, []);
 
-    if (!bundles.length) {
+    if (!offers.length) {
         return (
             <div class={'home'}>
                 loading...
@@ -27,7 +27,7 @@ function Home() {
 
     return (
         <div class={'home'}>
-            {bundles.map(Bundle)}
+            {offers.map(Offer)}
         </div>
     );
 }

client/src/routes/offers.tsx

@@ -1,70 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import axios from 'axios';
-
-import actions from '../actions';
-
-function result(r) {
-    function onClick() {
-        actions.postWant(r.id);
-    }
-
-    return (
-        <article key={r.id}>
-            <button onClick={onClick}> + </button>
-            <div>
-                <h3>{r.title}</h3>
-                <h5 class='alt-text' >{r.year}</h5>
-                <h5 class='alt-text'>{r.country}</h5>
-                <h5 class='alt-text'>{r.format.join(' ')}</h5>
-            </div>
-            <img src={r.thumb} />
-        </article>
-    );
-}
-
-const User = () => {
-    const [results, setResults] = useState([]);
-    const [noResults, setNoResults] = useState(false);
-
-    async function fetchResults() {
-        const { data } = await actions.getBundles();
-
-        console.log(data);
-
-        if (data.length === 0) {
-            setResults([]);
-            return setNoResults(true);
-        }
-
-        setNoResults(false);
-        setResults(data);
-    }
-
-    function handleSubmit(e) {
-        e.preventDefault();
-        fetchResults();
-    }
-
-    const topEl = results.length
-        ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
-        : null;
-
-    const noResultsEl = noResults
-        ? <article>No Results</article>
-        : null;
-
-    return (
-        <div class='search'>
-            <div></div>
-            <div></div>
-            <div>
-                {noResultsEl}
-                {results.map(result)}
-                {topEl}
-            </div>
-        </div>
-    );
-};
-
-export default User;

client/src/style/index.less

@@ -32,6 +32,23 @@ img {
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQtMlrTA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v20/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ093dVQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 // stuff from UX laws
 html {
     color:var(--base-font-color);
@@ -72,7 +89,7 @@ html {
     --large-font-size: 2.369em;
     --xlarge-font-size: 3.157em;
     --base-font-family: 'Raleway', Arial, Sans-Serif;
-    --secondary-font-family: monospace;
+    --secondary-font-family: 'Noto Sans Mono', monospace;
     --base-font-color: var(--color-off-white);
     --secondary-font-color: var(--color-mid-grey);