From eb19b675dae11f11b85aaf936632e7514f756657 Mon Sep 17 00:00:00 2001
From: Bart Riemens <briemens@crafity.com>
Date: Tue, 27 Aug 2019 11:39:38 +0200
Subject: [PATCH] Add README and fixed case sensitivity issue

---
 README.md                   | 12 +++++++++
 src/containers/Keyboards.js | 54 +++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 README.md
 create mode 100644 src/containers/Keyboards.js

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9f7951f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+# Crafity Snake
+
+## Todo
+
+[ ] Create welcome / instructions page  
+[ ] Link to repository  
+[ ] Convert components to use react hooks  
+[ ] Add license
+
+## License
+
+TODO
diff --git a/src/containers/Keyboards.js b/src/containers/Keyboards.js
new file mode 100644
index 0000000..acc5798
--- /dev/null
+++ b/src/containers/Keyboards.js
@@ -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);