Dnd functionality issue

public/index.html

@@ -11,7 +11,7 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/__mocks__/fake-todo-data.ts

@@ -0,0 +1,8 @@
+import { DataInterface } from "../components/todo-wrapper/todo-wrapper.component";
+
+export const temporaryToDoData: DataInterface[] = [
+  { id: "1", title: "First To-Do" },
+  { id: "2", title: "Second To-Do" },
+  { id: "3", title: "Third To-Do" },
+  { id: "4", title: "Fourth To-Do" },
+];

src/assets/icons/close-icon.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+
+const CloseIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enable-background="new 0 0 24 24"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <g>
+        <rect fill="none" height="24" width="24" />
+      </g>
+      <g>
+        <g>
+          <path d="M15.5,14h-0.79l-0.28-0.27C15.41,12.59,16,11.11,16,9.5C16,5.91,13.09,3,9.5,3C6.08,3,3.28,5.64,3.03,9h2.02 C5.3,6.75,7.18,5,9.5,5C11.99,5,14,7.01,14,9.5S11.99,14,9.5,14c-0.17,0-0.33-0.03-0.5-0.05v2.02C9.17,15.99,9.33,16,9.5,16 c1.61,0,3.09-0.59,4.23-1.57L14,14.71v0.79l5,4.99L20.49,19L15.5,14z" />
+          <polygon points="6.47,10.82 4,13.29 1.53,10.82 0.82,11.53 3.29,14 0.82,16.47 1.53,17.18 4,14.71 6.47,17.18 7.18,16.47 4.71,14 7.18,11.53" />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default CloseIcon;

src/assets/icons/delete-icon.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+interface Props {
+  id?: string;
+}
+
+const DeleteIcon: FC<Props> = ({id}) => {
+  return (
+    <svg
+      id={id}
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path id={id} d="M0 0h24v24H0z" fill="none" />
+      <path id={id} d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    </svg>
+  );
+};
+
+export default DeleteIcon;

src/assets/icons/plus-icon.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const PlusIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z" />
+    </svg>
+  );
+};
+
+export default PlusIcon;

src/assets/icons/search-icon.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const SearchIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="36px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z" />
+    </svg>
+  );
+};
+
+export default SearchIcon;

src/components/App/App.module.scss

@@ -1,6 +1,7 @@
 .App {
-width: 100%;
-  height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100vh;
 }
 
 

src/components/App/App.tsx

@@ -1,18 +1,13 @@
-import React, {FC} from 'react'
+import React, {FC} from "react";
 import styles from "./App.module.scss";
-
-
 import TodoWrapper from "../todo-wrapper/todo-wrapper.component";
 
-
 const App: FC = () => {
-
-
   return (
-      <div className={styles.App}>
-          <TodoWrapper/>
-      </div>
+    <div className={styles.App}>
+      <TodoWrapper/>
+    </div>
   );
-}
+};
 
 export default App;

src/components/interaction-area/interaction-area.component.tsx

@@ -1,21 +1,26 @@
-import React, {ChangeEvent, FC} from 'react'
-
+import React, {ChangeEvent, FC, KeyboardEvent} from "react";
+import styles from "./interaction-area.module.scss";
+import PlusIcon from "../../assets/icons/plus-icon";
 
 interface Props {
-    inputValue: string
-    handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void
-    addButton: () => void;
-    addButtonText: string;
+  inputValue: string;
+  handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void;
+  addButton: () => void;
+  addButtonText: string;
 }
-console.log('1')
-    const InteractionArea:FC<Props> = ({inputValue, handleInputCallBack, addButton, addButtonText}) => {
 
-    return(
-        <div>
-            <input value={inputValue} onChange={handleInputCallBack}/>
-            <button onClick={addButton}>{addButtonText}</button>
-        </div>
-    )
+const InteractionArea: FC<Props> = ({inputValue, handleInputCallBack, addButton}) => {
+  const handleTodoAddingOnKeyDown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.location === 3) {
+      addButton();
+    }
+  };
+  return (
+    <div className={styles.Container}>
+      <input onKeyPress={handleTodoAddingOnKeyDown} value={inputValue} onChange={handleInputCallBack}/>
+      <button onClick={addButton}><PlusIcon/></button>
+    </div>
+  )
 }
 
 export default InteractionArea

