Skip to content

T
Todo-Storybook
Commit 9d1a0e79 by Madhankumar
Options

pages and routes

parent a6fa4852
Showing with 90 additions and 51 deletions
db.json
......@@ -2,13 +2,8 @@
"task": [
{
"title": "rhrhrhrytyty",
"isCompleted": true,
"id": 1
},
{
"title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyrt",
"isCompleted": false,
"id": 2
"id": 1
}
]
}
\ No newline at end of file
package-lock.json
......@@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"web-vitals": "^2.1.4"
......@@ -4649,6 +4650,14 @@
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@remix-run/router": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
"integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
......@@ -21607,6 +21616,36 @@
}
}
},
"node_modules/react-router": {
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
"integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
"dependencies": {
"@remix-run/router": "1.9.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
"integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
"dependencies": {
"@remix-run/router": "1.9.0",
"react-router": "6.16.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
package.json
......@@ -10,6 +10,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"web-vitals": "^2.1.4"
......
src/App.js
import { useEffect } from "react";
import "./App.css";
import Layout from "./components/base/layout";
import Form from "./components/top-level/form";
import Tasks from "./components/top-level/tasks";
import { useAppContext } from "./app-context/index";
function App() {
const { todo, addTodo, getTodos, deleteTodo, updateTodo } = useAppContext();
useEffect(() => {
getTodos();
}, []);
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Pages from "./pages/index";
function App() {
return (
<div className="App">
<Layout count={todo?.filter((e) => !e.isCompleted).length}>
{todo?.length > 0 ? (
<Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
) : (
<h3>No task</h3>
)}
<Form onSubmit={addTodo} />
</Layout>
<Router>
<Routes>
<Route path="/" element={<Pages />} />
</Routes>
</Router>
</div>
);
}
......
src/app-context/index.js
import React, { createContext, useContext, useState } from "react";
import * as api from "../lib/api";
import { setMessage } from "../message/toaster";
import { toast } from "react-toastify";
export const TodoContext = createContext();
export const useAppContext = () => useContext(TodoContext);
......@@ -14,7 +14,7 @@ export function TodoProvider({ children }) {
const response = await api.addTodo({ title, isCompleted: false });
setTodo([...todo, response]);
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
//UPDATE METHOD
......@@ -23,7 +23,7 @@ export function TodoProvider({ children }) {
const response = await api.updateTodo({ id, ...item });
setTodo(response);
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
......@@ -33,7 +33,7 @@ export function TodoProvider({ children }) {
const response = await api.getTodos();
setTodo(response);
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
......@@ -43,7 +43,7 @@ export function TodoProvider({ children }) {
const response = await api.deleteTodo(id);
setTodo(response);
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
......
src/components/top-level/task/index.js
......@@ -2,7 +2,7 @@ import { FaTimesCircle } from "react-icons/fa";
import Checkbox from "../../base/checkbox";
import "./task.css";
import { useEffect, useRef, useState, useCallback } from "react";
import { setMessage } from "../../../message/toaster";
import { toast } from "react-toastify";
function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
const [debouncetitle, setDebounceTitle] = useState(title);
......@@ -14,7 +14,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
const dialog = window.confirm("Do you want to delete?");
if (dialog) {
onDelete({ id });
setMessage("info", "Task deleted");
toast.info("Task deleted");
return true;
}
return false;
......@@ -24,8 +24,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
const handleChange = useCallback(() => {
setIsCheck(!ischeck);
onChange({ id, isCompleted: !ischeck });
setMessage(
"success",
toast.success(
`${!ischeck ? "Task completed" : "Task not completed"}`,
"success"
);
......@@ -51,7 +50,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
const handler = setTimeout(() => {
if (textarea_ref.current.value !== title) {
onChange({ id, title: debouncetitle });
setMessage("success", "Task updated");
toast.success("Task updated");
}
}, 2000);
......
src/index.js
......@@ -5,7 +5,7 @@ import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { TodoProvider } from "./app-context";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
......
src/lib/api.js
import { setMessage } from "../message/toaster";
import { toast } from "react-toastify";
const url = "http://192.168.1.91:5000/task";
//POST METHOD
......@@ -11,7 +11,7 @@ export async function addTodo({ title, isCompleted }) {
});
return await response.json();
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
//PATCH METHOD
......@@ -25,7 +25,7 @@ export async function updateTodo({ id, ...item }) {
const response = await getTodos();
return response;
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
......@@ -35,7 +35,7 @@ export async function getTodos() {
const response = await fetch(url);
return await response.json();
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
......@@ -48,6 +48,6 @@ export async function deleteTodo(id) {
const response = await getTodos();
return response;
} catch (err) {
setMessage("error", err.message);
toast.error(err.message);
}
}
src/message/toaster.js deleted 100644 → 0
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export function setMessage(type, message) {
let toaster = {
success: () => toast.success(message),
info: () => toast.info(message),
error: () => toast.error(message),
};
return toaster[type]();
}
src/pages/index.js 0 → 100644
import React from "react";
import Layout from "../components/base/layout";
import Form from "../components/top-level/form";
import Tasks from "../components/top-level/tasks";
import { useAppContext } from "../app-context/index";
import { useEffect } from "react";
export default function Pages() {
const { todo, addTodo, getTodos, deleteTodo, updateTodo } = useAppContext();
useEffect(() => {
getTodos();
}, []);
return (
<div>
<Layout count={todo?.filter((e) => !e.isCompleted).length}>
{todo?.length > 0 ? (
<Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
) : (
<h3>No task</h3>
)}
<Form onSubmit={addTodo} />
</Layout>
</div>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment