@riosst100/pwa-marketplace 1.5.3 → 1.5.5

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/CollectibleGameSets/collectibleGameSets.js +23 -72
  3. package/src/components/CollectibleGameSets/collectibleGameSets.shimmer.js +50 -0
  4. package/src/components/CollectibleGameSets/index.js +1 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "1.5.3",
4
+ "version": "1.5.5",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/components/CollectibleGameSets/collectibleGameSets.js CHANGED
@@ -10,11 +10,14 @@ import defaultClasses from './collectibleGameSets.module.css';
10
10
  import { useStyle } from '@magento/venia-ui/lib/classify';
11
11
  import cn from 'classnames';
12
12
  import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
13
+ import { CollectibleGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets';
13
14
 
14
15
  const CollectibleGameSets = props => {
15
16
 
16
17
  const { product_type } = props;
17
18
 
19
+ const [active, setActive] = useState('all');
20
+
18
21
  const classes = useStyle(defaultClasses);
19
22
 
20
23
  const talonProps = useCollectibleGameSets({ product_type });
@@ -22,8 +25,7 @@ const CollectibleGameSets = props => {
22
25
  const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
23
26
 
24
27
  if (loading && !collectibleGameSets)
25
- return '';
26
- // return <SellerShimmer />;
28
+ return <CollectibleGameSetsShimmer />;
27
29
  if (error && !collectibleGameSets) return <ErrorView />;
28
30
 
29
31
  if (!collectibleGameSets) {
@@ -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')}>{sets.length ?
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
  };
package/src/components/CollectibleGameSets/collectibleGameSets.shimmer.js ADDED
@@ -0,0 +1,50 @@
1
+ import React from 'react';
2
+ import { shape, string } from 'prop-types';
3
+ import { useStyle } from '@magento/venia-ui/lib/classify';
4
+
5
+ import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
6
+ import defaultClasses from './collectibleGameSets.module.css';
7
+ import cn from 'classnames';
8
+ import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
9
+
10
+ const CollectibleGameSets = props => {
11
+ const classes = useStyle(defaultClasses, props.classes);
12
+
13
+ return (
14
+ <>
15
+ <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
16
+ <div className='border border-gray-100 px-6'>
17
+ <center>
18
+ <section className='single_list-indexing-container relative m-auto py-10'>
19
+ <Shimmer width="95%" height="6vh" />
20
+ </section>
21
+ </center>
22
+ <Divider className="mb-5 px-4" />
23
+ <section className='singles-container'>
24
+ <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
25
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
26
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
27
+ </div>
28
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
29
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
30
+ </div>
31
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
32
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
33
+ </div>
34
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
35
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
36
+ </div>
37
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
38
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
39
+ </div>
40
+ <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
41
+ <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
42
+ </div>
43
+ </div>
44
+ </section>
45
+ </div>
46
+ </>
47
+ );
48
+ };
49
+
50
+ export default CollectibleGameSets;
package/src/components/CollectibleGameSets/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { default } from './collectibleGameSets';
2
+ export { default as CollectibleGameSetsShimmer } from './collectibleGameSets.shimmer';