move to koa and add user pages

client/src/actions.ts

@@ -5,6 +5,13 @@ const actions = store => ({
         const { data: bundles } = await axios.get('http://localhost:41337/bundles');
         return { bundles };
     },
+
+    getUserOffers: async (state, userId) => {
+        store.setState({ offers: [] });
+        const { data: offers } = await axios.get(`http://localhost:41337/user/${userId}/offers`);
+        console.log(userId, offers);
+        return { offers };
+    },
 });
 
 export default actions;

client/src/app.tsx

@@ -8,7 +8,7 @@ import actions from './actions';
 import Header from './components/header';
 
 import Home from './routes/home';
-import Profile from './routes/profile';
+import User from './routes/user';
 
 const store = mcratesStore();
 
@@ -20,8 +20,7 @@ const App = () => (
             <Header />
             <Router>
                 <Route path="/" component={Home} />
-                <Route path="/profile/" component={Profile} user="me" />
-                <Route path="/profile/:user" component={Profile} />
+                <Route path="/user/:userId" component={User} />
             </Router>
         </div>
     </Provider>

client/src/components/bundle.tsx

@@ -0,0 +1,22 @@
+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>
+            <h4>Ships: {bundle.mentionsAustralia && 'AU'} {bundle.mentionsWorldwide && 'WORLD'}</h4>
+            {bundle.items.map(i => (
+                <div key={i.id}>
+                    <a href={i.uri}>
+                        <h4>{i.description}</h4>
+                    </a>
+                    <h5>{i.user.name}</h5>
+                    <h5>{i.price} {i.currency}</h5>
+                    <hr />
+                </div>
+            ))}
+        </div>
+    )
+}

client/src/components/header.tsx

@@ -6,8 +6,10 @@ const Header = () => (
         <h1>Mates Crates</h1>
         <nav>
             <Link activeClassName={'active'} href="/">Home</Link>
-            <Link activeClassName={'active'} href="/profile">Me</Link>
-            <Link activeClassName={'active'} href="/profile/john">John</Link>
+            <Link activeClassName={'active'} href="/user/cf2384d7-f67f-45a3-a522-68e847345073">ntr</Link>
+            <Link activeClassName={'active'} href="/user/0ad6c6fc-4637-4ea6-9ecc-d0dcdc7f2da2">jen</Link>
+            <Link activeClassName={'active'} href="/user/ac132ae3-7876-4877-ace4-c0d96a2e4174">james</Link>
+            <Link activeClassName={'active'} href="/user/aa2b287d-ea3f-443a-8559-e1477b8fec07">rhys</Link>
         </nav>
     </header>
 );

client/src/routes/home.tsx

@@ -2,35 +2,13 @@ import { h } from 'preact';
 import { connect } from 'unistore/preact'
 
 import actions from './../actions';
-
-// import Bundle from './../components/bundle';
+import Bundle from './../components/bundle';
 
 interface Props {
     bundles: any[];
     getBundles: () => void,
 }
 
-function Bundle(bundle) {
-	return (
-		<div class="bundle">
-			<h2>{bundle.username} - {bundle.seller}</h2>
-			<h3>{bundle.items.length} items - {bundle.total} {bundle.currency}</h3>
-			<h4>Ships: {bundle.mentionsAustralia && 'AU'} {bundle.mentionsWorldwide && 'WORLD'}</h4>
-			{bundle.items.map(i => (
-				<div key={i.id}>
-					<a href={i.uri}>
-						<h4>{i.description}</h4>
-					</a>
-					<h5>{i.user}</h5>
-					<h5>{i.price} {i.currency}</h5>
-					<hr />
-				</div>
-			))}
-		</div>
-	)
-}
-
-
 function Home({ bundles, getBundles }: Props) {
 	if (!bundles.length) {
 		getBundles();

client/src/routes/profile.tsx

@@ -1,35 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import style from './style.less';
-
-interface Props {
-    user: string;
-}
-
-const Profile = ({ user }: Props) => {
-    const [time, setTime] = useState<number>(Date.now());
-    const [count, setCount] = useState<number>(0);
-
-
-    useEffect(() => {
-		let timer = setInterval(() => setTime(Date.now()), 1000);
-		return () => clearInterval(timer);
-	}, []);
-
-    return (
-		<div class={'profile'}>
-			<h1>Profile: {user}</h1>
-			<p>This is the user profile for a user named { user }.</p>
-
-			<div>Current time: {new Date(time).toLocaleString()}</div>
-
-			<p>
-				<button onClick={() => setCount((count) => count + 1)}>Click Me</button>
-				{' '}
-				Clicked {count} times.
-			</p>
-		</div>
-	);
-};
-
-export default Profile;

client/src/routes/user.tsx

@@ -0,0 +1,44 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { connect } from 'unistore/preact';
+import axios from 'axios';
+
+import style from './style.less';
+import actions from './../actions';
+import Bundle from './../components/bundle';
+
+interface Props {
+    userId: string,
+    offers: any[],
+    getUserOffers: (userId: string) => void,
+}
+
+const User = ({ userId }: Props) => {
+  	const [offers, setOffers] = useState([]);
+
+  	useEffect(() => {
+  		async function fetchOffers() {
+	        const { data } = await axios.get(`http://localhost:41337/user/${userId}/offers`);
+	        setOffers(data);
+  		}
+
+  		fetchOffers();
+    }, [userId]);
+
+
+	if (!offers.length) {
+		return (
+			<div class={'home'}>
+				loading...
+			</div>
+		);
+	}
+
+    return (
+		<div class={'home'}>
+			{offers.map(Bundle)}
+		</div>
+	);
+};
+
+export default connect(['offers'], actions)(User);

client/src/store.tsx

@@ -1,6 +1,9 @@
 import createStore from 'unistore'
 
 export default function mcratesStore() {
-  return createStore({ bundles: [] })
+  return createStore({
+    bundles: [],
+    offers: []
+  });
 }