diff --git a/cra-rxjs-styled-components/src/App.tsx b/cra-rxjs-styled-components/src/App.tsx
index 0a2709b4c..2856f1dab 100644
--- a/cra-rxjs-styled-components/src/App.tsx
+++ b/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={
-
+
+
+
}
>
diff --git a/cra-rxjs-styled-components/src/components/repo-filter/SearchInput.tsx b/cra-rxjs-styled-components/src/components/repo-filter/SearchInput.tsx
index 3f01282b7..60a530912 100644
--- a/cra-rxjs-styled-components/src/components/repo-filter/SearchInput.tsx
+++ b/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 ;
+ const { search, setSearch } = useRepoFilter();
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setSearch(e.target.value);
+ };
+ return (
+
+ );
}
diff --git a/cra-rxjs-styled-components/src/context/RepoFilterContext.tsx b/cra-rxjs-styled-components/src/context/RepoFilterContext.tsx
new file mode 100644
index 000000000..836d9a391
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+}
+
+export function useRepoFilter() {
+ const context = useContext(RepoFilterContext);
+ if (context === undefined) {
+ throw new Error('useRepoFilter must be used within a RepoPage');
+ }
+ return context;
+}
diff --git a/cra-rxjs-styled-components/src/helpers/searchFunction.ts b/cra-rxjs-styled-components/src/helpers/searchFunction.ts
new file mode 100644
index 000000000..ac207b361
--- /dev/null
+++ b/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];
+ }, []);
+};