Merge branch 'main' of https://github.com/kailash360/user-story into add-tests

Author: kailash360

.eslintrc.yml

@@ -8,6 +8,7 @@ env:
 root: true
 plugins:
   - react
+  - react-hooks
 rules:
   arrow-spacing: 'error'
   no-const-assign: 'error'
@@ -16,3 +17,5 @@ rules:
   prefer-template: 'error'
   prefer-destructuring: ['error', { 'object': true, 'array': false }]
   object-curly-spacing: [2, 'always']
+  react-hooks/rules-of-hooks: 'error'
+  react-hooks/exhaustive-deps: 'warn'

src/components/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default () => {
+function Footer() {
   return (
     <div className='footer-main'>
       <a className='link link-default' href='/policies'>
@@ -11,3 +11,5 @@ export default () => {
     </div>
   )
 }
+
+export default Footer

src/components/Pagination.js

@@ -31,54 +31,56 @@ const Pagination = (props) => {
   }, [storyCount])
 
   return (
-    <div className='pagination'>
-      <span
-        className={`btn btn-pagination ${
-          currNumber <= 1 ? 'btn-pagination-disabled' : ''
-        }`}
-        onClick={() => {
-          if (pages.find((page) => page === currNumber - 1)) {
-            setCurrNumber((currNumber) => currNumber - 1)
-            getPage(currNumber - 1)
-          }
-        }}
-      >
-        <EOS_KEYBOARD_ARROW_LEFT className='eos-icons eos-18' />
-        {`Prev`}
-      </span>
-      <div className='btn btn-pagination'>
-        {pages
-          ? pages.map((ele, key) => {
-              return (
-                <span
-                  className={`number ${currNumber === ele ? 'selected' : ''}`}
-                  onClick={() => {
-                    setCurrNumber(ele)
-                    getPage(ele)
-                  }}
-                  key={key}
-                >
-                  {ele}
-                </span>
-              )
-            })
-          : ''}
+    storyCount > 5 && (
+      <div className='pagination'>
+        <span
+          className={`btn btn-pagination ${
+            currNumber <= 1 ? 'btn-pagination-disabled' : ''
+          }`}
+          onClick={() => {
+            if (pages.find((page) => page === currNumber - 1)) {
+              setCurrNumber((currNumber) => currNumber - 1)
+              getPage(currNumber - 1)
+            }
+          }}
+        >
+          <EOS_KEYBOARD_ARROW_LEFT className='eos-icons eos-18' />
+          {`Prev`}
+        </span>
+        <div className='btn btn-pagination'>
+          {pages
+            ? pages.map((ele, key) => {
+                return (
+                  <span
+                    className={`number ${currNumber === ele ? 'selected' : ''}`}
+                    onClick={() => {
+                      setCurrNumber(ele)
+                      getPage(ele)
+                    }}
+                    key={key}
+                  >
+                    {ele}
+                  </span>
+                )
+              })
+            : ''}
+        </div>
+        <span
+          className={`btn btn-pagination ${
+            currNumber >= pages?.length ? 'btn-pagination-disabled' : ''
+          }`}
+          onClick={() => {
+            if (pages.find((page) => page === currNumber + 1)) {
+              setCurrNumber((currNumber) => currNumber + 1)
+              getPage(currNumber + 1)
+            }
+          }}
+        >
+          {`Next`}
+          <EOS_KEYBOARD_ARROW_RIGHT className='eos-icons eos-18' />
+        </span>
       </div>
-      <span
-        className={`btn btn-pagination ${
-          currNumber >= pages?.length ? 'btn-pagination-disabled' : ''
-        }`}
-        onClick={() => {
-          if (pages.find((page) => page === currNumber + 1)) {
-            setCurrNumber((currNumber) => currNumber + 1)
-            getPage(currNumber + 1)
-          }
-        }}
-      >
-        {`Next`}
-        <EOS_KEYBOARD_ARROW_RIGHT className='eos-icons eos-18' />
-      </span>
-    </div>
+    )
   )
 }
 

src/components/ProfileImageUploader.js

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 import Modal from './Modal'
 import axios from 'axios'
-import * as config from '../config.json'
 import LoadingIndicator from '../modules/LoadingIndicator'
 import FormError from './FormError'
 import { EOS_DELETE } from 'eos-icons-react'
-const { apiURL } = config
+const { apiURL } = require('../config.json')
 
 const ProfileImageUploader = ({
   userId,

src/components/Stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 
 import Button from './Button'
@@ -16,7 +16,7 @@ const Stories = ({ authorId, followerId }) => {
 
   const [page, setPage] = useState(1)
 
-  const statusOptions = []
+  const statusOptions = useMemo(() => [], [])
 
   const [status, setStatus] = useState('Under consideration')
 

src/components/UsersSuggestionDropdown.js

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
-import * as config from '../config.json'
 import LoadingIndicator from '../modules/LoadingIndicator'
-const { apiURL } = config
+const { apiURL } = require('../config.json')
 
 const UsersSuggestionDropdown = ({
   isOpen,

src/hooks/useAuth.js

@@ -1,8 +1,7 @@
 import axios from 'axios'
-import * as config from '../config.json'
 import Context from '../modules/Context'
 import { useContext } from 'react'
-const { apiURL } = config
+const { apiURL } = require('../config.json')
 
 const useAuth = () => {
   const { dispatch } = useContext(Context)

src/modules/TitleSearch.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { debounce } from 'lodash'
+import React, { useState, useEffect } from 'react'
 import userStory from '../services/user_story'
 import { strip } from '../utils/filterText'
 import { EOS_ARROW_FORWARD, EOS_THUMB_UP } from 'eos-icons-react'
@@ -9,20 +8,14 @@ const Search = (props) => {
 
   const [searchResults, setSearchResults] = useState([])
 
-  const handleTitleChange = useCallback(
-    debounce(async (title) => {
+  useEffect(() => {
+    if (!title) return
+
+    setTimeout(async () => {
       const response = await userStory.getStoriesByTitle(title)
       setSearchResults(response.data.data.userStories)
-    }, 600),
-    []
-  )
-
-  useEffect(() => {
-    if (!title) {
-      return
-    }
-    handleTitleChange(title)
-  }, [title, handleTitleChange])
+    }, 600)
+  }, [title])
 
   if (!title) {
     return ''

src/services/api.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
-import * as CONFIG from '../config.json'
-const { apiURL, APP_ENV } = CONFIG
+const { apiURL, APP_ENV } = require('../config.json')
 
 const config = {
   baseURL: apiURL,