todo status changed, label colors added

Author: vigneshwaran-chandrasekaran

src/components/todo/TodoBox.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import { TodoActionControls } from '../todo';
+import { Tag, Divider } from 'antd';
+import { TodoActionControls, TodoLabel } from '../todo';
 
 export default function TodoBox(props) {
 	const { data } = props;
 	return (
 		<div className="kanban__box">
-			<h4>{data.title}</h4>
+			<h4>
+				{data.title} <TodoLabel data={data} />
+			</h4>
+
 			<div>{data.description}</div>
 			<TodoActionControls {...props} />
 		</div>

src/components/todo/TodoLabel.js

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

src/components/todo/TodoList.js

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

src/components/todo/TodoStatus.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+import { TODO_STATUS } from '../../helpers/constants';
+
+export default function TodoStatus({ 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/index.js

@@ -4,4 +4,5 @@ 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 TodoStatus } from './TodoStatus';
 export { default as TodoStatusChange } from './TodoStatusChange';

src/helpers/constants.js

@@ -8,8 +8,8 @@ export const TODO_STATUS = [
 ];
 
 export const TODO_LABEL = [
-	{ id: 1, key: 'PERSONAL' },
-	{ id: 2, key: 'WORK' },
-	{ id: 3, key: 'SHOPPING' },
-	{ id: 4, key: 'OTHER' },
+	{ id: 1, key: 'PERSONAL', color: 'magenta' },
+	{ id: 2, key: 'WORK', color: 'gold' },
+	{ id: 3, key: 'SHOPPING', color: 'green' },
+	{ id: 4, key: 'OTHER', color: 'blue' },
 ];