Updated locally

components/Redirect/index.js

@@ -0,0 +1,12 @@
+import { Component } from 'preact';
+import { route } from 'preact-router';
+
+export default class Redirect extends Component {
+  componentWillMount() {
+    route(this.props.to, true);
+  }
+
+  render() {
+    return null;
+  }
+}

components/addItem/index.js

@@ -0,0 +1,32 @@
+import { h, Component } from 'preact';
+import style from './style';
+
+export default class AddItem extends Component{
+  addItem(event) {
+    event.preventDefault();
+    const timestamp = Date.now();
+    const item = {
+      desc: this.name.value,
+      p1: `none`,
+      p2: `none`,
+      p3: `none`,
+      p4: `none`,
+      status: `To do`
+    };
+    this.props.addItem(item);
+    this.addItemForm.reset();
+  }
+  render() {
+    return (
+      <div class={style.newItem}>
+        <form ref={input => (this.addItemForm = input)} class={style.newItemForm} onSubmit={(e) => this.addItem(e) }>
+          <input required ref={input => (this.name = input)} type="text" placeholder="Omschrijving van de opdracht" />
+        </form>
+      </div>
+    );
+  }
+}
+
+AddItem.propTypes = {
+  addItem: Component.PropTypes.func.isRequired
+};

components/addItem/style.css

@@ -0,0 +1,68 @@
+.newItem{
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  /* border-left: 7.5px solid #eee */
+}
+
+.newItem img{
+  height: 18px;
+  margin: 5px
+}
+
+.newItemForm{
+  width: calc(100% - 1px);
+  min-width: 308px;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  height: 35px;
+}
+
+.newItemForm input{
+  width: 100%;
+  background: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  border-left: 7.5px solid #eee;
+  border-top: 1px solid #eee;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  /* border-left: 7px solid ##c2c2c2; */
+  font-size: 14px;
+  padding: 10px;
+  margin: 0;
+  color: #333;
+  transition: all .2s ease-in-out;
+  height: 35px;
+}
+
+.newItemForm input::placeholder{
+  color: #A09C9C;
+}
+
+.newItemForm input:focus{
+  border-color: #f44336;
+  color: #333;
+}
+
+.newItemForm button{
+  background: none;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  border: 2px solid #d81b60;
+  font-size: 20px;
+  color: #d81b60;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.newItemForm button:hover{
+  background: #d81b60;
+  color: #ffffff;
+}

components/app.js

@@ -0,0 +1,131 @@
+import { h, Component } from 'preact';
+import { Router } from 'preact-router';
+
+import Header from './header';
+import Home from '../routes/home';
+import Profile from '../routes/profile';
+import Team from '../routes/team';
+import Login from '../routes/login';
+import Teams from '../routes/Teams';
+
+import firebase from 'firebase/app';
+require('firebase/auth');
+import fireApp from '../base2';
+
+const github = new firebase.auth.GithubAuthProvider();
+github.addScope('user:email');
+
+const facebook = new firebase.auth.FacebookAuthProvider();
+facebook.addScope('user_email');
+
+const twitter = new firebase.auth.TwitterAuthProvider();
+
+export default class App extends Component {
+  constructor() {
+    super();
+    // this.renderInventory = this.renderInventory.bind(this);
+    // this.renderLogin = this.renderLogin.bind(this);
+    this.authenticate = this.authenticate.bind(this);
+    this.logout = this.logout.bind(this);
+    this.authHandler = this.authHandler.bind(this);
+    // this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      uid: null,
+      owner: null,
+      username: null,
+      userProfilePic: null
+    };
+  }
+
+  componentDidMount() {
+    firebase.auth(fireApp).onAuthStateChanged((user) => {
+      if (user) {
+        this.authHandler(null, { user });
+      }
+    });
+    // base.onAuth((user) => {
+    //   if (user) {
+    //     this.authHandler(null, { user });
+    //   }
+    // });
+  }
+
+  handleRoute = e => {
+    this.currentUrl = e.url;
+  };
+
+  authenticate(provider) {
+    console.log(`Trying to log in with ${provider}`);
+    firebase.auth(fireApp).signInWithPopup(provider).then(() => {
+      this.authHandler;
+    });
+    // base.authWithOAuthPopup(provider, this.authHandler);
+  }
+
+  logout() {
+    // base.unauth();
+    firebase.auth(fireApp).signOut();
+    this.setState({ uid: null, username: null, userProfilePic: null });
+  }
+
+  authHandler(err, authData)  {
+    console.log(authData);
+    if (err) {
+      console.error(err);
+      return;
+    }
+
+    // grab the database info
+    const globalRef = fireApp.database().ref('global');
+
+    // query the firebase once for the store data
+    globalRef.once('value', (snapshot) => {
+      const data = snapshot.val() || {};
+
+      // claim it as our own if there is no owner already
+      if(!data.owner) {
+        globalRef.set({
+          owner: authData.user.uid
+        });
+      }
+
+      this.setState({
+        uid: authData.user.uid,
+        owner: data.owner || authData.user.uid,
+        username: authData.user.displayName,
+        userProfilePic: authData.user.photoURL,
+      });
+    });
+
+  }
+
+
+  render() {
+    return (
+      <div id="app">
+        <Header
+          uid={this.state.uid}
+          username={this.state.username}
+          userProfilePic={this.state.userProfilePic}
+          logout={this.logout}
+        />
+        <Router onChange={this.handleRoute}>
+          <Home path="/" />
+          <Profile path="/profile/" user="me" />
+          <Profile path="/profile/:user" />
+          <Team path="/team/" teamName="test" />
+          <Team path="/team/:teamName" />
+          <Team path="/team/:teamName/board/:boardName" />
+          <Login path="/login"
+            authenticate={this.authenticate}
+            twitter={twitter}
+            facebook={facebook}
+            github={github}
+            uid={this.state.uid}
+          />
+          <Teams path="/teams" uuid={this.state.uid} />
+        </Router>
+      </div>
+    );
+  }
+}

components/boardLink/index.js

@@ -0,0 +1,37 @@
+import { h, Component } from 'preact';
+import { Link } from 'preact-router/match';
+import '@material/list/dist/mdc.list.min.css';
+import style from './style';
+
+export default class BoardLink extends Component {
+  constructor() {
+    super();
+
+    this.areYouFuckingSure = this.areYouFuckingSure.bind(this);
+  }
+
+  state = {
+    deletedBoard: 'boooooooi'
+  }
+
+  areYouFuckingSure() {
+    let r = confirm(`You are about to delete ${this.props.details.name}. \nThis can't be undone! \nAre you sure you want to delete the board ${this.props.details.name}`);
+    if (r === true) {
+      this.props.removeBoard(this.props.index);
+    }
+  }
+
+  render() {
+    const i = this.props;
+    return (
+      <li className="mdc-list-item">
+        <Link activeClassName={style.activeBoard} href={`/team/${i.teamName}/board/${i.index}`} >
+          {i.details.name}
+        </Link>
+        <a onClick={this.areYouFuckingSure} className="mdc-list-item__end-detail material-icons" aria-label="Delete Board" title="Delete board">
+          delete
+        </a>
+      </li>
+    );
+  }
+}