src/components/interaction-area/interaction-area.module.scss

@@ -0,0 +1,44 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  width: 40%;
+  margin: 0 auto;
+  height: fit-content;
+
+  input {
+    box-sizing: border-box;
+    width: 100%;
+    margin-right: 2rem;
+    padding: 10px;
+    height: 48px;
+    outline: none;
+    border-radius: 12px;
+    border: 2px solid #222;
+    background-color: white;
+    font-size: 18px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+  }
+
+  button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    color: #222222;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+    border: 2px solid #222222;
+    border-radius: 10px;
+
+    svg {
+      fill: #444444;
+    }
+
+    &:active {
+      border-top: 4px solid #222222;
+    }
+  }
+}

src/components/todo-list/todo-list.component.tsx

@@ -1,36 +1,78 @@
-import React, {FC, MouseEvent} from 'react'
-import styles from './todo-list.module.scss'
-import {DataInterface} from "../todo-wrapper/todo-wrapper.component";
-
+import React, { FC, MouseEvent } from "react";
+import styles from "./todo-list.module.scss";
+import { DataInterface } from "../todo-wrapper/todo-wrapper.component";
+import DeleteIcon from "../../assets/icons/delete-icon";
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DropResult,
+} from "react-beautiful-dnd";
 
 interface Props {
-    title: string;
-    data: DataInterface[]
-    cleanButtonTitle: string;
-    cleanButtonCallback: () => void
-    deleteListElementCallBack: (event: MouseEvent<HTMLButtonElement>) => void
+  title: string;
+  data: DataInterface[];
+  cleanButtonTitle: string;
+  cleanButtonCallback: () => void;
+  deleteListElementCallBack: (event: MouseEvent<HTMLDivElement>) => void;
+  onDragEnd: (result: DropResult) => void;
 }
 
-const TodoList: FC<Props> = ({title, data, cleanButtonCallback, cleanButtonTitle, deleteListElementCallBack}) => {
-    return(
-        <div className={styles.todoList}>
-            <div className={styles.header}>
-                <span>{title}</span>
-            </div>
-
-            <div className={styles.box}>
-                {data.map(({id, title}) => {
-                    return <div key={id} className={styles.listElement}>{title}
-                    <button id={`${id}`} onClick={deleteListElementCallBack} >DELETE</button>
+const TodoList: FC<Props> = ({
+  title,
+  data,
+  cleanButtonCallback,
+  cleanButtonTitle,
+  deleteListElementCallBack,
+  onDragEnd,
+}) => {
+  return (
+    <div className={styles.todoList}>
+      <div className={styles.header}>
+        <span>{title}</span>
+      </div>
+      <div className={styles.cleanButtonArea}>
+        <button onClick={cleanButtonCallback}>
+          {cleanButtonTitle} <DeleteIcon />
+        </button>
+      </div>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId={"To-DO"}>
+          {(provided) => (
+            <div
+              className={styles.box}
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {data.map(({ id, title }, index) => (
+                <Draggable key={id} draggableId={id} index={index}>
+                  {(provided1, snapshot) => (
+                    <div
+                      ref={provided1.innerRef}
+                      {...provided1.draggableProps}
+                      {...provided1.dragHandleProps}
+                      key={id}
+                      className={`${styles.listElement} ${snapshot.isDragging && styles.dragging}`}
+                    >
+                      <p>{title}</p>
+                      <div
+                        className={styles.deleteItem}
+                        id={`${id}`}
+                        onClick={deleteListElementCallBack}
+                      >
+                        <DeleteIcon id={`${id}`} />
+                      </div>
                     </div>
-                })}
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
             </div>
-            <div className={styles.cleanButtonArea}>
-                <button onClick={cleanButtonCallback}>{cleanButtonTitle}</button>
-            </div>
-        </div>
-    )
-}
-
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
 
-export default TodoList
+export default TodoList;