counting

libs/remix-ui/search/src/lib/components/results/ResultItem.tsx

@@ -9,18 +9,21 @@ interface ResultItemProps {
 }
 
 export const ResultItem = (props: ResultItemProps) => {
-  const { state, findText, disableForceReload } = useContext(SearchContext)
+  const { state, findText, disableForceReload, updateCount } = useContext(
+    SearchContext
+  )
   const [loading, setLoading] = useState<boolean>(false)
   const [lines, setLines] = useState<SearchResultLine[]>([])
   const [toggleExpander, setToggleExpander] = useState<boolean>(false)
   const reloadTimeOut = useRef(null)
+  const subscribed = useRef(true)
 
   useEffect(() => {
     reload()
   }, [props.file.timeStamp])
 
   useEffect(() => {
-    if(props.file.forceReload){
+    if (props.file.forceReload) {
       clearTimeout(reloadTimeOut.current)
       reloadTimeOut.current = setTimeout(() => reload(), 1000)
     }
@@ -34,11 +37,21 @@ export const ResultItem = (props: ResultItemProps) => {
     reload()
   }, [state.find])
 
+  useEffect(() => {
+    subscribed.current = true
+    return () => {
+      subscribed.current = false
+    }
+  }, [])
+
   const reload = () => {
     findText(props.file.filename).then(res => {
-      setLines(res)
-      setLoading(false)
-      disableForceReload(props.file.filename)
+      if (subscribed.current) {
+        setLines(res)
+        if (res) updateCount(res.length)
+        setLoading(false)
+        disableForceReload(props.file.filename)
+      }
     })
   }
 
@@ -56,6 +69,11 @@ export const ResultItem = (props: ResultItemProps) => {
               ></i>
             </button>{' '}
             <ResultFileName file={props.file} />
+            <div className="result_count">
+              <div className="result_count_number badge badge-pill badge-secondary">
+                {lines.length}
+              </div>
+            </div>
           </div>
           {loading ? <div className="loading">Loading...</div> : null}
           {!toggleExpander && !loading ? (

libs/remix-ui/search/src/lib/components/results/Results.tsx

@@ -1,16 +1,17 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { SearchContext } from '../../context/context'
 import { ResultItem } from './ResultItem'
 
 export const Results = () => {
   const { state } = useContext(SearchContext)
-
   return (
     <div data-id='search_results'>
-      {state.searchResults &&
+      {state.find ? <div className='result_count_number badge badge-pill badge-secondary'>{state.count} results</div>: null}
+      {state.count < state.maxResults && state.searchResults &&
         state.searchResults.map((result, index) => {
           return <ResultItem key={index} file={result} />
         })}
+      {state.find && state.count >= state.maxResults? <div className='alert alert-warning mt-1'>Too many results to display.<br></br>Please narrow your search.</div>: null}
     </div>
   )
 }

libs/remix-ui/search/src/lib/context/context.tsx

@@ -35,6 +35,7 @@ export interface SearchingStateInterface {
   toggleUseRegex: () => void
   setReplaceWithoutConfirmation: (value: boolean) => void
   disableForceReload: (file: string) => void
+  updateCount: (count: number) => void
 }
 
 export const SearchContext = createContext<SearchingStateInterface>(null)
@@ -134,6 +135,12 @@ export const SearchProvider = ({
         payload: file
       })
     },
+    updateCount: (count: number) => {
+      dispatch({
+        type: 'UPDATE_COUNT',
+        payload: count
+      })
+    },
     findText: async (path: string) => {
       if (!plugin) return
       try {
@@ -214,7 +221,7 @@ export const SearchProvider = ({
             lines: [],
             path: file,
             timeStamp: Date.now(),
-            forceReload: false
+            forceReload: false,
           }
           return r
         })

libs/remix-ui/search/src/lib/reducers/Reducer.ts

@@ -33,6 +33,12 @@ export const SearchReducer = (state: SearchState = SearchingInitialState, action
             return {
                 ...state,
                 searchResults: action.payload,
+                count: 0
+            }
+        case 'UPDATE_COUNT':
+            return {
+                ...state,
+                count: state.count + parseInt(action.payload)
             }
         case 'TOGGLE_CASE_SENSITIVE':
             return {

libs/remix-ui/search/src/lib/search.css

@@ -92,4 +92,15 @@
     text-overflow: ellipsis;
     overflow: hidden;
     text-transform: uppercase;
+}
+
+.search_tab  .result_count {
+    flex-grow: 1;
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.search_tab .result_count_number {
+    font-size: x-small;
 }

libs/remix-ui/search/src/lib/types/index.ts

@@ -1,3 +1,4 @@
+import { count } from "console";
 
 export interface Action {
     type: string
@@ -30,7 +31,7 @@ export interface SearchResult {
     path: string,
     lines: SearchResultLine[],
     timeStamp: number,
-    forceReload: boolean
+    forceReload: boolean,
 }
 
 export interface SearchState {
@@ -44,6 +45,8 @@ export interface SearchState {
     replaceWithOutConfirmation: boolean,
     useRegExp: boolean,
     timeStamp: number,
+    count: number,
+    maxResults: number
 }
 
 export const SearchingInitialState: SearchState = {
@@ -56,5 +59,7 @@ export const SearchingInitialState: SearchState = {
     matchWord: false,
     useRegExp: false,
     replaceWithOutConfirmation: false,
-    timeStamp: 0
+    timeStamp: 0,
+    count: 0,
+    maxResults: 500
 }