styles

client/src/routes/list.tsx

@@ -1,6 +1,8 @@
 import { h } from 'preact';
 
 import { useSelector } from 'react-redux'
+import { route } from 'preact-router';
+
 import { State } from './../store'
 
 import Want from './../components/want';
@@ -14,10 +16,14 @@ interface Props {
 const List = ({ user }: Props) => {
     const wants = useSelector((state: State) => state.wants);
 
-    if (!wants.length) {
+    if (!wants) {
         return <div> loading... </div>;
     }
 
+    if (!wants.length) {
+        route('/search');
+    }
+
     return (
         <div class="list">
             {wants.map(Want)}

client/src/routes/offers.tsx

@@ -12,17 +12,15 @@ function Home() {
     const dispatch = useDispatch()
     const offers = useSelector((state: State) => state.offers);
 
-    // if (!offers.length) {
-    //     return (
-    //         <div class={'offers'}>
-    //             loading...
-    //         </div>
-    //     );
-    // }
+    const groups = Object.values(offers);
+
+    if (!groups.length) {
+        route('/search');
+    }
 
     return (
         <div class={'offers'}>
-            {Object.values(offers).map(WantOffers)}
+            {groups.map(WantOffers)}
         </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
   },
@@ -27,7 +27,7 @@ export const acpOffersState = createSlice({
 
 export const wantsState = createSlice({
   name: 'wants',
-  initialState: [],
+  initialState: null,
   reducers: {
     set: (state, action) => action.payload
   },

client/src/style/index.less

@@ -394,7 +394,7 @@ header {
     .offer {
         display: grid;
         grid-template-columns: 1fr min-content;
-        grid-template-rows: 1fr min-content;
+        grid-template-rows: min-content min-content;
         grid-template-areas:
             "details img"
             "lines lines";