Cra rxjs language func (#1916)

* chore: in progress

* chore: completed

* chore: clean up

* chore: clean up

* chore: fixing CI

* chore: fixing sonarcloud

* chore: fixing sonarcloud

* chore: fixing duplications

* chore: fixing code smell

Author: hdJerry

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

@@ -25,7 +25,7 @@ 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();
+	const { filterType, setFilterType, language, setLanguage } = useRepoFilter();
 
 	return (
 		<Container>
@@ -38,11 +38,13 @@ export default function RepoFilter({
 						selectOption={setFilterType}
 						selected={filterType}
 					/>
-					<FilterDropdown name="Sort" items={sortOptions} />
 					<FilterDropdown
 						name="Language"
 						items={languages && languages.length > 0 ? languages : languageOptions}
+						selectOption={setLanguage}
+						selected={language}
 					/>
+					<FilterDropdown name="Sort" items={sortOptions} />
 				</FiltersWrapper>
 				<RepoBtn>
 					<RepoBookIcon color="#fff" />

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

@@ -0,0 +1,24 @@
+import { defaultLanguage } from '../components/repo-filter/data';
+import { Repository } from '../interfaces/repositories.interfaces';
+
+const matchText = (target: string, value: string) =>
+	new RegExp(value, 'i').exec(target);
+
+// Function to filter repos by language
+export const repoDataFilteredByLanguage = ({
+	repos,
+	language,
+}: {
+	repos: Repository[];
+	language: string;
+}): Repository[] => {
+	let response = repos.slice();
+	if (repos && language && language !== defaultLanguage) {
+		response = repos.filter((repo: Repository) =>
+			matchText(repo?.language, language)
+		);
+	} else if (language === defaultLanguage) {
+		response = repos;
+	}
+	return response;
+};

cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts

@@ -31,6 +31,7 @@ export function useRepos(
 	isTopRepos?: boolean
 ): UseRepo {
 	const [state, setState] = useState<RepositoryWithBranchCount[]>([]);
+	const [languages, setLanguages] = useState<string[]>([]);
 	const [paginationPages, setPaginationPages] = useState<Pagination>({
 		prevPage: '',
 		nextPage: '1',
@@ -64,6 +65,11 @@ export function useRepos(
 					filter((repos) => !!repos.length),
 					switchMap((repositories: Repository[]) => {
 						const requests = repositories.map(createBranchCountRequest);
+						const reposLaguages = repositories
+							.map((res) => res.language)
+							.filter((res) => res)
+							.sort((a, b) => a.localeCompare(b));
+						setLanguages([...new Set(reposLaguages)]);
 						return zip(...requests).pipe(
 							map(mergeRepositoriesWithBranchCount(repositories))
 						);
@@ -88,6 +94,7 @@ export function useRepos(
 
 	return {
 		repositories: state,
+		languages,
 		prevPage,
 		nextPage,
 		hasNextPage: paginationPages.hasNextPage,

cra-rxjs-styled-components/src/interfaces/repositories.interfaces.ts

@@ -35,6 +35,7 @@ export interface Pagination {
 
 export interface UseRepo {
 	repositories: RepositoryWithBranchCount[];
+	languages: string[];
 	prevPage: () => void;
 	nextPage: () => void;
 	hasNextPage: boolean;

cra-rxjs-styled-components/src/routes/profile.tsx

@@ -18,8 +18,14 @@ import RepoFilter from '../components/repo-filter/Repofilter';
 
 function Profile() {
 	const context = useUser();
-	const { repositories, prevPage, nextPage, hasNextPage, hasPrevPage } =
-		useRepos(context?.user?.login);
+	const {
+		repositories,
+		languages,
+		prevPage,
+		nextPage,
+		hasNextPage,
+		hasPrevPage,
+	} = useRepos(context?.user?.login);
 
 	const ContentLayout = styled.div`
 		grid-area: content;
@@ -38,7 +44,7 @@ function Profile() {
 							<ProfileNav>
 								<TabNavigation tabs={tabs} activeTab={tabs[0].title} />
 							</ProfileNav>
-							<RepoFilter />
+							<RepoFilter languages={languages} />
 							{repositories.map((repo) => (
 								<RepoCard repo={repo} key={repo.id} star />
 							))}

cra-rxjs-styled-components/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"extends": "./tsconfig.paths.json",
 	"compilerOptions": {
-		"target": "es5",
+		"target": "ES2020",
 		"lib": ["dom", "dom.iterable", "esnext"],
 		"allowJs": true,
 		"skipLibCheck": true,