todo label added

Author: vigneshwaran-chandrasekaran

src/components/todo/TodoLabel.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+import { TODO_STATUS } from '../../helpers/constants';
+
+export default function TodoLabel({ data }) {
+	const [label, setLabel] = useState('');
+
+	useEffect(() => {
+		if (data) {
+			let obj = TODO_STATUS.find((status) => status.id === data.status);
+			if (obj) {
+				setLabel(obj.key);
+			}
+		}
+	}, [data]);
+
+	return <div className="title-label">{label}</div>;
+}

src/components/todo/TodoList.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { API } from '../../services';
-import { DeleteTodo, TodoBox } from '../todo';
-import _ from 'lodash';
+import { DeleteTodo, TodoBox, TodoLabel } from '../todo';
+import { mapValues, groupBy } from 'lodash';
 
 export default function TodoList() {
 	const [todos, setTodos] = useState([]);
@@ -21,7 +21,7 @@ export default function TodoList() {
 				console.log('response', response);
 				setTodos(response.data);
 
-				let grouped = _.mapValues(_.groupBy(response.data, 'status'));
+				let grouped = mapValues(groupBy(response.data, 'status'));
 
 				console.log('grouped', grouped);
 				setGrouped(grouped);
@@ -52,6 +52,7 @@ export default function TodoList() {
 				{grouped &&
 					Object.entries(grouped).map(([key, values], i) => (
 						<div key={i} className="kanban__group">
+							<TodoLabel data={values[0]} />
 							{values.map((data) => (
 								<TodoBox key={data._id} data={data} />
 							))}

src/components/todo/TodoStatusChange.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, Dropdown, message } from 'antd';
 import { API } from '../../services';
-import { STATUS } from '../../helpers/constants';
+import { TODO_STATUS } from '../../helpers/constants';
 
 export default function TodoStatusChange({ data }) {
 	function handleStatusEdit(e) {
@@ -20,7 +20,7 @@ export default function TodoStatusChange({ data }) {
 
 	const menu = (
 		<Menu onClick={handleStatusEdit}>
-			{STATUS.map((data) => (
+			{TODO_STATUS.map((data) => (
 				<Menu.Item key={data.id}>{data.key}</Menu.Item>
 			))}
 		</Menu>

src/components/todo/index.js

@@ -2,5 +2,6 @@ export { default as DeleteTodo } from './DeleteTodo';
 export { default as TodoActionControls } from './TodoActionControls';
 export { default as TodoBox } from './TodoBox';
 export { default as TodoDelete } from './TodoDelete';
+export { default as TodoLabel } from './TodoLabel';
 export { default as TodoList } from './TodoList';
 export { default as TodoStatusChange } from './TodoStatusChange';

src/helpers/constants.js

@@ -1,6 +1,6 @@
 export const USER_INFO_LOCAL_STORAGE_KEY = 'toDoUserInfo';
 
-export const STATUS = [
+export const TODO_STATUS = [
 	{ id: 1, key: 'New' },
 	{ id: 2, key: 'Inprogress' },
 	{ id: 3, key: 'Completed' },

src/styles/style.scss

@@ -66,3 +66,10 @@
 		}
 	}
 }
+
+.title-label {
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 16px;
+}