Add ucla-opensource page

components/Navbar.tsx

@@ -18,6 +18,9 @@ function Navbar(): JSX.Element {
           <Link href="/projects">
             <a>projects</a>
           </Link>
+          <Link href="/ucla-opensource">
+            <a>ucla-opensource</a>
+          </Link>
           <Link href="/contribute">
             <a>contribute</a>
           </Link>

pages/ucla-opensource.tsx

@@ -0,0 +1,78 @@
+import { GetStaticProps } from 'next';
+import { NextSeo } from 'next-seo';
+import React, { useState } from 'react';
+import Layout from '../components/Layout';
+import ProjectCard from '../components/ProjectCard';
+import SearchFilter from '../components/SearchFilter/SearchFilter';
+import { getUclaOpenSource, Project, GitHubColors, getGithubColors } from '../util';
+
+
+interface ProjectsProps {
+  projects: Project[];
+  githubColors: GitHubColors
+}
+
+function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
+
+  // projects is a master list of all the projects that we fetched, filteredProjects is the one that we render
+  // to the user
+  const [filteredProjects, setFilteredProjects] = useState(projects);
+
+  return (
+    <Layout>
+      <div className="container">
+        <NextSeo
+          title="ucla-opensource | open source at UCLA"
+          description="a heads-up overview of open source projects at UCLA"
+          openGraph={{
+            images: [{
+              url: 'https://opensource.uclaacm.com/logo.png',
+              width: 1200,
+              height: 1200,
+              alt: 'The ACM at UCLA logo',
+            }],
+            site_name: 'open source at UCLA',
+          }}
+        />
+        <h1>
+          ucla-opensource
+        </h1>
+        <p>
+          a (work-in-progress) heads-up overview of open source projects at UCLA.
+        </p>
+        <hr />
+        <SearchFilter
+          projects={projects}
+          setFilteredProjects={setFilteredProjects}
+        />
+        <hr/>
+        <div className="row same-height-grid">
+          {filteredProjects.length > 0
+            ? filteredProjects.map((project, i) => {
+              return (
+                <div className="col-4" key={project.name}>
+                  <ProjectCard project={project} vertical preload={i < 3} githubColors={githubColors} />
+                </div>
+              );
+            })
+            : <h2>No results found</h2>
+          }
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Projects;
+
+export const getStaticProps: GetStaticProps<ProjectsProps> = async () => {
+  const projects = await getUclaOpenSource();
+  const githubColors = await getGithubColors();
+  return {
+    props: {
+      projects,
+      githubColors: githubColors,
+    },
+    revalidate: 3600,
+  };
+};

util/projectRequest.ts

@@ -3,6 +3,43 @@ import { paginateRest } from '@octokit/plugin-paginate-rest';
 import githubColorsFixture from '../data/githubColors.json';
 import { Project, ACMCommitteeTopics, GitHubColors } from './types';
 
+export async function getUclaOpenSource(): Promise<Project[]> {
+  const PaginatedOctokit = Octokit.plugin(paginateRest);
+  const octokit = new PaginatedOctokit();
+  const response = await octokit.paginate('GET /search/repositories', {
+    q: 'ucla-opensource+in:topics',
+    per_page: 100,
+  });
+
+  const filteredData = response.filter((repo) => !repo.archived);
+  const sortedData = filteredData.sort(
+    (a, b) =>
+      new Date(b.updated_at as string).getTime() - new Date(a.updated_at as string).getTime(),
+  );
+  return sortedData.map((repo) =>
+    repo.homepage
+      ? {
+        name: repo.name,
+        description: repo.description ?? '',
+        link: repo.homepage ?? '',
+        repo: repo.html_url,
+        lang: repo.language ?? '',
+        topics: repo.topics ?? [],
+        image: getImageFromTopics(repo.topics).image,
+        alt: getImageFromTopics(repo.topics).alt,
+      }
+      : {
+        name: repo.name,
+        description: repo.description ?? '',
+        repo: repo.html_url ?? '',
+        lang: repo.language ?? '',
+        topics: repo.topics ?? [],
+        image: getImageFromTopics(repo.topics).image,
+        alt: getImageFromTopics(repo.topics).alt,
+      },
+  );
+}
+
 export async function getProjects(): Promise<Project[]> {
   const PaginatedOctokit = Octokit.plugin(paginateRest);
   const octokit = new PaginatedOctokit();
@@ -39,6 +76,7 @@ export async function getProjects(): Promise<Project[]> {
       },
   );
 }
+
 export async function getGithubColors(): Promise<GitHubColors> {
   const githubColorsResponse = await fetch(
     'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json',