rachetm · rachetm · Feb 5, 2020 · Feb 5, 2020 · Feb 5, 2020 · Feb 5, 2020
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,9 @@ dist
 
 # TernJS port file
 .tern-port
+
+.vscode
+
+.eslintrc.json
+
+package-lock.json
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # todo-react
-A simple todo app written in React
+A simple todo app written in React with Redux
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "todo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^7.2.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-scripts": "3.4.0",
+    "redux": "^4.0.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.18.0"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <script src="https://kit.fontawesome.com/07ffa00fcf.js" crossorigin="anonymous"></script>
+    <title>Todo App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/actions/actions.js b/src/actions/actions.js
@@ -0,0 +1,29 @@
+const addTodo = content => {
+    return {
+        type: "ADD_TODO",
+        content: content
+        }
+}
+
+const removeTodo = id => {
+    return {
+        type: "REMOVE_TODO",
+        id: id
+    }
+}
+
+const mark_checked = id => {
+    return {
+        type: "MARK_CHECKED",
+        id: id
+    }
+}
+
+const searchTodo = keyword => {
+    return {
+        type: "SEARCH",
+        keyword
+    }
+}
+
+export {addTodo, mark_checked, removeTodo, searchTodo}
diff --git a/src/components/Add.js b/src/components/Add.js
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { addTodo } from "../actions/actions";
+import { Grid } from "@material-ui/core";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import PropTypes from "prop-types";
+import PlusIcon from "@material-ui/icons/AddRounded";
+
+function Add(props) {
+  const [value, setValue] = useState("");
+
+  function onKeyDown(e) {
+    if (e.keyCode === 13 && !/^\s*$/.test(e.target.value)) {
+      props.addTodo(e.target.value);
+      setValue("");
+    }
+  }
+
+  function onClick() {
+    if (!/^\s*$/.test(value)) {
+      props.addTodo(value);
+      setValue("");
+    }
+  }
+
+  return (
+    <Grid container spacing={2} justify="center" alignItems="flex-end">
+      <Grid item>
+        <TextField
+          id="add-todo-field"
+          label="Add an item"
+          className="add-todo"
+          onKeyDown={e => onKeyDown(e)}
+          onChange={e => {
+            setValue(e.target.value);
+          }}
+          value={value}
+          autoFocus={true}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PlusIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </Grid>
+      <Grid item>
+        <Button variant="contained" id="addBtn" onClick={onClick}>
+          Add
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addTodo: id => dispatch(addTodo(id))
+  };
+};
+
+Add.propTypes = {
+  addTodo: PropTypes.func
+};
+
+export default connect(null, mapDispatchToProps)(Add);
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,58 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Add from "./Add";
+import Items from "./Items/items";
+import Search from "./Search";
+import Counter from "./Counter";
+import PropTypes from "prop-types";
+class App extends React.Component {
+  render() {
+    return (
+      <>
+        <Grid container direction="column">
+          <Typography variant="h1" gutterBottom className="title">
+            Todo
+          </Typography>
+          <Grid container style={{ flex: "1", flexWrap: "nowrap" }}>
+            <Grid
+              container
+              item
+              sm={6}
+              direction="column"
+              style={{ flex: "1" }}
+            >
+              <Add />
+              <Counter />
+            </Grid>
+            <Grid container item sm={6} direction="column" alignItems="center">
+              <Search />
+              <Grid
+                container
+                item
+                direction="column"
+                spacing={2}
+                sm={10}
+                style={{
+                  marginTop: "5%",
+                  overflow: "auto",
+                  flexWrap: "nowrap",
+                  flex: "1 1 1px",
+                  marginBottom: "20px"
+                }}
+              >
+                <Items />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+}
+
+App.propTypes = {
+  title: PropTypes.string
+};
+
+export default App;
diff --git a/src/components/Counter.js b/src/components/Counter.js
@@ -0,0 +1,93 @@
+import React from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+function Counter(props) {
+  const { totalCount, doneCount, notDoneCount } = props;
+  return (
+    <>
+      <Grid
+        container
+        spacing={2}
+        alignItems="center"
+        justify="center"
+        style={{ marginTop: "10%" }}
+        direction="column"
+      >
+        <Grid
+          container
+          item
+          spacing={2}
+          alignItems="baseline"
+          justify="space-between"
+          sm={3}
+        >
+          <Grid item>
+            <Typography variant="h2">
+              {totalCount > 9 ? totalCount : "0" + totalCount}
+            </Typography>
+          </Grid>
+          <Grid container style={{ flex: 1, marginLeft: "4px" }} item>
+            <Typography variant="h5">
+              Todo{totalCount > 1 || totalCount === 0 ? "s" : ""}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid
+          container
+          item
+          spacing={2}
+          alignItems="baseline"
+          justify="space-between"
+          sm={3}
+        >
+          <Grid item>
+            <Typography variant="h2">
+              {doneCount > 9 ? doneCount : "0" + doneCount}
+            </Typography>
+          </Grid>
+          <Grid container style={{ flex: 1, marginLeft: "4px" }} item>
+            <Typography variant="h5">Done</Typography>
+          </Grid>
+        </Grid>
+        <Grid
+          container
+          item
+          spacing={2}
+          alignItems="baseline"
+          justify="space-between"
+          sm={3}
+        >
+          <Grid item>
+            <Typography variant="h2">
+              {notDoneCount > 9 ? notDoneCount : "0" + notDoneCount}
+            </Typography>
+          </Grid>
+          <Grid container style={{ flex: 1, marginLeft: "4px" }} item>
+            <Typography variant="h5">Not Done</Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+const mapStateToProps = state => {
+  let totalCount = state.items ? state.items.length : 0,
+    doneCount = 0,
+    notDoneCount = 0;
+  if (state.items)
+    state.items.forEach(item => {
+      item.checked === true ? doneCount++ : notDoneCount++;
+    });
+  return { totalCount, doneCount, notDoneCount };
+};
+
+Counter.propTypes = {
+  totalCount: PropTypes.number,
+  doneCount: PropTypes.number,
+  notDoneCount: PropTypes.number
+};
+
+export default connect(mapStateToProps, null)(Counter);