Change task background

src/App.js

@@ -1,25 +1,15 @@
-import logo from './logo.svg';
-import './App.css';
+import { Provider } from 'react-redux';
+import store from './lib/redux';
+
+import InboxScreen from './components/InboxScreen';
+
+import './index.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <InboxScreen />
+    </Provider>
   );
 }
-
 export default App;

src/components/InboxScreen.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { connect } from 'react-redux';
+
+import TaskList from './TaskList';
+
+export function PureInboxScreen({ error }) {
+  if (error) {
+    return (
+      <div className="page lists-show">
+        <div className="wrapper-message">
+          <span className="icon-face-sad" />
+          <div className="title-message">Oh no!</div>
+          <div className="subtitle-message">Something went wrong</div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="page lists-show">
+      <nav>
+        <h1 className="title-page">
+          <span className="title-wrapper">Taskbox</span>
+        </h1>
+      </nav>
+      <TaskList />
+    </div>
+  );
+}
+
+PureInboxScreen.propTypes = {
+  /** The error message */
+  error: PropTypes.string,
+};
+
+PureInboxScreen.defaultProps = {
+  error: null,
+};
+
+export default connect(({ error }) => ({ error }))(PureInboxScreen);

src/components/InboxScreen.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { PureInboxScreen } from './InboxScreen';
+import { action } from '@storybook/addon-actions';
+import * as TaskListStories from './TaskList.stories';
+
+// A super-simple mock of a redux store
+const store = {
+  getState: () => {
+   return {
+     tasks: TaskListStories.Default.args.tasks,
+   };
+  },
+  subscribe: () => 0,
+  dispatch: action('dispatch'),
+};
+
+
+export default {
+  component: PureInboxScreen,
+  decorators: [story => <Provider store={store}>{story()}</Provider>],
+  title: 'InboxScreen',
+};
+
+const Template = args => <PureInboxScreen {...args} />;
+
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+Error.args = {
+  error: 'Something',
+};

src/components/Task.js

@@ -14,6 +14,13 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
         <span className="checkbox-custom" onClick={() => onArchiveTask(id)} />
       </label>
       <div className="title">
+        <input
+            type="text"
+            value={title}
+            readOnly={true}
+            placeholder="Input title"
+            style={{ background: 'red' }}
+        />
         <input type="text" value={title} readOnly={true} placeholder="Input title" />
       </div>