diff --git a/client/src/routes/home.tsx b/client/src/routes/home.tsx
index d5e19af..3c556ea 100644
--- a/client/src/routes/home.tsx
+++ b/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;
diff --git a/client/src/routes/login.tsx b/client/src/routes/login.tsx
index 61859a2..1b911de 100644
--- a/client/src/routes/login.tsx
+++ b/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 (
-
+
Mates Crates is a record importing service.
diff --git a/client/src/store.tsx b/client/src/store.tsx
index d9d2f44..0e62733 100644
--- a/client/src/store.tsx
+++ b/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
+export type Dispatch = typeof store.dispatch