46 |
47 |
53 |
54 |
55 | {!editing &&
{todoText}
}
56 | {editing && (
57 |
setTodoText(e.target.value)}
63 | >
64 | )}
65 |
66 |
67 |
73 |
79 |
85 |
86 |
4 |
5 | ## General Information
6 |
7 | This is a Todo Application that use Firebase API, React with TypeScript. The app can Add, Delete and Edit todo. Todo can be sorted by Complete or Active.
8 |
9 | Live: https://todo-app-16d97.web.app/
10 |
11 | ## Technologies
12 |
13 | - React
14 | - TypeScript
15 | - Fetch API
16 | - Firebase Realtime Data
17 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext, useEffect } from "react";
2 | import "./App.css";
3 | import TodoForm from "./components/TodoForm";
4 | import TodoList from "./components/TodoList";
5 | import TodoModel from "./models/todo";
6 | import { TodoContext } from "./store/store-todo";
7 |
8 | function App() {
9 | return (
10 | <>
11 |