From ebfff7c7fb5533bb4274e31ae4b8927a138dfae5 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 23 Feb 2022 11:00:14 +0100 Subject: [PATCH] counting --- .../src/lib/components/results/ResultItem.tsx | 28 +++++++++++++++---- .../src/lib/components/results/Results.tsx | 7 +++-- .../search/src/lib/context/context.tsx | 9 +++++- .../search/src/lib/reducers/Reducer.ts | 6 ++++ libs/remix-ui/search/src/lib/search.css | 11 ++++++++ libs/remix-ui/search/src/lib/types/index.ts | 9 ++++-- 6 files changed, 59 insertions(+), 11 deletions(-) diff --git a/libs/remix-ui/search/src/lib/components/results/ResultItem.tsx b/libs/remix-ui/search/src/lib/components/results/ResultItem.tsx index b9522ed1c1..e257c4900a 100644 --- a/libs/remix-ui/search/src/lib/components/results/ResultItem.tsx +++ b/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(false) const [lines, setLines] = useState([]) const [toggleExpander, setToggleExpander] = useState(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) => { > {' '} +
+
+ {lines.length} +
+
{loading ?
Loading...
: null} {!toggleExpander && !loading ? ( diff --git a/libs/remix-ui/search/src/lib/components/results/Results.tsx b/libs/remix-ui/search/src/lib/components/results/Results.tsx index 9a1b717cca..1c5521cfeb 100644 --- a/libs/remix-ui/search/src/lib/components/results/Results.tsx +++ b/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 (
- {state.searchResults && + {state.find ?
{state.count} results
: null} + {state.count < state.maxResults && state.searchResults && state.searchResults.map((result, index) => { return })} + {state.find && state.count >= state.maxResults?
Too many results to display.

Please narrow your search.
: null}
) } diff --git a/libs/remix-ui/search/src/lib/context/context.tsx b/libs/remix-ui/search/src/lib/context/context.tsx index b17d2d9708..1f7dfe9417 100644 --- a/libs/remix-ui/search/src/lib/context/context.tsx +++ b/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(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 }) diff --git a/libs/remix-ui/search/src/lib/reducers/Reducer.ts b/libs/remix-ui/search/src/lib/reducers/Reducer.ts index 0ead0fac4d..e5f0318bc5 100644 --- a/libs/remix-ui/search/src/lib/reducers/Reducer.ts +++ b/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 { diff --git a/libs/remix-ui/search/src/lib/search.css b/libs/remix-ui/search/src/lib/search.css index 4f4dfbd5bb..88f62ab5b2 100644 --- a/libs/remix-ui/search/src/lib/search.css +++ b/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; } \ No newline at end of file diff --git a/libs/remix-ui/search/src/lib/types/index.ts b/libs/remix-ui/search/src/lib/types/index.ts index 7b3d06e1b3..3d7fe96a32 100644 --- a/libs/remix-ui/search/src/lib/types/index.ts +++ b/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 } \ No newline at end of file