Add README and fixed case sensitivity issue
This commit is contained in:
12
README.md
Normal file
12
README.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# Crafity Snake
|
||||||
|
|
||||||
|
## Todo
|
||||||
|
|
||||||
|
[ ] Create welcome / instructions page
|
||||||
|
[ ] Link to repository
|
||||||
|
[ ] Convert components to use react hooks
|
||||||
|
[ ] Add license
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
TODO
|
||||||
54
src/containers/Keyboards.js
Normal file
54
src/containers/Keyboards.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
import Title from "../components/Title.js";
|
||||||
|
import List from "../components/List.js";
|
||||||
|
import Button from "../components/Button.js";
|
||||||
|
import Link from "../components/Link.js";
|
||||||
|
import Spinner from "../components/Spinner.js";
|
||||||
|
import { getKeyboards, showKeyboard } from "../redux/keyboards.js";
|
||||||
|
|
||||||
|
const KeyboardListItem = ({ item, showKeyboard }) => (
|
||||||
|
<List.Item key={item.id}>
|
||||||
|
<Link to={`/keyboards/${item.id}`}>
|
||||||
|
{item.maker} - {item.model}
|
||||||
|
</Link>
|
||||||
|
</List.Item>
|
||||||
|
);
|
||||||
|
|
||||||
|
const NoKeyboardsFound = ({ spinner }) => {
|
||||||
|
if (spinner) {
|
||||||
|
return <p>Loading...</p>;
|
||||||
|
}
|
||||||
|
return <p>There are no keyboards</p>;
|
||||||
|
};
|
||||||
|
|
||||||
|
class Keyboards extends React.Component {
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.getKeyboards();
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { keyboards, spinner, getKeyboards } = this.props;
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Title large>Keyboard List</Title>
|
||||||
|
<List items={keyboards} Item={KeyboardListItem} Empty={NoKeyboardsFound} itemProps={this.props} />
|
||||||
|
<Button onClick={() => getKeyboards({ force: true })}>Refresh</Button>
|
||||||
|
{spinner && <Spinner />}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const mapState = ({ keyboards, ui }) => ({
|
||||||
|
keyboards: keyboards.list,
|
||||||
|
spinner: ui.spinner
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapActions = {
|
||||||
|
getKeyboards,
|
||||||
|
showKeyboard
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapState,
|
||||||
|
mapActions
|
||||||
|
)(Keyboards);
|
||||||
Reference in New Issue
Block a user