import React from "react";
import ReactDOM from "react-dom";
import { View, Router } from "./components";
import createStore, * as helpers from "./lib/index";
const { global, middlewares, mutations, bind } = helpers;
const { set, push, clear, sort, filter } = mutations.array;
const store = createStore({
users: ["a", "z", "u"],
time: "",
session: "token"
});
store.applyMiddleware(middlewares.dispatch.promise, "dispatch");
store.applyMiddleware(middlewares.dispatch.memo, "dispatch");
const {
pushUser,
clearUsers,
sortUsers,
filterUsers,
setUsers
} = store.createAction("users", {
pushUser: push,
clearUsers: clear,
sortUsers: sort,
filterUsers: filter,
setUsers: set
});
const [setTime, fetchTime] = store.createAction("time", [
(e, v) => v,
(e, arg1) => {
return new Promise(function(resolve, reject) {
setTimeout(() => {
const d = new Date();
resolve(d[arg1]());
}, 700);
});
}
]);
const Users = bind.withGlobalState(View, store, ["users"]);
const Time = bind.withGlobalState(View, store, ["time"]);
const All = bind.withGlobalState(View, store, ["time", "users"]);
function App() {
return (
<div>
<div>
Users
<Users
actions={{
push: () => pushUser(prompt("name is:")),
clear: () => clearUsers(),
set: () => setUsers(["a", "u", "d"]),
sort: () => sortUsers((a, b) => a.localeCompare(b)),
sortDesc: () => sortUsers((a, b) => b.localeCompare(a)),
filter: () =>
filterUsers(prompt("name is:"), (value, u) => u === value)
}}
/>
</div>
<div>
Time
<Time
actions={{
fetchMilliseconds: () => fetchTime("getMilliseconds"),
fetchLocaleString: () => fetchTime("toLocaleString"),
setTime: ({ v = new Date() }) => setTime(v)
}}
/>
</div>
<p>to test unsubscribe:</p>
<Router>
<div>
All
<All />
</div>
<div>
Time
<Time />
</div>
<div>
Users
<Users />
</div>
</Router>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);