Develop

.eslintrc.json

@@ -6,5 +6,7 @@
   "extends": [
     "@codeyourfuture/standard"
   ],
-  "parser": "babel-eslint"
+  "parser": "babel-eslint",
+  "linebreak-style": 0,
+  "quotes": [0, "double"]
 }

.gitignore

@@ -2,3 +2,4 @@
 dist/
 node_modules/
 .DS_Store
+

.vscode/launch.json

@@ -5,7 +5,7 @@
       "type": "node",
       "request": "attach",
       "name": "Debug server",
-      "port": 9229,
+      "port": 3105,
       "skipFiles": [
         "<node_internals>/**"
       ]

README.md

@@ -1,35 +1,33 @@
-# Starter Kit
+# Setup Project Locally 
+ - clone repo
+ - yarn install
 
-[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
+# Entry points in the app to get started adding features:
+ - Client folder ---> src contains all the front-end code.
+ - Server Folder contains all the back-end code.
 
- - [x] Full stack ES8+ with [Babel]
- - [x] [Node] LTS support (verified working on 10.x, 12.x and 14.x LTS releases)
- - [x] [Express] server
- - [x] [React] client with [Webpack]
- - [x] Linting with [ESLint]
- - [x] Dev mode (watch modes for client and server, proxy to avoid CORS issues)
- - [x] Production build (single deployment artifact, React loaded via CDN)
- - [x] [Heroku Postgres] database
- - [x] [Heroku] deployment
- - [x] [Cloud Foundry] deployment
- - [x] [Docker] build
+# Features
+Graduate Directory aims to help CYF graduates get hired. 
 
-## Setup
+- The platform allows graduates to publicise their profiles by logging in with their GitHub.
+  The app uses Oauth2 authentication flow to sign in eligible CYF graduates. First time login takes the graduate to a form where they are prompted to fill in their details which are displayed on the overview as well as individual profile pages.
+  Subsquent login shows graduate their profile which they can edit by selecting the Edit option in the dropdown menu at top right. 
+  The graduate also has the option to delete their profile or change their employment status to 'Hired' which is also displayed on their card on the overview page.
 
-Pick one member of the team to own the repository and pipeline. That person should do the following:
+- Potential employers can view the overview page and individual profile pages. They can also
+  contact suitable candidates by directly sending an email.
 
- 1. Create a fork of this repository for the team, and rename it something appropriate for your project.
- 2. Click the "Deploy to Heroku" button and create a Heroku account when prompted.
- 3. Fill in the name of the application, select Europe, then click "Deploy App".
- 4. Create a Heroku | Postgres | Hobby dev database. You have to connect the database to your existing application (Provision this add-on to an app).
- 5. If everything goes fine, you will have a DATABASE_URL config variable, in your project settings | config vars. You don't need to set it manually, it will be picked up when your app runs in Heroku. Since it's set only in the Heroku, the default local settings will be applied otherwise (see db.js in case you need to change it !!)  
- 6. Once it has deployed successfully, click the "Manage app" button to view the application details.
- 7. Go to the "Deploy" tab, select "Connect to GitHub" and choose your repo.
- 8. Click "Enable automatic deploys".
+- Mentors/Admin can login to the admin panel to add eligible GitHub usernames and skills.
+  They can also send emails to graduates.    
 
-Whenever you commit to master (or e.g. merge a [pull request]) it will get automatically deployed!
+   ![Overview Page](readme-1.png "Overview Page")
+
+   ![View Page](readme-2.png "View Page")
+
+   ![Edit Page](readme-3.png "Edit Page")
+   ![Edit Page](readme-4.png "Edit Page")
+   ![Edit Page](readme-5.png "Edit Page")
 
-You should now make sure all of the project team are [collaborators] on the repository.
 
 ## Scripts
 
@@ -67,3 +65,8 @@ See the guidance in the [wiki].
   [React]: https://reactjs.org/
   [Webpack]: https://webpack.js.org/
   [wiki]: https://github.com/textbook/starter-kit/wiki
+
+### Packages
+`yarn add react-bootstrap bootstrap`
+`yarn add styled-components`
+`yarn add formik yup`

base_url.js

@@ -0,0 +1,9 @@
+module.exports={
+    base_url:'https://dev-graduate-directory.herokuapp.com',
+    base_url_back:'https://dev-graduate-directory.herokuapp.com'
+}
+
+// module.exports={
+//     base_url:'http://localhost:3000',
+//     base_url_back:'http://localhost:3100'
+// }

client/.eslintrc.json

@@ -13,7 +13,10 @@
     "react/jsx-tag-spacing": "error",
     "react/no-unused-prop-types": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "linebreak-style": 0,
+    // "quotes": [2, "single", { "avoidEscape": true }],
+    "quotes": [0, "double"]
   },
   "settings": {
     "react": {

client/src/App.js

@@ -1,24 +1,25 @@
-import React, { useEffect, useState } from "react";
-
-import "./App.css";
-import { getMessage } from "./service";
-import logo from "./logo.svg";
-
-export function App() {
-	const [message, setMessage] = useState("Loading...");
-
-	useEffect(() => {
-		getMessage().then((message) => setMessage(message));
-	}, []);
+import React from "react";
+import Routes from "./Routes";
+import ProfileState from './context/ProfileContext';
+import AuthState from './context/AuthContext'
+import AdminState from './context/AdminContext'
+import { ThemeProvider } from "styled-components";
+import { GlobalStyles } from "./styles/GlobalStyle";
+import { theme } from "./styles/Theme";
 
+const App = () => {
 	return (
-		<main role="main">
-			<div>
-				<img className="logo" data-qa="logo" src={logo} alt="Just the React logo" />
-				<h1 className="message" data-qa="message">{message}</h1>
-			</div>
-		</main>
+		<AuthState>		
+			<ProfileState>
+				<AdminState>
+					<ThemeProvider theme={theme}>
+						<GlobalStyles />
+						<Routes />
+					</ThemeProvider>
+				</AdminState>
+			</ProfileState>
+		</AuthState>
 	);
-}
+};
 
 export default App;

client/src/RichText.css

@@ -0,0 +1,70 @@
+/**
+
+ */
+
+.RichEditor-root {
+  width: 700px;
+  background: #fff;
+  border: 1px solid #333333;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.RichEditor-editor {
+  border-top: 1px solid #333333;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root,
+.RichEditor-editor .public-DraftEditor-content {
+  margin: 0 -15px -15px;
+  padding: 15px;
+}
+
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 100px;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid #333333;
+  color: #666;
+  font-family: 'Hoefler Text', 'Georgia', serif;
+  font-style: italic;
+  margin: 16px 0;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  background-color: rgba(0, 0, 0, 0.05);
+  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.RichEditor-controls {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+}
+
+.RichEditor-styleButton {
+  color: #999;
+  cursor: pointer;
+  margin-right:35px;
+  padding: 2px 0;
+  display: inline-block;
+}
+
+.RichEditor-activeButton {
+  color: #5890ff;
+}

client/src/Routes.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import {ProtectedRoute} from './helpers/ProtectedRoute'
+import Home from "./pages/Home";
+import Login from './pages/Login'
+import CreateProfile from "./pages/CreateProfile";
+import ViewDetail from './pages/ViewDetail'
+import ViewAllProfiles from './pages/ViewAllProfiles'
+import ViewProfile from "./pages/ViewProfile";
+import EditProfile from "./pages/EditProfile";
+import NotEligible from './pages/NotEligible'
+import RichEditorField from './constant/RichEditorField'
+import RichEditorReader from './constant/RichEditorReader'
+import Admin from './pages/Admin'
+
+const Routes = () => {
+	return (
+		<BrowserRouter>
+			<Switch>
+				<Route exact path='/' component={Home} />
+				<Route path='/login' component={Login} />
+				<ProtectedRoute path='/admin' component={Admin} />
+				<Route exact path='/profiles' component={ViewAllProfiles}/>
+				<ProtectedRoute path='/profiles/new' component={CreateProfile} />
+				<ProtectedRoute path='/profile/edit' component={EditProfile} />
+				<Route path='/profiles/:name' component={ViewDetail} />
+				<ProtectedRoute path='/myprofile' component={ViewProfile} />
+				<Route path='/notfound' component={NotEligible} />
+			</Switch>
+		</BrowserRouter>
+	);
+};
+
+export default Routes;