diff --git a/components/cardCollection.js b/components/cardCollection.js index 49643e2..2795b4a 100644 --- a/components/cardCollection.js +++ b/components/cardCollection.js @@ -1,10 +1,8 @@ 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]; @@ -12,31 +10,25 @@ 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 ( -
+ <>
{ > {`Foto { padding: 1.5rem; display: flex; flex-direction: column; - flex: 1 1 0%; + // flex: 1 1 0%; + height: 6rem; `} >

@@ -104,52 +96,6 @@ export const CardCollection = (props) => {

- {/*
-
- -

Edit

-
- -
handleOnRemove()} - css={css` - display: flex; - position: absolute; - right: 0; - cursor: pointer; - `} - > - -

Remove

-
-
*/} - + ); }; diff --git a/components/modals/addCollection.js b/components/modals/addCollection.js index 9841b3b..fc5e4ef 100644 --- 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!"}

diff --git a/components/modals/addItems.js b/components/modals/addItems.js index 08a93bb..cbca91b 100644 --- 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 index d9fb34c..be7bcb0 100644 --- 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 ( <>
{ 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

{/*

Select Collection

*/}
{ css={css` display: flex; `} - >
- {/* {showErrorValid && ( + > + 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; + } + `} + /> +
+ {showErrorValid && (

{ {showErrorValid === "character" && "No special characters allowed!"} {showErrorValid === "empty" && "Cannot Empty!"} + {showErrorValid === "length" && + "No more then 16 characters!"} {showErrorValid === "avail" && "Name collection already exist!"}

- )} */} + )} {/* {showSuccessSubmit && (

{ Cancel diff --git a/components/modals/removeCollection.js b/components/modals/removeCollection.js new file mode 100644 index 0000000..e5574e3 --- /dev/null +++ b/components/modals/removeCollection.js @@ -0,0 +1,256 @@ +import { css } from "@emotion/react"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useState } from "react"; +import { useDispatch } from "react-redux"; +import { removeCol } from "../../features/collections"; + +export const RemoveCollection = ({ setShowModalRemove, colID, colName }) => { + const dispatch = useDispatch(); + + const handleOnSave = () => { + setShowModalRemove(true); + dispatch(removeCol(colID)); + }; + + return ( + <> +

+
+ {/*content*/} +
+ {/*body*/} +
+
+ +
+

+ Remove {colName} Collection? +

+ {/*

Select Collection

*/} +
+
+ {/* {showErrorValid && ( +

+ {showErrorValid === "character" && + "No special characters allowed!"} + {showErrorValid === "empty" && "Cannot Empty!"} + {showErrorValid === "length" && + "No more then 16 characters!"} + {showErrorValid === "avail" && + "Name collection already exist!"} +

+ )} */} + {/* {showSuccessSubmit && ( +

+ Collection Added! +

+ )} */} +
+
+ {/*footer*/} +
+
+ + +
+
+
+
+
+
+ + ); +}; diff --git a/features/collections.js b/features/collections.js index 821aa8b..6d22781 100644 --- a/features/collections.js +++ b/features/collections.js @@ -44,6 +44,18 @@ const collectionsSlice = createSlice({ state.value = newVal; }, removeItemCol: (state, action) => {}, + editCol: (state, action) => { + const newVal = state.value.map(function (col) { + if (col.id === action.payload.id) { + return { + id: col.id, + colName: action.payload.newName, + colItems: col.colItems, + }; + } else return col; + }); + state.value = newVal; + }, }, extraReducers: (builder) => { builder.addCase(fetchCollections.fulfilled, (state, action) => { @@ -52,7 +64,7 @@ const collectionsSlice = createSlice({ }, }); -export const { addNewCol, addItemToCol, removeCol, removeItemCol } = +export const { addNewCol, addItemToCol, removeCol, removeItemCol, editCol } = collectionsSlice.actions; export default collectionsSlice.reducer; diff --git a/pages/collections/[col-id].js b/pages/collections/[col-id].js index 2dbc594..379b6f9 100644 --- a/pages/collections/[col-id].js +++ b/pages/collections/[col-id].js @@ -4,6 +4,11 @@ import { css } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { CardCollection } from "../../components/cardCollection"; +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 default function CollectionDetailsID() { const allCol = useSelector((state) => state.collections.value); const router = useRouter(); @@ -62,13 +67,35 @@ export default function CollectionDetailsID() { `} > {itemSelected.map((anime, idx) => ( - + <> +
+ +
+ ))} diff --git a/pages/collections/index.js b/pages/collections/index.js index ff2a5e7..be3742f 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -1,27 +1,48 @@ import { css } from "@emotion/react"; import { ButtonClick } from "../../components/buttonClick"; -import { faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPencil, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"; import { BackButton } from "../../components/backButton"; import { useDispatch, useSelector } from "react-redux"; import { useEffect, useState } from "react"; import { AddCollection } from "../../components/modals/addCollection"; import { CardCollection } from "../../components/cardCollection"; -import { fetchCollections } from "../../features/collections"; +import { fetchCollections, removeCol } from "../../features/collections"; import { EditCollection } from "../../components/modals/editCollection"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { RemoveCollection } from "../../components/modals/removeCollection"; + +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 default function Collections() { const dispatch = useDispatch(); const allCol = useSelector((state) => state.collections.value); const [showModalAdd, setShowModalAdd] = useState(false); const [showModalEdit, setShowModalEdit] = useState(false); + const [showModalRemove, setShowModalRemove] = useState(false); + const [idEdit, setIdEdit] = useState(""); + const [idRemove, setIdRemove] = useState(""); + const [nameEdit, setNameEdit] = useState(""); + const [nameRemove, setNameRemove] = useState(""); // useEffect(() => { // dispatch(fetchCollections()); // }, []); - console.log(allCol); + const handleOnEdit = (id, name) => { + setIdEdit(id); + setNameEdit(name); + setShowModalEdit(true); + }; - const handleOnClick = () => {}; + const handleOnRemove = (id, name) => { + setIdRemove(id); + setNameRemove(name); + setShowModalRemove(true); + // dispatch(removeCol(id)); + }; return (
@@ -65,16 +86,86 @@ export default function Collections() { `} > {allCol?.map((col, idx) => ( - <> +
- +
+
handleOnEdit(col.id, col.colName)} + css={css` + display: flex; + position: absolute; + left: 0; + cursor: pointer; + &:hover { + color: rgba(101, 198, 187, 0.9); + } + `} + > + +

Edit

+
+ +
handleOnRemove(col.id, col.colName)} + css={css` + display: flex; + position: absolute; + right: 0; + cursor: pointer; + &:hover { + color: rgba(101, 198, 187, 0.9); + } + `} + > + +

Remove

+
+
+
))}
@@ -86,6 +177,15 @@ export default function Collections() { {showModalEdit && ( setShowModalEdit(!showModalEdit)} + colID={idEdit} + colName={nameEdit} + /> + )} + {showModalRemove && ( + setShowModalRemove(!showModalRemove)} + colID={idRemove} + colName={nameRemove} /> )} diff --git a/public/banner.jpg b/public/banner.jpg new file mode 100644 index 0000000..a4951e5 Binary files /dev/null and b/public/banner.jpg differ