fixed Github repos not getting accessed and their CSS

client/src/components/dashboard/Dashboard.tsx

@@ -6,7 +6,6 @@ import Experience from "./Experience";
 import Education from "./Education";
 import { getCurrentProfile, deleteAccount } from "../../actions/profile";
 import { Box, Button, Typography } from "@mui/material";
-import { compose } from "redux";
 
 const Dashboard = () => {
   const dispatch = useAppDispatch();

client/src/components/dashboard/Education.tsx

@@ -12,7 +12,6 @@ import {
   TableCell,
   TableHead,
   Typography,
-  TableContainer,
 } from "@mui/material";
 
 const Education = ({ education }: { education: EducationType[] }) => {

client/src/components/profile/Profile.tsx

@@ -74,7 +74,9 @@ const Profile = () => {
               <ProfileAbout profile={profile} />
             </Grid>
             <Grid size={{ xs: 12, md: 6 }}>
-              <Typography variant="h2">Experience</Typography>
+              <Typography variant="h2" color="info">
+                Experience
+              </Typography>
               {profile.experience.length > 0 ? (
                 <>
                   {profile.experience.map((experience: ExperienceType) => (
@@ -88,8 +90,10 @@ const Profile = () => {
                 <Typography variant="h4">No experience credentials</Typography>
               )}
             </Grid>
-            <Grid size={6}>
+            <Grid size={{ xs: 12, md: 6 }}>
-              <Typography variant="h2">Education</Typography>
+              <Typography variant="h2" color="info">
+                Education
+              </Typography>
               {profile.education.length > 0 ? (
                 <>
                   {profile.education.map((education: EducationType) => (

client/src/components/profile/ProfileGithub.tsx

@@ -1,3 +1,4 @@
+import { Box, List, ListItem, Paper, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import { getGithubRepos } from "../../actions/profile";
 import { useAppDispatch, useAppSelector } from "../../utils/hooks";
@@ -13,28 +14,39 @@ const ProfileGithub = ({ username }: { username: string }) => {
   }, [dispatch, username]);
 
   return (
-    <div>
+    <Box sx={{ width: { md: "50%", xs: "100%" } }}>
-      <h2>Github Repos</h2>
+      <Typography variant="h2" color="info">
-      {repos.map((repo) => (
+        Github Repos
-        <div key={repo.id}>
+      </Typography>
-          <div>
+      {repos.map((repo) => {
-            <h4>
+        return (
+          <Paper
+            key={repo.id}
+            elevation={12}
+            sx={{ margin: "10px", padding: "4px" }}
+          >
+            <Typography variant="h4">
               <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
                 {repo.name}
               </a>
-            </h4>
+            </Typography>
-            <p>{repo.description}</p>
+            <Typography
-          </div>
+              sx={{
-          <div>
+                textWrap: "wrap",
-            <ul>
+                wordBreak: "break-word",
-              <li>Stars: {repo.stargazers_count}</li>
+              }}
-              <li>Watchers: {repo.watchers_count}</li>
+            >
-              <li>Forks: {repo.forks_count}</li>
+              {repo.description}
-            </ul>
+            </Typography>
-          </div>
+            <List>
-        </div>
+              <ListItem>Stars: {repo.stargazers_count}</ListItem>
-      ))}
+              <ListItem>Watchers: {repo.watchers_count}</ListItem>
-    </div>
+              <ListItem>Forks: {repo.forks_count}</ListItem>
+            </List>
+          </Paper>
+        );
+      })}
+    </Box>
   );
 };
 

client/src/components/profile/ProfileTop.tsx

@@ -18,7 +18,9 @@ const ProfileTop = ({
   return (
     <>
       <img src={avatar} alt="" />
-      <Typography variant="h2">{name}</Typography>
+      <Typography variant="h2" color="info">
+        {name}
+      </Typography>
       <Typography sx={{ textWrap: "wrap" }}>
         {status} {company ? <span> at {company}</span> : null}
       </Typography>

server/routers/api/profile.ts

@@ -297,8 +297,6 @@ router.delete("/education/:edu_id", auth, async (req, res) => {
 // @desc     Get user repos from Github
 // @access   Public
 router.get("/github/:username", async (req, res) => {
-  console.log(config.get("githubToken"));
-  console.log(req.params.username);
   try {
     const uri = encodeURI(
       `https://api.github.com/users/${req.params.username}/repos?per_page=5&sort=created:asc`,