group status

client/src/components/want.offers.tsx

@@ -26,7 +26,8 @@ function OfferLine(offer) {
 
     return (
         <div class="line">
-            <span class='number'>${offer.total}</span>
+            <div class='number'>${offer.total}</div>
+            <div class='number'>{offer.condition}</div>
             <button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>
             {negBtn}
         </div>
@@ -54,17 +55,19 @@ function OfferPriceBtn(offer) {
 }
 
 
-export default function WantOffers(wantOffers) {
+export default function WantOffers(wantOffers, i) {
     const ws = useSelector((state: State) => state.ws);
 
     const details = wantOffers[0].want.data;
 
     return (
-        <div class="offer">
+        <div class="offer" key={i}>
             <section>
                 <h3>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h3>
-                <div class='alt-text' >{details.year}</div>
-                <div class='alt-text'>{details.formats.map(f => f.descriptions.join(' ')).join(' ')}</div>
+                <div class='alt-text details'>
+                    {details.year} - {details.formats.map(f => f.descriptions.join(' ')).join(' ')}
+                </div>
+                <div class='alt-text details'>Status: {wantOffers[0].status}</div>
             </section>
             <img src={details.thumb} />
             <div class="lines">

client/src/routes/offers.tsx

@@ -14,7 +14,7 @@ function Home() {
 
     const groups = Object.values(offers);
 
-    if (!groups.length) {
+    if (offers && !groups.length) {
         route('/search');
     }
 

client/src/style/index.less

@@ -403,6 +403,14 @@ header {
         margin: var(--spacing-half);
         background: var(--background-1);
 
+        .details {
+            font-size: var(--small-font-size);
+        }
+
+        .status {
+            margin-top: var(--spacing-half);
+        }
+
         section {
             grid-area: details;
         }