Add failsafes in case Octokit api fails. Statically-stored most information in .json files. Change revalidation period for projects page. One issue with importing several variables and functions, where I had to manually import each from their respective file, instead of importing all from '../util'.

components/Navbar.tsx

@@ -21,6 +21,9 @@ function Navbar(): JSX.Element {
           <Link href="/contribute">
             <a>contribute</a>
           </Link>
+          <Link href="/ucla">
+            <a>ucla</a>
+          </Link>
           <Link href="https://github.com/uclaacm" passHref>
             <button>GitHub</button>
           </Link>

package.json

@@ -25,7 +25,8 @@
     "next": "^11.1.3",
     "next-seo": "^5.1.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "write-json-file": "^5.0.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^12.0.10",
@@ -46,4 +47,4 @@
     "lint-staged": "^12.3.4",
     "typescript": "^4.6.4"
   }
-}
+}

pages/index.tsx

@@ -3,23 +3,28 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import React from 'react';
+import { writeJsonFile } from 'write-json-file';
 import ELink from '../components/ELink';
 import GitHubEventComponent from '../components/GitHubEvent';
 import Layout from '../components/Layout';
 import ProjectCard from '../components/ProjectCard';
-import { Project, getProjects, getGithubColors, GitHubEvent } from '../util';
+import eventResponseJSON from '../test/fixtures/eventResponse.json';
+import orgResponseJSON from '../test/fixtures/orgResponse.json';
+import RandomProjects from '../test/fixtures/RandomProjects.json';
+import { Project } from '../util';
+import { getGithubColors } from '../util/projectRequest';
+import { GitHubEvent } from '../util/types';
 
 function getRandomProj(projects: Project[]) {
+  // get the length of RandomProjects.json
   return Math.floor(Math.random() * projects.length);
 }
 
 export default function Home({
   numRepos,
   recentEvents,
-  projects,
   githubColors,
   projNumToDisplay,
-  randomProject,
 }: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element {
   return (
     <Layout>
@@ -104,7 +109,7 @@ export default function Home({
 
         <h2>featured project</h2>
         <ProjectCard
-          project={randomProject ? randomProject : projects[projNumToDisplay]} preload={true}
+          project={RandomProjects[projNumToDisplay]} preload={true}
           githubColors={githubColors}
         />
         <h2>what we&apos;ve been doing recently...</h2>
@@ -131,30 +136,40 @@ export default function Home({
 export const getStaticProps: GetStaticProps = async () => {
   // TODO(mattxwang): change the auth scope and get members, etc.
   // see: https://docs.github.com/en/rest/reference/orgs
+
   const octokit = new Octokit();
-  const orgResponse = await octokit.request('GET /orgs/{org}', {
-    org: 'uclaacm',
-  });
-  const numRepos = orgResponse.data.public_repos;
-  const eventResponse = await octokit.request('GET /orgs/{org}/events', {
-    org: 'uclaacm',
-  });
-  const recentEvents = eventResponse.data;
+  let numRepos;
+  try {
+    const orgResponse = await octokit.request('GET /orgs/{org}', {
+      org: 'uclaacm',
+    });
+    await writeJsonFile('./test/fixtures/orgResponse.json', orgResponse);
+    numRepos = orgResponse.data.public_repos;
+  } catch (err) {
+    numRepos = orgResponseJSON.data.public_repos;
+  }
 
+  let recentEvents;
+  try {
+    const eventResponse = await octokit.request('GET /orgs/{org}/events', {
+      org: 'uclaacm',
+    });
+    await writeJsonFile('./test/fixtures/eventResponse.json', eventResponse.data);
+    recentEvents = eventResponse.data;
+  } catch (err) {
+    recentEvents = eventResponseJSON;
+  }
 
   const githubColors = await getGithubColors();
 
-  const projects = await getProjects();
-  const projNumToDisplay = getRandomProj(projects);
+  const projNumToDisplay = getRandomProj(RandomProjects);
 
   return {
     props: {
       numRepos,
       recentEvents,
-      projects,
       githubColors,
       projNumToDisplay,
-      randomProject: false,
     },
     revalidate: 60,
   };

pages/projects.tsx

@@ -1,11 +1,14 @@
 import { GetStaticProps } from 'next';
 import { NextSeo } from 'next-seo';
 import React, { useState } from 'react';
+import { writeJsonFile } from 'write-json-file';
 import Layout from '../components/Layout';
 import ProjectCard from '../components/ProjectCard';
 import SearchFilter from '../components/SearchFilter/SearchFilter';
-import { getProjects, Project, GitHubColors, getGithubColors } from '../util';
-
+// Issue when these were all imported from '../util', idk what went wrong
+import { Project } from '../util';
+import { getProjects, getGithubColors } from '../util/projectRequest';
+import { GitHubColors } from '../util/types';
 
 interface ProjectsProps {
   projects: Project[];
@@ -68,11 +71,16 @@ export default Projects;
 export const getStaticProps: GetStaticProps<ProjectsProps> = async () => {
   const projects = await getProjects();
   const githubColors = await getGithubColors();
+
+  // await writeJsonFile('./test/fixtures/AllProjects.json', JSON.stringify(projects));
+
+  await writeJsonFile('./test/fixtures/AllProjects.json', projects);
+
   return {
     props: {
       projects,
       githubColors: githubColors,
     },
-    revalidate: 60,
+    revalidate: 86400,
   };
 };

pages/ucla.tsx

@@ -0,0 +1,31 @@
+import { NextSeo } from 'next-seo';
+import React from 'react';
+import Layout from '../components/Layout';
+
+function UCLA(): JSX.Element {
+  return(
+    <Layout>
+      <div className='container'>
+        <NextSeo
+          title="contribute | open source at ACM at UCLA"
+          description="get started by contributing to one of our projects"
+          openGraph={{
+            images: [{
+              url: 'https://opensource.uclaacm.com/logo.png',
+              width: 1200,
+              height: 1200,
+              alt: 'The ACM at UCLA logo',
+            }],
+            site_name: 'open source at ACM at UCLA',
+          }}
+        />
+        <h1>have you wanted to work on projects used by ucla students??
+          here are all the projects you can satsify your cravings with!
+          Any project with the ucla-opensource topic tag will be available to work on.</h1>
+        <h6>this page is currently a work in progress</h6>
+      </div>
+    </Layout>
+  );
+}
+
+export default UCLA;