Add in sdg and sdg filtering

components/RepositoryList.tsx

@@ -2,14 +2,34 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
+import Select from "react-select";
+
 import { Repository } from "../types";
 import { RepositoryItem } from "./RepositoryItem";
-import Select from 'react-select';
 
 type RepositoryListProps = {
   repositories: Repository[];
 };
 
+let indexedTopics: { [key: string]: string } = {
+  "sdg-1": "SDG-1 - No Poverty",
+  "sdg-2": "SDG-2 - Zero Hunger",
+  "sdg-3": "SDG-3 - Good Health And Well-Being",
+  "sdg-4": "SDG-4 - Quality Education",
+  "sdg-5": "SDG-5 - Gender Equality",
+  "sdg-6": "SDG-6 - Clean Water and Sanitation",
+  "sdg-7": "SDG-7 - Affordable and Clean Energy",
+  "sdg-8": "SDG-8 - Decent Work and Economic Growth",
+  "sdg-9": "SDG-9 - Industry, Innovation, and Infrastructure",
+  "sdg-10": "SDG-10 - Reduced Inequalities",
+  "sdg-11": "SDG-11 - Sustainable Cities and Communities",
+  "sdg-12": "SDG-12 - Responsible Consumption and Production",
+  "sdg-13": "SDG-13 - Climate Action",
+  "sdg-14": "SDG-14 - Life Below Water",
+  "sdg-15": "SDG-15 - Life on Land",
+  "sdg-16": "SDG-16 - Peace, Justice, and Strong Institutions",
+  "sdg-17": "SDG-17 - Partnerships for the Goals"
+};
 
 const Loader = () => (
   <div className="p-4 w-full">
@@ -24,51 +44,81 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => {
   const [items, setItems] = useState(itemsPerScroll);
   const [filter, setFilter] = useState("");
   const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
+  const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
 
+  console.log(selectedTopics);
   const filteredRepositories = repositories.filter((repository) => {
-    // Check if the repository's language is included in the selected languages array
-    const languageFilter = selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display);
+    const languageFilter =
+      selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display);
+
+    const topicFilter =
+      selectedTopics.length === 0 || selectedTopics.some((value) => repository.topics.some((topic) => topic.display === value))
+
+
 
     const nameFilter = Object.values(repository).some((value) => {
       if (value === null) {
         return false;
       }
       return value.toString().toLowerCase().includes(filter.toLowerCase());
     });
-  
-    return languageFilter && nameFilter;
+
+    return languageFilter && nameFilter && topicFilter;
   });
 
   const allLanguages = repositories.map((repository) => repository.language.display);
-  const uniqueLanguages = allLanguages.filter((language, index) => allLanguages.indexOf(language) === index);
+  const uniqueLanguages = allLanguages.filter(
+    (language, index) => allLanguages.indexOf(language) === index
+  );
   const languageOptions = uniqueLanguages.map((language) => ({
     value: language,
-    label: language,
+    label: language
+  }));
+  // I need a function like languageOptions, but for topics that lists all the topics in the repo
+  // and then I need to filter the repos by the topics that are selected
+
+  const topicList = repositories.map((repository) => repository.topics);
+  const allTopics = topicList.map((array) => array.map((object) => object.display));
+  const uniqueTopics = allTopics.filter((topic, index) => allTopics.indexOf(topic) === index).flat();
+  const topicOptions = uniqueTopics.map((topic) => ({
+    value: topic,
+    label: indexedTopics[topic]
   }));
 
   return (
     <main className="grow">
       <div className="p-4 w-full">
-      <div className="flex flex-wrap">
-        <input
-          type="text"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          placeholder="Search Repositories"
-          className="flex-1 mx-2 border rounded-sm p-2 mb-4"
-        />
-        <label className="p-2">Filter by Language</label>
-        <Select
-          isMulti
-          closeMenuOnSelect={false}
-          className="flex-1 mx-2 border rounded-sm p-2 mb-4"
-          onChange={(selectedOptions) => {
-            setSelectedLanguages(selectedOptions.map((option) => option.value));
-          }}
-          options={languageOptions}
-          classNamePrefix="select"
-        />
-      </div>
+        <div className="flex flex-wrap">
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Search Repositories"
+            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
+          />
+          <label className="p-2">Filter by Language</label>
+          <Select
+            isMulti
+            closeMenuOnSelect={false}
+            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
+            onChange={(selectedOptions) => {
+              setSelectedLanguages(selectedOptions.map((option) => option.value));
+            }}
+            options={languageOptions}
+            classNamePrefix="select"
+          />
+          <label className="p-2">Sustainable Development Goal (SDG)</label>
+          <Select
+            isMulti
+            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
+            options={topicOptions}
+            getOptionLabel={(option) => option.label}
+            getOptionValue={(option) => option.value}
+            onChange={(selectedOptions) => {
+              setSelectedTopics(selectedOptions.map((option) => option.value));
+            }}
+          />
+        </div>
 
         <InfiniteScroll
           dataLength={items}

generate.ts

@@ -33,6 +33,8 @@ const REPOS_PER_REQUEST = 25;
 /** Maximum number of issues to retrieve per repository */
 const MAX_ISSUES = 10;
 
+const validTopicNames = ['sdg-1', 'sdg-2', 'sdg-3', 'sdg-4', 'sdg-5', 'sdg-6', 'sdg-7', 'sdg-8', 'sdg-9', 'sdg-10', 'sdg-11', 'sdg-12', 'sdg-13', 'sdg-14', 'sdg-15', 'sdg-16', 'sdg-17'];
+
 // symbols to replace with slugify
 slugify.extend({
   "#": "sharp",
@@ -200,6 +202,7 @@ const getRepositories = async (
           topics: repo.repositoryTopics.edges
             ?.filter((edge) => edge !== undefined)
             .map((edge) => (edge as RepositoryTopicEdge).node as RepositoryTopic)
+            .filter((topic) => validTopicNames.includes(topic.topic.name.toLowerCase()))
             .map((topic) => ({
               id: slugify(topic.topic.name, { lower: true }),
               display: topic.topic.name