Cra rxjs search functionality

cra-rxjs-styled-components/src/App.tsx

@@ -14,6 +14,7 @@ import RepoBranchTreePath from './routes/repo/repository-code/repository-tree/re
 import RepoBranchBlobPath from './routes/repo/repository-code/repository-blob/repository-blob';
 import { UserProvider } from './context/UserProvider';
 import Index from './routes/Index';
+import { RepoFilterProvider } from './context/RepoFilterContext';
 
 function App() {
 	return (
@@ -56,7 +57,9 @@ function App() {
 						path="/:username"
 						element={
 							<AuthGuard>
-								<UserProfile />
+								<RepoFilterProvider>
+									<UserProfile />
+								</RepoFilterProvider>
 							</AuthGuard>
 						}
 					></Route>

cra-rxjs-styled-components/src/components/repo-filter/SearchInput.tsx

@@ -1,5 +1,21 @@
+import { useRepoFilter } from '../../context/RepoFilterContext';
 import { SearchTextInput } from './RepoFilter.styles';
 
 export default function SearchInput() {
-	return <SearchTextInput placeholder="Find a repository..." />;
+	const { search, setSearch } = useRepoFilter();
+
+	const handleChange = (e: any) => {
+		setSearch(e.target.value);
+	};
+	return (
+		<SearchTextInput
+			role="search"
+			type="search"
+			name="search"
+			id="search"
+			placeholder="Find a repository..."
+			value={search}
+			onInput={handleChange}
+		/>
+	);
 }

cra-rxjs-styled-components/src/context/RepoFilterContext.tsx

@@ -0,0 +1,64 @@
+import {
+	FILTER_TYPE_OPTIONS,
+	SORT_OPTIONS,
+	defaultLanguage,
+} from '../components/repo-filter/data';
+import { ReactNode, createContext, useContext, useState } from 'react';
+
+export interface RepoFilterContextInterface {
+	search: string;
+	setSearch: (value: string) => void;
+	language: string;
+	setLanguage: (value: string) => void;
+	sortBy: string;
+	setSortBy: (value: string) => void;
+	filterType: string;
+	setFilterType: (value: string) => void;
+	resetFilter: () => void;
+}
+
+interface RepoFilterProviderProps {
+	children: ReactNode;
+}
+export const RepoFilterContext = createContext<
+	RepoFilterContextInterface | undefined
+>(undefined);
+
+export function RepoFilterProvider({ children }: RepoFilterProviderProps) {
+	const [search, setSearch] = useState('');
+	const [language, setLanguage] = useState(defaultLanguage);
+	const [sortBy, setSortBy] = useState(SORT_OPTIONS.default);
+	const [filterType, setFilterType] = useState(FILTER_TYPE_OPTIONS.default);
+
+	const resetFilter = () => {
+		setSearch('');
+		setLanguage(defaultLanguage);
+		setSortBy(SORT_OPTIONS.default);
+		setFilterType(FILTER_TYPE_OPTIONS.default);
+	};
+	return (
+		<RepoFilterContext.Provider
+			value={{
+				search,
+				language,
+				sortBy,
+				filterType,
+				setSearch,
+				setLanguage,
+				setSortBy,
+				setFilterType,
+				resetFilter,
+			}}
+		>
+			{children}
+		</RepoFilterContext.Provider>
+	);
+}
+
+export function useRepoFilter() {
+	const context = useContext(RepoFilterContext);
+	if (context === undefined) {
+		throw new Error('useRepoFilter must be used within a RepoPage');
+	}
+	return context;
+}

cra-rxjs-styled-components/src/helpers/searchFunction.ts

@@ -0,0 +1,21 @@
+import { Repository } from '../interfaces/repositories.interfaces';
+
+// Function to filter repos by search
+export const repoDataFilteredBySearch = ({
+	repos,
+	search,
+}: {
+	repos: Repository[];
+	search: string;
+}) => {
+	if (repos.length < 1) {
+		return repos;
+	}
+	return repos.reduce((acc: Repository[], repo: Repository) => {
+		if (search !== '' && !repo?.name?.match(new RegExp(search, 'ig'))) {
+			return acc;
+		}
+
+		return [...acc, repo];
+	}, []);
+};