added github connection with skills update

Lina0Elman · Lina0Elman · commit cbf0f34e77ed · 2025-04-22T21:33:35.000+03:00
diff --git a/nextstep-backend/src/app.ts b/nextstep-backend/src/app.ts
@@ -15,6 +15,7 @@ import validateUser from "./middleware/validateUser";
 import loadOpenApiFile from "./openapi/openapi_loader";
 import resource_routes from './routes/resources_routes';
 import resume_routes from './routes/resume_routes';
+import githubRoutes from './routes/github_routes';
 
 const specs = swaggerJsdoc(options);
 
@@ -74,5 +75,6 @@ app.use('/user', usersRoutes);
 app.use('/resource', resource_routes);
 app.use('/room', roomsRoutes);
 app.use('/resume', resume_routes);
+app.use('/github', githubRoutes);
 
 export { app, corsOptions };
diff --git a/nextstep-backend/src/controllers/github_controller.ts b/nextstep-backend/src/controllers/github_controller.ts
@@ -0,0 +1,87 @@
+import axios from 'axios';
+import { Request, Response } from 'express';
+
+const clientId = process.env.GITHUB_CLIENT_ID;
+const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+
+export const handleGitHubOAuth = async (req: Request, res: Response) => {
+    const { code } = req.body;
+
+    if (!code) {
+        return res.status(400).json({ error: 'Authorization code is required' });
+    }
+
+    try {
+        const tokenResponse = await axios.post('https://github.com/login/oauth/access_token', {
+            headers: { 'Content-Type': 'application/json' },
+            client_id: clientId,
+            client_secret: clientSecret,
+            code: code,
+        }) as any;
+
+        const tokenData = await tokenResponse.data;
+        const params = new URLSearchParams(tokenData);
+        const accessToken = params.get('access_token');
+
+        if (!accessToken) {
+            return res.status(400).json({ error: 'Failed to retrieve access token' });
+        }
+
+        const userResponse = await axios.get('https://api.github.com/user', {
+            headers: { Authorization: `Bearer ${accessToken}` },
+        }) as {status: number, data: { login?: string }, json: () => Promise<any>};
+
+        if (userResponse.status !== 200) {
+            const errorText = await userResponse.data;
+            return res.status(400).json({ error: errorText });
+        }
+
+        const userData = await userResponse.data;
+        res.json({ username: userData.login });
+    } catch (error) {
+        console.error('Error during GitHub OAuth:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+};
+
+export const fetchGitHubRepos = async (req: Request, res: Response) => {
+    const { username } = req.params;
+
+    try {
+        const apiUrl = `https://api.github.com/users/${username}/repos`;
+        const response = await axios.get(apiUrl) as {data: any, status: number};
+
+        if (response.status !== 200) {
+            return res.status(400).json({ error: `Error fetching repos: ${response.status}` });
+        }
+
+        const repos = await response.data;
+        res.json(repos);
+    } catch (error) {
+        console.error('Error fetching repos:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+};
+
+export const fetchRepoLanguages = async (req: Request, res: Response) => {
+    const { repoUrl } = req.query;
+
+    if (!repoUrl) {
+        return res.status(400).json({ error: 'Repository URL is required' });
+    }
+
+    try {
+        // Convert the repoUrl to the GitHub API URL if necessary
+        const apiUrl = (repoUrl as string).replace('https://github.com/', 'https://api.github.com/repos/');
+        const response = await axios.get(`${apiUrl}/languages`);
+
+        if (response.status !== 200) {
+            return res.status(400).json({ error: `Error fetching languages: ${response.statusText}` });
+        }
+
+        res.json(response.data);
+    } catch (error) {
+        console.error('Error fetching languages:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+};
diff --git a/nextstep-backend/src/routes/github_routes.ts b/nextstep-backend/src/routes/github_routes.ts
@@ -0,0 +1,10 @@
+import express from 'express';
+import { handleGitHubOAuth, fetchGitHubRepos, fetchRepoLanguages } from '../controllers/github_controller';
+
+const router = express.Router();
+
+router.post('/oauth', handleGitHubOAuth);
+router.get('/repos/:username', fetchGitHubRepos);
+router.get('/languages', fetchRepoLanguages);
+
+export default router;
diff --git a/nextstep-frontend/src/handlers/githubAuth.ts b/nextstep-frontend/src/handlers/githubAuth.ts
@@ -0,0 +1,72 @@
+import api from "../serverApi.ts";
+
+// Function to fetch GitHub repositories by username
+export const fetchGitHubRepos = async (username: string) => {
+    try {
+        const response = await api.get(`github/repos/${username}`) as any;
+        if (response.status !== 200) {
+            throw new Error(`Error fetching repos: ${response.statusText}`);
+        }
+        return response.data;
+    } catch (error) {
+        console.error(error);
+        return [];
+    }
+};
+
+// Function to connect to GitHub by username
+export const connectToGitHub = async (username: string) => {
+    if (!username) {
+        throw new Error('Username is required to connect to GitHub.');
+    }
+    return await fetchGitHubRepos(username);
+};
+
+// Function to initiate GitHub OAuth login (redirect only)
+export const initiateGitHubOAuth = () => {
+    const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID; // Use environment variable
+    const redirectUri = import.meta.env.VITE_GITHUB_REDIRECT_URI; // Use environment variable
+    const scope = 'repo'; // Adjust scope as needed
+    const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;
+    window.location.href = authUrl; // Redirect the user to GitHub's authorization page
+};
+
+// Function to handle GitHub OAuth token exchange and fetching user details
+export const handleGitHubOAuth = async (code: string) => {
+    try {
+        const response = await api.post('github/oauth', {
+            headers: { 'Content-Type': 'application/json' },
+            code: code,
+        }) as {data: {username?: string, error?: string}, status: number};
+
+        if (response.status !== 200) {
+            const errorText = await response.data.error;
+            console.error('Backend OAuth Error:', errorText);
+            throw new Error('Failed to authenticate with GitHub');
+        }
+        else if (!response.data.username) {
+            console.error('Backend OAuth Error:', response.data.error);
+            throw new Error('Failed to retrieve user information from GitHub');
+        }
+
+        return response.data.username;
+    } catch (error) {
+        const err : Error = error as Error;
+        console.error('Error during GitHub OAuth:', error);
+        throw new Error('Internal server error: ' + err.message);
+    }
+};
+
+// Function to fetch languages for a specific repository
+export const fetchRepoLanguages = async (repoUrl: string) => {
+    try {
+        const response = await api.get(`github/languages?repoUrl=${encodeURIComponent(repoUrl)}`) as any;
+        if (response.status !== 200) {
+            throw new Error(`Error fetching languages: ${response.statusText}`);
+        }
+        return await response.data;
+    } catch (error) {
+        console.error(error);
+        return {};
+    }
+};
diff --git a/nextstep-frontend/src/pages/MainDashboard.tsx b/nextstep-frontend/src/pages/MainDashboard.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Container, Box, Typography, Button, TextField, Chip, Stack, Grid, Paper, Autocomplete, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
 import { GitHub, LinkedIn } from '@mui/icons-material';
+import { connectToGitHub, initiateGitHubOAuth, fetchRepoLanguages, handleGitHubOAuth } from '../handlers/githubAuth';
 
 const roles = [
   'Software Engineer',
@@ -41,6 +42,7 @@ const MainDashboard: React.FC = () => {
   const [skills, setSkills] = useState<string[]>(() => JSON.parse(localStorage.getItem('skills') || '[]'));
   const [newSkill, setNewSkill] = useState('');
   const [selectedRole, setSelectedRole] = useState(() => localStorage.getItem('selectedRole') || '');
+  const [repos, setRepos] = useState<{ id: number; name: string; html_url: string }[]>([]);
 
   useEffect(() => {
     localStorage.setItem('aboutMe', aboutMe);
@@ -64,6 +66,40 @@ const MainDashboard: React.FC = () => {
     setSkills(skills.filter(skill => skill !== skillToDelete));
   };
 
+  const handleGitHubConnect = async () => {
+    try {
+      initiateGitHubOAuth();
+    } catch (error) {
+      console.error('Error initiating GitHub OAuth:', error);
+    }
+  };
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams(window.location.search);
+    const code = queryParams.get('code');
+    if (code) {
+      const fetchGitHubData = async () => {
+        try {
+          const username = await handleGitHubOAuth(code);
+          const fetchedRepos = await connectToGitHub(username);
+          setRepos(fetchedRepos);
+
+          // Fetch languages and add them as skills
+          const languagesSet = new Set(skills);
+          for (const repo of fetchedRepos) {
+            const repoLanguages = await fetchRepoLanguages(repo.html_url);
+            Object.keys(repoLanguages).forEach((lang) => languagesSet.add(lang));
+          }
+          setSkills(Array.from(languagesSet));
+        } catch (error) {
+          console.error('Error fetching GitHub data:', error);
+        }
+      };
+
+      fetchGitHubData();
+    }
+  }, []);
+
   return (
     <Container
       maxWidth="lg"
@@ -172,9 +208,22 @@ const MainDashboard: React.FC = () => {
               color="secondary"
               startIcon={<GitHub />}
               fullWidth
+              onClick={handleGitHubConnect}
             >
               Connect to GitHub
             </Button>
+            <Typography variant="h6" sx={{ mt: 3 }}>
+              GitHub Repositories
+            </Typography>
+            <ul>
+              {repos.map((repo) => (
+                <li key={repo.id}>
+                  <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
+                    {repo.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
           </Paper>
         </Grid>
       </Grid>
