Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]: Adding new features to card component #25

Merged
merged 5 commits into from
Oct 9, 2021
+240 −119
Merged

[Feat]: Adding new features to card component #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9737f0
fix: Adjusting delete and done todo function
AntonioGally Oct 6, 2021
2fed81c
fix: Changing the visualization of todos
AntonioGally Oct 9, 2021
a2391ce
feat: Adding double click on card feature
AntonioGally Oct 9, 2021
999af55
feat: Adding delete all and delete done todo function
AntonioGally Oct 9, 2021
1b010b8
feat: Adding total todos into tags
AntonioGally Oct 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 15 additions & 32 deletions src/components/Card/card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext, memo, useEffect } from "react";
import React, { useState, memo, useEffect } from "react";

import parse from "html-react-parser";

Expand All @@ -17,46 +17,31 @@ import {
Tag,
} from "./styles";

//Context
import { dataContext } from "../../context/dataContext.js";

//Components
import { Checkbox, Col, Dropdown, Menu } from "antd";
import { Checkbox, Row, Dropdown, Menu } from "antd";
import ModalEdit from "../Modal/modalEdit";

const Card = ({ dataProps, index }) => {
const { todoList, setTodoList } = useContext(dataContext);
const Card = ({ dataProps, onDelete, onDone }) => {
const [showModal, setShowModal] = useState(false);
const [opacity, setOpacity] = useState(0);

function deleteCard() {
setOpacity(0);
setTimeout(() => {
var newArr = todoList.slice();
for (let i = 0; i < newArr.length; i++) {
if (newArr[i].id === dataProps.id) {
newArr.splice(i, 1);
}
}
if (newArr.length === 0) {
setTodoList(null);
} else {
setTodoList(newArr);
}
onDelete();
setOpacity(1);
}, 250);
}
function handleDoneClick() {
var newArr = todoList.slice();
newArr[index].done = !newArr[index].done;
setTodoList(newArr);
}

const menuOverlay = () => {
return (
<Menu>
<Menu.Item onClick={() => setShowModal(true)}>Edit</Menu.Item>
<Menu.Item onClick={() => deleteCard()}>Delete</Menu.Item>
<Menu.Item onClick={() => setShowModal(true)} key={1}>
Edit
</Menu.Item>
<Menu.Item onClick={() => deleteCard()} key={2}>
Delete
</Menu.Item>
</Menu>
);
};
Expand All @@ -69,10 +54,11 @@ const Card = ({ dataProps, index }) => {

return (
<>
<Col sm={24} md={12} lg={12}>
<Row style={{ width: "100%" }}>
<Container
style={{ opacity: opacity, transition: "all .25s ease" }}
style={{ opacity: opacity }}
isDone={dataProps.done}
onDoubleClick={() => onDone()}
>
<Head>
<Title isDone={dataProps.done}>
Expand All @@ -92,15 +78,12 @@ const Card = ({ dataProps, index }) => {
<Tag key={index} color={data.color} />
))}
</TagContent>
<Checkbox
checked={dataProps.done}
onChange={() => handleDoneClick()}
>
<Checkbox checked={dataProps.done} onChange={() => onDone()}>
Done
</Checkbox>
</Foot>
</Container>
</Col>
</Row>
<ModalEdit
hideModal={() => setShowModal(false)}
showModal={showModal}
Expand Down
132 changes: 90 additions & 42 deletions src/components/Card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,118 @@
import React, { useContext } from "react";
import { Col } from "antd";

//Images
import noData from "../../assets/no-data-2.png";

//Scripts
import { filterArr } from "../../services/utils.js";

//Context
import { dataContext } from "../../context/dataContext.js";

import Card from "./card.js";
const CardContainer = () => {
const { todoList, todoFilter, tagFilter } = useContext(dataContext);
const { todoList, setTodoList, todoFilter, tagFilter } =
useContext(dataContext);

function filterTodosByTag() {
if (tagFilter[0]?.type === "done") {
return todoList.filter((el) => {
if (
el.title.toLowerCase().indexOf(todoFilter.title.toLowerCase()) > -1
) {
if (el.done) {
return false;
} else return true;
} else return false;
});
} else {
return todoList.filter((el) => {
if (
el.title.toLowerCase().indexOf(todoFilter.title.toLowerCase()) > -1
) {
for (let i = 0; i < el.tags.length; i++) {
for (let j = 0; j < tagFilter.length; j++) {
if (el.tags[i].id === tagFilter[j].id) {
return true;
function filterTodo() {
if (tagFilter.length > 0) {
if (tagFilter[0]?.type === "done") {
return todoList.filter((el) => {
if (
el.title.toLowerCase().indexOf(todoFilter.title.toLowerCase()) > -1
) {
if (el.done) {
return false;
} else return true;
} else return false;
});
} else {
return todoList.filter((el) => {
if (
el.title.toLowerCase().indexOf(todoFilter.title.toLowerCase()) > -1
) {
for (let i = 0; i < el.tags.length; i++) {
for (let j = 0; j < tagFilter.length; j++) {
if (el.tags[i].id === tagFilter[j].id) {
return true;
}
}
}
}
}
return false;
return false;
});
}
} else {
return todoList.filter(function (el) {
return (
el.title.toLowerCase().indexOf(todoFilter.title.toLowerCase()) > -1
);
});
}
}

function deleteHandler(id) {
var newArr = todoList.slice();
for (let i = 0; i < newArr.length; i++) {
if (newArr[i].id === id) {
newArr.splice(i, 1);
}
}
if (newArr.length === 0) {
return setTodoList(null);
} else {
return setTodoList(newArr);
}
}

function doneHandler(id) {
var newArr = todoList.slice();
for (let i = 0; i < newArr.length; i++) {
if (newArr[i].id === id) {
newArr[i].done = !newArr[i].done;
}
}
return setTodoList(newArr);
}

return (
<>
{todoList?.length > 0 ? (
<>
{tagFilter.length > 0 ? (
<>
{filterTodosByTag().map((data, index) => (
<Card dataProps={data} key={index} index={index} />
))}
</>
) : (
<>
{filterArr(todoFilter.title, todoList, "title").map(
(data, index) => (
<Card dataProps={data} key={index} index={index} />
)
)}
</>
)}
<Col sm={24} md={12} lg={12}>
{filterTodo().map((data, index) => {
if (index % 2 === 0) {
return (
<Card
dataProps={data}
key={index}
onDelete={() => deleteHandler(data.id)}
onDone={() => doneHandler(data.id)}
/>
);
} else return null;
})}
</Col>
<Col sm={24} md={12} lg={12}>
{filterTodo().map((data, index) => {
if (index % 2 !== 0) {
return (
<Card
dataProps={data}
key={index}
onDelete={() => deleteHandler(data.id)}
onDone={() => doneHandler(data.id)}
/>
);
} else return null;
})}
</Col>
</>
) : (
<div style={{ textAlign: "center", width: "100%" }}>
<img src={noData} style={{ width: "50%", margin: "10px auto" }} alt="No data"/>
<img
src={noData}
style={{ width: "50%", margin: "10px auto" }}
alt="No data"
/>
<br />
<h2 style={{ margin: 0 }}>It sims that you dont have any todo</h2>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/Card/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const Container = styled.div`
border-radius: 6px;
width: 95%;
margin: 6px 0;
transition: "all .25s ease";
height: fit-content;
@media (max-width: 768px) {
width: 100%;
Expand Down
1 change: 1 addition & 0 deletions src/components/Modal/modalEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const ModalTodo = ({ hideModal, showModal, defaultData }) => {
}
}
setTagSelector(auxArr);
// eslint-disable-next-line
}, [defaultData]);

return (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/modalTodo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const ModalTodo = ({ hideModal, showModal }) => {
tagArr.push(tagList[tagSelector[i]]);
}
var date = new Date();
var month = date.getMonth();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
Expand Down
19 changes: 11 additions & 8 deletions src/components/SideBar/Tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { dataContext } from "../../context/dataContext";
//Minor components
import { TagContent, Tag, DeleteIcon } from "./styles";

const TagComponent = ({ data, index, type, style }) => {
const TagComponent = ({ data, index, type, style, todoAmount }) => {
const [opacity, setOpacity] = useState(0);
const [background, setBackground] = useState("");
const [padding, setPadding] = useState(0);
Expand Down Expand Up @@ -73,7 +73,7 @@ const TagComponent = ({ data, index, type, style }) => {
} else {
setTagList(newArr);
}
for (let i = 0; i < todoList.length; i++) {
for (let i = 0; i < todoList?.length; i++) {
//Removing the deleted tag from all todo's
for (let j = 0; j < todoList[i].tags.length; j++) {
if (todoList[i].tags[j].id === deletedTagID) {
Expand Down Expand Up @@ -104,12 +104,15 @@ const TagComponent = ({ data, index, type, style }) => {
>
<Tag color={data.color}>{data.text}</Tag>
{type !== "CheckDone" && (
<DeleteIcon
onClick={(e) => {
handleDelete(index);
e.stopPropagation();
}}
/>
<div style={{ display: "flex", alignItems: "center" }}>
<div>({todoAmount[data.text]?.length})</div>
<DeleteIcon
onClick={(e) => {
handleDelete(index);
e.stopPropagation();
}}
/>
</div>
)}
</TagContent>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/SideBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
} from "./styles";

const SideBar = () => {
const { tagList, todoList } = useContext(dataContext);
const { tagList, todoList, relationTagTodo } = useContext(dataContext);
const [showModal, setShowModal] = useState(false);
const [searchValue, setSearchValue] = useState("");

Expand Down Expand Up @@ -52,7 +52,7 @@ const SideBar = () => {
/>
</SearchContent>
{filterArr(searchValue, tagList, "text").map((data, index) => (
<TagComponent data={data} index={index} key={index} />
<TagComponent data={data} index={index} key={index} todoAmount={relationTagTodo}/>
))}
</>
) : (
Expand Down
1 change: 1 addition & 0 deletions src/components/SideBar/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export const Tag = styled.span`
`;

export const DeleteIcon = styled(Trash)`
margin-left: 13px;
width: 24px;
height: 24px;
cursor: pointer;
Expand Down
18 changes: 0 additions & 18 deletions src/context/componentContext.js
View file
Open in desktop

This file was deleted.

Loading