@riosst100/pwa-marketplace 1.5.3 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -15,6 +15,8 @@ const CollectibleGameSets = props => {
|
|
|
15
15
|
|
|
16
16
|
const { product_type } = props;
|
|
17
17
|
|
|
18
|
+
const [active, setActive] = useState('all');
|
|
19
|
+
|
|
18
20
|
const classes = useStyle(defaultClasses);
|
|
19
21
|
|
|
20
22
|
const talonProps = useCollectibleGameSets({ product_type });
|
|
@@ -39,14 +41,30 @@ const CollectibleGameSets = props => {
|
|
|
39
41
|
);
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
const [active, setActive] = useState('all')
|
|
43
|
-
|
|
44
44
|
const setsLengthArr = [];
|
|
45
45
|
|
|
46
46
|
const setRelases = collectibleGameSets.map((setRelease, index) => {
|
|
47
47
|
const { release_type, sets } = setRelease;
|
|
48
48
|
|
|
49
49
|
setsLengthArr[release_type] = sets.length
|
|
50
|
+
|
|
51
|
+
const setsResult = [];
|
|
52
|
+
|
|
53
|
+
if (sets.length) {
|
|
54
|
+
sets.map((set, index) => {
|
|
55
|
+
const { set_name, option_id, set_abbreviation } = set;
|
|
56
|
+
|
|
57
|
+
const categoryUrl = resourceUrl(
|
|
58
|
+
`/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
setsResult.push(<li className='list-none'>
|
|
62
|
+
<Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
|
|
63
|
+
{set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small>
|
|
64
|
+
</Link>
|
|
65
|
+
</li>)
|
|
66
|
+
})
|
|
67
|
+
}
|
|
50
68
|
|
|
51
69
|
return (
|
|
52
70
|
<>
|
|
@@ -55,53 +73,18 @@ const CollectibleGameSets = props => {
|
|
|
55
73
|
<div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
|
|
56
74
|
{release_type}
|
|
57
75
|
</div>
|
|
58
|
-
<div className={cn('singles_item-list flex flex-col')}>{
|
|
59
|
-
sets.map((set, index) => {
|
|
60
|
-
const { set_name, option_id, set_abbreviation } = set;
|
|
61
|
-
|
|
62
|
-
const categoryUrl = resourceUrl(
|
|
63
|
-
`/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
return <li className='list-none'>
|
|
67
|
-
<Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
|
|
68
|
-
{set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small>
|
|
69
|
-
</Link>
|
|
70
|
-
</li>
|
|
71
|
-
})
|
|
72
|
-
: ''}</div>
|
|
76
|
+
<div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
|
|
73
77
|
</div> : ''}
|
|
74
78
|
</>
|
|
75
79
|
);
|
|
76
80
|
});
|
|
77
81
|
|
|
78
|
-
|
|
79
|
-
|
|
80
82
|
const handleActive = (val) => {
|
|
81
83
|
setActive(val);
|
|
82
84
|
}
|
|
83
85
|
|
|
84
86
|
const alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
|
|
85
87
|
|
|
86
|
-
const singles = [
|
|
87
|
-
{ id: 1, name: "Amonkhet" },
|
|
88
|
-
{ id: 2, name: "ApocalypseAPC" },
|
|
89
|
-
{ id: 3, name: "AmonkhetAKH" },
|
|
90
|
-
{ id: 4, name: "Rivals of IxalanRIX" }
|
|
91
|
-
];
|
|
92
|
-
|
|
93
|
-
const groupSinglesFirstLetter = (items) => {
|
|
94
|
-
return items.reduce((acc, item) => {
|
|
95
|
-
const firstLetter = item.name.charAt(0).toUpperCase();
|
|
96
|
-
acc[firstLetter] = acc[firstLetter] || [];
|
|
97
|
-
acc[firstLetter].push(item);
|
|
98
|
-
return acc;
|
|
99
|
-
}, {});
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
const groupedSingles = groupSinglesFirstLetter(singles);
|
|
103
|
-
const availableLetter = Object.keys(groupedSingles).sort();
|
|
104
|
-
|
|
105
88
|
return (
|
|
106
89
|
<>
|
|
107
90
|
<h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
|
|
@@ -149,42 +132,10 @@ const CollectibleGameSets = props => {
|
|
|
149
132
|
<Divider className="mb-5 px-4" />
|
|
150
133
|
<section className='singles-container'>
|
|
151
134
|
<div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
|
|
152
|
-
{availableLetter.map((initialLetter, index) => (
|
|
153
|
-
<>
|
|
154
|
-
{/* {active === 'all' || active === initialLetter ? (
|
|
155
|
-
<div className='singles_group-wrapper mb-4 px-4 inline-block w-full' key={index}>
|
|
156
|
-
<div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
|
|
157
|
-
{initialLetter}
|
|
158
|
-
</div>
|
|
159
|
-
<div
|
|
160
|
-
className={cn(
|
|
161
|
-
'singles_item-list flex flex-col'
|
|
162
|
-
)}
|
|
163
|
-
>
|
|
164
|
-
{groupedSingles[initialLetter].map((item, index) => (
|
|
165
|
-
<li key={index} className='list-none'>
|
|
166
|
-
<Link
|
|
167
|
-
to="/"
|
|
168
|
-
className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2"
|
|
169
|
-
>
|
|
170
|
-
{item.name}
|
|
171
|
-
</Link>
|
|
172
|
-
</li>
|
|
173
|
-
))}
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
</div>
|
|
177
|
-
) : null} */}
|
|
178
|
-
</>
|
|
179
|
-
))}
|
|
180
135
|
{setRelases}
|
|
181
136
|
</div>
|
|
182
137
|
</section>
|
|
183
138
|
</div>
|
|
184
|
-
{/* <StoreTitle>{"Magic: The Gathering" + " | " + (productType == "sealed-products" ? "Expansion Sets" : "All Sets")}</StoreTitle> */}
|
|
185
|
-
{/* <div className='text-[20px] pb-4 pt-5' id={productType == "sealed-products" ? 'expansion-sets' : 'all-sets'}><b></b></div>
|
|
186
|
-
|
|
187
|
-
<div className='flex flex-wrap gap-[30px]'>{setRelases}</div> */}
|
|
188
139
|
</>
|
|
189
140
|
);
|
|
190
141
|
};
|