[Feat]: Creating Tag component and the select tag function

AntonioGally · Aug 24, 2021 · e0b48b6 · e0b48b6
2 parents 078640f + 4ee4597
commit e0b48b6
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 40 deletions.
diff --git a/src/components/Card/card.js b/src/components/Card/card.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext, memo } from "react";
+import React, { useState, useContext, memo, useEffect } from "react";
 
 //Minor Components
 import {
@@ -23,10 +23,14 @@ import ModalEdit from "../Modal/modalEdit";
 const Card = ({ dataProps, index }) => {
   const { todoList, setTodoList } = useContext(dataContext);
   const [showModal, setShowModal] = useState(false);
+  const [opacity, setOpacity] = useState(0);
   function deleteCard(indexProps) {
-    var newArr = todoList.slice();
-    newArr.splice(indexProps, 1);
-    setTodoList(newArr);
+    setOpacity(0);
+    setTimeout(() => {
+      var newArr = todoList.slice();
+      newArr.splice(indexProps, 1);
+      setTodoList(newArr);
+    }, 250);
   }
   function handleDoneClick() {
     var newArr = todoList.slice();
@@ -43,10 +47,16 @@ const Card = ({ dataProps, index }) => {
     );
   };
 
+  useEffect(() => {
+    setTimeout(() => {
+      setOpacity(1);
+    }, 150);
+  }, []);
+
   return (
     <>
       <Col sm={24} md={12} lg={12}>
-        <Container>
+        <Container style={{ opacity: opacity, transition: "all .25s ease" }}>
           <Head>
             <Title isDone={dataProps.done}>{dataProps.title}</Title>,
             <Dropdown overlay={menuOverlay} trigger={["click"]}>

diff --git a/src/components/SideBar/Tag.js b/src/components/SideBar/Tag.js
@@ -0,0 +1,81 @@
+import React, { useEffect, useState, memo, useContext } from "react";
+
+//Scripts
+import { dataContext } from "../../context/dataContext";
+
+//Minor components
+import { TagContent, Tag, DeleteIcon } from "./styles";
+
+const TagComponent = ({ data, index }) => {
+  const [opacity, setOpacity] = useState(0);
+  const [background, setBackground] = useState("");
+  const [padding, setPadding] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(undefined);
+
+  const { tagList, setTagList, todoList, setTodoList } =
+    useContext(dataContext);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOpacity(1);
+    }, 150);
+  }, []);
+
+  function handleSelect(indexProps) {
+    if (indexProps === selectedIndex) {
+      setSelectedIndex(undefined);
+      setBackground("#f9f9f9");
+      setPadding(0);
+    } else {
+      setSelectedIndex(indexProps);
+      setBackground("var(--cardBackground)");
+      setPadding(10);
+    }
+  }
+
+  function handleDelete(index) {
+    setOpacity(0);
+    setTimeout(() => {
+      var deletedTagID = tagList[index].id;
+      var newArr = tagList.slice();
+      newArr.splice(index, 1);
+      setTagList(newArr);
+      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) {
+            var newTodo = todoList.slice();
+            newTodo[i].tags.splice(j, 1);
+            setTodoList(newTodo);
+          }
+        }
+      }
+    }, 250);
+  }
+
+  return (
+    <>
+      <TagContent
+        style={{
+          opacity: opacity,
+          background: background,
+          padding: padding,
+          borderRadius: "4px",
+          transition: "all .25s ease",
+        }}
+        onClick={() => {
+          handleSelect(index);
+        }}
+      >
+        <Tag color={data.color}>{data.text}</Tag>
+        <DeleteIcon
+          onClick={() => {
+            handleDelete(index);
+          }}
+        />
+      </TagContent>
+    </>
+  );
+};
+
+export default memo(TagComponent);
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
@@ -2,44 +2,28 @@ import React, { useState, useContext } from "react";
 
 //Scripts
 import { dataContext } from "../../context/dataContext";
+import { filterArr } from "../../services/utils.js";
 
 //Components
 import ModalTag from "../Modal/modalTag";
+import TagComponent from "./Tag";
 // import { Checkbox } from "antd";
 
 //Minor components
 import {
   Container,
   Head,
   Body,
-  TagContent,
-  Tag,
-  DeleteIcon,
+  SearchContent,
+  Input,
   Foot,
   AddIcon,
 } from "./styles";
 
 const SideBar = () => {
-  const { tagList, setTagList, todoList, setTodoList } =
-    useContext(dataContext);
+  const { tagList } = useContext(dataContext);
   const [showModal, setShowModal] = useState(false);
-
-  function handleDelete(index) {
-    var deletedTagID = tagList[index].id;
-    var newArr = tagList.slice();
-    newArr.splice(index, 1);
-    setTagList(newArr);
-    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) {
-          var newTodo = todoList.slice();
-          newTodo[i].tags.splice(j, 1);
-          setTodoList(newTodo);
-        }
-      }
-    }
-  }
+  const [searchValue, setSearchValue] = useState("");
 
   return (
     <>
@@ -51,17 +35,15 @@ const SideBar = () => {
           <Body>
             {tagList?.length > 0 ? (
               <>
-                {tagList.map((data, index) => (
-                  <TagContent>
-                    <Tag color={data.color} key={index}>
-                      {data.text}
-                    </Tag>
-                    <DeleteIcon
-                      onClick={() => {
-                        handleDelete(index);
-                      }}
-                    />
-                  </TagContent>
+                <SearchContent>
+                  <Input
+                    placeholder="Search for tags..."
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    value={searchValue}
+                  />
+                </SearchContent>
+                {filterArr(searchValue, tagList).map((data, index) => (
+                  <TagComponent data={data} index={index} key={index} />
                 ))}
               </>
             ) : (

diff --git a/src/components/SideBar/styles.js b/src/components/SideBar/styles.js
@@ -49,6 +49,23 @@ export const Body = styled.div`
     background: #555;
   }
 `;
+
+export const SearchContent = styled.div`
+  width: 85%;
+  display: flex;
+  margin-top: 16px;
+`;
+export const Input = styled.input`
+  width: 100%;
+  padding: 12px;
+  border: none;
+  outline: 0;
+  color: var(--subTitle);
+  font-size: 15px;
+  border-radius: 4px;
+  margin-bottom: 6px;
+`;
+
 export const TagContent = styled.div`
   width: 85%;
   display: flex;

diff --git a/src/services/utils.js b/src/services/utils.js
@@ -28,8 +28,13 @@ export function shuffle(array) {
   return array.sort(() => (Math.random() > 0.5 ? 1 : -1));
 }
 
-export function filterArr(query, arr) {
-  return arr.filter(function (el) {
+/**
+ * @param {string} query
+ * @param {Array} array
+ */
+
+export function filterArr(query, array) {
+  return array.filter(function (el) {
     return el.text.toLowerCase().indexOf(query.toLowerCase()) > -1;
   });
 }