fix the changes

Types/todoTypes.ts

+
+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
     }