Skip to content

T
Todo-Storybook
Commit 5e6e38c9 by Madhankumar
Options

code optimization

parent 35b98601
Showing with 235 additions and 348 deletions
todo-storybook/db.json
{ {
"task": [ "task": [
{ {
"title": "go to office", "title": "swsws",
"checked": false, "isCompleted": false,
"id": 4 "id": 1
}, },
{ {
"title": "meeting in office", "title": "sddd",
"checked": true, "isCompleted": false,
"id": 5 "id": 2
} }
] ]
} }
\ No newline at end of file
todo-storybook/src/App.js
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import "./App.css"; import "./App.css";
import Layout from "./Components/Base/Layout"; import Layout from "./components/base/layout";
import Tasks from "./Components/TopLevel/Tasks"; import Form from "./components/top-level/form";
import Form from "./Todo/Form"; import Tasks from "./components/top-level/tasks";
function App() { function App() {
const [task, setTask] = useState([]); const [task, setTask] = useState([]);
...@@ -26,30 +26,27 @@ function App() { ...@@ -26,30 +26,27 @@ function App() {
const response = await tasktracker.json(); const response = await tasktracker.json();
return response; return response;
}; };
const remainder = async (datas) => { const remainder = async (id) => {
const toogle = await getTaskById(datas.id); const toogle = await getTaskById(id);
const result = { ...toogle, checked: !toogle.checked }; const result = { ...toogle, isCompleted: !toogle.isCompleted };
const res = await fetch(`http://192.168.1.91:5000/task/${datas.id}`, { const res = await fetch(`http://192.168.1.91:5000/task/${id}`, {
method: "PUT", method: "PUT",
headers: { "Content-type": "application/json" }, headers: { "Content-type": "application/json" },
body: JSON.stringify(result), body: JSON.stringify(result),
}); });
const data = await res.json(); const data = await res.json();
setTask( setTask(
task.map((e) => (e.id === data.id ? { ...e, checked: data.checked } : e)) task.map((e) =>
e.id === data.id ? { ...e, isCompleted: data.isCompleted } : e
)
); );
}; };
const deleteTask = async (data) => { const deleteTask = async (id) => {
var result = window.confirm("Want to delete?"); await fetch(`http://192.168.1.91:5000/task/${id}`, {
if (result) {
//Logic to delete the item
await fetch(`http://192.168.1.91:5000/task/${data.id}`, {
method: "DELETE", method: "DELETE",
}); });
setTask(task.filter((e) => e.id !== data.id)); setTask(task.filter((e) => e.id !== id));
}
}; };
useEffect(() => { useEffect(() => {
getTask(); getTask();
...@@ -57,15 +54,13 @@ function App() { ...@@ -57,15 +54,13 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<Layout count={task.filter((e) => !e.checked).length}> <Layout count={task.filter((e) => !e.isCompleted).length}>
{task.length > 0 && ( {task.length > 0 ? (
<Tasks <Tasks tasklist={task} remainder={remainder} deleted={deleteTask} />
tasksData={task} ) : (
handleClick={remainder} <h3>No task</h3>
handleCloses={deleteTask}
/>
)} )}
<Form bottom={true} addtask={addTask} /> <Form onSubmit={addTask} />
</Layout> </Layout>
</div> </div>
); );
......
todo-storybook/src/Components/Base/Button/button.css
.btn{ button {
font-size: 18px;
font-size:18px; outline: none;
outline:none; color: black;
color:black;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
} background-color: white;
.btn-sm{
padding: 14px 18px; padding: 14px 18px;
} }
.btn-md {
padding: 16px 20px;
}
.btn-lg {
padding: 18px 25px;
}
todo-storybook/src/Components/Base/Button/button.stories.js 0 → 100644
import Button from ".";
export default {
title: "Base/Button",
component: Button,
argTypes: { onClick: { action: "Clicked" } },
};
export const button = {
args: {
children: "Submit",
},
};
todo-storybook/src/Components/Base/Button/index.js
import React from "react"; import "./button.css";
import PropTypes from "prop-types";
import "../Button/button.css";
function Button({ label, backgroundColor, handleClick, size }) { function Button({ children, ...props }) {
const style = { return <button {...props}>{children}</button>;
backgroundColor,
};
return (
<div>
<button className={`btn btn-${size}`} style={style} onClick={handleClick}>
{label}
</button>
</div>
);
} }
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
handleClick: PropTypes.func,
};
Button.defaultProps = {
label: "Submit",
backgroundColor: "white",
};
export default Button; export default Button;
todo-storybook/src/Components/Base/Checkbox/checkbox.css
...@@ -4,12 +4,7 @@ input[type="checkbox"]{ ...@@ -4,12 +4,7 @@ input[type="checkbox"]{
cursor: pointer; cursor: pointer;
} }
label{ .checkbox-bg{
position: absolute;
top: 2.2em;
user-select: none;
}
.chk-bg{
padding: 1rem;
background: white; background: white;
} }
todo-storybook/src/Components/Base/Checkbox/checkbox.stories.js 0 → 100644
import Checkbox from ".";
export default {
title: "Base/Checkbox",
component: Checkbox,
argTypes: { onChange: { action: "checked" } },
};
export const checkbox = {
isCompleted: false,
};
// const Template = (args) => <Checkbox {...args} />;
// export const checkbox = Template.bind({});
// checkbox.args = {
// checked: false,
// };
todo-storybook/src/Components/Base/Checkbox/index.js
import React from "react"; import "./checkbox.css";
import "../Checkbox/checkbox.css";
function Checkbox({ handleClick, ...args }) { function Checkbox({ ...props }) {
const handleChange = () => {
args.checked = !args.checked;
let val = args.checked;
console.log(val);
//args.checked = !args.checked;
const result = val ? "checked" : "unChecked";
// console.log(result);
handleClick(result);
};
return ( return (
<div className="chk-bg"> <div className="checkbox-bg">
<input <input type="checkbox" name="checkbox" {...props} />
className="chkBox"
type="checkbox"
name="checkbox"
{...args}
onChange={handleChange}
/>
</div> </div>
); );
} }
......
todo-storybook/src/Components/Base/Input/index.js
import React from "react"; import "./input.css";
import "../Input/input.css";
function Input({ changeInput, inputValue }) { function Input({ ...props }) {
const handleChange = (e) => {
e.preventDefault();
changeInput(e.target.value);
};
return ( return (
<> <input type="text" required placeholder="Enter Item" {...props}></input>
<input
type="text"
required
placeholder="Enter Item"
value={inputValue}
onChange={handleChange}
></input>
</>
); );
} }
......
todo-storybook/src/stories/input.stories.js → todo-storybook/src/Components/Base/Input/input.stories.js
import Input from "../Components/Base/Input"; import Input from ".";
export default { export default {
title: "Base/Input", title: "Base/Input",
component: Input, component: Input,
}; };
export const input = {};
const Template = (args) => <Input {...args} />;
export const input = Template.bind({});
input.args = {
changeInput: () => {},
};
todo-storybook/src/Components/Base/Layout/index.js
import "../Layout/layout.css"; import "./layout.css";
function Layout({ count, ...props }) { function Layout({ count, ...props }) {
console.log(props);
return ( return (
<div className="container"> <div className="container">
<h2 className="header">You have {count || 0} Todos</h2> <h2>
<div class="inner-section" {...props}></div> You have {count} {count > 1 ? "Todos" : "Todo"}
</h2>
{/* inner section that contain (tasklist and forms) */}
<div {...props}></div>
</div> </div>
); );
} }
......
todo-storybook/src/Components/Base/Layout/layout.css
.container { .container {
height: 300px;
min-height: 50vh; min-height: 50vh;
width: min(100dvw - 5rem); width: min(100dvw - 5rem);
margin-inline: auto; margin-inline: auto;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
...@@ -9,7 +8,7 @@ width: min(100dvw - 5rem); ...@@ -9,7 +8,7 @@ width: min(100dvw - 5rem);
position: relative; position: relative;
} }
.header { .container h2 {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border: 1px solid #ccc; border: 1px solid #ccc;
text-align: center; text-align: center;
...@@ -18,9 +17,13 @@ width: min(100dvw - 5rem); ...@@ -18,9 +17,13 @@ width: min(100dvw - 5rem);
font-weight: 800px; font-weight: 800px;
background: white; background: white;
} }
h3 {
@media screen and (min-width:1024px) { margin-left: 1rem;
height: 200px;
text-align: center;
}
@media screen and (min-width: 1024px) {
.container { .container {
width: 40dvw width: 40dvw;
} }
} }
todo-storybook/src/Components/Base/Layout/layout.stories.js 0 → 100644
import Layout from ".";
export default {
title: "Base/Layout",
component: Layout,
};
export const layout = {
args: {
count: 0,
},
};
todo-storybook/src/Components/TopLevel/Task/index.js deleted 100644 → 0
import React from "react";
import { FaTimesCircle } from "react-icons/fa";
import CheckBox from "../../Base/Checkbox";
import "./task.css";
function Task({ handleClose, handleClicks, task }) {
return (
<>
<div className="task-section">
<div className="task">
<div className="task-title">
<CheckBox handleClick={handleClicks} checked={task.checked} />
<p className={`${task.checked ? "strike-through" : ""}`}>
{task.title}
</p>
</div>
<div className="task-close">
<FaTimesCircle className="fa-close" onClick={handleClose} />
</div>
</div>
</div>
</>
);
}
export default Task;
todo-storybook/src/Components/TopLevel/Tasks/index.js deleted 100644 → 0
import React from "react";
import "./tasks.css";
import Task from "../../TopLevel/Task";
function Tasks({ handleClick, tasksData, handleCloses }) {
return (
<>
<div className="tasklist">
{tasksData.length > 0
? tasksData.map((tasks) => (
<Task
task={tasks}
handleClicks={() => handleClick(tasks)}
handleClose={() => handleCloses(tasks)}
/>
// <div className="tasks">
// <div className="task-section">
// <div className="task">
// <CheckBox handleClick={handleClicks} />
// <p>{e.title} </p>
// </div>
// <FaTimes
// className="fa-close"
// style={{ color: "red" }}
// onClick={handleClose}
// />
// </div>
// </div>
))
: "No task"}
</div>
</>
);
}
export default Tasks;
todo-storybook/src/Components/top-level/form/form.css 0 → 100644
.form-section {
width: calc(100% - 2.5rem);
padding: 1rem;
background: white;
}
.form-section form {
display: flex;
align-items: center;
gap: 1rem;
}
todo-storybook/src/Components/top-level/form/form.stories.js 0 → 100644
import Form from ".";
export default {
title: "Top-Level/Form",
component: Form,
argTypes: { onSubmit: { action: "Submit" } },
};
export const form = {};
// const Template = (args) => <Form {...args} />;
// export const form = Template.bind({});
// form.args = {};
todo-storybook/src/Components/top-level/form/index.js 0 → 100644
import { useState } from "react";
import Button from "../../base/button";
import Input from "../../base/input";
import "./form.css";
function Form({ onSubmit }) {
const [title, setTitle] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
onSubmit({ title, isCompleted: false });
setTitle("");
};
return (
<div className="form-section">
<form onSubmit={handleSubmit}>
<Input
required
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<Button>Submits</Button>
</form>
</div>
);
}
export default Form;
todo-storybook/src/Components/top-level/task/index.js 0 → 100644
import { FaTimesCircle } from "react-icons/fa";
import Checkbox from "../../base/checkbox";
import "./task.css";
function Task({ title, isCompleted, onDelete, onChange }) {
const handleDelete = () => {
const dialog = window.confirm("Do you want to delete?");
if (dialog) {
onDelete();
return true;
}
return false;
};
const handleChange = (e) => {
e.preventDefault();
onChange();
};
return (
<div className="task-section">
<Checkbox onChange={handleChange} checked={isCompleted} />
<p className={`${isCompleted ? "strike-through" : ""}`}>{title}</p>
<FaTimesCircle className="fa-close" onClick={handleDelete} />
</div>
);
}
export default Task;
todo-storybook/src/Components/TopLevel/Task/task.css → todo-storybook/src/Components/top-level/task/task.css
.task-section { .task-section {
background: white;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
clip-path: inset(0 -100vmax);
}
.task-section .task,
.task-title {
display: flex; display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.2rem 0.8rem;
align-items: center; align-items: center;
padding: 0.5rem 0.8rem;
justify-content: space-between;
background: white;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
clip-path: inset(0 -100vmax);
} }
.fa-close{
color:#ccc;
font-size:25px
}
.task-section .task,
.task-title>p{
color:#9e9b9b;
:nth-child(2) {
flex: 1;
}
.fa-close {
color: #ccc;
font-size: 25px;
}
p {
color: #9e9b9b;
} }
.strike-through{ .strike-through {
text-decoration: line-through; text-decoration: line-through;
} }
todo-storybook/src/Components/top-level/task/task.stories.js 0 → 100644
import Task from ".";
export default {
title: "Top-Level/Task",
component: Task,
argTypes: {
onDelete: { action: "Deleted" },
onChange: { action: "checked" },
},
};
export const task = {
args: {
title: "Test Task",
isCompleted: false,
},
};
todo-storybook/src/Components/top-level/tasks/index.js 0 → 100644
import "./tasks.css";
import Task from "../task";
function Tasks({ tasklist, deleted, remainder }) {
return (
<div className="tasklist">
{tasklist.length > 0 &&
tasklist.map(({ id, title, isCompleted }) => (
<Task
key={id}
id={id}
title={title}
isCompleted={isCompleted}
onChange={() => remainder(id)}
onDelete={() => deleted(id)}
/>
))}
</div>
);
}
export default Tasks;
todo-storybook/src/Todo/Form/form.css deleted 100644 → 0
.form-container{
display: flex;
gap:1rem;
width: calc(100% - 2.5rem);
padding: 1rem;
}
.form-container form{
flex:1;
overflow: auto;
}
.form-bottom{
position:absolute;
bottom: 0;
}
\ No newline at end of file
todo-storybook/src/Todo/Form/index.js deleted 100644 → 0
import React, { useState } from "react";
import Button from "../../Components/Base/Button";
import Input from "../../Components/Base/Input";
import "../Form/form.css";
function Form({ addtask, bottom }) {
const [input, setInput] = useState("");
const submitdata = (e) => {
e.preventDefault();
setInput("");
addtask({ title: input, checked: false });
};
const handleInput = (e) => {
setInput(e);
};
return (
<>
<form onSubmit={submitdata}>
<div className={`form-container ${bottom ? "form-bottom" : ""}`}>
<Input
required={true}
changeInput={(e) => handleInput(e)}
inputValue={input}
/>
<Button size={"md"} />
</div>
</form>
</>
);
}
export default Form;
todo-storybook/src/db.json deleted 100644 → 0
{
"task":[
]
}
\ No newline at end of file
todo-storybook/src/stories/button.stories.js deleted 100644 → 0
import Button from "../Components/Base/Button";
export default {
title: "Base/Button",
component: Button,
argTypes: { handleClick: { action: "Clicked" } },
};
const Template = (args) => <Button {...args} />;
export const button = Template.bind({});
button.args = {
label: "Submit",
backgroundColor: "white",
size: "sm",
};
todo-storybook/src/stories/checkbox.stories.js deleted 100644 → 0
import Checkbox from "../Components/Base/Checkbox";
export default {
title: "Base/Checkbox",
component: Checkbox,
argTypes: { handleClick: { action: "clicked" } },
};
const Template = (args) => <Checkbox {...args} />;
export const checkbox = Template.bind({});
checkbox.args = {
checked: false,
};
todo-storybook/src/stories/form.stories.js deleted 100644 → 0
import Form from "../Todo/Form";
export default {
title: "Form",
component: Form,
argTypes: { handleSubmit: { action: "Submit" } },
};
const Template = (args) => <Form {...args} />;
export const form = Template.bind({});
form.args = {};
todo-storybook/src/stories/layout.stories.js deleted 100644 → 0
import Layout from "../Components/Base/Layout";
export default {
title: "Base/Layout",
component: Layout,
};
const Template = (args) => <Layout {...args} />;
export const layout = Template.bind({});
layout.args = {};
todo-storybook/src/stories/task.stories.js deleted 100644 → 0
import Task from "../Components/TopLevel/Task";
export default {
title: "TopLevel/Task",
component: Task,
argTypes: {
handleClose: { action: "Deleted" },
handleClicks: { action: "checked" },
},
};
const taskData = {
id: "1",
title: "Test Task",
checked: false,
};
const Template = (args) => <Task task={{ ...taskData }} {...args} />;
export const task = Template.bind({});
task.args = {};
todo-storybook/src/stories/tasks.stories.js deleted 100644 → 0
import Tasks from "../Components/TopLevel/Tasks";
import { taskData } from "../Components/TopLevel/Task";
export default {
title: "TopLevel/Tasks",
component: Tasks,
argTypes: {
handleCloses: { action: "Deleted" },
handleClick: { action: "checked" },
},
};
const defaultTasksData = [
{ ...taskData, id: "1", title: "Task 1", checked: false },
{ ...taskData, id: "2", title: "Task 2", checked: true },
{ ...taskData, id: "3", title: "Task 3", checked: true },
];
const Template = (args) => <Tasks tasksData={defaultTasksData} {...args} />;
export const tasks = Template.bind({});
tasks.args = {};
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