Journal

README.md

@@ -1,5 +1,7 @@
 /--------------------------------- THE TREE -----------------------------------/
-
+
+
+```bash 
 THE TREE... (structure of the html elements)
 
 (Electron Window)
@@ -16,17 +18,20 @@ THE TREE... (structure of the html elements)
                         --> TabDisplay (this is the display for whichever tab has been clicked)
                                 -
                                 -> (whatever tab gets clicked.  Ex. <Calendar />, <Journal />, etc.)
+```
 
 
     RENDERING FOR DEBUGGING:
-        To render your component for debuggging/testing (see ExTab for an example component) you can go into TabDisplay (the component
-    and replace <ExTab /> with your component (and pass it any dummy data you will need). 
+        To render your component for debuggging/testing (see ExTab for an example component) you can go into TabDisplay (the
+        componend and replace <ExTab /> with your component (and pass it any dummy data you will need). 
 
 /---------------------------------- MODEL ------------------------------------/
 
     Model: 
-            The Model manages the interactions between components (mostly tabs) and all the data for the app (list of all tasks ('taskList'
-        list of all task titles, paired with their 'key' ('titlesKeyPairs')), and the most recently clicked task ('currentTask')).  It handles updates to the data (add, edit, remove) in response to actions (clicks, form entries, etc.) that occur from anywhere in the app.
+            The Model manages the interactions between components (mostly tabs) and all the data for the app (list of all
+         tasks ('taskList' list of all task titles, paired with their 'key' ('titlesKeyPairs')), and the most recently clicked
+         task ('currentTask')).  It handles updates to the data (add, edit, remove) in response to actions (clicks, form
+         entries, etc.) that occur from anywhere in the app.
 
             What I think 'tasks' are: 
                 task = {
@@ -37,22 +42,30 @@ THE TREE... (structure of the html elements)
                 }
 
             Components and the model:
-                Basically, I don't think they should interact directly with the model, I think it is easier to test and manage if
-            the components (tabs) get passed the single function that they need from the Model ('recordFinalState()'), rather than a reference to the entire thing.
+                Basically, I don't think they should interact directly with the model, I think it is easier to test and manage
+                if the components (tabs) get passed the single function that they need from the Model ('registerFinalState()'),
+                rather than a reference to the entire thing.
 
-                -> The TabDisplay component (who's role is rendering tabs based on tab clicks) that renders your component will pass
-            in all the data from the currently selected task that has to do with your component, along with that task's 'key' property (a unique numeric identifier).  
+                -> The TabDisplay component (who's role is rendering tabs based on tab clicks) that renders your component
+             will pass in all the data from the currently selected task that has to do with your component, along with that
+             task's 'key' property (a unique numeric identifier), and a reference to the Model's 'registerFinalState()'
+             function.  
 
-                -> I think you should handle actions locally, meaning if a user wants to edit a journal entry, then record those changes in
-            your local copy of the Journal info for the currently selected task in your component's 'state'.  Then in your component's 'componentWillUnmount()' method, pass the final version of that state, with all of its accumulated changes (or no changes if nothing changed) back to the Model, and it will update the appropriate task (via the Model's recordFinalState("<component's name>", this.state, key), which will be passed as a function into your component (again, through the 'props' argument in the 
-            constructor)).  (the functional version of the this.setState() method will come in handy, as if you use it, React will automatically re-render your component with the appropriately updated state).
+                -> I think you should handle actions locally, meaning if a user wants to edit a journal entry, then record
+             those changes in your local copy of the Journal info for the currently selected task in your component's 'state'.
+             Then in your component's 'componentWillUnmount()' method, pass the final version of that state, with all of its
+             accumulated changes (or no changes if nothing changed) back to the Model, and it will update the appropriate task
+             (via the Model's recordFinalState("<component's name>", this.state, key), which will be passed as a function into
+             your component (again, through the 'props' argument in the constructor)).  (the functional version of the
+             this.setState() method will come in handy, as if you use it, React will automatically re-render your component
+             with the appropriately updated state).
 
                 *** I'll update ExTab to try and illustrate what I mean ***
 
                 *** if you think this is bonkers, slack me, I am happy to make changes to try and make it easier :) ***
 
-                *** For now, just pretend that you have access to all of the data from the currentTask that has to do with your individual
-            component, passed in through the 'props' argument in the constructor.  ***
+                *** For now, just pretend that you have access to all of the data from the currentTask that has to do with
+                your individual component, passed in through the 'props' argument in the constructor.  ***
 
 /------------------------------- OTHER STUFF? -------------------------------/
 

src/components/Journal/Journal.css

@@ -0,0 +1,3 @@
+#displayContainer {
+
+}

src/components/Journal/View.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+
+const View = ({value, entries, handleSubmit, handleChange}) => (
+	<div>
+		<form onSubmit={handleSubmit}>
+	        <label>
+	          Essay:
+	          <textarea value={value} onChange={handleChange} />
+	        </label>
+	        <div onClick={handleSubmit}> submit</div>
+	      </form>
+    	<div>
+	      {entries.map((txt, index) => <p key={index}>{txt}</p>)}
+	   	</div>
+     </div>
+);
+
+export default View;

src/components/Journal/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom'
+import View from './View';
+
+export default class Journal extends Component {
+
+	constructor(props) {
+        super(props);
+
+        this.state = {
+            value: 'enter ur entry',
+            entries: ["this is my first entry", "this is a second entry", "i also wrote this lol"]
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+    }
+
+    handleChange(event) {
+        this.setState({value: event.target.value});
+    }
+
+    handleSubmit(event) { 
+        const itemToAdd = this.state.value;
+        const entries = this.state.entries;
+        this.setState({
+            value: "enter ur entryyyy",
+            entries: entries.concat(itemToAdd)
+        });
+        console.log(entries.concat(itemToAdd));
+
+      }
+
+    componentWillUnmount() {
+        // this is where you record your final state to the model
+        this.recordFinalState("Journal", this.state);
+        // this is commented out because I'm not passing in the register function yet :)
+    }
+
+    render() {
+        console.log("rendering");
+        console.log(this.state);
+        return <View value={this.state.value} entries={this.state.entries} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
+    }
+
+}
+