feat: readme & input clear after add todo

README.md

@@ -1,59 +1,13 @@
-This project was bootstrapped with
+# React todo app
-[Create React App](https://github.com/facebook/create-react-app).
 
-## Available Scripts
+#### Simple todo application using mobx state manager
 
-In the project directory, you can run:
+#### 📷 Screenshot:
 
-### `yarn start`
+![React todo app](https://i.imgur.com/t626C4i.png)
 
-Runs the app in the development mode.<br /> Open
+#### 🛠 Tools:
-[http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br /> You will also see any lint errors
+- React.js
-in the console.
+- MobX
-
+- ChakraUI
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.<br /> See the section
-about
-[running tests](https://facebook.github.io/create-react-app/docs/running-tests)
-for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.<br /> It correctly bundles
-React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br /> Your app is
-ready to be deployed!
-
-See the section about
-[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
-more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can
-`eject` at any time. This command will remove the single build dependency from
-your project.
-
-Instead, it will copy all the configuration files and the transitive
-dependencies (webpack, Babel, ESLint, etc) right into your project so you have
-full control over them. All of the commands except `eject` will still work, but
-they will point to the copied scripts so you can tweak them. At this point
-you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for
-small and middle deployments, and you shouldn’t feel obligated to use this
-feature. However we understand that this tool wouldn’t be useful if you couldn’t
-customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the
-[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

src/App.tsx

@@ -11,7 +11,7 @@ import TodoList from './components/TodoList';
 export const App = () => {
   return (
     <ChakraProvider theme={theme}>
-      <Box maxW='800px' mt='5' mr='auto' ml='auto'>
+      <Box maxW='800px' mt='5' mr='auto' ml='auto' p='10'>
         <TodoHeader />
         <TodoInput />
         <TodoList />

src/components/TodoInput.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useStores } from '../hooks/useStores';
 
 const TodoInput: React.FC = () => {
-  const [formState, setformState] = React.useState<{ title: string }>({
+  const [formState, setFormState] = React.useState<{ title: string }>({
     title: '',
   });
   const { todoStore } = useStores();
@@ -13,12 +13,15 @@ const TodoInput: React.FC = () => {
       <form
         onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
           e.preventDefault();
+
           todoStore.createTodo({
             id: todoStore.todos.length + 1,
             title: formState.title,
             createdAt: new Date(),
             updatedAt: new Date(),
           });
+
+          setFormState({ title: '' });
         }}>
         <FormControl>
           <Flex>
@@ -27,7 +30,7 @@ const TodoInput: React.FC = () => {
               size='md'
               mr='2'
               value={formState.title}
-              onChange={(e) => setformState({ title: e.target.value })}
+              onChange={(e) => setFormState({ title: e.target.value })}
               isRequired
             />
             <Button type='submit' size='md'>