added a demo component

back_end/api/github.js

@@ -0,0 +1,48 @@
+import { supabaseClient } from '../utils/db'
+
+const sb = supabaseClient()
+
+export async function getMembers () {
+  const { data, error } = await sb.from('ghmembers').select('*')
+  if (error) throw error
+  return data
+}
+
+export async function getTeams () {
+  const { data, error } = await sb.from('ghteams').select('*')
+  if (error) throw error
+  return data
+}
+
+export async function getMembersForTeams () {
+  const teams = await getTeams()
+  const members = await getMembers()
+
+  const memberMap = {}
+  for (const member of members) {
+    memberMap[member.id] = member
+  }
+
+  const teamMap = {}
+  for (const team of teams) {
+    teamMap[team.id] = team
+  }
+
+  const { data, error } = await sb.from('ghteammembers').select('*')
+
+  if (error) throw error
+  if (!data) return {}
+
+  const membersForTeams = {}
+
+  for (const team of teams) membersForTeams[teamMap[team.id].name] = []
+
+  for (const membership of data) {
+    const member = memberMap[membership.member_id]
+    const team = teamMap[membership.team_id]
+
+    if (member && team) membersForTeams[team.name].push(member)
+  }
+
+  return membersForTeams
+}

back_end/utils/db.js

@@ -0,0 +1,11 @@
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+
+
+const client = createClient(supabaseUrl, supabaseKey);
+
+export function supabaseClient() {
+    return client;
+}

components/GithubOrg.tsx

@@ -1,53 +1,57 @@
 import {
   Image,
   Text,
+  Heading,
   VStack,
   Card,
   CardBody,
-  CardFooter,
   Box,
   Skeleton,
-  Link
-} from "@chakra-ui/react";
-
+  Link,
+  Flex,
+  Button
+} from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import { getMembersForGithubTeams } from '../utils/api'
+import Head from 'next/head'
 
 type GithubProfileProps = {
-  username: string;
-  pictureUrl: string;
-  profileUrl: string;
-};
+  username: string
+  pictureUrl: string
+  profileUrl: string
+}
 
 const GithubProfile: React.FC<GithubProfileProps> = ({
   username,
   pictureUrl,
-  profileUrl,
+  profileUrl
 }) => {
   return (
     <Card
-      variant="elevated"
-      size="sm"
-      width="300px"
-      height="375px"
-      borderRadius="15px"
-      marginX="25px"
-      background="brand.mid_white"
-      color="black"
-      borderWidth="5px"
-      borderColor="black"
+      variant='elevated'
+      size='sm'
+      width='300px'
+      height='375px'
+      borderRadius='15px'
+      marginX='25px'
+      background='brand.mid_white'
+      color='black'
+      borderWidth='5px'
+      borderColor='black'
     >
-      <CardBody alignContent="flex-start">
+      <CardBody alignContent='flex-start'>
         <Skeleton isLoaded={pictureUrl !== undefined}>
           <Image
             src={pictureUrl}
             alt={username}
-            borderRadius="full"
-            boxSize="200px"
-            margin="auto"
-            marginTop="20px"
+            borderRadius='full'
+            boxSize='200px'
+            margin='auto'
+            marginTop='20px'
           />
         </Skeleton>
-        <VStack spacing={4} marginTop="20px">
-          <Text fontSize="2xl" fontWeight="bold">
+        <VStack spacing={4} marginTop='20px'>
+          <Text fontSize='2xl' fontWeight='bold'>
             {username}
           </Text>
           <Box>
@@ -58,13 +62,77 @@ const GithubProfile: React.FC<GithubProfileProps> = ({
         </VStack>
       </CardBody>
     </Card>
-  );
-};
+  )
+}
+
+interface GithubTeamProps {
+  name: string
+  members: GithubProfileProps[]
+}
+
+const GithubTeam = ({ name, members }: GithubTeamProps) => {
+  return (
+    <Box padding='20px'>
+      <Flex
+        flexWrap='wrap'
+        justifyContent='center'
+        alignItems='center'
+        gap='20px'
+      >
+        {members.map(profile => (
+          <GithubProfile
+            key={profile.username}
+            username={profile.username}
+            pictureUrl={profile.pictureUrl}
+            profileUrl={profile.profileUrl}
+          />
+        ))}
+      </Flex>
+    </Box>
+  )
+}
 
 const GithubOrg: React.FC = () => {
+  const [teams, setTeams] = useState<GithubTeamProps[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showing, setShowing] = useState(null as number | null)
+
+  useEffect(() => {
+    getMembersForGithubTeams((teamData: any) => {
+      console.log('raw team data', teamData)
+      const newTeamsState = []
+      for (const teamName of Object.keys(teamData)) {
+        const members = teamData[teamName].map((member: any) => ({
+          username: member.login,
+          pictureUrl: member.avatar_url,
+          profileUrl: member.html_url
+        }))
+        newTeamsState.push({ name: teamName, members })
+      }
+      setTeams(newTeamsState)
+      setLoading(false)
+    })
+  }, [])
+
   return (
-    <></>
+    <Flex flexDirection='row' alignItems='center' flexWrap='wrap'>
+      {loading ? (
+        <Skeleton height='375px' width='300px' />
+      ) : (
+        <>
+          {showing !== null && <GithubTeam
+            name={teams[showing].name}
+            members={teams[showing].members}
+          />}
+          {teams.map((team, i) => (
+            <Button key={team.name} onClick={() => setShowing(i)} margin='10px'>
+              {team.name}
+            </Button>
+          ))}
+        </>
+      )}
+    </Flex>
   )
-};
+}
 
