unistore sucks i think
This commit is contained in:
ntr committed
1 parent
baeaead650
commit
02aadcf2db
21 files changed
+4468
-1354
No files matched your search
Generated
+4198
-1208
File diff suppressed because it is too large.
Load diff
+6
-2
@@ -21,16 +21,20 @@
|
||||
"dependencies": {
|
||||
"preact": "^10.10.0",
|
||||
"preact-render-to-string": "^5.2.1",
|
||||
"preact-router": "^3.2.1"
|
||||
"preact-router": "^3.2.1",
|
||||
"redux": "^4.2.0",
|
||||
"unistore": "^3.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.30.6",
|
||||
"@typescript-eslint/parser": "^5.30.6",
|
||||
"eslint": "^8.20.0",
|
||||
"eslint-config-preact": "^1.3.0",
|
||||
"eslint-plugin-jest": "^26.7.0",
|
||||
"jest": "^28.1.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^7.3.0",
|
||||
"preact-cli": "^3.4.0",
|
||||
"preact-cli": "^3.4.1",
|
||||
"typescript": "^4.5.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const actions = store => ({
|
||||
getBundles: async () => {
|
||||
const { data: bundles } = await axios.get('http://localhost:41337/bundles');
|
||||
return { bundles };
|
||||
},
|
||||
});
|
||||
|
||||
export default actions;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { h } from 'preact';
|
||||
import { Route, Router } from 'preact-router';
|
||||
import { Provider } from 'unistore/preact'
|
||||
|
||||
import mcratesStore from './store';
|
||||
import actions from './actions';
|
||||
|
||||
import Header from './components/header';
|
||||
|
||||
import Home from './routes/home';
|
||||
import Profile from './routes/profile';
|
||||
|
||||
const store = mcratesStore();
|
||||
|
||||
console.log(Home);
|
||||
|
||||
const App = () => (
|
||||
<Provider store={store}>
|
||||
<div id="app">
|
||||
<Header />
|
||||
<Router>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/profile/" component={Profile} user="me" />
|
||||
<Route path="/profile/:user" component={Profile} />
|
||||
</Router>
|
||||
</div>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { Route, Router } from 'preact-router';
|
||||
|
||||
import Header from './header';
|
||||
|
||||
// Code-splitting is automated for `routes` directory
|
||||
import Home from '../routes/home';
|
||||
import Profile from '../routes/profile';
|
||||
|
||||
const App = () => (
|
||||
<div id="app">
|
||||
<Header />
|
||||
<Router>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/profile/" component={Profile} user="me" />
|
||||
<Route path="/profile/:user" component={Profile} />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,15 @@
|
||||
import { h } from 'preact';
|
||||
import { Link } from 'preact-router/match';
|
||||
|
||||
const Header = () => (
|
||||
<header class={'header'}>
|
||||
<h1>Mates Crates</h1>
|
||||
<nav>
|
||||
<Link activeClassName={'active'} href="/">Home</Link>
|
||||
<Link activeClassName={'active'} href="/profile">Me</Link>
|
||||
<Link activeClassName={'active'} href="/profile/john">John</Link>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
@@ -1,16 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { Link } from 'preact-router/match';
|
||||
import style from './style.less';
|
||||
|
||||
const Header = () => (
|
||||
<header class={style.header}>
|
||||
<h1>Mates Crates</h1>
|
||||
<nav>
|
||||
<Link activeClassName={style.active} href="/">Home</Link>
|
||||
<Link activeClassName={style.active} href="/profile">Me</Link>
|
||||
<Link activeClassName={style.active} href="/profile/john">John</Link>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
@@ -1,48 +0,0 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
background: #673AB7;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 24px;
|
||||
line-height: 56px;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
float: right;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.header nav a {
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 0 15px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0);
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
will-change: background-color;
|
||||
}
|
||||
|
||||
.header nav a:hover,
|
||||
.header nav a:active {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.header nav a.active {
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import './style/index.less';
|
||||
import App from './components/app';
|
||||
import App from './app';
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { h } from 'preact';
|
||||
import { connect } from 'unistore/preact'
|
||||
|
||||
import actions from './../actions';
|
||||
|
||||
function Home({ bundles, getBundles }) {
|
||||
if (!bundles.length) {
|
||||
getBundles();
|
||||
|
||||
return (
|
||||
<div class={'home'}>
|
||||
loading...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={'home'}>
|
||||
{JSON.stringify(bundles)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect('bundles', actions)(Home);
|
||||
@@ -1,11 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import style from './style.less';
|
||||
|
||||
const Home = () => (
|
||||
<div class={style.home}>
|
||||
<h1>Home</h1>
|
||||
<p>This is the Home component.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
@@ -1,5 +0,0 @@
|
||||
.home {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -6,7 +6,6 @@ interface Props {
|
||||
user: string;
|
||||
}
|
||||
|
||||
// Note: `user` comes from the URL, courtesy of our router
|
||||
const Profile = ({ user }: Props) => {
|
||||
const [time, setTime] = useState<number>(Date.now());
|
||||
const [count, setCount] = useState<number>(0);
|
||||
@@ -18,7 +17,7 @@ const Profile = ({ user }: Props) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class={style.profile}>
|
||||
<div class={'profile'}>
|
||||
<h1>Profile: {user}</h1>
|
||||
<p>This is the user profile for a user named { user }.</p>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.profile {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import createStore from 'unistore'
|
||||
|
||||
export default function mcratesStore() {
|
||||
return createStore({ bundles: [] })
|
||||
}
|
||||
|
||||
@@ -18,3 +18,67 @@ html, body {
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
background: #673AB7;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header {
|
||||
h1 {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 24px;
|
||||
line-height: 56px;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 0 15px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0);
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
will-change: background-color;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:active {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
"strict": false, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
|
||||
Reference in new issue
Block a user