Skip to content

T
TodoList
Commit 98c2977c by Sakilesh J
Options

fix the changes

parent 7cd34a85
Showing with 122 additions and 224 deletions
Types/todoTypes.ts 0 → 100644
export interface TodoListItems {
id: number;
task: string;
isCompleted: boolean;
}
export interface ItemMethods {
onDelete: (id: number) => void;
updateTask: (id: number, task: string, isCompleted: boolean) => void;
}
\ No newline at end of file
components/Top-Level/Form/FormComponent.tsx
......@@ -6,35 +6,35 @@ import styles from "./form.module.css"
interface FormProps {
handleSubmit: (data: any) => Promise<void>;
onPost: (input: string) => void;
}
const FormComponent: React.FC<FormProps> = ({ handleSubmit }) => {
const FormComponent: React.FC<FormProps> = ({ onPost }) => {
const [input, setinput] = useState('')
const [isError, setisError] = useState(false)
const onSubmit = (e: React.SyntheticEvent) => {
const handleSubmit = (e: React.SyntheticEvent) => {
e.preventDefault();
console.log(e)
if (input === '') {
setisError(true)
return
}
handleSubmit(input)
onPost(input)
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setinput(e.target.value)
if (isError) {
setisError(false)
}
}
return (
<form className={styles.form} onSubmit={onSubmit}>
<div className={styles.iwrapper}>
<form className={styles.form} onSubmit={handleSubmit}>
<div className={styles.inputWrapper}>
<Input placeholder="Enter Item..."
onChange={handleChange} ErrorMessage={isError ? "Enter the Field" : undefined} />
</div>
<div className={styles.bwrapper}>
<div className={styles.buttonWrapper}>
<Button size="sm" >
Submit
</Button>
......
components/Top-Level/Form/form.module.css
.form {
display: flex;
padding: 20px;
padding: 17px;
width: 100%;
flex-wrap: wrap;
gap: 15px;
background-color: white;
}
.iwrapper {
.inputWrapper {
min-width: 80%;
max-height: 50px;
max-height: min-content;
flex: 1;
}
.iwrapper>input {
.inputWrapper>input {
width: 100%;
}
.bwrapper>button {
.buttonWrapper>button {
min-width: 100%;
}
.bwrapper {
.buttonWrapper {
min-width: auto;
flex: 1;
}
\ No newline at end of file
components/Top-Level/Form/form.stories.tsx
......@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
import FormComponent from "./FormComponent";
import { fn } from "@storybook/test";
const meta: Meta<typeof FormComponent> = {
title: "Top-Level/Form",
title: "Top-Level",
component: FormComponent,
}
......@@ -12,6 +12,6 @@ type story = StoryObj<typeof meta>
export const Form: story = {
args: {
handleSubmit: fn()
onPost: fn()
}
}
\ No newline at end of file
components/Top-Level/Item/Item.tsx
......@@ -4,25 +4,25 @@ import styles from './item.module.css'
import Input from '@/components/base/input/Input';
import closeIcon from '@/public/icons/red-x-10333.svg';
import Image from 'next/image';
export interface ItemProps {
import { ItemMethods } from '@/Types/todoTypes';
interface ItemProps extends ItemMethods {
id: number;
task: string;
isCompleted: boolean;
onClose: (id: number) => void;
updateTask: (id: number, task: string, isCompleted: boolean) => void;
}
const Item: React.FC<ItemProps> = ({ task, isCompleted, onClose, updateTask, id }) => {
const Item: React.FC<ItemProps> = ({ task, isCompleted, onDelete, updateTask, id }) => {
const [isChecked, setisChecked] = useState(isCompleted)
useEffect(() => {
setisChecked(isCompleted)
}, [isCompleted])
const handleChange = async () => {
const res: any = await updateTask(id, task, !isCompleted)
if (res) {
setisChecked(!isChecked)
}
await updateTask(id, task, !isCompleted)
setisChecked(!isChecked)
}
const handleItem = (e: React.ChangeEvent<HTMLInputElement>) => {
......@@ -30,22 +30,16 @@ const Item: React.FC<ItemProps> = ({ task, isCompleted, onClose, updateTask, id
}
const handleClose = () => {
onClose(id)
onDelete(id)
}
return (
<div className={styles.items}>
<div className={styles.item}>
<input type='checkbox' checked={isChecked} onChange={handleChange} className={styles.checkbox} />
<Input placeholder='Enter item...' defaultValue={task} onBlur={handleItem} style={{
border: 'none',
boxShadow: 'none',
padding: 0,
color: 'gray',
fontSize: '18px',
textDecoration: isChecked ? 'line-through' : ''
<Input id="Todo-input" placeholder='Enter item...' defaultValue={task} onBlur={handleItem} style={{
textDecoration: isChecked ? 'line-through' : 'none'
}} />
<div className={styles.actions} onClick={handleClose} >
<Image src={closeIcon} alt="" width={22} height={22} className={styles.closeIcon} />
</div>
</div>
......
components/Top-Level/Item/item.module.css
.items {
.item {
display: flex;
border-bottom: .01px solid rgb(236, 231, 231);
padding: 10px 20px;
......@@ -15,6 +15,14 @@
/* outline: 1px solid black; */
}
.item>div>input {
border: none;
box-shadow: none;
padding: 0;
color: gray;
font-size: 18px;
}
.actions {
margin-left: auto;
min-width: 1.3rem;
......@@ -25,7 +33,6 @@
display: flex;
justify-content: center;
align-items: center;
/* padding-top: 3px; */
}
.actions:hover {
......
components/Top-Level/Item/item.stories.tsx
......@@ -4,13 +4,6 @@ import { fn } from "@storybook/test";
const meta: Meta<typeof Item> = {
title: "Top-Level",
component: Item,
argTypes: {
id: {
control: {
type: 'text'
}
}
}
}
......@@ -19,12 +12,11 @@ export default meta;
type story = StoryObj<typeof meta>
export const Item_: story = {
args: {
id: '1',
id: 1,
isCompleted: true,
task: 'Buy groceries',
onComplete: fn(),
onChange: fn(),
onClose: fn()
onDelete: fn(),
updateTask: fn()
},
}
......
components/base/Button/Button.stories.tsx
......@@ -11,10 +11,6 @@ export default meta;
type Story = StoryObj<typeof meta>;
// interface TemplateProps {
// variant: 'primary' | 'light' | 'dark';
// }
const Template = () => {
return (
<div >
......
components/base/Button/Button.tsx
......@@ -19,35 +19,7 @@ export default function Button({
children,
...rest
}: ButtonProps) {
// const classNames = cn(
// 'inline-flex items-center font-medium uppercase focus:outline-none',
// {
// /** backgrounds */
// 'bg-gray-200': disabled,
// 'bg-primary text-light shadow-primary':
// !disabled && !outline && variant === 'primary',
// 'bg-light text-dark shadow-light':
// !disabled && !outline && variant === 'light',
// 'bg-dark text-light shadow-dark':
// !disabled && !outline && variant === 'dark',
// /** outline */
// 'text-primary border-current border shadow-primary':
// !disabled && outline && variant === 'primary',
// 'text-light border-current border shadow-light':
// !disabled && outline && variant === 'light',
// 'text-dark border-current border shadow-dark':
// !disabled && outline && variant === 'dark',
// /** text */
// 'text-gray-400': disabled,
// /* size */
// 'text-sm px-8 py-3': size === 'sm',
// 'text-base px-9 py-3': size === 'md',
// /** block */
// 'w-full justify-center': block,
// /** hover, focus & active */
// 'hover:shadow-xl focus:shadow-glow active:translate-y-0.5': !disabled
// }
// );
const classNames = `${style.btn} ${size === 'sm' ? style.sm : style.md}`
return typeof href === 'string' ? (
......
components/base/Heading/Heading.stories.tsx
......@@ -4,9 +4,6 @@ import Heading from "./Heading";
const meta: Meta<typeof Heading> = {
title: "Basic/Header",
component: Heading,
argTypes: {
count: { count: 'number' }
},
}
export default meta;
......
components/base/Heading/Heading.tsx
import React from 'react'
import styles from "./heading.module.css"
interface HeadingProps {
count: number;
count?: number;
}
const Heading: React.FC<HeadingProps> = ({ count }) => {
return (
<div className={styles.heading}>You have {count != 0 ? count : "no"} Todos</div>
<React.Fragment>
{
count != undefined &&
<div className={styles.heading}>You have {count != 0 ? count : "no"} Todos</div>
}
</React.Fragment>
)
}
......
components/base/input/Input.stories.tsx
import { Meta, StoryObj } from "@storybook/react";
import Input from "./Input";
import { fn } from "@storybook/test";
import React from "react";
const meta: Meta<typeof Input> = {
title: "Basic",
component: Input,
title: "Basic/Input",
tags: ["autodocs"]
}
export default meta
type story = StoryObj<typeof meta>;
export const Primary: story = {
export const Input_: story = {
args: {
placeholder: 'Enter the value...',
onChange: fn(),
},
render: (args) => {
return <>
return <React.Fragment>
<p>Without Error</p>
<Input {...args} />
<p>With Error</p>
<Input {...args} ErrorMessage="Enter the Fields" />
</>
</React.Fragment>
}
}
components/base/input/Input.tsx
......@@ -6,9 +6,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
const Input: React.FC<InputProps> = ({ ErrorMessage, ...props }) => {
return (
<>
<input {...props} className={`${styles.input} ${ErrorMessage
<div className={styles.Container}>
<input {...props} className={`${ErrorMessage
&& styles.inputError}`} />
{
ErrorMessage &&
......@@ -16,7 +15,7 @@ const Input: React.FC<InputProps> = ({ ErrorMessage, ...props }) => {
{ErrorMessage}
</div>
}
</>
</div>
)
}
......
components/base/input/input.module.css
.input {
.Container input {
padding: 15px 20px;
border-radius: 5px;
border: 2px solid #d2d2d2;
......@@ -8,47 +8,24 @@
width: 100%;
}
.input::placeholder {
.Container input::placeholder {
font-size: 15px;
}
.input:focus {
.Container input:focus {
outline: none;
border: 2px solid rgb(189, 189, 189);
}
.strike {
text-decoration: line-through;
}
.error {
color: red;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 10px;
margin-top: 2px;
font-size: 13px;
}
.inputError {
.Container .inputError {
border: 1px solid red;
}
.invisible {
padding-inline: 0px;
border: none;
font-size: 16px;
color: gray;
background-color: transparent;
box-shadow: none;
padding-block: 10px;
}
.invisible::placeholder {
font-size: 18px;
}
.invisible:focus {
outline: none;
border: none;
}
\ No newline at end of file
components/layout/List/List.tsx
import Item from "@/components/Top-Level/Item/Item";
import styles from "./list.module.css";
interface ListItemProps {
data: {
id: number;
task: string;
isCompleted: boolean;
}[];
onClose: (id: number) => void;
updateTask: (id: number, task: string, isCompleted: boolean) => void;
import { ItemMethods, TodoListItems } from "@/Types/todoTypes";
interface ListItemProps extends ItemMethods {
data: TodoListItems[];
}
const ListItem: React.FC<ListItemProps> = ({ data, updateTask, onClose }) => {
const ListItem: React.FC<ListItemProps> = ({ data, updateTask, onDelete }) => {
return (
<div className={styles.list}>
{
......@@ -19,7 +14,7 @@ const ListItem: React.FC<ListItemProps> = ({ data, updateTask, onClose }) => {
key={item.id}
{...item}
updateTask={updateTask}
onClose={onClose}
onDelete={onDelete}
/>
)
})
......
components/layout/List/list.stories.tsx
......@@ -17,22 +17,17 @@ type Story = StoryObj<typeof meta>;
export const List_: Story = {
args: {
data: List_data,
onChange: fn(),
onClose: fn(),
onComplete: fn()
onDelete: fn(),
updateTask: fn()
}
};
export const Todos: Story = {
args: {
data: List_data,
onChange: fn(),
onClose: fn(),
onComplete: fn()
onDelete: fn(),
updateTask: fn()
},
// parameters: {
// layout: 'centered',
// },
render: (args) => (
<div style={{
display: 'flex',
......@@ -49,7 +44,7 @@ export const Todos: Story = {
}}>
<Heading count={args.data.length} />
<List {...args} />
<FormComponent handleSubmit={fn()} />
<FormComponent onPost={fn()} />
</div>
</div>
)
......
components/types.d.ts
......@@ -11,11 +11,3 @@ export interface ISocialLink {
url: string;
label?: string;
}
export interface TodoListItems {
id: number;
task: string;
isCompleted: boolean;
}
\ No newline at end of file
db.json
{
"tasks": [
{
"id": 1,
"task": "clg",
"isCompleted": false
},
{
"id": 2,
"task": "new",
"isCompleted": true
},
{
"task": "jake",
"task": "new todo",
"isCompleted": true,
"id": 3
"id": 1
},
{
"task": "items",
"task": "new element",
"isCompleted": false,
"id": 5
"id": 2
},
{
"task": "another items",
"task": "Nothing",
"isCompleted": false,
"id": 6
"id": 3
}
]
}
\ No newline at end of file
lib/getall.ts
......@@ -2,7 +2,6 @@ import { Axios } from "./Instance";
export default async function getall() {
try {
const res = await Axios.get('');
return await res.data
} catch (error) {
......
pages/Todo.tsx
"use client"
import style from "./todoapp.module.css"
import React from "react";
import { useState, useEffect } from "react";
import style from "./todoapp.module.css"
import Heading from "@/components/base/Heading/Heading";
import List from "@/components/layout/List/List";
import FormComponent from "@/components/Top-Level/Form/FormComponent";
import { TodoListItems } from "@/components/types";
import AddTask, { UpdateTask, DeleteTask } from "@/lib/Operation";
import AddTask, { UpdateTask, DeleteTask } from "@/lib/TodoOperations";
import getall from "@/lib/getall";
interface StateTodo {
data?: TodoListItems[],
......@@ -52,45 +53,34 @@ const Todo = () => {
setrefresh(!refresh)
}
}
const handleAdd = async (task: string) => {
const handlePost = async (task: string) => {
const result = await AddTask(task)
if (result) {
setrefresh(!refresh)
}
}
if (TodoList.isLoading) {
return (<Wrapper>
<div className={style.loading} />
</Wrapper>)
}
if (TodoList.isError) {
return (
<Wrapper>
<h2 className={style.notFound}>Something went wrong</h2>
</Wrapper>
)
}
return (
<Wrapper>
{
TodoList.data &&
(
<>
<Heading count={TodoList.data.length} />
{
TodoList.data.length !== 0 &&
<List data={TodoList.data} onClose={handleDelete} updateTask={UpdateTask} />
}
<FormComponent handleSubmit={handleAdd} />
</>
)
}
return (
<div className={style.container}>
<div className={style.todoWrapper}>
{TodoList.isLoading && <div className={style.loading} />}
{TodoList.isError && <h2 className={style.notFound}>Something went wrong</h2>}
{
!TodoList.isError && !TodoList.isLoading && TodoList.data &&
(
<React.Fragment>
<Heading count={TodoList.data.length} />
{
TodoList.data.length !== 0 &&
<List data={TodoList.data} onDelete={handleDelete} updateTask={UpdateTask} />
}
<FormComponent onPost={handlePost} />
</React.Fragment>
)
}
</div>
</div>
</Wrapper>
);
}
......@@ -100,17 +90,3 @@ export default Todo;
type WrapperProps = {
children: React.ReactNode;
}
const Wrapper: React.FC<WrapperProps> = ({ children }) => {
return (
<div className={style.container}>
<div className={style.todoWrapper}>
{children}
</div>
</div>
)
}
\ No newline at end of file
utils/data.ts
export const List_data = [
{
id: " 1",
id: 1,
task: "Buy the Groceries",
isCompleted: true
},
{
id: " 2",
id: 2,
task: "Buy the food",
isCompleted: false
},
{
id: "3",
id: 3,
task: "pay the rent",
isCompleted: false
},
{
id: " 4",
id: 4,
task: "savings the money",
isCompleted: true
}
......
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