-export default GithubOrg;
+export default GithubOrg

next.config.js

@@ -6,7 +6,7 @@ const nextConfig = {
     webpack: (config) => {
         config.resolve.alias["@"] = path.resolve(__dirname);
         return config;
-    },
+    }
 };
 
 module.exports = nextConfig;

package.json

@@ -22,11 +22,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/font": "13.1.6",
+    "@supabase/supabase-js": "^2.39.8",
     "@types/axios": "^0.14.0",
     "@types/node": "18.13.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "axios": "^1.4.0",
+    "bufferutil": "^4.0.8",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
@@ -40,7 +42,10 @@
     "react-firebase-hooks": "^5.1.1",
     "react-icons": "^4.10.1",
     "sharp": "^0.32.0",
-    "typescript": "4.9.5"
+    "supabase": "^1.148.6",
+    "typescript": "4.9.5",
+    "utf-8-validate": "^6.0.3",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "chai": "^4.3.7",

pages/_app.tsx

@@ -7,6 +7,7 @@ import Layout from "@/components/Layout";
 // @ts-ignore
 // import { AuthContextProvider } from "@/context/AuthContext";
 
+
 const colors = {
     brand: {
         purple: "#894AD9",
@@ -23,6 +24,7 @@ const colors = {
 const theme = extendTheme({ colors });
 
 export default function App({ Component, pageProps }: AppProps) {
+
     return (
         <ChakraProvider theme={theme}>
             <Layout>

utils/api.js

@@ -3,6 +3,7 @@ import * as leads from "@/back_end/api/leads.js";
 import * as events from "@/back_end/api/events.js";
 import * as projects from "@/back_end/api/projects.js";
 import * as auth from "@/back_end/api/auth.js";
+import * as github from "@/back_end/api/github.js";
 import emailjs from "@emailjs/browser";
 import { parseEvents, parsePeople, parseProjects } from './parsers';
 
@@ -11,6 +12,34 @@ import { parseEvents, parsePeople, parseProjects } from './parsers';
 //     resolve => setTimeout(resolve, ms)
 //   );
 
+export const getMembersForGithubTeams = async (callback) => {
+    const data = await github.getMembersForTeams();
+    if (data) {
+        callback(data);
+    } else {
+        callback([]);
+    }
+}
+
+
+export const getAllGithubMembers = async (callback) => {
+    const data = await github.getMembers();
+    if (data) {
+        callback(data);
+    } else {
+        callback([]);
+    }
+}
+
+export const getAllGithubTeams = async (callback) => {
+    const data = await github.getTeams();
+    if (data) {
+        callback(data);
+    } else {
+        callback([]);
+    }
+}
+
 export const getFeaturedEvents = async (callback) => {
     const data = await events.getEventsBasedOnTime(true);
     if (data) {