introduce containers and core folders

.eslintrc.js

@@ -1,23 +1,24 @@
 module.exports = {
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-    sourceType: "module", // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
     ecmaFeatures: {
       jsx: true // Allows for the parsing of JSX
     }
   },
   settings: {
     react: {
-      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+      version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
     }
   },
   extends: [
-    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
-    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended' // Uses the recommended rules from @typescript-eslint/eslint-plugin
   ],
   rules: {
+    'react/prop-types': 0
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
-  },
-};
+  }
+};

src/Router.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import { Home } from './components/Home';
 import { About } from './components/About';
+import { Home } from './containers/Home';
 
 const Router: FC = () => (
   <Switch>

src/components/Home.tsx

@@ -1,8 +0,0 @@
-import React, { FC } from 'react';
-
-export const Home: FC = () => (
-  <div>
-    <h1>Hello</h1>
-    <p>Hi there!</p>
-  </div>
-);

src/components/TodoList.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import Todo from '../core/models/todo';
+
+interface Props {
+  todos: Todo[];
+}
+
+export const TodoList: FC<Props> = ({ todos }) => (
+  <div>
+    <h1>Your tasks</h1>
+    <p>Hi there!</p>
+    <ul>
+      {todos.map((todo) => (
+        <li key={todo.id}>
+          {todo.title}, status: {todo.isDone ? 'Done' : 'In Progress'}
+        </li>
+      ))}
+    </ul>
+  </div>
+);

src/containers/Home.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+import { listTodos } from '../core/services/todo';
+import { TodoList } from '../components/TodoList';
+
+export const Home: FC = () => {
+  const todos = listTodos();
+  return <TodoList todos={todos} />;
+};

src/core/models/todo.ts

@@ -0,0 +1,5 @@
+export default interface Todo {
+  id: string;
+  title: string;
+  isDone: boolean;
+}

src/core/services/todo.ts

@@ -0,0 +1,17 @@
+import Todo from '../models/todo';
+
+export const listTodos = (): Todo[] => {
+  console.log('create list');
+  return [
+    {
+      id: '1',
+      title: 'test',
+      isDone: false
+    },
+    {
+      id: '2',
+      title: 'second',
+      isDone: true
+    }
+  ];
+};