Refactored MyStories.js

SundeepChand · SundeepChand · commit 9383640fd729 · 2021-07-15T12:30:13.000+05:30
diff --git a/src/assets/scss/pages/profileRelated.scss b/src/assets/scss/pages/profileRelated.scss
@@ -6,8 +6,10 @@
   margin: 16px 0px;
 }
 
-.my-stories .flex-row {
-  margin-bottom: 20px;
+.my-stories {
+  .roadmap-one {
+    margin-bottom: 20px;
+  }
 }
 
 .profile-picture {
diff --git a/src/components/Stories.js b/src/components/Stories.js
@@ -11,7 +11,7 @@ import SearchInput from '../modules/SearchInput'
 import Lists from '../utils/Lists'
 import userStory from '../services/user_story'
 
-const Stories = ({ profileId }) => {
+const Stories = ({ authorId, followerId }) => {
   const [currentStateSelected, selectState] = useState('Under consideration')
 
   const [page, setPage] = useState(1)
@@ -50,8 +50,6 @@ const Stories = ({ profileId }) => {
 
   const [authorQuery, setAuthorQuery] = useState('')
 
-  const authorId = useRef(profileId)
-
   const getPage = useCallback((page) => {
     setPage(page)
   }, [])
@@ -60,11 +58,12 @@ const Stories = ({ profileId }) => {
     const fetchStoryCount = async () => {
       const response = await userStory.getStoryCount(
         currentStateSelected,
-        authorId.current,
+        authorId,
         authorQuery,
         categoryQuery,
         productQuery,
-        searchQuery
+        searchQuery,
+        followerId
       )
       setStoryCount(response.data.data.userStoriesConnection.aggregate.count)
     }
@@ -75,8 +74,9 @@ const Stories = ({ profileId }) => {
     categoryQuery,
     productQuery,
     searchQuery,
+    authorQuery,
     authorId,
-    authorQuery
+    followerId
   ])
 
   useEffect(() => {
@@ -103,11 +103,12 @@ const Stories = ({ profileId }) => {
       const response = await userStory.getStories(
         page,
         currentStateSelected,
-        authorId.current,
+        authorId,
         authorQuery,
         categoryQuery,
         productQuery,
-        searchQuery
+        searchQuery,
+        followerId
       )
       setStories(response.data.data.userStories)
     }
@@ -118,8 +119,9 @@ const Stories = ({ profileId }) => {
     page,
     productQuery,
     searchQuery,
+    authorQuery,
     authorId,
-    authorQuery
+    followerId
   ])
 
   useEffect(() => {
@@ -212,13 +214,15 @@ const Stories = ({ profileId }) => {
             curr={product}
             setCurr={setProduct}
             itemList={products}
+            data-cy='product-dropdown'
           />
           <Dropdown
             title='Categories'
             reference={categoryDropdownContainer}
             curr={category}
             setCurr={setCategory}
             itemList={categories}
+            data-cy='category-dropdown'
           />
           <Dropdown
             title='Sort By'
diff --git a/src/modules/SearchInput.js b/src/modules/SearchInput.js
@@ -48,6 +48,7 @@ function SearchInput(props) {
           name='search'
           placeholder='Search'
           autoComplete='off'
+          data-cy='search-input'
           value={fieldToSearch === 'Title' ? searchTerm : userTerm}
           onChange={(event) => {
             if (fieldToSearch === 'Title') {
@@ -91,6 +92,7 @@ function SearchInput(props) {
           curr={fieldToSearch}
           setCurr={setFieldToSearch}
           itemList={['Title', 'Author']}
+          data-cy='toggle-title-dropdown'
         />
       </div>
       <Button
diff --git a/src/pages/MyStories.js b/src/pages/MyStories.js
@@ -1,179 +1,21 @@
-import React, { useState, useEffect, useRef, useContext } from 'react'
-import { apiURL } from '../config.json'
-import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
+import React, { useState, useContext } from 'react'
 import { Helmet } from 'react-helmet'
 
-import axios from 'axios'
-
-import LoadingIndicator from '../modules/LoadingIndicator'
 import Button from '../components/Button'
-import StoriesList from '../components/StoriesList'
 import Navigation from '../components/Navigation'
-import Dropdown from '../components/Dropdown'
 
-import Lists from '../utils/Lists'
 import Context from '../modules/Context'
 import Login from './Login'
 
-import userStory from '../services/user_story'
+import Stories from '../components/Stories'
 
 const MyStories = () => {
   const { state } = useContext(Context)
 
-  const [stories, setStories] = useState([])
-
   const [currentStateSelected, selectState] = useState('My Submissions')
 
-  const [storyStateSelected, selectStoryState] = useState('Under consideration')
-
-  const [product, setProduct] = useState('All')
-  const [sort, setSort] = useState('Most Voted')
-  const [category, setCategory] = useState('All')
-
-  const productDropdownContainer = useRef()
-  const sortDropdownContainer = useRef()
-  const categoryDropdownContainer = useRef()
-
-  const [categories, setCategories] = useState([])
-
-  const { promiseInProgress } = usePromiseTracker()
-
   const id = localStorage.getItem('id')
 
-  const [products, setProducts] = useState([])
-
-  useEffect(() => {
-    const comparatorVotes = (a, b) => {
-      return a.followers.length > b.followers.length ? -1 : 1
-    }
-    const comparatorComments = (a, b) => {
-      return a.user_story_comments.length > b.user_story_comments.length
-        ? -1
-        : 1
-    }
-
-    const updateStories = async () => {
-      if (sort === 'Most Voted') {
-        setStories(stories.sort(comparatorVotes))
-      }
-      if (sort === 'Most Discussed') {
-        setStories(stories.sort(comparatorComments))
-      }
-    }
-    trackPromise(updateStories())
-  }, [sort, stories, setStories])
-
-  useEffect(() => {
-    const fetchMyStories = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            userStories(where: { author: "${id}" }) {
-              id
-              Title
-              Description
-              followers {
-                id
-                username
-              }
-              user_story_comments {
-                Comments
-              }
-              product {
-                Name
-              }
-              Attachment {
-                id
-                url
-              }
-              author {
-                id
-                username
-              }
-              user_story_status {
-                Status
-              }
-              Category
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
-      )
-      setStories(response.data.data.userStories)
-    }
-    const fetchFollowingStories = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            userStories(where: { followers: "${id}" }) {
-              id
-              Title
-              Description
-              followers {
-                id
-              }
-              user_story_comments {
-                Comments
-              }
-              product {
-                Name
-              }
-              Attachment {
-                id
-                url
-              }
-              author {
-                id
-                username
-              }
-              user_story_status {
-                Status
-              }
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
-      )
-      setStories(response.data.data.userStories)
-    }
-    if (currentStateSelected === 'My Submissions')
-      trackPromise(fetchMyStories())
-    else trackPromise(fetchFollowingStories())
-  }, [currentStateSelected, id])
-
-  useEffect(() => {
-    const fetchProducts = async () => {
-      const response = await userStory.getProducts()
-      setProducts(
-        response.data.data.products.map((ele) => {
-          return ele.Name
-        })
-      )
-      setProducts((products) => ['All', ...products])
-    }
-    trackPromise(fetchProducts())
-  }, [id])
-
-  useEffect(() => {
-    const fetchCategories = async () => {
-      const response = await userStory.getCategories()
-
-      setCategories(
-        response.data.data.__type.enumValues.map((ele) => {
-          return ele.name
-        })
-      )
-      setCategories((categories) => ['All', ...categories])
-    }
-    trackPromise(fetchCategories())
-  }, [])
-
   return state.auth ? (
     <>
       <Helmet>
@@ -207,59 +49,11 @@ const MyStories = () => {
               Following
             </Button>
           </div>
-          <div className='flex flex-row flex-space-between roadmap-one'>
-            {Lists.stateList &&
-              Lists.stateList.map((state, key) => {
-                return (
-                  <Button
-                    className={
-                      storyStateSelected === state.status
-                        ? 'btn btn-tabs btn-tabs-selected'
-                        : 'btn btn-tabs'
-                    }
-                    key={key}
-                    onClick={() => selectStoryState(state.status)}
-                  >
-                    <i className='eos-icons'>{state.icon}</i>
-                    {state.status}
-                  </Button>
-                )
-              })}
-          </div>
-          <div className='flex flex-row options-bar'>
-            <Dropdown
-              title='Product'
-              reference={productDropdownContainer}
-              curr={product}
-              setCurr={setProduct}
-              itemList={products}
-            />
-            <Dropdown
-              title='Categories'
-              reference={categoryDropdownContainer}
-              curr={category}
-              setCurr={setCategory}
-              itemList={categories}
-            />
-            <Dropdown
-              title='Sort By'
-              reference={sortDropdownContainer}
-              curr={sort}
-              setCurr={setSort}
-              itemList={Lists.sortByList}
-            />
-          </div>
-          {promiseInProgress ? (
-            <LoadingIndicator />
-          ) : (
-            <div className='flex flex-column'>
-              <StoriesList
-                stories={stories}
-                state={storyStateSelected}
-                product={product}
-              />
-            </div>
-          )}
+
+          <Stories
+            authorId={currentStateSelected === 'My Submissions' ? id : null}
+            followerId={currentStateSelected === 'Following' ? id : null}
+          />
         </div>
       </div>
     </>
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
@@ -52,7 +52,7 @@ const Profile = (props) => {
           )}
           <div className='flex flex-column'>
             <h3>Stories by this user</h3>
-            <Stories profileId={profileId} />
+            <Stories authorId={profileId} />
           </div>
         </div>
       </div>
diff --git a/src/services/user_story.js b/src/services/user_story.js

Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,10 @@`
`6`	`6`	`margin: 16px 0px;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.my-stories .flex-row {`
`10`		`- margin-bottom: 20px;`
	`9`	`+.my-stories {`
	`10`	`+ .roadmap-one {`
	`11`	`+ margin-bottom: 20px;`
	`12`	`+ }`
`11`	`13`	`}`
`12`	`14`
`13`	`15`	`.profile-picture {`