Merge pull request #61 from SundeepChand/fix-newstory

Added limit to the characters being displayed in stories list

Author: sharmaadityaHQ

src/components/StoriesList.js

@@ -2,18 +2,11 @@ import React from 'react'
 import { navigate, Link } from '@reach/router'
 
 import Vote from './Vote'
+import { strip } from '../utils/filterText'
 
 const StoriesList = (props) => {
   const { stories, state, product } = props
 
-  const strip = (html) => {
-    html = html.replace(/<\s*[^>]*>/gi, '')
-    if (html.length > 80) {
-      html = `${html.substring(0, 80)}...`
-    }
-    return html
-  }
-
   return (
     <div className='flex flex-column' data-cy='stories'>
       {stories && stories.length ? (
@@ -28,8 +21,8 @@ const StoriesList = (props) => {
                   navigate(`/story/${story.id}`)
                 }}
               >
-                <h3>{story.Title}</h3>
-                <p>{strip(story.Description)}</p>
+                <h3>{strip(story.Title, 80)}</h3>
+                <p>{strip(story.Description, 80)}</p>
               </div>
               <div className='story-author story-subcontent'>
                 <div className='user-avatar'>

src/modules/TitleSearch.js

@@ -1,16 +1,13 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { debounce } from 'lodash'
 import userStory from '../services/user_story'
+import { strip } from '../utils/filterText'
 
 const Search = (props) => {
   const { title } = props
 
   const [searchResults, setSearchResults] = useState([])
 
-  const strip = (html) => {
-    return html.replace(/<\s*[^>]*>/gi, '')
-  }
-
   const handleTitleChange = useCallback(
     debounce(async (title) => {
       const response = await userStory.getStoriesByTitle(title)
@@ -20,6 +17,9 @@ const Search = (props) => {
   )
 
   useEffect(() => {
+    if (!title) {
+      return
+    }
     handleTitleChange(title)
   }, [title, handleTitleChange])
 
@@ -42,8 +42,7 @@ const Search = (props) => {
             key={key}
           >
             <div className='stories-content title-search-result'>
-              <h4>{result.Title}</h4>
-              {strip(result.Description)}
+              <h4>{strip(result.Title, 80)}</h4>
             </div>
             <div className='icon-display'>
               {result.followers.length}

src/utils/filterText.js

@@ -3,3 +3,11 @@ export const filterDescriptionText = (text) => {
   text = text.replace(/[\r\n]/g, '') // Remove the line endings
   return text
 }
+
+export const strip = (html, len) => {
+  html = html.replace(/<\s*[^>]*>/gi, '')
+  if (html.length > len) {
+    html = `${html.substring(0, len)}...`
+  }
+  return html
+}