use octokit + public repository API to generate projects data

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

components/ELink.tsx

@@ -13,11 +13,10 @@ function ELink ({link, children}: ELinkProps): JSX.Element {
   };
   return (
     <Link href={link}>
-      <a {...linkProps}>
-        {children}
-      </a>
+      <a {...linkProps}>{children}</a>
     </Link>
   );
+
 }
 
-export default ELink;
+export default ELink;

components/GitHubEvent.tsx

@@ -1,49 +1,22 @@
 import moment from 'moment';
 import React from 'react';
+import { GitHubEvent } from '../util';
 import ELink from './ELink';
 import GitHubEventAction from './GitHubEventAction';
 
-interface GitHubEvent {
-  id: string
-  type: string
-  actor: GitHubActor
-  repo: GitHubRepo
-  created_at: string
-  // TODO(#74): Change payload to GitHubEventPayloadType when types are accurate;
-  // being resolved in https://github.com/uclaacm/opensource/pull/57
-  // payload: GitHubEventPayloadType
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  payload: any
-}
-
-interface GitHubActor {
-  id: number
-  login: string
-  display_login?: string
-  gravatar_id: string
-  url: string
-  avatar_url: string
-}
 
-interface GitHubRepo {
-  id: number
-  name: string
-  url: string
-}
-
-function GitHubEvent(props: GitHubEvent): JSX.Element {
-  const {type, actor, repo, payload, created_at} = props;
+function GitHubEventComponent(props: GitHubEvent): JSX.Element {
+  const { type, actor, repo, payload, created_at } = props;
   const timePassed = moment(created_at).fromNow();
-
   const userLink = !actor.login.includes('[bot]') ? <ELink link={`https://github.com/${actor.login}`}>{`@${actor.login}`}</ELink> : actor.login;
   return (
     <>
       {/* <div className="card" style={{marginTop: "20px"}}> */}
       {/* <div className="card-body"> */}
-      <div style = {{overflow: 'hidden'}}>
-        {userLink} <GitHubEventAction type={type} payload={payload}/>{' '}
+      <div style={{ overflow: 'hidden' }}>
+        {userLink} <GitHubEventAction type={type} payload={payload} />{' '}
         <ELink link={`https://github.com/${repo.name}`}>{repo.name}</ELink>
-        <span style = {{float: 'right'}}>{timePassed}</span>
+        <span style={{ float: 'right' }}>{timePassed}</span>
       </div>
       <hr />
       {/*  </div> */}
@@ -52,4 +25,4 @@ function GitHubEvent(props: GitHubEvent): JSX.Element {
   );
 }
 
-export default GitHubEvent;
+export default GitHubEventComponent;

components/GitHubEventAction.tsx

@@ -4,42 +4,45 @@
 // DISCLAIMER: Some types for GitHubEvent may not be exactly accurate.
 // Take a look at https://docs.github.com/en/developers/webhooks-and-events/events/github-event-types
 // for more accurate typing.
-import type { CreateEvent, DeleteEvent, ForkEvent, IssueCommentEvent, IssuesEvent,
+import type {
+  CreateEvent, DeleteEvent, ForkEvent, IssueCommentEvent, IssuesEvent,
   MemberEvent, PullRequestEvent, PullRequestReviewCommentEvent, PullRequestReviewEvent,
-  PushEvent, PublicEvent, WatchEvent } from '@octokit/webhooks-types';
+  PushEvent, PublicEvent, WatchEvent,
+} from '@octokit/webhooks-types';
 import React from 'react';
+import { GitHubEvent } from '../util';
 import ELink from './ELink';
 
 export type GitHubEventPayloadType =
-| CreateEvent
-| DeleteEvent
-| ForkEvent
-| IssueCommentEvent
-| IssuesEvent
-| MemberEvent
-| PullRequestEvent
-| PullRequestReviewCommentEvent
-| PullRequestReviewEvent
-| PushEvent
-| PublicEvent
-| WatchEvent;
+  | CreateEvent
+  | DeleteEvent
+  | ForkEvent
+  | IssueCommentEvent
+  | IssuesEvent
+  | MemberEvent
+  | PullRequestEvent
+  | PullRequestReviewCommentEvent
+  | PullRequestReviewEvent
+  | PushEvent
+  | PublicEvent
+  | WatchEvent;
 
 interface GitHubEventActionProps {
-  type: string,
-  payload: GitHubEventPayloadType,
+  type: GitHubEvent['type'],
+  payload: GitHubEvent['payload'],
 }
 
 // TODO(mattxwang): this doesn't seem like the best way to do this ://
 // returns a string of form: <verb> <location/type of action> <preposition>
-function GitHubEventAction({type, payload}: GitHubEventActionProps): JSX.Element {
+function GitHubEventAction({ type, payload }: GitHubEventActionProps): JSX.Element {
   const unknown = <span>did a {type} on</span>;
-  switch(type){
+  switch (type) {
     case 'CreateEvent':
     case 'DeleteEvent': {
       const payloadNarrowed = payload as DeleteEvent;
       const target = payloadNarrowed.ref;
       const targetType = payloadNarrowed.ref_type;
-      const action = type === 'CreateEvent'? 'created' : 'deleted';
+      const action = type === 'CreateEvent' ? 'created' : 'deleted';
       if (!target) {
         return <span>{action} the {targetType} </span>;
       }
@@ -102,7 +105,10 @@ function GitHubEventAction({type, payload}: GitHubEventActionProps): JSX.Element
       return <span>{action} <ELink link={prURL}>pull request #{prNum}</ELink> in</span>;
     }
     case 'PullRequestReviewCommentEvent': {
-      const payloadNarrowed = payload as PullRequestReviewCommentEvent;
+      //must do any since some fields are missing in the type declaration
+      // eslint-disable-next-line
+      const payloadNarrowed = payload as any as PullRequestReviewCommentEvent;
+
       const action = payloadNarrowed.action;
       const actionStr = action === 'created' ? 'commented' : action;
       const prNum = payloadNarrowed.pull_request.number;

components/ProjectCard.tsx

@@ -1,75 +1,108 @@
 import Image from 'next/image';
 import React from 'react';
-
-import { Project } from '../util/';
+import { Project, GitHubColors } from '../util/';
 import ELink from './ELink';
 
 interface ProjectCardProps {
-  project: Project
-  vertical?: boolean
-  preload?: boolean
+  project: Project;
+  vertical?: boolean;
+  preload?: boolean;
+  githubColors: GitHubColors
 }
 
 interface ProjectCardImageProps {
-  project: Project
-  preload: boolean
+  project: Project;
+  preload: boolean;
 }
 
-function ProjectCardImage({project, preload}: ProjectCardImageProps) {
+function ProjectCardImage({ project, preload }: ProjectCardImageProps) {
   const { image, alt, link } = project;
-  return (
+  return link ? (
     <ELink link={link}>
       <Image
-        src={image}
+        src={image ?? '/logo.png'}
         alt={alt}
         width="1000"
-        height="800"
+        height="1000"
         layout="responsive"
         priority={preload}
       />
     </ELink>
+  ) : (
+    <>
+      <Image
+        src={image}
+        alt={alt}
+        width="1000"
+        height="1000"
+        layout="responsive"
+        priority={preload}
+      />
+    </>
   );
 }
 
-function ProjectCardBody({ name, description, repo, link, lang, tech }: Project) {
+interface ProjectCardBodyProps {
+  githubColors: GitHubColors,
+  project: Project
+}
+
+function ProjectCardBody(props: ProjectCardBodyProps) {
+  const {
+    name,
+    description,
+    repo,
+    link,
+    lang,
+    topics,
+  } = props.project;
   return (
     <div className="card-body">
       <h3 className="mt-1">
-        <ELink link={link} >
-          {name}
-        </ELink>
+        {link ? <ELink link={link}>{name}</ELink> : name}
       </h3>
       <p>
-        <span className={`dev-language-badge lang-${lang}`}></span> {lang}
-        {tech && <span> • {tech.join(', ')}</span>}
+        <span
+          className="dev-language-badge"
+          style={{
+            backgroundColor: props.githubColors[lang]
+              ? props.githubColors[lang].color
+              : 'black',
+          }}
+        ></span>{' '}
+        {lang || 'Markdown'}
+        {topics.length > 0 && <span> • {topics.join(', ')}</span>}
       </p>
       <p>{description}</p>
-      <ELink link={repo}>
-        GitHub Repository
-      </ELink>
+      <ELink link={repo}>GitHub Repository</ELink>
     </div>
   );
 }
 
 // TODO(mattxwang): consider revisiting how this component works
 // TODO(mattxwang): Mobile responsiveness (waiting on WestwoodCSS)
-function ProjectCard({project, vertical = false, preload = false}: ProjectCardProps): JSX.Element {
+function ProjectCard({
+  project,
+  vertical = false,
+  preload = false,
+  githubColors,
+}: ProjectCardProps): JSX.Element {
   if (vertical) {
     return (
       <div className="card">
-        <ProjectCardImage project={project} preload={preload}/>
-        <ProjectCardBody {...project}/>
+        <ProjectCardImage project={project} preload={preload} />
+        <ProjectCardBody project={project} githubColors={githubColors} />
       </div>
     );
   }
   return (
     <div className="card">
       <div className="row">
         <div className="col-6">
-          <ProjectCardImage project={project} preload={preload}/>
+          <ProjectCardImage project={project} preload={preload} />
         </div>
         <div className="col-6">
-          <ProjectCardBody {...project}/>
+          <ProjectCardBody project={project} githubColors={githubColors} />
         </div>
       </div>
     </div>