based redux

client/src/app.tsx

@@ -1,9 +1,8 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import { Route, Router, route } from 'preact-router';
-import { Provider, connect } from 'unistore/preact'
+import { Provider } from 'react-redux'
 
-import createStore from './store';
 import createWs from './ws';
 import http from './http';
 
@@ -16,17 +15,17 @@ import Login from './routes/login';
 import Search from './routes/search';
 import List from './routes/list';
 
-const store = createStore();
-const ws = createWs(store);
+import store, { userState, wsState } from './store'
 
+const ws = createWs(store);
 ws.connect();
 
 async function init() {
     const [error, user] = await http.getLogin();
     if (error) return route('/login');
     route('/bundles');
-    store.setState({ user });
-    store.setState({ ws });
+    store.dispatch(userState.actions.set(user));
+    store.dispatch(wsState.actions.set(ws));
 }
 
 init();

client/src/components/header.tsx

@@ -1,15 +1,19 @@
 import { h } from 'preact';
 import { route } from 'preact-router';
-import { connect } from 'unistore/preact'
+import { useSelector, useDispatch } from 'react-redux'
 
 import http from './../http';
-import actions from './../actions';
+import { State, userState } from './../store';
 
-const Header = ({ user, logout }) => {
+const Header = () => {
+    const dispatch = useDispatch()
+    const user = useSelector((state: State) => state.user);
 
-    function logoutClick(e) {
+    async function logoutClick(e) {
         e.preventDefault();
-        logout();
+        await http.postLogout();
+        route('/login');
+        dispatch(userState.actions.set(null));
     }
 
     const nav = () => (
@@ -39,7 +43,6 @@ const Header = ({ user, logout }) => {
             <a href="/account">Account</a>
             <a href="/auth/logout" onClick={logoutClick}>Logout</a>
         </nav>
-
     )
 
     return (
@@ -51,5 +54,4 @@ const Header = ({ user, logout }) => {
     );
 }
 
-// @ts-ignore unistore types
-export default connect(['user'], actions)(Header);
+export default Header;

client/src/routes/acp.tsx

@@ -7,9 +7,7 @@ import AcpOffer from './../components/acp.offer';
 
 import { Status } from './../../../api/src/offers';
 
-function ItemEl({ item, ws }) {
-    console.log(item);
-    console.log(ws);
+function Item({ item, ws }) {
     const statuses = Object.entries(Status).map(([label, value]) => (
         <option value={value}>{label}</option>
     ));
@@ -32,8 +30,6 @@ function ItemEl({ item, ws }) {
     );
 }
 
-const Item = connect(['ws'], {}, ItemEl);
-
 function SellerGroup(group) {
     return (
         <div class="bundle">

client/src/routes/home.tsx

@@ -1,19 +1,22 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
-import { connect } from 'unistore/preact'
+import { useSelector, useDispatch } from 'react-redux'
 
 import http from './../http';
-import actions from './../actions';
+import { State, offersState } from './../store';
 
 import Offer from './../components/offer';
 
-function Home({ offers, setOffers }) {
+function Home() {
+    const dispatch = useDispatch()
+    const offers = useSelector((state: State) => state.offers);
+
     useEffect(() => {
         async function getOffers() {
             const [error, offers] = await http.getOffers();
             if (error) return console.error(error);
-            setOffers(offers);
+            dispatch(offersState.actions.set(offers));
             if (offers.length === 0) route('/search');
         }
         getOffers();
@@ -35,4 +38,4 @@ function Home({ offers, setOffers }) {
     );
 }
 
-export default connect(['offers'], actions)(Home);
+export default Home;

client/src/routes/login.tsx

@@ -1,12 +1,15 @@
 import { h } from 'preact';
 import { route } from 'preact-router';
 import { useState, useEffect, useRef } from 'preact/hooks';
-import { connect } from 'unistore/preact'
+import { useSelector, useDispatch } from 'react-redux'
 
 import http from './../http';
-import actions from './../actions';
+import { State, userState } from './../store';
+
+const Login = ({ mode }) => {
+    const dispatch = useDispatch()
+    const user = useSelector((state: State) => state.user);
 
-const Login = ({ setUser, mode }) => {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
@@ -16,14 +19,14 @@ const Login = ({ setUser, mode }) => {
         const [error, user] = await http.postLogin(email, password);
         if (error) return setError(error);
         route('/');
-        setUser(user);
+        dispatch(userState.actions.set(user));
     }
 
     async function postRegister() {
         const [error, user] = await http.postRegister(email, password);
         if (error) return setError(error);
         route('/search');
-        setUser(user);
+        dispatch(userState.actions.set(user));
     }
 
     function handleSubmit(e) {
@@ -86,12 +89,10 @@ const Login = ({ setUser, mode }) => {
     );
 };
 
-const LoginForm = connect([], actions)(Login);
-
 function LoginPage({ mode }) {
     return (
         <div class="landing">
-            <LoginForm mode={mode} />
+            <Login mode={mode} />
             <div></div>
             <div class="info">
                 <p>Mates Crates is a record importing service.</p>

client/src/store.tsx

@@ -1,10 +1,39 @@
-import unistore from 'unistore'
+import { createStore, combineReducers } from 'redux'
+import { configureStore, createSlice } from '@reduxjs/toolkit'
 
-export default function createStore() {
-    return unistore({
-        bundles: [],
-        offers: [],
-        user: null,
-        ws: null,
-    });
-};
+export const userState = createSlice({
+  name: 'user',
+  initialState: null,
+  reducers: {
+    set: (state, action) => action.payload
+  },
+});
+
+export const offersState = createSlice({
+  name: 'offers',
+  initialState: [],
+  reducers: {
+    set: (state, action) => action.payload
+  },
+});
+
+export const wsState = createSlice({
+  name: 'ws',
+  initialState: null,
+  reducers: {
+    set: (state, action) => action.payload
+  },
+});
+
+const reducer = combineReducers({
+  user: userState.reducer,
+  offers: offersState.reducer,
+  ws: wsState.reducer,
+});
+
+const store = createStore(reducer);
+
+export default store;
+
+export type State = ReturnType<typeof store.getState>
+export type Dispatch = typeof store.dispatch