Merge pull request #107 from OpenDevUFCG/feat/add-mentors-list

Render mentors

data/index.js

@@ -0,0 +1,11 @@
+import { pluck, flatten, uniqWith, eqProps } from 'ramda';
+import projects from './repositories.json';
+
+const getMentors = () => {
+    const mentors = flatten(pluck('mentors', projects.repositories));
+    const uniqueMentors = uniqWith(eqProps('name'))(mentors);
+
+    return uniqueMentors;
+};
+
+export default getMentors;

data/repositories.json

@@ -3,43 +3,111 @@
     "repositories": [
         {
             "name": "calluswhatyouwant/spotify-web-sdk",
-            "difficulty": "avancado"
+            "difficulty": "avancado",
+            "mentors": [
+                {
+                    "name": "JRobsonJr",
+                    "imgUrl": "https://github.com/jrobsonjr.png"
+                },
+                {
+                    "name": "JoseRenan",
+                    "imgUrl": "https://github.com/joserenan.png"
+                }
+            ]
         },
         {
             "name": "calluswhatyouwant/musicritic",
-            "difficulty": "avancado"
+            "difficulty": "avancado",
+            "mentors": [
+                {
+                    "name": "JRobsonJr",
+                    "imgUrl": "https://github.com/jrobsonjr.png"
+                },
+                {
+                    "name": "JoseRenan",
+                    "imgUrl": "https://github.com/joserenan.png"
+                }
+            ]
         },
         {
             "name": "paulojbleitao/pokedex",
-            "difficulty": "intermediario"
+            "difficulty": "intermediario",
+            "mentors": [
+                {
+                    "name": "PauloJBLeitao",
+                    "imgUrl": "https://github.com/paulojbleitao.png"
+                }
+            ]
         },
         {
             "name": "SubmiBot/SubmiBot",
-            "difficulty": "intermediario"
+            "difficulty": "intermediario",
+            "mentors": [
+                {
+                    "name": "HericlesMe",
+                    "imgUrl": "https://github.com/hericlesme.png"
+                }
+            ]
         },
         {
             "name": "marianabianca/pomodoro",
-            "difficulty": "iniciante"
+            "difficulty": "iniciante",
+            "mentors": [
+                {
+                    "name": "MarianaBianca",
+                    "imgUrl": "https://github.com/marianabianca.png"
+                }
+            ]
         },
         {
             "name": "P-Sync/P-Sync",
-            "difficulty": "intermediario"
+            "difficulty": "intermediario",
+            "mentors": [
+                {
+                    "name": "HericlesMe",
+                    "imgUrl": "https://github.com/hericlesme.png"
+                }
+            ]
         },
         {
             "name": "FelipeMarinho97/iskra-webkit-greeter",
-            "difficulty": "intermediario"
+            "difficulty": "intermediario",
+            "mentors": [
+                {
+                    "name": "FelipeMarinho97",
+                    "imgUrl": "https://github.com/FelipeMarinho97.png"
+                }
+            ]
         },
         {
             "name": "Rickecr/PyGraph",
-            "difficulty": "intermediario"
+            "difficulty": "intermediario",
+            "mentors": [
+                {
+                    "name": "Rickecr",
+                    "imgUrl": "https://github.com/Rickecr.png"
+                }
+            ]
         },
         {
             "name": "Rickecr/CamaraDosDeputados",
-            "difficulty": "iniciante"
+            "difficulty": "iniciante",
+            "mentors": [
+                {
+                    "name": "Rickecr",
+                    "imgUrl": "https://github.com/Rickecr.png"
+                }
+            ]
         },
         {
             "name": "matheusps/clssx",
-            "difficulty": "iniciante"
+            "difficulty": "iniciante",
+            "mentors": [
+                {
+                    "name": "Matheusps",
+                    "imgUrl": "https://github.com/matheusps.png"
+                }
+            ]
         }
     ]
 }

package.json

@@ -41,6 +41,7 @@
         "mini-css-extract-plugin": "^0.4.4",
         "prettier": "^1.14.3",
         "pretty-quick": "^1.8.0",
+        "ramda": "^0.26.1",
         "react-dev-utils": "^6.1.1",
         "style-loader": "^0.23.1",
         "url-loader": "^2.2.0",

src/components/app/App.js

