revamp edit and remove collection

aiethn · May 28, 2022 · 597a5c7 · 597a5c7
1 parent e2f9cec
commit 597a5c7
Show file tree

Hide file tree

Showing 9 changed files with 495 additions and 104 deletions.
diff --git a/components/cardCollection.js b/components/cardCollection.js
@@ -1,42 +1,34 @@
 import { css } from "@emotion/react";
-import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Link from "next/Link";
-import { useDispatch } from "react-redux";
-import { removeCol } from "../features/collections";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
 const breakpoints = [640, 768, 1024, 1280, 1536];
 
 const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);
 const maxq = breakpoints.map((bp) => `@media (max-width: ${bp}px)`);
 
 export const CardCollection = (props) => {
-  const dispatch = useDispatch();
-  const { name, image, linkImage, id, setShowModalEdit } = props;
+  const allCol = useSelector((state) => state.collections.value);
+  const { name, image, linkImage, id, usage } = props;
+  const [banner, setBanner] = useState("/banner.jpg");
+  const colSelected = allCol.find((col) => col.id === id);
+
+  useEffect(() => {
+    if (colSelected?.colItems) {
+      if (colSelected.colItems[0]?.animeImage) {
+        setBanner(colSelected.colItems[0].animeImage);
+      }
+    } else {
+      setBanner("/banner.jpg");
+    }
+  }, [colSelected]);
+
   const handleOnEdit = () => {};
-  const handleOnRemove = () => {
-    dispatch(removeCol(id));
-  };
-  console.log(id, "ÏDnya");
+
   return (
-    <div
-      className="container"
-      css={css`
-        padding: 0.7rem;
-        height: 100%;
-        max-width: 34rem;
-        ${mq[1]} {
-          width: 25%;
-        }
-        ${maxq[1]} {
-          width: 33%;
-        }
-        ${maxq[0]} {
-          width: 50%;
-        }
-      `}
-    >
+    <>
       <Link href={linkImage}>
         <div
           css={css`
@@ -76,7 +68,7 @@ export const CardCollection = (props) => {
             >
               <Image
                 className="imgcont"
-                src={image}
+                src={usage === "anime" ? image : banner}
                 width={250}
                 height={400}
                 alt={`Foto ${name}`}
@@ -88,13 +80,13 @@ export const CardCollection = (props) => {
                 padding: 1.5rem;
                 display: flex;
                 flex-direction: column;
-                flex: 1 1 0%;
+                // flex: 1 1 0%;
+                height: 6rem;
               `}
             >
               <p
                 css={css`
                   font-weight: 700;
-
                   ${name.length < 14 ? "font-size: 1rem" : "font-size: 0.7rem;"}
                 `}
               >
@@ -104,52 +96,6 @@ export const CardCollection = (props) => {
           </div>
         </div>
       </Link>
-      {/* <div
-        css={css`
-          display: flex;
-          justify-content: space-between;
-          position: relative;
-        `}
-      >
-        <div
-          onClick={setShowModalEdit}
-          css={css`
-            display: flex;
-            position: absolute;
-            left: 0;
-            cursor: pointer;
-          `}
-        >
-          <FontAwesomeIcon
-            css={css`
-              width: 1rem;
-              margin: 0.5rem;
-            `}
-            icon={faPencil}
-            size="xs"
-          />
-          <p>Edit</p>
-        </div>
-
-        <div
-          onClick={(e) => handleOnRemove()}
-          css={css`
-            display: flex;
-            position: absolute;
-            right: 0;
-            cursor: pointer;
-          `}
-        >
-          <FontAwesomeIcon
-            css={css`
-              width: 1rem;
-              margin: 0.5rem;
-            `}
-            icon={faTrash}
-          />
-          <p>Remove</p>
-        </div>
-      </div> */}
-    </div>
+    </>
   );
 };
diff --git a/components/modals/addCollection.js b/components/modals/addCollection.js
@@ -31,7 +31,8 @@ export const AddCollection = ({ setShowModalAdd }) => {
 
   const handleOnSave = () => {
     if (!name) setShowErrorValid("empty");
-    else if (name.match(/[^a-zA-Z0-9]/)) setShowErrorValid("character");
+    else if (name.match(/[^a-zA-Z0-9\s]+/)) setShowErrorValid("character");
+    else if (name.length > 16) setShowErrorValid("length");
     else {
       const isAvail = dataCol.findIndex(
         (data) => data.colName === name.toUpperCase()
@@ -172,6 +173,8 @@ export const AddCollection = ({ setShowModalAdd }) => {
                     {showErrorValid === "character" &&
                       "No special characters allowed!"}
                     {showErrorValid === "empty" && "Cannot Empty!"}
+                    {showErrorValid === "length" &&
+                      "No more then 16 characters!"}
                     {showErrorValid === "avail" &&
                       "Name collection already exist!"}
                   </p>

diff --git a/components/modals/addItems.js b/components/modals/addItems.js
@@ -126,10 +126,11 @@ export const AddItems = ({ setShowModalAdd, anime }) => {
                           text-align: center;
                           align-items: center;
                           border: 1px solid black;
+                          border-radius: 1rem;
                           min-width: 100px;
                           cursor: pointer;
                           ${colSelected.includes(col.id) &&
-                          "background-color: rgba(101, 198, 187, 0.3)"}
+                          "background-color: rgba(22, 160, 133, 0.7)"}
                           ${isAvail && "cursor:default"}
                         `}
                       >

diff --git a/components/modals/editCollection.js b/components/modals/editCollection.js
@@ -4,9 +4,28 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { addItemToCol, addNewCol } from "../../features/collections";
+import { addItemToCol, addNewCol, editCol } from "../../features/collections";
+
+export const EditCollection = ({ setShowModalEdit, colID, colName }) => {
+  const dispatch = useDispatch();
+  const [name, setName] = useState("");
+  const [showErrorValid, setShowErrorValid] = useState("");
+  const handleOnChange = (e) => {
+    const userInput = e.target.value;
+    setName(userInput);
+  };
+
+  const handleOnSave = (colId, colName) => {
+    if (!name) setShowErrorValid("empty");
+    else if (name.match(/[^a-zA-Z0-9\s]/)) setShowErrorValid("character");
+    else if (name.length > 16) setShowErrorValid("length");
+    else {
+      setShowModalEdit(true);
+      setShowErrorValid("");
+      dispatch(editCol({ id: colID, newName: name.toUpperCase() }));
+    }
+  };
 
-export const EditCollection = ({ setShowModalEdit, colID }) => {
   return (
     <>
       <div
@@ -36,7 +55,7 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
             margin-top: 1.5rem;
             margin-bottom: 1.5rem;
             width: 100%;
-            max-width: 60rem;
+            max-width: 40rem;
             margin-left: auto;
             margin-right: auto;
           `}
@@ -74,7 +93,7 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
                   font-weight: 700;
                 `}
               >
-                Edit collections name
+                Edit {colName} Name
               </p>
               {/* <p>Select Collection</p> */}
               <div
@@ -86,8 +105,33 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
                   css={css`
                     display: flex;
                   `}
-                ></div>
-                {/* {showErrorValid && (
+                >
+                  <input
+                    type="text"
+                    id="large-input"
+                    value={name}
+                    onChange={(e) => handleOnChange(e)}
+                    css={css`
+                      display: block;
+                      padding: 1rem;
+                      background-color: #f9fafb;
+                      color: #111827;
+                      width: 100%;
+                      border-radius: 0.5rem;
+                      border-width: 1px;
+                      border-color: #d1d5db;
+                      @media (min-width: 640px) {
+                        font-size: 1rem;
+                        line-height: 1.5rem;
+                      }
+                      &:focus {
+                        border-color: blue;
+                        --ring-color: #3b82f6;
+                      }
+                    `}
+                  />
+                </div>
+                {showErrorValid && (
                   <p
                     css={css`
                       color: red;
@@ -96,10 +140,12 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
                     {showErrorValid === "character" &&
                       "No special characters allowed!"}
                     {showErrorValid === "empty" && "Cannot Empty!"}
+                    {showErrorValid === "length" &&
+                      "No more then 16 characters!"}
                     {showErrorValid === "avail" &&
                       "Name collection already exist!"}
                   </p>
-                )} */}
+                )}
                 {/* {showSuccessSubmit && (
                   <p
                     css={css`
@@ -173,7 +219,7 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
                   Cancel
                 </button>
                 <button
-                  //   onClick={handleOnSave}
+                  onClick={handleOnSave}
                   css={css`
                     padding-top: 0.5rem;
                     padding-bottom: 0.5rem;
@@ -204,7 +250,7 @@ export const EditCollection = ({ setShowModalEdit, colID }) => {
                     }
                   `}
                 >
-                  Add
+                  Edit
                 </button>
               </div>
             </div>