(WIP) 'Add Project' Feature via UI

src/App/Home/Dashboard/Dashboard.js

@@ -1,15 +1,138 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
+import { Button, Input, Form } from 'semantic-ui-react'
+import { createProject } from '../../../graphql/mutations'
+import { Mutation } from "react-apollo";
 
 // Dashboard: Dashboard style setup with some grouping and visualizations
+
+const defaultState = {
+	editing: false,
+}
+
+// Change this buttons on click to trigger a create project.
+
+// TODO: Replace button with "trigger" component
+const CreateProject = ( {title, owners} ) => {
+
+	let input;
+	let editing = false;
+
+  return (
+	<Mutation mutation={createProject}>
+		{(createProject, { data }) => (
+			<div> 
+				<Button circular icon='plus' className="h2.5 w2.5" onClick={() => { this.editing = true }} /> 
+				<form
+					onSubmit={e => {
+						e.preventDefault();
+						title = input.value;
+						createProject({ variables: { owners, title } });
+						input.value = "";
+					}}
+				>
+
+					<input
+						ref={node => {
+							input = node;
+						}}
+					/>	
+				</form>
+			</div>
+		)}
+  </Mutation>
+
+		  /*
+    <Mutation mutation={createProject}>
+      {(createProject, { data }) => (
+		<Button circular icon='plus' className="h2.5 w2.5" onClick={() => createProject({ variables: { owners, title } })} />
+      )}
+	</Mutation>
+	*/
+  );
+};
+
+
+
+
+
+// Add button that sends "createProject" mutation request on click
+
+// TODO: input Visible true!!!. when input visible is true, render add project input. 
+// Stateful component: when you click this button, it will see. 
+
+/*
+class MenuAddProject extends Component {
+
+	constructor(props) {
+		super(props)
+		this.state = {
+			inputValue: ''
+		}
+	}
+
+	handleChange(event) {
+		this.setState({value: event.target.value})
+	}
+
+	render() {
+		console.log("hello!");
+	}
+
+	// We dont need a form.
+	render() {
+		return (
+			<Mutation mutation={createProject}>
+			{(createProject, { data }) => (
+					  <Button circular icon='plus' className="h2.5 w2.5" onClick={() => createProject({ variables: { owners, title } })} />
+			)}
+		  </Mutation>
+		)
+	}
+
+	render() {
+		return (
+		<div>
+			<Button circular icon='plus' className="h2 w2" onClick={() => this.toggleEdit()} />
+			{this.state.editing && 
+				<Form onSubmit={() => console.log('memes')}>
+					<Input placeholder='Project title' />
+				</Form>
+			}
+		</div>
+		)
+	}
+
+
+}
+
+*/
+
+/*
+const MenuAddProjectButton = () => {
+
+	let editing = false
+
+	return (
+		<div>
+			<Button circular icon='plus' className="h2 w2" onClick={() => { this.editing = true }} />
+			{
+				editing && <Input placeholder='Search...' />
+			}
+		</div>
+	)
+}
+*/
+
 class Dashboard extends React.Component {
 	render() {
 		return (
 			<div>
-                Dashboard
+        Dashboard
+				<CreateProject title='hello' owners={[]} />
 			</div>
 		)
 	}
-
 }
+
 export default withRouter(Dashboard)

src/App/components/sidebar.js

@@ -1,9 +1,34 @@
 import React from 'react'
-import { Sidebar, Segment, Menu, Icon, Divider } from 'semantic-ui-react'
+import { Button, Sidebar, Segment, Menu, Icon, Divider, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
+import { createProject } from '../../graphql/mutations'
 import  { AnvilSidebar } from '../../utils/anvil'
 
+
+// Add button that sends "createProject" mutation request on click
+const MenuAddProjectButton = ({createProject}) => {
+
+	const handleRef = (c) => {
+		this.inputRef = c
+	}
+
+	const focus = () => {
+		this.inputRef.focus()
+	}
+
+	let editing = false
+
+	return (
+		<div>
+			<Button circular icon='plus' className="h2.5 w2.5" onClick={() => { this.editing = true }} />
+			{
+				editing && 
+				<Input ref={this.handleRef} placeholder='Search...' />
+			}
+		</div>
+	)
+}
 class Sidenav extends React.Component {
 	render() {
 		return (
@@ -37,6 +62,8 @@ const MenuProjects = ({ projects }) => {
 			<Menu.Item name={project.title} position='left'>
 				<p>{project.title}<Icon name='angle right' inverted={true} size='small' /></p>
 			</Menu.Item>
+			{/*<MenuAddProjectButton createProject={() => console.log('memes')}/>*/}
+			<MenuAddProjectButton/>
 			</Link>
 		)
 	})

src/graphql/mutations.js

@@ -18,4 +18,18 @@ const deleteTask = gql`
 	}
 `
 
-export { updateTask, deleteTask }
+// createProject(owners: [ID],title: String!): Project
+const createProject = gql`
+    mutation createProject($title: String!) {
+		createProject(title: $title) {
+			id
+
+			owners {
+				id
+			}
+			title
+		}
+	}
+`
+
+export { updateTask, deleteTask, createProject }