@@ -19,6 +19,7 @@ const AppHeader = () => (
         <HeaderWrapperNavLinks>
             <HeaderNavLink to="/quem-somos">Quem Somos?</HeaderNavLink>
             <HeaderNavLink to="/junte-se">Junte-se!</HeaderNavLink>
+            <HeaderNavLink to="/mentores">Mentores</HeaderNavLink>
         </HeaderWrapperNavLinks>
     </Header>
 );

src/components/app/Routes.js

@@ -4,12 +4,14 @@ import { Switch, Route } from 'react-router-dom';
 import ProjectsPage from '../projects/ProjectsPage';
 import JoinUsPage from '../joinus/JoinUsPage';
 import TeamPage from '../team/TeamPage';
+import MentorGrid from '../mentors/MentorGrid';
 
 const Routes = () => (
     <Switch>
         <Route exact path="/" component={ProjectsPage} />
         <Route path="/quem-somos" render={TeamPage} />
         <Route path="/junte-se" component={JoinUsPage} />
+        <Route path="/mentores" component={MentorGrid} />
     </Switch>
 );
 

src/components/commons/header/Header.css

@@ -14,6 +14,7 @@
     box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
     display: flex;
     justify-content: center;
+    z-index: 1;
 }
 
 /* Class used to keep the header at the top of the page even when it is rolled */

src/components/mentors/MentorCard.css → src/components/mentors/Mentor.css

@@ -1,6 +1,46 @@
+.mentor-grid {
+    display: grid;
+    width: 100%;
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    .mentor-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+    .mentor-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+    .mentor-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+    .mentor-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+    .mentor-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
 .img-mentor {
     border-radius: 100%;
-    width: 200px;
+    width: 100%;
     filter: grayscale(100%);
     transition: all 0.7s ease;
 }

src/components/mentors/MentorCard.js

@@ -1,24 +1,13 @@
 // @flow
 import React from 'react';
-import type { Repository } from '../commons/repository/repository';
 import type { Mentor as MentorCardProps } from './mentor';
 
-import './MentorCard.css';
+import './Mentor.css';
 
-const renderRepositories = (repositoriesList: Repository[]) =>
-    repositoriesList.map(repository => (
-        <li className="repository-mentor" key={repository.nameWithOwner}>
-            {repository.nameWithOwner}
-        </li>
-    ));
-
-const MentorCard = ({ name, imgUrl, repositoriesList }: MentorCardProps) => (
+const MentorCard = ({ name, imgUrl }: MentorCardProps) => (
     <div className="card-mentor">
         <img className="img-mentor" src={imgUrl} alt={name} />
         <figcaption className="name-mentor">{name}</figcaption>
-        <ul className="repository-list-mentor">
-            {renderRepositories(repositoriesList)}
-        </ul>
     </div>
 );
 

src/components/mentors/MentorGrid.js

@@ -3,22 +3,21 @@ import React from 'react';
 import type { Mentor } from './mentor';
 
 import MentorCard from './MentorCard';
+import getMentors from '../../../data';
+import './Mentor.css';
 
-type MentorGridProps = {
-    mentorsList: Mentor[],
-};
-
-const renderMentors = (mentorsList: Mentor[]) =>
-    mentorsList.map(mentor => (
+const renderMentors = (mentorsList: Mentor[]) => {
+    return mentorsList.map((mentor, i) => (
         <MentorCard
             name={mentor.name}
             imgUrl={mentor.imgUrl}
-            repositoriesList={mentor.repositoriesList}
+            key={`${mentor.name}--${i}`}
         />
     ));
+};
 
-const MentorGrid = ({ mentorsList }: MentorGridProps) => (
-    <ul>{renderMentors(mentorsList)}</ul>
+const MentorGrid = () => (
+    <div className="mentor-grid">{renderMentors(getMentors())}</div>
 );
 
 export default MentorGrid;

src/components/mentors/mentor.js

@@ -1,8 +1,6 @@
 // @flow
-import type { Repository } from '../commons/repository/repository';
 
 export type Mentor = {
     name: string,
     imgUrl: string,
-    repositoriesList: Repository[],
 };

yarn.lock

@@ -4650,7 +4650,7 @@ querystringify@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
 
-ramda@^0.26:
+ramda@^0.26, ramda@^0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
   integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==