chore: sort by completed (#1917)

Author: hdJerry

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

@@ -25,7 +25,8 @@ 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, language, setLanguage } = useRepoFilter();
+	const { filterType, setFilterType, language, setLanguage, sortBy, setSortBy } =
+		useRepoFilter();
 
 	return (
 		<Container>
@@ -44,7 +45,12 @@ export default function RepoFilter({
 						selectOption={setLanguage}
 						selected={language}
 					/>
-					<FilterDropdown name="Sort" items={sortOptions} />
+					<FilterDropdown
+						name="Sort"
+						items={sortOptions}
+						selected={sortBy}
+						selectOption={setSortBy}
+					/>
 				</FiltersWrapper>
 				<RepoBtn>
 					<RepoBookIcon color="#fff" />

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

@@ -0,0 +1,23 @@
+import { SORT_OPTIONS } from '../components/repo-filter/data';
+import { Repository } from '../interfaces/repositories.interfaces';
+
+const getTime = (time: Date) => new Date(time).getTime();
+
+// Function to sort filtered repos
+export const sortedRepoData = ({
+	repos,
+	sortBy,
+}: {
+	repos: Repository[];
+	sortBy: string;
+}) => {
+	const response = repos.slice();
+	if (sortBy === SORT_OPTIONS.name) {
+		response.sort((a, b) => a.name.localeCompare(b.name));
+	} else if (sortBy === SORT_OPTIONS.stars) {
+		response.sort((a, b) => (b.stargazers_count > a.stargazers_count ? 1 : -1));
+	} else {
+		response.sort((a, b) => getTime(b.updated_at) - getTime(a.updated_at));
+	}
+	return response;
+};