Clean up

components/BinaryCode.tsx

@@ -0,0 +1,14 @@
+export const BinaryCode = () => {
+  return (
+    <div
+      className="opacity-20 text-vanilla-100 font-bold font-['Inter']"
+      style={{ position: "relative",paddingLeft: "70%", top: "-300px" }}
+    ><p style={{fontSize:48}}>
+      01111001010111100101
+      <br /> 110111010110111100101
+      <br /> 1101110101101111001{" "}
+      <br />
+      <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10111100101</p>
+    </div>
+  );
+};

components/GeneralFilter.tsx

@@ -0,0 +1,10 @@
+type GeneralFilterProps = {
+  filter: string | number | readonly string[] | undefined;
+  setFilter: (filter: string | number | readonly string[] | undefined) => void;
+};
+
+export const GeneralFilter = ({ filter, setFilter }: GeneralFilterProps) => {
+  return (
+    <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" />
+  );
+};

components/HappyCommitsInfo.tsx

@@ -1,6 +1,6 @@
 export const HappyCommitsInfo = () => {
   return (
-    <div style={{ paddingLeft: "10%", paddingBottom: "3%" }}>
+    <div style={{ paddingLeft: "10%" }}>
       <div style={{ width: 541, height: 291, flexDirection: "column" }}>
         <div
           style={{

components/HeroContainer.tsx

@@ -1,17 +1,20 @@
 import { GitHubIcon } from "./GitHubIcon";
 import { HappyCommitsInfo } from "./HappyCommitsInfo";
+import { BinaryCode } from "./BinaryCode";
 
 export const HeroContainer = () => {
   return (
     <>
       <div
         style={{
           background:
-            "linear-gradient(278deg, #26C6D0 10%, #4F5BE3 40%, #604FDD 53%, #4B449A 77%, #3A3A62 98%)"
+            "linear-gradient(278deg, #26C6D0 10%, #4F5BE3 40%, #604FDD 53%, #4B449A 77%, #3A3A62 98%)",
+            overflowX: "hidden", height: 520, overflow: "hidden"
         }}
       >
         <GitHubIcon />
         <HappyCommitsInfo />
+        <BinaryCode />
       </div>
     </>
   );

components/LanguageFilter.tsx

@@ -0,0 +1,15 @@
+import Select from "react-select";
+
+type LanguageFilterProps = {
+  setSelectedLanguages: (languages: string[]) => void;
+  languageOptions: { value: string; label: string }[];
+};
+
+export const LanguageFilter = ({ setSelectedLanguages, languageOptions }: LanguageFilterProps) => {
+  return (
+    <>
+    <label className="p-2">Filter by Language</label>
+    <Select isMulti closeMenuOnSelect={false} className="flex-1 mx-2 rounded-sm p-2 mb-4" onChange={(selectedOptions) => setSelectedLanguages(selectedOptions.map((option) => option.value))} options={languageOptions} classNamePrefix="select" />
+    </>
+  );
+};

components/RepositoryList.tsx

@@ -2,40 +2,20 @@ 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 { IndexedTopics } from "../topics";
 import { Repository } from "../types";
 import { RepositoryItem } from "./RepositoryItem";
+import { GeneralFilter } from "./GeneralFilter";
+import { LanguageFilter } from "./LanguageFilter";
+import { SDGFilter } from "./SDGFilter";
 
 type RepositoryListProps = {
   repositories: Repository[];
 };
 
-const 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">
-    <div className="flex items-center justify-center">
-      <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" />
-    </div>
+  <div className="p-4 w-full flex items-center justify-center">
+    <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" />
   </div>
 );
 
@@ -46,89 +26,33 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => {
   const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
   const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
 
-  console.log(selectedTopics);
   const filteredRepositories = repositories.filter((repository) => {
-    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());
-    });
-
+    const languageFilter = selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display);
+    const topicFilter = selectedTopics.length === 0 || repository.topics?.some((topic) => selectedTopics.includes(topic.display));
+    const nameFilter = Object.values(repository).some((value) => value && value.toString().toLowerCase().includes(filter.toLowerCase()));
     return languageFilter && nameFilter && topicFilter;
   });
 
-  const allLanguages = repositories.map((repository) => repository.language.display);
-  const uniqueLanguages = allLanguages.filter(
-    (language, index) => allLanguages.indexOf(language) === index
-  );
-  const languageOptions = uniqueLanguages.map((language) => ({
-    value: language,
-    label: language
-  }));
+  const uniqueLanguages = [...new Set(repositories.map((repository) => repository.language.display))];
+  const languageOptions = uniqueLanguages.map((language) => ({ value: language, label: language }));
+
+  const uniqueTopics = [...new Set(repositories.flatMap((repository) => repository.topics?.map((topic) => topic.display) ?? []))].sort((a, b) => parseInt(a.slice(4)) - parseInt(b.slice(4)));
+  const topicOptions = uniqueTopics.map((topic) => ({ value: topic, label: IndexedTopics[topic] }));
 
-  const topicList = repositories.map((repository) => repository.topics);
-  const allTopics = topicList.map((repos) => repos?.map((topic) => topic.display)) ?? [];
-  const uniqueTopics = allTopics
-    .filter((topic, index) => allTopics.indexOf(topic) === index)
-    .flat();
-  const topicOptions = uniqueTopics.map((topic) => ({
-    value: topic,
-    label: indexedTopics[topic ?? ""]
-  }));
+  const loadMoreItems = () => setItems(items + itemsPerScroll);
+  const hasMoreItems = items < filteredRepositories.length;
 
   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"
-          />
-          <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 ?? ""));
-            }}
-          />
+          <GeneralFilter filter={filter} setFilter={setFilter} />
+          <LanguageFilter setSelectedLanguages={setSelectedLanguages} languageOptions={languageOptions} />
+          <SDGFilter setSelectedTopics={setSelectedTopics} topicOptions={topicOptions} />
         </div>
 
-        <InfiniteScroll
-          dataLength={items}
-          next={() => setItems(items + itemsPerScroll)}
-          hasMore={items < filteredRepositories.length}
-          loader={<Loader />}
-        >
-          {filteredRepositories.slice(0, items).map((repository) => {
-            const key = `${repository.id}_${new Date().getTime()}_${Math.random()}`;
-            return <RepositoryItem key={key} repository={repository} />;
-          })}
+        <InfiniteScroll dataLength={items} next={loadMoreItems} hasMore={hasMoreItems} loader={<Loader />}>
+          {filteredRepositories.slice(0, items).map((repository) => <RepositoryItem key={repository.id} repository={repository} />)}
         </InfiniteScroll>
       </div>
     </main>

components/SDGFilter.tsx

@@ -0,0 +1,24 @@
+import Select from "react-select";
+
+type SDGFilterProps = {
+  setSelectedTopics: (topics: string[]) => void;
+  topicOptions: { value: string; label: string }[];
+};
+
+export const SDGFilter = ({ setSelectedTopics, topicOptions }: SDGFilterProps) => {
+  return (
+    <>
+      <label className="p-2">Sustainable Development Goal (SDG)</label>
+      <Select
+        isMulti
+        className="flex-1 mx-2 rounded-sm p-2 mb-4"
+        options={topicOptions}
+        getOptionLabel={(option) => option.label}
+        getOptionValue={(option) => option.value ?? ""}
+        onChange={(selectedOptions) =>
+          setSelectedTopics(selectedOptions.map((option) => option.value ?? ""))
+        }
+      />
+    </>
+  );
+};