Feature/atomic components

package.json

@@ -32,7 +32,9 @@
     "typescript": "^3.5.1"
   },
   "dependencies": {
+    "@material-ui/core": "^4.0.2",
     "connected-react-router": "^6.4.0",
+    "formik": "^1.5.7",
     "history": "^4.9.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/App.tsx

@@ -4,17 +4,14 @@ import { Provider } from "react-redux";
 import { ConnectedRouter } from "connected-react-router";
 import { AppShell } from "./AppShell";
 import { browserHistory, store } from "./store";
+import { Index } from "./pages";
 
 export const App = () => (
   <Provider store={store}>
     <AppShell>
       <ConnectedRouter history={browserHistory}>
         <Switch>
-          <Route
-            exact
-            path="/"
-            render={() => <div>Atomic Design with Redux</div>}
-          />
+          <Route exact path="/" render={() => <Index />} />
           <Route render={() => <div>Miss</div>} />
         </Switch>
       </ConnectedRouter>

src/AppShell.tsx

@@ -1,5 +1,12 @@
 import * as React from "react";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
 
 export const AppShell: React.FC = props => {
-  return <div>{props.children}</div>;
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container maxWidth="sm">{props.children}</Container>
+    </React.Fragment>
+  );
 };

src/components/atoms/form/SubmitButtonComponent.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Button from '@material-ui/core/Button';
+
+export const SubmitButtonComponent: React.FC = ({ children, ...props}) => {
+  return (
+    <Button variant="contained" color="primary" {...props}>
+      {children}
+    </Button>
+  );
+};

src/components/atoms/form/TextInputComponent.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { FieldProps } from "formik";
+import TextField from '@material-ui/core/TextField';
+
+export const TextInputComponent: React.FC<FieldProps> = ({ field, form, ...props }) => {
+  return (
+    <TextField
+      {...field}
+      {...props}
+      label={props.placeholder}
+      style={{ width: '100%' }}
+    />
+  );
+};

src/components/organisms/TodoFormComponent.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Box from '@material-ui/core/Box';
+import { Formik, Field, Form } from "formik";
+import { TodoFormProps } from "../../containers/TodoFormContainer";
+import { TextInputComponent } from "../atoms/form/TextInputComponent";
+import { SubmitButtonComponent as SubmitButton } from "../atoms/form/SubmitButtonComponent";
+
+type TodoFormValues = {
+  description: string;
+};
+
+export const TodoFormComponent: React.FC<TodoFormProps> = props => {
+  return (
+    <Formik
+      initialValues={{ description: "" }}
+      onSubmit={(value: TodoFormValues, actions) => {
+        props.actions.addTodo({
+          id: props.newId,
+          description: value.description
+        });
+        actions.setSubmitting(false);
+        actions.resetForm();
+      }}
+      render={({ isSubmitting }) => (
+        <Form>
+          <Box display="flex">
+            <Field type="text" name="description" component={TextInputComponent} placeholder="Todo Description"/>
+            <SubmitButton type="submit" disabled={isSubmitting}>
+              Add
+            </SubmitButton>
+          </Box>
+        </Form>
+      )}
+    />
+  );
+};

src/components/organisms/TodoListComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { TodoListProps } from "../../containers/TodoListContainer";
+import { Todo } from "../../store/todos/entity";
+
+export const TodoListComponent: React.FC<TodoListProps> = props => {
+  const todos = props.todos;
+  const listItems = todos.map((todo: Todo) =>
+    <ListItem component="div" disableGutters={true}>
+      <ListItemText primary={todo.description}/>
+    </ListItem>
+  );
+  return (
+    <List component="div">
+      {listItems}
+    </List>
+  );
+};

src/containers/TodoFormContainer.tsx

@@ -0,0 +1,23 @@
+import { bindActionCreators, Dispatch } from "redux";
+import { connect } from "react-redux";
+import { InitialState } from "../store";
+import { addTodo } from "../store/todos/actions";
+import { TodoFormComponent } from "../components/organisms/TodoFormComponent";
+
+const mapStateToProps = (state: InitialState) => {
+  return {
+    todos: state.todos,
+    newId: state.todos.length + 1
+  }
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return { actions: bindActionCreators({ addTodo }, dispatch) }
+};
+
+export type TodoFormProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+
+export const TodoForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoFormComponent);

src/containers/TodoListContainer.tsx

@@ -0,0 +1,18 @@
+import { connect } from "react-redux";
+import { InitialState } from "../store";
+import { TodoListComponent } from "../components/organisms/TodoListComponent";
+
+const mapStateToProps = (state: InitialState) => {
+  return {
+    todos: state.todos
+  }
+};
+
+const mapDispatchToProps = () => ({});
+
+export type TodoListProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+
+export const TodoList = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoListComponent);

src/pages/index.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { TodoList } from "../containers/TodoListContainer";
+import { TodoForm } from "../containers/TodoFormContainer";
+
+export const Index: React.FC = () => {
+  return (
+    <div>
+      <TodoList/>
+      <TodoForm/>
+    </div>
+  )
+};

src/static/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="manifest.webmanifest" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
     <title>React App</title>
 </head>
 <body>