yeh boi

client/src/actions.ts

@@ -1,5 +1,4 @@
-import axios from 'axios';
-import type { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios';
 
 type ApiResponse = [string | null, any | null];
 
@@ -20,20 +19,17 @@ const api = axios.create({
   withCredentials: true
 });
 
-// axios.interceptors.request.use(function onReq(config) {
-//     return config;
-// }, function onError(error) {
-//     // console.error(error);
-//     Promise.resolve(['Network Error', null]);
-// });
-
-api.interceptors.response.use(function onSuccess(response) {
+function onSuccess(response) {
     return [null, response.data];
-}, function onError(error) {
-    // console.error(error);
+}
+
+function onError(error) {
     if (error.response) return [error.response.data.error, null];
     if (error.request) return ['Network Error', null];
-});
+    return ['Unknown Error', null];
+}
+
+api.interceptors.response.use(onSuccess, onError);
 
 const actions = {
     getBundles: async function getBundles() {
@@ -52,6 +48,10 @@ const actions = {
         return api.get('/want/all');
     },
 
+    postWantSearch: async function postWantSearch(artist, title) {
+        return api.post('/want/search', { artist, title });
+    },
+
     postWant: async function postWant(releaseId) {
         return api.post('/want', { releaseId });
     },

client/src/app.tsx

@@ -18,7 +18,6 @@ function App() {
     useEffect(() => {
         async function getLogin() {
             const [error, user] = await actions.getLogin();
-            console.log(error, user);
             if (error) return route('/login');
             setUser(user);
             route('/search');

client/src/components/bundle.tsx

@@ -1,15 +1,14 @@
 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>
+            <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}>
+                    <a href={i.uri} target="_blank" >
                         <h4>{i.description}</h4>
                     </a>
                     <h5>{i.user.name}</h5>

client/src/components/want.tsx

@@ -9,7 +9,6 @@ function Want(want) {
             <div>
                 <h3>{r.artists_sort} - {r.title}</h3>
                 <h5 class='alt-text' >{r.year}</h5>
-                <h5 class='alt-text'>{r.country}</h5>
                 <h5 class='alt-text'>{r.formats[0].descriptions.join(' ')}</h5>
             </div>
             <img src={r.thumb} />

client/src/routes/home.tsx

@@ -11,7 +11,6 @@ function Home() {
         async function getBundles() {
             const [error, bundles] = await actions.getBundles();
             if (error) return console.error(error);
-            console.log(bundles, 'bundles')
             setBundles(bundles);
         }
         getBundles();

client/src/routes/list.tsx

@@ -18,7 +18,6 @@ const List = ({ user }: Props) => {
         async function getWants() {
             const [error, wants] = await actions.getWants();
             if (error) return console.error(error);
-            console.log(wants, 'wants')
             setOffers(wants);
         }
         getWants();

client/src/routes/search.tsx

@@ -1,20 +1,29 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import axios from 'axios';
-import { ExternalLink } from 'react-feather';
+import { ExternalLink, Check } from 'react-feather';
 
 import actions from '../actions';
 
-function result(r) {
-    function onClick() {
-        actions.postWant(r.id);
+function Result(r) {
+    const [added, setAdded] = useState(false)
+
+    async function onClick() {
+        const [error, want] = await actions.postWant(r.id);
+        if (error) return false;
+        setAdded(true);
     }
 
+    const classes = `${added ? 'added' : ''}`;
+    const btnText = added
+        ? <Check />
+        : '+';
+
     return (
         <article key={r.id}>
-            <button onClick={onClick}> + </button>
+            <button onClick={onClick} disabled={added} class={classes} >{btnText}</button>
             <div>
-                <h3>{r.title} <a href={`https://discogs.com${r.uri}`}><ExternalLink /></a></h3>
+                <h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank"><ExternalLink /></a></h3>
                 <h5 class='alt-text' >{r.year}</h5>
                 <h5 class='alt-text'>{r.country}</h5>
                 <h5 class='alt-text'>{r.format.join(' ')}</h5>
@@ -25,33 +34,32 @@ function result(r) {
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('nine inch nails')
-    const [title, setTitle] = useState('the fragile');
+    const [artist, setArtist] = useState('')
+    const [title, setTitle] = useState('');
     const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
     const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
-        const { data } = await axios.post(`http://localhost:41337/want/search`, {
-            artist,
-            title,
-        });
+        const [error, results] = await actions.postWantSearch(artist, title);
 
-        console.log(data);
-
-        if (data.length === 0) {
+        if (results.length === 0) {
             setResults([]);
             return setNoResults(true);
         }
 
         setNoResults(false);
-        setResults(data);
+        setResults(results);
     }
 
     async function submitWantlist() {
         const [error, wants] = await actions.postDiscogs(username);
-        // setNoResults(false);
-        // setResults(data);
+        if (results.length === 0) {
+            setResults([]);
+            return setNoResults(true);
+        }
+
+        console.log('synced', wants.length, 'wants');
     }
 
     function handleSubmit(e) {
@@ -88,15 +96,15 @@ const User = () => {
                     <p>Sync Discogs Wantlist</p>
                     <form action="" method="get">
                         <label for="Discogs">Discogs Username</label>
-                        <input type="text" name="username" placeholder="username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
-                        <input type="submit" value="Search" onClick={handleDiscogsSubmit} />
+                        <input type="text" name="username" placeholder="Discogs Username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
+                        <input type="submit" value="Sync" onClick={handleDiscogsSubmit} />
                     </form>
                 </div>
             </div>
             <div />
             <div>
                 {noResultsEl}
-                {results.map(result)}
+                {results.map(Result)}
                 {topEl}
             </div>
         </div>

client/src/style/index.less

@@ -56,6 +56,7 @@ html {
     --color-accent-blue: #5E9ED6;
 
     --color-blue-gray: #506485;
+    --color-green: #537a34;
 
     --base-accent-color: var(--color-accent-blue);
     --fg-color: var(--color-off-white);
@@ -200,14 +201,20 @@ article {
         margin-right: var(--base-spacing);
         background: var(--tertiary-background-color);
         border-color: var(--secondary-background-color);
+
+        &.added {
+            background: var(--color-green);
+            cursor: auto;
+        }
     }
 }
 
 .list {
     display: flex;
+    flex-flow: row wrap;
 
     article {
-        flex: 1;
+        flex: 1 1 20%;
         padding: var(--base-spacing);
         margin: var(--base-spacing-half);
     }