adds mock dashboard for freelancers

related #21 #23

client/package.json

@@ -16,6 +16,7 @@
     "ramda": "^0.26.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-input-autosize": "^2.2.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "styled-components": "^4.1.2",

client/src/App.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import { Home, GithubCallback } from "./pages";
+import { Home, GithubCallback, DeveloperDashboard } from "./pages";
 
-import Request from "./components/Request";
+import FetchData from "./components/FetchData";
 
 class App extends Component {
   renderPending = () => {
@@ -18,16 +18,38 @@ class App extends Component {
     return <GithubCallback />;
   };
 
+  renderDeveloperDashboard = () => {
+    const mockProfile = {
+      name: "Eoin McCarthy",
+      jobTitle: "Full Stack Web Developer",
+      bio:
+        "Eoin, a member of the Founders and Coders network, joined the GSG team to lead the launch of the Digital Agency. Holding a masters in Applied Mathematics, Eoin worked as a web developer for 3 years, working for a number of startups in London across a diverse range of products, from FinTech to online publishing. Before joining GSG Eoin worked as a project lead on Founders and Coders commercial projects. Eoin has rich experience in tech education, previously serving as a mentor and Course Facilitator at the Founders and Coders campuses in London and Nazareth in addition to Gaza.",
+      employmentHistory: [
+        {
+          title: "Engineering Manager",
+          company: "Gaza Sky Geeks",
+          dates: "January 2018 - current",
+          responsibilities: [
+            "Creating Software outsourcing agency in the Gaza Strip",
+            "Creating custom software such as Gaza Talent"
+          ]
+        }
+      ]
+    };
+
+    return <DeveloperDashboard savedProfile={mockProfile} />;
+  };
+
   renderHome = () => {
     return (
-      <Request
+      <FetchData
         method="get"
         url="/api/profile"
         renderPending={this.renderPending}
         renderError={this.renderError}
       >
         {listings => <Home listings={listings} />}
-      </Request>
+      </FetchData>
     );
   };
 
@@ -40,6 +62,11 @@ class App extends Component {
             path="/github/callback"
             render={this.renderGithubCallback}
           />
+          <Route
+            exact
+            path="/developer-dashboard"
+            render={this.renderDeveloperDashboard}
+          />
           <Route exact path="/" render={this.renderHome} />
         </main>
       </Router>

client/src/components/EditableInput.js

@@ -1,10 +1,73 @@
 import React from "react";
+import AutosizeInput from "react-input-autosize";
 
-export default ({ value, onClick, onSubmit, editable }) =>
-  editable ? (
-    <span className="ba bw2 b--black">
-      <input type="text" value={value} />
-    </span>
-  ) : (
-    <span>{value}</span>
-  );
+export default class EditableInput extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      focused: false
+    };
+
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus() {
+    this.setState({
+      focused: true
+    });
+  }
+
+  onBlur() {
+    this.setState({
+      focused: false
+    });
+  }
+
+  render() {
+    const {
+      props: { className, value, multiline },
+      state: { focused }
+    } = this;
+
+    return (
+      <div className="mv0 dib">
+        {focused ? (
+          <AutosizeInput
+            value={value}
+            autoComplete="off"
+            autoFocus
+            ref={i => {
+              this.inputRef = i;
+            }}
+            inputStyle={{
+              fontFamily: "inherit"
+            }}
+            type="text"
+            name={this.props.name}
+            onChange={this.props.onChange}
+            onBlur={this.onBlur}
+            placeholder={this.props.placeholder}
+            inputClassName={`mw-100 db input-reset outline-0 ba bw1 b--black ph2 pv0 ${className}`}
+            onKeyDown={e => {
+              console.log({ e, k: e.key });
+              if (e.key === "Enter") this.onBlur();
+            }}
+          />
+        ) : (
+          <span
+            className={`db ba bw1 b--white ph2 pv0 ${className}`}
+            onClick={this.onFocus}
+            onFocus={this.onFocus}
+            tabIndex="0"
+          >
+            {console.log(value, !!value, this.props.placeholder) || value !== ""
+              ? value
+              : this.props.placeholder}
+          </span>
+        )}
+      </div>
+    );
+  }
+}

client/src/components/FetchData.js

@@ -0,0 +1,48 @@
+import { Component } from "react";
+import axios from "axios";
+
+const PENDING = "PENDING";
+const ERROR = "ERROR";
+const DONE = "DONE";
+
+export default class FetchData extends Component {
+  state = {
+    requestStatus: PENDING
+  };
+
+  componentDidMount() {
+    axios[this.props.method](this.props.url, {
+      headers: {
+        Authorization: `Bearer ${window.localStorage.getItem("jwt")}`
+      }
+    }).then(
+      response => {
+        this.setState({
+          payload: response.data,
+          requestStatus: DONE
+        });
+      },
+      error => {
+        this.setState({
+          error,
+          requestStatus: ERROR
+        });
+      }
+    );
+  }
+
+  render() {
+    const {
+      state: { requestStatus, payload, error },
+      props: { renderPending, renderError, children }
+    } = this;
+
+    console.log("rendering", requestStatus);
+
+    if (requestStatus === PENDING) return renderPending();
+
+    if (requestStatus === ERROR) return renderError(error);
+
+    return children(payload);
+  }
+}

client/src/components/Request.js

@@ -5,16 +5,23 @@ const PENDING = "PENDING";
 const ERROR = "ERROR";
 const DONE = "DONE";
 
-export default class Request extends Component {
+export default class FetchData extends Component {
+  constructor(props) {
+    super(props);
+
+    this.request = this.request.bind(this);
+  }
+
   state = {
     requestStatus: PENDING
   };
 
-  componentDidMount() {
+  request(payload) {
     axios[this.props.method](this.props.url, {
       headers: {
         Authorization: `Bearer ${window.localStorage.getItem("jwt")}`
-      }
+      },
+      body: payload
     }).then(
       response => {
         this.setState({
@@ -37,12 +44,11 @@ export default class Request extends Component {
       props: { renderPending, renderError, children }
     } = this;
 
-    console.log("rendering", requestStatus);
-
-    if (requestStatus === PENDING) return renderPending();
-
-    if (requestStatus === ERROR) return renderError(error);
-
-    return children(payload);
+    return children({
+      request: this.request,
+      payload,
+      status: requestStatus,
+      error
+    });
   }
 }