feat: update the context

thisdot · Aug 14, 2023 · abaf4e3 · abaf4e3
1 parent 523bd3f
commit abaf4e3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/cra-rxjs-styled-components/src/components/filter-dropdown/FilterDropdown.tsx b/cra-rxjs-styled-components/src/components/filter-dropdown/FilterDropdown.tsx
@@ -57,7 +57,7 @@ export default function FilterDropdown({
 	useLayoutEffect(() => {
 		document.addEventListener('click', handleClickOutside, true);
 		return () => {
-			document.removeEventListener('clic', handleClickOutside, true);
+			document.removeEventListener('click', handleClickOutside, true);
 		};
 	});
 	return (
@@ -78,8 +78,8 @@ export default function FilterDropdown({
 							<CloseIcon />
 						</CloseBtn>
 					</CloseWrapper>
-					{allItems.map(({ name, color }, index) => (
-						<MenuItemContainer role="none" onClick={() => selectOption?.(name)}>
+					{allItems.map(({ name, color }) => (
+						<MenuItemContainer role="none" onClick={() => selectOption?.(name)} key={name}>
 							<MenuItem role="menuitem" tabIndex={-1}>
 								{name === selected ? <CorrectIcon /> : <NotSelected />}
 								<MenuItemContent>

diff --git a/cra-rxjs-styled-components/src/components/repo-card/RepoCard.stories.tsx b/cra-rxjs-styled-components/src/components/repo-card/RepoCard.stories.tsx
@@ -40,5 +40,7 @@ StarteDevRepo.args = {
 		pulls: 18,
 		subscribers_count: 8,
 		default_branch: 'main',
+		fork: false,
+		archived: false
 	},
 };
diff --git a/cra-rxjs-styled-components/src/components/repo-filter/Repofilter.tsx b/cra-rxjs-styled-components/src/components/repo-filter/Repofilter.tsx
@@ -1,3 +1,4 @@
+import { useRepoFilter } from '../../context/RepoFilterContext';
 import FilterDropdown from '../filter-dropdown/FilterDropdown';
 import { RepoBookIcon } from '../icons';
 import {
@@ -24,13 +25,14 @@ export default function RepoFilter({
 	const typeOptions = Object.values(FILTER_TYPE_OPTIONS);
 	const sortOptions = Object.values(SORT_OPTIONS);
 	const languageOptions = ['All', 'HTML', 'CSS', 'PHP'];
+	const {filterType, setFilterType} = useRepoFilter();
 
 	return (
 		<Container>
 			<RepoFilterWrapper>
 				<SearchInput />
 				<FiltersWrapper>
-					<FilterDropdown name="Type" items={typeOptions} />
+					<FilterDropdown name="Type" items={typeOptions} selectOption={setFilterType} selected={filterType}/>
 					<FilterDropdown name="Sort" items={sortOptions} />
 					<FilterDropdown
 						name="Language"