First merge if Backend branch vs v.2.x

.gitignore

@@ -1,4 +1,3 @@
 .vscode
-/server
 .DS_Store
 

client/package.json

@@ -29,6 +29,7 @@
 		"react-router-dom": "^5.1.2",
 		"react-scripts": "3.4.0",
 		"react-select": "^3.0.8",
+		"react-social-login-buttons": "^3.0.0",
 		"react-transition-group": "^4.3.0",
 		"use-debounce": "^3.3.0",
 		"use-interval": "^1.2.1"

client/src/App.js

@@ -2,39 +2,70 @@ import React, { useState, useEffect } from 'react';
 import './App.css';
 import Dashboard from './Components/Dashboard/Dashboard';
 import LoginPage from './Components/LoginPage/LoginPage';
+import PrivateRoute from './Components/PrivateRoute/PrivateRoute';
+import {
+  BrowserRouter as Switch,
+  Route,
+  BrowserRouter,
+  Redirect,
+} from 'react-router-dom';
+import { getIdFromLocation } from './helperFunc';
 
 function App() {
-  const [token, setToken] = useState('');
-  const [username, setUsername] = useState('');
-  const [offline, setOffline] = useState(!navigator.onLine);
+  const [token, setToken] = useState(localStorage.getItem('token') || '');
+  const [username, setUsername] = useState(
+    localStorage.getItem('username') || ''
+  );
+
+  /* the user can access the app through two different options:
+  1. indicating username and token manually. In the case of GitHub Enterprise the user also needs to indicate the endpoint.
+  2. Github authentication */
 
   useEffect(() => {
-    if (localStorage.getItem('token')) {
-      setToken(localStorage.getItem('token'));
-      setUsername(localStorage.getItem('username'));
+    // in case that the user is authenticated through github, an id will be attached to the url.
+    const userId = getIdFromLocation();
+    if (userId) {
+      // if there's id, we need to look for the token stored in the ddbb
+      fetch(`http://localhost:8080/users/${userId}`)
+        .then(res => {
+          return res.text();
+        })
+        .then(data => {
+          try {
+            const parsedData = JSON.parse(data);
+            // save the token in localstorage
+            localStorage.setItem('token', parsedData.token);
+            localStorage.setItem('username', parsedData.username);
+            // we change the state of the component since now the user is authenticated
+            assignCredentials(parsedData.username, parsedData.token);
+            // we redirect to the dashboard
+            window.location.href = '/dashboard';
+          } catch (e) {
+            console.error(
+              `Error in parsing json data while requesting user by Id : ${e}`
+            );
+          }
+        });
     }
-
-    window.addEventListener('online', setOfflineStatus);
-    window.addEventListener('offline', setOfflineStatus);
-    return function cleanup() {
-      window.removeEventListener('online', setOfflineStatus);
-      window.removeEventListener('offline', setOfflineStatus);
-    };
   }, []);
 
-  function setOfflineStatus() {
-    setOffline(!navigator.onLine);
-  }
-
   function assignCredentials(usernameVal, tokenVal) {
     setUsername(usernameVal);
     setToken(tokenVal);
   }
 
-  return token ? (
-    <Dashboard token={token} username={username} offline={offline} />
-  ) : (
-    <LoginPage assignCredentials={assignCredentials} offline={offline} />
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Redirect from='/' to='/dashboard' />
+        <PrivateRoute path='/dashboard'>
+          <Dashboard token={token} username={username} />
+        </PrivateRoute>
+        <Route path='/login'>
+          <LoginPage assignCredentials={assignCredentials} />
+        </Route>
+      </Switch>
+    </BrowserRouter>
   );
 }
 

client/src/Components/Assign/Assign.js

@@ -6,6 +6,7 @@ import Button from '../Button/Button';
 import cx from 'classnames';
 
 function Assign({ userId, prId, className, isAssigned, currentAssignees }) {
+  // if there's previous assigness we keep their id
   let prevAssignees = [];
   if (currentAssignees.length) {
     prevAssignees = [
@@ -22,13 +23,16 @@ function Assign({ userId, prId, className, isAssigned, currentAssignees }) {
 
   function handleAssignment(event) {
     if (!isAssigned) {
+      // if the pr is not yet assigned to the user, we add the userId to the previous assignees' ids
       assignId.push(userId);
       event.preventDefault();
+      // perform mutation
       assignToMe({ variables: { pullRequestId: prId, assigneeIds: assignId } });
       if (data) {
         console.log('Succesfully assigned to you');
       }
     } else {
+      // otherwsise we filter all the ids except the user's and we perform the mutation
       event.preventDefault();
       assignToMe({
         variables: {
@@ -47,7 +51,7 @@ function Assign({ userId, prId, className, isAssigned, currentAssignees }) {
       icon='user-check'
       title='Assign to me'
       onClick={handleAssignment}
-      className={isAssigned ? `${classnames}--isFavorite` : classnames}
+      className={isAssigned ? `${classnames}--isFavorite` : classnames} // isFavorite needs renaming as the same modifications are applied for the favoriting feature
     />
   );
 }

client/src/Components/Avatar/Avatar.js

@@ -12,6 +12,8 @@ function Avatar({
 }) {
   const [imageError, setImageError] = useState(false);
   const classnames = cx('Avatar', className);
+  /* we found that using github enterprise returned error when rendering images coming from the company's servers.
+   We are proactively handling this error here */
   return !imageError ? (
     <div className={classnames} style={{ width: size, height: size }}>
       <img

client/src/Components/Badge/Badge.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import Emoji from 'a11y-react-emoji';
 
 function Badge({ className, type = '', ...props }) {
+  // we want to keep the different states as we want to show them if the PR is favorited in the future
   const emojis = {
     OPEN: <Emoji symbol='👋' label='open' className='emoji' />,
     MERGED: <Emoji symbol='👍' label='open' className='emoji' />,

client/src/Components/Dashboard/Dashboard.js

@@ -15,7 +15,7 @@ import NavBar from '../NavBar/NavBar';
 
 library.add(fas);
 
-function Dashboard({ className, username }) {
+function Dashboard({ className, username, ...props }) {
   // STATES
   const [pinnedItems, setPinnedItems] = useState(
     localStorage.getItem('pinnedItems')
@@ -35,11 +35,13 @@ function Dashboard({ className, username }) {
   const [isOpen, toggleSidebar] = useState(false);
   let uid;
 
+  // helper Function
   function toggleBar() {
     toggleSidebar(!isOpen);
   }
 
   // API CALLS
+  // PR Data
   const { loading, data, error } = useQuery(GET_PRS, {
     variables: {
       login: `${username}`,
@@ -53,6 +55,7 @@ function Dashboard({ className, username }) {
     uid = data.user.id;
   }
 
+  // Repos data
   const {
     loading: reposLoading,
     data: reposData,
@@ -62,7 +65,7 @@ function Dashboard({ className, username }) {
       login: `${username}`,
     },
   });
-
+  // PR authors data
   const {
     loading: authorsLoading,
     data: authorsData,

client/src/Components/Dashboard/utils.js

@@ -1,16 +1,17 @@
+// groups prs from the user
 function getPRs(repos) {
   return repos.reduce((acc, element) => {
     return acc.concat(element.pullRequests.nodes);
   }, []);
 }
-
+// gets repos from org
 function getReposFromOrgs(orgs) {
   return orgs.reduce(
     (acc, element) => acc.concat(element.repositories.nodes),
     []
   );
 }
-
+// gets als prs together
 export function groupPRs(queryData) {
   const userReposPRs = getPRs(queryData.user.repositories.nodes);
   const orgsReposPRs = getPRs(
@@ -19,6 +20,7 @@ export function groupPRs(queryData) {
 
   return [...userReposPRs, ...orgsReposPRs];
 }
+//helper function to filter by repos
 export function filterByRepos(allPRs, repos, authors) {
   const firstFiltering =
     Array.isArray(repos) && repos.length > 0
@@ -32,7 +34,7 @@ export function filterByRepos(allPRs, repos, authors) {
       )
     : firstFiltering;
 }
-
+//groups all repos
 export function groupAllRepos(queryData) {
   const userRepos = queryData.user.repositories.nodes;
   const orgRepos = getReposFromOrgs(queryData.user.organizations.nodes);

client/src/Components/Login/Login.js

@@ -3,6 +3,8 @@ import './Login.css';
 import Button from '../Button/Button';
 import cx from 'classnames';
 import Checkbox from '../Checkbox/Checkbox';
+import { GithubLoginButton } from 'react-social-login-buttons';
+import { useHistory, useLocation } from 'react-router-dom';
 
 //TODO(marta) create a form component
 
@@ -14,7 +16,12 @@ function Login({ className, assignCredentials }) {
   const [enterpriseUrl, setEnterpriseUrl] = useState('');
   const [isFormEnabled, setEnableForm] = useState(false);
 
-  useEffect(() => {});
+  // gets access to the browser history object
+  let history = useHistory();
+  // returns the current location object
+  let location = useLocation();
+
+  let { from } = location.state || { from: { pathname: '/dashboard' } };
 
   function handleTokenChange({ target }) {
     setToken(target.value);
@@ -33,6 +40,8 @@ function Login({ className, assignCredentials }) {
   }
 
   function handleSubmit(event) {
+    /* if the user accesses the app through the form,
+     all the data will be handled by the above functions and stored in localstorage*/
     event.preventDefault();
     localStorage.setItem('username', username);
     localStorage.setItem('token', token);
@@ -41,6 +50,8 @@ function Login({ className, assignCredentials }) {
       localStorage.setItem('enterpriseUrl', JSON.stringify(enterpriseUrl));
     }
     assignCredentials(username, token);
+    // we redirect to the dashboard
+    history.replace(from);
   }
 
   useEffect(() => {
@@ -55,7 +66,7 @@ function Login({ className, assignCredentials }) {
     } else if (isFormEnabled) {
       setEnableForm(false);
     }
-  }, [username, token, isEnterprise, enterpriseUrl]);
+  }, [username, token, isEnterprise, enterpriseUrl, isFormEnabled]);
 
   return (
     <div className={classnames}>
@@ -64,6 +75,10 @@ function Login({ className, assignCredentials }) {
         className='pic'
         alt='login femalecodercat'
       ></img>
+      <a href='http://localhost:8080/oauth/github'>
+        <GithubLoginButton />
+      </a>
+      <p className='Login-link'>or</p>
       <form onSubmit={handleSubmit} className='Login-form'>
         <input
           placeholder='Username'

client/src/Components/Login/auth-utils.js

@@ -0,0 +1,17 @@
+export const isLoggedIn = () => {
+  if (
+    localStorage.getItem('isEnterprise') &&
+    localStorage.getItem('enterpriseURL')
+  ) {
+    if (localStorage.getItem('token') && localStorage.getItem('username')) {
+      return true;
+    }
+  } else if (
+    localStorage.getItem('token') &&
+    localStorage.getItem('username')
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+};

client/src/Components/LoginPage/LoginPage.js

@@ -2,13 +2,11 @@ import React from 'react';
 import './LoginPage.css';
 import Login from '../Login/Login';
 import cx from 'classnames';
-import Badge from '../Badge/Badge';
 
 function LoginPage({ className, assignCredentials, offline }) {
   const classnames = cx('LoginPage', className);
   return (
     <div className={classnames}>
-      {offline && <Badge type={offline} className='LoginPage-offlineBadge' />}
       <Login assignCredentials={assignCredentials} />
     </div>
   );

client/src/Components/NavBar/NavBar.js

@@ -10,6 +10,7 @@ import TransitionPage from '../TransitionPage/TransitionPage';
 function NavBar({ className, ...props }) {
   const classnames = cx('NavBar', className);
   const username = localStorage.getItem('username');
+
   const { loading, data, error } = useQuery(GET_USERINFO, {
     variables: {
       login: `${username}`,
@@ -61,7 +62,7 @@ function NavBar({ className, ...props }) {
                 className='NavBar-user-pic'
               />
             </button>
-            {data.user.login}
+            {username}
           </div>
           <Button
             icon={faGithub}