From 719cfe7fb3a836b5070bb79de246c922d759eb8f Mon Sep 17 00:00:00 2001 From: zasemozer Date: Sat, 10 Sep 2022 01:46:00 +0300 Subject: [PATCH 1/3] modal-tokyo --- client/components/NftPage/Modal.js | 24 ------------- client/components/NftPage/NFTItem.js | 3 +- client/components/NftPage/NFTListContainer.js | 34 +++++++++++++------ client/components/NftPage/NFTsList.js | 14 ++++++-- client/components/modals/Modal.js | 27 +++++++++++++++ client/package-lock.json | 18 ++++------ 6 files changed, 71 insertions(+), 49 deletions(-) delete mode 100644 client/components/NftPage/Modal.js create mode 100644 client/components/modals/Modal.js diff --git a/client/components/NftPage/Modal.js b/client/components/NftPage/Modal.js deleted file mode 100644 index ec1f38e..0000000 --- a/client/components/NftPage/Modal.js +++ /dev/null @@ -1,24 +0,0 @@ -const Modal = ({ active, setActive }) => { - return ( -
setActive(false)} - > -
e.stopPropagation()} - > -
Image
-
-
NAME
-
PRICE
-
-
DESCRIPTION
-
-
- ) -} - -export default Modal diff --git a/client/components/NftPage/NFTItem.js b/client/components/NftPage/NFTItem.js index 76f154d..3377989 100644 --- a/client/components/NftPage/NFTItem.js +++ b/client/components/NftPage/NFTItem.js @@ -1,4 +1,4 @@ -const NFTItem = ({ image, name }) => { +const NFTItem = ({ image, name, desc }) => { return (
@@ -6,6 +6,7 @@ const NFTItem = ({ image, name }) => { {name}
diff --git a/client/components/NftPage/NFTListContainer.js b/client/components/NftPage/NFTListContainer.js index fd22661..be96a60 100644 --- a/client/components/NftPage/NFTListContainer.js +++ b/client/components/NftPage/NFTListContainer.js @@ -1,23 +1,37 @@ import { useState } from 'react' -import { useAllTokens } from '../../queries' -import Modal from './Modal' +import Modal from '../modals/Modal' import NFTsList from './NFTsList' +import { useAllTokens } from '../../queries' const NFTListContainer = () => { const [modalActive, setModalActive] = useState(false) const { data } = useAllTokens() + const [elementId, setElementId] = useState(undefined) + + const dataWithId = + data?.map((el) => { + return { ...el, id: el.image, desc: el.description } + }) || [] + + const elInModal = dataWithId.find((el) => el.id === elementId) + + const setElementToState = (id) => { + setElementId(id) + setModalActive(true) + } + return ( <> -
setModalActive(true)} - > - {data?.map(({ image, name }) => ( - - ))} +
+
- +
) diff --git a/client/components/NftPage/NFTsList.js b/client/components/NftPage/NFTsList.js index 6e89244..0c9cbb0 100644 --- a/client/components/NftPage/NFTsList.js +++ b/client/components/NftPage/NFTsList.js @@ -1,9 +1,19 @@ import NFTItem from './NFTItem' -const NFTsList = (props) => { +const NFTsList = ({ data, setElementToState }) => { + const handleItemClick = (identifier) => { + return () => { + setElementToState(identifier) + } + } + return (
- + {data?.map(({ image, name, desc, id }) => ( + + + + ))}
) } diff --git a/client/components/modals/Modal.js b/client/components/modals/Modal.js new file mode 100644 index 0000000..4c4a549 --- /dev/null +++ b/client/components/modals/Modal.js @@ -0,0 +1,27 @@ +const Modal = ({ active, setActive, name, desc }) => { + const handleToggleClick = () => { + setActive() + } + const handleStopPropag = (e) => { + e.stopPropagation() + } + return active ? ( +
+
+
+
{name}
+ {/*
PRICE
*/} +
+
{desc}
+
+
+ ) : null +} + +export default Modal diff --git a/client/package-lock.json b/client/package-lock.json index 6be29a2..86f4228 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -5205,8 +5205,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "acorn-node": { "version": "1.8.2", @@ -5832,8 +5831,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true, - "requires": {} + "dev": true }, "eslint-import-resolver-node": { "version": "0.3.6", @@ -6015,8 +6013,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz", "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==", - "dev": true, - "requires": {} + "dev": true }, "eslint-scope": { "version": "7.1.1", @@ -7393,8 +7390,7 @@ "styled-jsx": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz", - "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==", - "requires": {} + "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==" }, "supports-color": { "version": "7.2.0", @@ -7541,8 +7537,7 @@ "use-error-boundary": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/use-error-boundary/-/use-error-boundary-2.0.6.tgz", - "integrity": "sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==", - "requires": {} + "integrity": "sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==" }, "util-deprecate": { "version": "1.0.2", @@ -7592,8 +7587,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" }, "xtend": { "version": "4.0.2", From 32ac5dd67c5f07d30f8281bf1eb72db1ec6a7805 Mon Sep 17 00:00:00 2001 From: zasemozer Date: Sat, 10 Sep 2022 18:49:23 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BF=D0=BE=20=D0=BA=D0=BE=D0=BC=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=D0=BC=20=D0=92=D0=B0=D0=BD=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/NftPage/NFTListContainer.js | 10 ++++------ client/components/NftPage/NFTsList.js | 6 +++--- client/components/modals/Modal.js | 1 - 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/client/components/NftPage/NFTListContainer.js b/client/components/NftPage/NFTListContainer.js index be96a60..751907f 100644 --- a/client/components/NftPage/NFTListContainer.js +++ b/client/components/NftPage/NFTListContainer.js @@ -6,16 +6,14 @@ import { useAllTokens } from '../../queries' const NFTListContainer = () => { const [modalActive, setModalActive] = useState(false) const { data } = useAllTokens() - const [elementId, setElementId] = useState(undefined) + const [elementId, setElementId] = useState(null) const dataWithId = - data?.map((el) => { - return { ...el, id: el.image, desc: el.description } - }) || [] + data?.map((el) => ({ ...el, id: el.image, desc: el.description })) || [] const elInModal = dataWithId.find((el) => el.id === elementId) - const setElementToState = (id) => { + const setToggleModal = (id) => { setElementId(id) setModalActive(true) } @@ -23,7 +21,7 @@ const NFTListContainer = () => { return ( <>
- +
{ +const NFTsList = ({ data, setToggleModal }) => { const handleItemClick = (identifier) => { return () => { - setElementToState(identifier) + setToggleModal(identifier) } } @@ -13,7 +13,7 @@ const NFTsList = ({ data, setElementToState }) => { - ))} + )) || []}
) } diff --git a/client/components/modals/Modal.js b/client/components/modals/Modal.js index 4c4a549..9d290a7 100644 --- a/client/components/modals/Modal.js +++ b/client/components/modals/Modal.js @@ -16,7 +16,6 @@ const Modal = ({ active, setActive, name, desc }) => { >
{name}
- {/*
PRICE
*/}
{desc}
From dc9b9a5cf47dc3fcd21a38b07ceb542d2bf32478 Mon Sep 17 00:00:00 2001 From: zasemozer <35508088+zasemozer@users.noreply.github.com> Date: Tue, 13 Sep 2022 15:56:54 +0300 Subject: [PATCH 3/3] adding children to modal window --- client/components/NftPage/NFTListContainer.js | 10 ++++------ client/components/modals/Modal.js | 5 ++--- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/client/components/NftPage/NFTListContainer.js b/client/components/NftPage/NFTListContainer.js index 751907f..c850391 100644 --- a/client/components/NftPage/NFTListContainer.js +++ b/client/components/NftPage/NFTListContainer.js @@ -24,12 +24,10 @@ const NFTListContainer = () => {
- + +

{elInModal?.name}

+

{elInModal?.description}

+
) diff --git a/client/components/modals/Modal.js b/client/components/modals/Modal.js index 9d290a7..439c68e 100644 --- a/client/components/modals/Modal.js +++ b/client/components/modals/Modal.js @@ -1,4 +1,4 @@ -const Modal = ({ active, setActive, name, desc }) => { +const Modal = ({ active, setActive, children }) => { const handleToggleClick = () => { setActive() } @@ -15,9 +15,8 @@ const Modal = ({ active, setActive, name, desc }) => { onClick={handleStopPropag} >
-
{name}
+
{children}
-
{desc}
) : null