offer groups with status

client/src/components/offer.group.tsx

@@ -55,23 +55,21 @@ function OfferPriceBtn(offer) {
 }
 
 
-export default function WantOffers(wantOffers, i) {
+export default function OfferGroup(group, i) {
     const ws = useSelector((state: State) => state.ws);
 
-    const details = wantOffers[0].want.data;
-
     return (
         <div class="offer" key={i}>
             <section>
-                <h3>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h3>
+                <h3>{group.details.artists_sort} - {group.details.title} <a href={group.details.uri} target="_blank"><ExternalLink /></a></h3>
                 <div class='alt-text details'>
-                    {details.year} - {details.formats.map(f => f.descriptions.join(' ')).join(' ')}
+                    {group.details.year} - {group.details.formats.map(f => f.descriptions.join(' ')).join(' ')}
                 </div>
-                <div class='alt-text details'>Status: {wantOffers[0].status}</div>
+                <div class='alt-text details'>Status: {group.status}</div>
             </section>
-            <img src={details.thumb} />
+            <img src={group.details.thumb} />
             <div class="lines">
-                {wantOffers.map(o => OfferPriceBtn(o))}
+                {group.offers.map(o => OfferPriceBtn(o))}
             </div>
         </div>
     )

client/src/routes/offers.tsx

@@ -6,21 +6,19 @@ import { useSelector, useDispatch } from 'react-redux'
 import http from './../http';
 import { State, offersState } from './../store';
 
-import WantOffers from './../components/want.offers';
+import OfferGroup from './../components/offer.group';
 
 function Home() {
     const dispatch = useDispatch()
     const offers = useSelector((state: State) => state.offers);
 
-    const groups = Object.values(offers);
-
-    if (offers && !groups.length) {
+    if (offers && offers.length === 0) {
         route('/search');
     }
 
     return (
         <div class={'offers'}>
-            {groups.map(WantOffers)}
+            {offers.map(OfferGroup)}
         </div>
     );
 }

client/src/store.tsx

@@ -11,7 +11,7 @@ export const userState = createSlice({
 
 export const offersState = createSlice({
   name: 'offers',
-  initialState: {},
+  initialState: [],
   reducers: {
     set: (state, action) => action.payload
   },