From b3e65a3d9f172205e92c954270142fae04bdbb90 Mon Sep 17 00:00:00 2001 From: Juan M Date: Tue, 21 May 2024 04:05:10 -0300 Subject: [PATCH 1/3] Events powers --- .../{EventCount.js => EventPower.js} | 14 ++-- src/components/EventsPowers.js | 81 +++++++++++++++++++ src/components/InCommon.js | 76 +++++------------ .../{event-count.css => event-power.css} | 8 +- src/styles/events-powers.css | 39 +++++++++ src/styles/in-common.css | 44 ---------- 6 files changed, 151 insertions(+), 111 deletions(-) rename src/components/{EventCount.js => EventPower.js} (54%) create mode 100644 src/components/EventsPowers.js rename src/styles/{event-count.css => event-power.css} (72%) create mode 100644 src/styles/events-powers.css diff --git a/src/components/EventCount.js b/src/components/EventPower.js similarity index 54% rename from src/components/EventCount.js rename to src/components/EventPower.js index 7d1f641..07a2343 100644 --- a/src/components/EventCount.js +++ b/src/components/EventPower.js @@ -1,24 +1,24 @@ import PropTypes from 'prop-types' import { DropProps } from 'models/drop' import TokenImage from 'components/TokenImage' -import 'styles/event-count.css' +import 'styles/event-power.css' /** - * @param {PropTypes.InferProps} props + * @param {PropTypes.InferProps} props */ -function EventCount({ event, count, size = 64 }) { +function EventPower({ event, count, size = 64 }) { return ( -
+
- {count} + {count}
) } -EventCount.propTypes = { +EventPower.propTypes = { event: PropTypes.shape(DropProps).isRequired, count: PropTypes.number.isRequired, size: PropTypes.number, } -export default EventCount +export default EventPower diff --git a/src/components/EventsPowers.js b/src/components/EventsPowers.js new file mode 100644 index 0000000..84ef9ad --- /dev/null +++ b/src/components/EventsPowers.js @@ -0,0 +1,81 @@ +import PropTypes from 'prop-types' +import { Link } from 'react-router-dom' +import { clsx } from 'clsx' +import { DropProps } from 'models/drop' +import TokenImage from 'components/TokenImage' +import EventPower from 'components/EventPower' +import 'styles/events-powers.css' + +/** + * @param {PropTypes.InferProps} props + */ +function EventsPowers({ + showAll = false, + perfectPower, + selectedEventIds, + onSelect, + events, + powers, + size = 64, + children, +}) { + return ( +
+ {powers.map(({ eventId, power }) => ( +
+ + + #{eventId} + +
+ ))} + {children} +
+ ) +} + +EventsPowers.propTypes = { + showAll: PropTypes.bool, + perfectPower: PropTypes.number, + selectedEventIds: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired, + onSelect: PropTypes.func.isRequired, + events: PropTypes.objectOf( + PropTypes.shape(DropProps).isRequired + ).isRequired, + powers: PropTypes.arrayOf( + PropTypes.shape({ + eventId: PropTypes.number.isRequired, + power: PropTypes.number.isRequired, + }).isRequired + ).isRequired, + size: PropTypes.number, + children: PropTypes.node, +} + +export default EventsPowers diff --git a/src/components/InCommon.js b/src/components/InCommon.js index af38bc3..c1ae0d1 100644 --- a/src/components/InCommon.js +++ b/src/components/InCommon.js @@ -1,7 +1,5 @@ import PropTypes from 'prop-types' import { createRef, useContext, useEffect, useMemo, useState } from 'react' -import { Link } from 'react-router-dom' -import { clsx } from 'clsx' import { SettingsContext } from 'stores/cache' import { DropProps } from 'models/drop' import { @@ -15,13 +13,12 @@ import { intersection } from 'utils/array' import { getColorForSeed } from 'utils/color' import ButtonLink from 'components/ButtonLink' import Card from 'components/Card' -import EventHeader from 'components/EventHeader' import ErrorMessage from 'components/ErrorMessage' -import EventCount from 'components/EventCount' +import EventHeader from 'components/EventHeader' +import EventsPowers from 'components/EventsPowers' import EventButtonGroup from 'components/EventButtonGroup' import AddressOwner from 'components/AddressOwner' import ButtonGroup from 'components/ButtonGroup' -import TokenImage from 'components/TokenImage' import ButtonClose from 'components/ButtonClose' import 'styles/in-common.css' @@ -32,7 +29,7 @@ function InCommon({ children, inCommon: initialInCommon = {}, events = {}, - showCount = 0, + showCount, showActive = true, createButtons = /** @@ -88,7 +85,7 @@ function InCommon({ let inCommonEventsAddresses = inCommonEntries.slice() let inCommonLimit = INCOMMON_EVENTS_LIMIT - if (showCount != null && showCount > 0) { + if (showCount != null) { inCommonLimit = inCommonEventsAddresses.reduce( (limit, [, addresses]) => { if (addresses.length === showCount) { @@ -107,6 +104,14 @@ function InCommon({ inCommonEventsAddresses = inCommonEventsAddresses.slice(0, inCommonLimit) } + const powers = useMemo( + () => inCommonEventsAddresses.map(([eventId, addresses]) => ({ + eventId, + power: addresses.length, + })), + [inCommonEventsAddresses] + ) + /** * @param {number} eventId */ @@ -244,57 +249,20 @@ function InCommon({ )} {inCommonTotal > 0 && (

- {showCount != null && showCount > 0 && `${inCommonLimit} of `} + {showCount != null && `${inCommonLimit} of `} {inCommonTotal}{' '} drop{inCommonTotal === 1 ? '' : 's'}{' '} in common

)} -
- {inCommonEventsAddresses.map( - ([eventId, addresses]) => ( -
0 && - showCount === addresses.length, - })} - title={events[eventId].name} - > - - - #{eventId} - -
- ) - )} + {hasMore && (
)} -
+ {inCommonTotal > 0 && ( {createButtons != null && diff --git a/src/styles/event-count.css b/src/styles/event-power.css similarity index 72% rename from src/styles/event-count.css rename to src/styles/event-power.css index 5f20852..812e8bb 100644 --- a/src/styles/event-count.css +++ b/src/styles/event-power.css @@ -1,12 +1,8 @@ -.event-count { +.event-power { position: relative; - display: inline-block; - margin: 4px; - width: 64px; - height: 64px; } -.event-count .count { +.event-power .power { position: absolute; top: 32px; right: 0; diff --git a/src/styles/events-powers.css b/src/styles/events-powers.css new file mode 100644 index 0000000..a6b29da --- /dev/null +++ b/src/styles/events-powers.css @@ -0,0 +1,39 @@ +.events-powers .event-power-card { + display: inline-block; + border: .1rem solid transparent; + border-radius: 12px; + margin: .2rem; + overflow-wrap: break-word; + width: 72px; +} + +.events-powers.show-all .event-power-card.perfect { + background-color: #eee; + border-color: #cdcdcd; +} + +.events-powers .event-power-card.selected { + background-color: #7d73e2 !important; + border-color: #473e6b !important; +} + +.events-powers .event-power-card .event-select-button { + background: transparent; + border-width: 0; + cursor: pointer; + display: inline-block; + margin: 4px; + outline: none; +} + +.events-powers .event-power-card .event-id { + text-align: center; + display: block; + cursor: pointer; + font-size: 80%; + margin: 1px; +} + +.events-powers .event-power-card.selected .event-id { + color: white; +} diff --git a/src/styles/in-common.css b/src/styles/in-common.css index 2dab6fb..85b0b86 100644 --- a/src/styles/in-common.css +++ b/src/styles/in-common.css @@ -2,50 +2,6 @@ width: 100%; } -.in-common .event-button { - background: transparent; - border-width: 0; - cursor: pointer; -} - -.in-common .in-common-event { - display: inline-block; - border: .1rem solid transparent; - border-radius: 12px; - margin: .2rem; - overflow-wrap: break-word; - width: 72px; -} - -.in-common .show-all .in-common-event.perfect { - background-color: #eee; - border-color: #cdcdcd; -} - -.in-common .in-common-event.selected { - background-color: #7d73e2 !important; - border-color: #473e6b !important; -} - -.in-common .in-common-event .event-image { - display: inline-block; - margin: 4px; - width: 64px; - height: 64px; -} - -.in-common .in-common-event .event-id { - text-align: center; - display: block; - cursor: pointer; - font-size: 80%; - margin: .1rem; -} - -.in-common .in-common-event.selected .event-id { - color: white; -} - .in-common .show-more { display: inline-block; margin-left: .5rem; From c5afad591e8ada14502b70f2d24619fa68648a10 Mon Sep 17 00:00:00 2001 From: Juan M Date: Tue, 21 May 2024 04:06:12 -0300 Subject: [PATCH 2/3] In common use memo --- src/components/InCommon.js | 79 ++++++++++++++++++++++---------------- 1 file changed, 46 insertions(+), 33 deletions(-) diff --git a/src/components/InCommon.js b/src/components/InCommon.js index c1ae0d1..3d3d1d0 100644 --- a/src/components/InCommon.js +++ b/src/components/InCommon.js @@ -82,27 +82,33 @@ function InCommon({ [inCommonEntries] ) - let inCommonEventsAddresses = inCommonEntries.slice() - let inCommonLimit = INCOMMON_EVENTS_LIMIT - - if (showCount != null) { - inCommonLimit = inCommonEventsAddresses.reduce( - (limit, [, addresses]) => { - if (addresses.length === showCount) { - return limit + 1 - } - return limit - }, - 0 - ) - } - - const inCommonTotal = inCommonEventsAddresses.length - const hasMore = inCommonTotal > inCommonLimit + const inCommonLimit = useMemo( + () => { + if (showCount == null) { + return INCOMMON_EVENTS_LIMIT + } + return inCommonEntries.reduce( + (limit, [, addresses]) => { + if (addresses.length === showCount) { + return limit + 1 + } + return limit + }, + 0 + ) + }, + [inCommonEntries, showCount] + ) - if (hasMore && !showAll) { - inCommonEventsAddresses = inCommonEventsAddresses.slice(0, inCommonLimit) - } + const inCommonEventsAddresses = useMemo( + () => { + if (!showAll && inCommonEntries.length > inCommonLimit) { + return inCommonEntries.slice(0, inCommonLimit) + } + return inCommonEntries.slice() + }, + [inCommonEntries, inCommonLimit, showAll] + ) const powers = useMemo( () => inCommonEventsAddresses.map(([eventId, addresses]) => ({ @@ -144,19 +150,26 @@ function InCommon({ } } - const activeAdressesColors = activeEventIds.length < 2 ? {} : - Object.fromEntries( - intersection( - // @ts-ignore - ...activeEventIds.map((activeEventId) => inCommon[activeEventId]) - ) - .map( - (address) => [ - address, - getColorForSeed(address), - ] - ) - ) + const activeAdressesColors = useMemo( + () => activeEventIds.length < 2 + ? {} + : Object.fromEntries( + intersection( + // @ts-ignore + ...activeEventIds.map((activeEventId) => inCommon[activeEventId]) + ) + .map( + (address) => [ + address, + getColorForSeed(address), + ] + ) + ), + [activeEventIds, inCommon] + ) + + const inCommonTotal = inCommonEntries.length + const hasMore = inCommonTotal > inCommonLimit useEffect( () => { From 780ba8da5335cf893afdcdb705fb9f6f7d14d273 Mon Sep 17 00:00:00 2001 From: Juan M Date: Tue, 21 May 2024 04:07:12 -0300 Subject: [PATCH 3/3] Version 1.13.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6cb90cd..1574096 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@poap-xyz/poap-family", - "version": "1.13.11", + "version": "1.13.12", "author": { "name": "POAP", "url": "https://poap.xyz"