adds profile page

related #21 #23

client/src/App.js

@@ -1,7 +1,12 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import { Home, GithubCallback, DeveloperDashboard } from "./pages";
+import {
+  Home,
+  GithubCallback,
+  DeveloperDashboard,
+  DeveloperProfile
+} from "./pages";
 
 import FetchData from "./components/FetchData";
 
@@ -31,6 +36,24 @@ class App extends Component {
     );
   };
 
+  renderDeveloperProfile = routerProps => {
+    const {
+      match: {
+        params: { profileId }
+      }
+    } = routerProps;
+    return (
+      <FetchData
+        method="get"
+        url={`/api/profile/${profileId}`}
+        renderPending={this.renderPending}
+        renderError={this.renderError}
+      >
+        {profile => <DeveloperProfile profile={profile} />}
+      </FetchData>
+    );
+  };
+
   renderHome = () => {
     return (
       <FetchData
@@ -58,6 +81,10 @@ class App extends Component {
             path="/developer-dashboard"
             render={this.renderDeveloperDashboard}
           />
+          <Route
+            path="/profile/:profileId"
+            render={this.renderDeveloperProfile}
+          />
           <Route exact path="/" render={this.renderHome} />
         </main>
       </Router>

client/src/components/EditableInput.js

@@ -1,6 +1,6 @@
 import React from "react";
 import AutosizeInput from "react-input-autosize";
-
+import { CLASS_NAME_INPUT_SPACING } from "../constants/typeographyClassNames";
 export default class EditableInput extends React.Component {
   constructor() {
     super();
@@ -54,7 +54,7 @@ export default class EditableInput extends React.Component {
           </React.Fragment>
         ) : (
           <span
-            className={`db ba bw1 b--white ph2 pv0 ${className}`}
+            className={`${CLASS_NAME_INPUT_SPACING} ${className}`}
             onClick={this.onFocus}
             onFocus={this.onFocus}
             tabIndex="0"

client/src/components/PaperText.js

@@ -0,0 +1,76 @@
+import React from "react";
+import AutosizeInput from "react-input-autosize";
+import { CLASS_NAME_INPUT_SPACING } from "../constants/typeographyClassNames";
+export default class PaperText extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      focused: false
+    };
+
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus(e) {
+    if (this.props.enabled) {
+      this.setState({
+        focused: true
+      });
+      e.preventDefault();
+      e.stopProgagation();
+    }
+  }
+
+  onBlur(e) {
+    if (this.props.enabled) {
+      this.setState({
+        focused: false
+      });
+      e.preventDefault();
+      e.stopProgagation();
+    }
+  }
+
+  render() {
+    const {
+      props: { className, value },
+      state: { focused }
+    } = this;
+
+    return (
+      <div className="mv0 dib">
+        {focused ? (
+          <React.Fragment>
+            <AutosizeInput
+              value={value}
+              autoComplete="off"
+              autoFocus
+              inputStyle={{
+                fontFamily: "inherit"
+              }}
+              type="text"
+              name={this.props.name}
+              onChange={this.props.onChange}
+              onBlur={this.onBlur}
+              inputClassName={`mw-100 db input-reset outline-0 ba bw1 b--black ph2 pv0 ${className}`}
+              onKeyDown={e => {
+                if (e.key === "Enter") this.onBlur();
+              }}
+            />
+          </React.Fragment>
+        ) : (
+          <span
+            className={`${CLASS_NAME_INPUT_SPACING} ${className}`}
+            onClick={this.onFocus}
+            onFocus={this.onFocus}
+            tabIndex="0"
+          >
+            {value}
+          </span>
+        )}
+      </div>
+    );
+  }
+}

client/src/components/profile/EmploymentHistoryWrapper.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default ({ children, ...attrs }) => (
+  <div className="tl mb4" {...attrs}>
+    {children}
+  </div>
+);

client/src/components/profile/H2EmploymentHistory.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { CLASS_NAME_H2 } from "../../constants/typeographyClassNames";
+
+export default ({ children }) => (
+  <h2 className={`tl ma0 pa2 ba bw1 b--white ${CLASS_NAME_H2}`}>
+    Employment History
+  </h2>
+);

client/src/components/profile/ProfileWrapper.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default ({ children }) => (
+  <div className="tc">
+    <div className="bl bw05 min-vh-100 b--light-gray w-50 dib pa3">
+      {children}
+    </div>
+  </div>
+);

client/src/components/profile/ResponsibilitiesList.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default ({ children }) => <ul className="mh0 mv2 pv0">{children}</ul>;

client/src/components/profile/ResponsibilitiesListItem.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { CLASS_NAME_TEXT_SMALL } from "../../constants/typeographyClassNames";
+
+export default ({ children, ...attrs }) => (
+  <li {...attrs} className={`mv1 pv0 ${CLASS_NAME_TEXT_SMALL}`}>
+    {children}
+  </li>
+);

client/src/constants/typeographyClassNames.js

@@ -0,0 +1,7 @@
+export const CLASS_NAME_H1 = "f3 black";
+export const CLASS_NAME_H1_SUB = "f6 mid-gray";
+export const CLASS_NAME_H2 = "f5 bold black";
+export const CLASS_NAME_H3 = "f5 black";
+export const CLASS_NAME_H3_SUB = "f6 mid-gray";
+export const CLASS_NAME_TEXT_SMALL = "f6 black";
+export const CLASS_NAME_INPUT_SPACING = "db ba bw1 b--white ph2 pv0";