Skip to content

Commit 92d4d65

Browse files
sharmaadityaHQsharmaadityaHQ
authored
Merge pull request #41 from SundeepChand/refactor-mystory
Refactor Home.js, MyStories.js and Profile.js
2 parents d5b3845 + 25d05a2 commit 92d4d65

File tree

10 files changed

+431
-733
lines changed

10 files changed

+431
-733
lines changed

‎src/assets/scss/components/pagination.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,12 @@
2727
color: $primary;
2828
font-weight: bold;
2929
}
30+
31+
&-disabled {
32+
color: $medium-gray;
33+
34+
&:hover {
35+
cursor: not-allowed;
36+
}
37+
}
3038
}

‎src/assets/scss/pages/profileRelated.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
margin: 16px 0px;
77
}
88

9-
.my-stories .flex-row {
10-
margin-bottom: 20px;
9+
.my-stories {
10+
.roadmap-one {
11+
margin-bottom: 20px;
12+
}
1113
}
1214

1315
.profile-picture {

‎src/assets/scss/variables/colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $light-blue: $eos-cerulean-500;
33

44
$dark-color: #1A2A3A;
55
$gray-bg: #eaeaea;
6+
$medium-gray: #bbb;
67
$light-gray: #777777;
78
$dark-gray-transparent: rgba(71, 71, 71, 0.808);
89
$border-gray: #EDEFF0;

‎src/components/Pagination.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React, { useState, useEffect } from 'react'
22

3-
import { Link } from '@reach/router'
4-
53
const Pagination = (props) => {
64
const { getPage, storyCount, status, product } = props
75

86
const [currNumber, setCurrNumber] = useState(1)
97

10-
const [pages, setPages] = useState()
8+
const [pages, setPages] = useState(null)
119

1210
useEffect(() => {
1311
const resetPage = () => {
@@ -30,51 +28,52 @@ const Pagination = (props) => {
3028

3129
return (
3230
<div className='pagination'>
33-
<Link
34-
className='btn btn-pagination'
31+
<span
32+
className={`btn btn-pagination ${
33+
currNumber <= 1 ? 'btn-pagination-disabled' : ''
34+
}`}
3535
onClick={() => {
3636
if (pages.find((page) => page === currNumber - 1)) {
3737
setCurrNumber((currNumber) => currNumber - 1)
3838
getPage(currNumber - 1)
3939
}
4040
}}
41-
to='/'
4241
>
4342
<i className='eos-icons eos-18'>keyboard_arrow_left</i>
4443
{`Prev`}
45-
</Link>
46-
<div className='btn-pagination'>
44+
</span>
45+
<div className='btn btn-pagination'>
4746
{pages
4847
? pages.map((ele, key) => {
4948
return (
50-
<Link
49+
<span
5150
className={`number ${currNumber === ele ? 'selected' : ''}`}
5251
onClick={() => {
5352
setCurrNumber(ele)
5453
getPage(ele)
5554
}}
56-
to='/'
5755
key={key}
5856
>
5957
{ele}
60-
</Link>
58+
</span>
6159
)
6260
})
6361
: ''}
6462
</div>
65-
<Link
66-
className='btn btn-pagination'
63+
<span
64+
className={`btn btn-pagination ${
65+
currNumber >= pages?.length ? 'btn-pagination-disabled' : ''
66+
}`}
6767
onClick={() => {
6868
if (pages.find((page) => page === currNumber + 1)) {
6969
setCurrNumber((currNumber) => currNumber + 1)
7070
getPage(currNumber + 1)
7171
}
7272
}}
73-
to='/'
7473
>
7574
{`Next`}
7675
<i className='eos-icons eos-18'>keyboard_arrow_right</i>
77-
</Link>
76+
</span>
7877
</div>
7978
)
8079
}

‎src/components/Stories.js‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
import React, { useState, useEffect, useRef, useCallback } from 'react'
2+
import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
3+
4+
import Button from './Button'
5+
import StoriesList from './StoriesList'
6+
import Pagination from './Pagination'
7+
import Dropdown from './Dropdown'
8+
import LoadingIndicator from '../modules/LoadingIndicator'
9+
import SearchInput from '../modules/SearchInput'
10+
11+
import Lists from '../utils/Lists'
12+
import userStory from '../services/user_story'
13+
14+
const Stories = ({ authorId, followerId }) => {
15+
const [currentStateSelected, selectState] = useState('Under consideration')
16+
17+
const [page, setPage] = useState(1)
18+
19+
const [product, setProduct] = useState('All')
20+
21+
const [sort, setSort] = useState('Most Voted')
22+
23+
const [category, setCategory] = useState('All')
24+
25+
const [products, setProducts] = useState([])
26+
27+
const [categories, setCategories] = useState([])
28+
29+
const [searchTerm, setSearchTerm] = useState('')
30+
31+
const { promiseInProgress } = usePromiseTracker({ area: 'stories-div' })
32+
33+
const [storyCount, setStoryCount] = useState()
34+
35+
const [stories, setStories] = useState([])
36+
37+
const productDropdownContainer = useRef()
38+
39+
const sortDropdownContainer = useRef()
40+
41+
const categoryDropdownContainer = useRef()
42+
43+
const [productQuery, setProductQuery] = useState(``)
44+
45+
const [categoryQuery, setCategoryQuery] = useState(``)
46+
47+
const [searchQuery, setSearchQuery] = useState('')
48+
49+
const [userTerm, setUserTerm] = useState('')
50+
51+
const [authorQuery, setAuthorQuery] = useState('')
52+
53+
const getPage = useCallback((page) => {
54+
setPage(page)
55+
}, [])
56+
57+
useEffect(() => {
58+
const fetchStoryCount = async () => {
59+
const response = await userStory.getStoryCount(
60+
currentStateSelected,
61+
authorId,
62+
authorQuery,
63+
categoryQuery,
64+
productQuery,
65+
searchQuery,
66+
followerId
67+
)
68+
setStoryCount(response.data.data.userStoriesConnection.aggregate.count)
69+
}
70+
fetchStoryCount()
71+
}, [
72+
currentStateSelected,
73+
product,
74+
categoryQuery,
75+
productQuery,
76+
searchQuery,
77+
authorQuery,
78+
authorId,
79+
followerId
80+
])
81+
82+
useEffect(() => {
83+
if (product !== 'All') {
84+
setProductQuery(`product : {Name: "${product}"}`)
85+
} else {
86+
setProductQuery(``)
87+
}
88+
if (category !== 'All') {
89+
setCategoryQuery(`Category : "${category}"`)
90+
} else {
91+
setCategoryQuery(``)
92+
}
93+
if (searchTerm === '') {
94+
setSearchQuery('')
95+
}
96+
if (userTerm === '') {
97+
setAuthorQuery('')
98+
}
99+
}, [product, category, searchTerm, userTerm])
100+
101+
useEffect(() => {
102+
const fetchStories = async () => {
103+
const response = await userStory.getStories(
104+
page,
105+
currentStateSelected,
106+
authorId,
107+
authorQuery,
108+
categoryQuery,
109+
productQuery,
110+
searchQuery,
111+
followerId
112+
)
113+
setStories(response.data.data.userStories)
114+
}
115+
trackPromise(fetchStories(), 'stories-div')
116+
}, [
117+
categoryQuery,
118+
currentStateSelected,
119+
page,
120+
productQuery,
121+
searchQuery,
122+
authorQuery,
123+
authorId,
124+
followerId
125+
])
126+
127+
useEffect(() => {
128+
const fetchProducts = async () => {
129+
const response = await userStory.getProducts()
130+
return response.data.data.product !== null
131+
? setProducts([
132+
'All',
133+
...response.data.data.products?.map((ele) => {
134+
return ele.Name
135+
})
136+
])
137+
: setProducts(['All'])
138+
}
139+
fetchProducts()
140+
}, [])
141+
142+
useEffect(() => {
143+
const fetchCategories = async () => {
144+
const response = await userStory.getCategories()
145+
setCategories([
146+
'All',
147+
...response.data.data.__type.enumValues.map((ele) => {
148+
return ele.name
149+
})
150+
])
151+
}
152+
fetchCategories()
153+
}, [])
154+
155+
useEffect(() => {
156+
const comparatorVotes = (a, b) => {
157+
return a.followers.length > b.followers.length ? -1 : 1
158+
}
159+
const comparatorComments = (a, b) => {
160+
return a.user_story_comments.length > b.user_story_comments.length
161+
? -1
162+
: 1
163+
}
164+
165+
const updateStories = async () => {
166+
if (sort === 'Most Voted') {
167+
setStories(stories.sort(comparatorVotes))
168+
}
169+
if (sort === 'Most Discussed') {
170+
setStories(stories.sort(comparatorComments))
171+
}
172+
}
173+
trackPromise(updateStories(), 'stories-div')
174+
}, [sort, stories, setStories])
175+
176+
return (
177+
<div>
178+
<div className='roadmap'>
179+
{Lists.stateList &&
180+
Lists.stateList.map((state, key) => {
181+
return (
182+
<Button
183+
className={
184+
currentStateSelected === state.status
185+
? 'btn btn-tabs btn-tabs-selected'
186+
: 'btn btn-tabs'
187+
}
188+
key={key}
189+
onClick={() => {
190+
selectState(state.status)
191+
setPage(1)
192+
}}
193+
>
194+
<i className='eos-icons'>{state.icon}</i>
195+
{state.status}
196+
</Button>
197+
)
198+
})}
199+
</div>
200+
201+
<div className='flex flex-row search-bar'>
202+
<SearchInput
203+
searchTerm={searchTerm}
204+
setSearchTerm={setSearchTerm}
205+
userTerm={userTerm}
206+
setUserTerm={setUserTerm}
207+
setSearchQuery={setSearchQuery}
208+
setAuthorQuery={setAuthorQuery}
209+
/>
210+
<div className='flex flex-row options-bar'>
211+
<Dropdown
212+
title='Product'
213+
reference={productDropdownContainer}
214+
curr={product}
215+
setCurr={setProduct}
216+
itemList={products}
217+
data-cy='product-dropdown'
218+
/>
219+
<Dropdown
220+
title='Categories'
221+
reference={categoryDropdownContainer}
222+
curr={category}
223+
setCurr={setCategory}
224+
itemList={categories}
225+
data-cy='category-dropdown'
226+
/>
227+
<Dropdown
228+
title='Sort By'
229+
reference={sortDropdownContainer}
230+
curr={sort}
231+
setCurr={setSort}
232+
itemList={Lists.sortByList}
233+
/>
234+
</div>
235+
</div>
236+
{promiseInProgress ? (
237+
<LoadingIndicator />
238+
) : (
239+
<div className='stories-div'>
240+
<StoriesList
241+
stories={stories}
242+
state={currentStateSelected}
243+
product={product}
244+
/>
245+
</div>
246+
)}
247+
<Pagination
248+
getPage={getPage}
249+
storyCount={storyCount}
250+
status={currentStateSelected}
251+
product={product}
252+
/>
253+
</div>
254+
)
255+
}
256+
257+
export default Stories

0 commit comments

Comments
 (0)