From 9a8ae76d38a82f769b4c02d06622230654e24afc Mon Sep 17 00:00:00 2001 From: Adina Johnson Date: Tue, 30 Oct 2018 14:28:04 -0400 Subject: [PATCH 1/8] journal skeleton component --- src/components/Journal/Journal.css | 3 +++ src/components/Journal/View.js | 10 ++++++++++ src/components/Journal/index.js | 12 ++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 src/components/Journal/Journal.css create mode 100644 src/components/Journal/View.js create mode 100644 src/components/Journal/index.js diff --git a/src/components/Journal/Journal.css b/src/components/Journal/Journal.css new file mode 100644 index 00000000..1fef6cca --- /dev/null +++ b/src/components/Journal/Journal.css @@ -0,0 +1,3 @@ +#displayContainer { + +} \ No newline at end of file diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js new file mode 100644 index 00000000..907234d5 --- /dev/null +++ b/src/components/Journal/View.js @@ -0,0 +1,10 @@ +import React from 'react'; + + +const View = ({}) => ( +
+ +
+); + +export default View; \ No newline at end of file diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js new file mode 100644 index 00000000..937b5847 --- /dev/null +++ b/src/components/Journal/index.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react'; +import View from './View'; + +class Journal extends Component { + + render() { + return ; + } + +} + +export default Journal; \ No newline at end of file From 3d7593fab35b6af4e44013fd38987cff1bf4d57d Mon Sep 17 00:00:00 2001 From: Adina Johnson Date: Wed, 31 Oct 2018 17:45:38 -0400 Subject: [PATCH 2/8] add dylan's ex skeleton code --- src/components/Journal/View.js | 4 ++-- src/components/Journal/index.js | 30 ++++++++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js index 907234d5..98a2ef68 100644 --- a/src/components/Journal/View.js +++ b/src/components/Journal/View.js @@ -2,8 +2,8 @@ import React from 'react'; const View = ({}) => ( -
- +
+ {title}
); diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js index 937b5847..613d02fb 100644 --- a/src/components/Journal/index.js +++ b/src/components/Journal/index.js @@ -1,10 +1,36 @@ import React, { Component } from 'react'; import View from './View'; -class Journal extends Component { +export default class Journal extends Component { + + constructor(props) { + super(props); + + this.state = { + data: [] + } + + this.mytitle = "tomatoes, apples, big difference."; // to initialize + } + + componentDidMount() { + // it's where you want to subscribe to whatever data you need in the model + // this.model.subscribe() THIS PROTOCOL IS PROBABLY GOING TO CHANGE + } + componentWillUnmount() { + // this is where you should '.unsubscribe(this)' from the model. + } + + onChange(updatedData) { + this.setState((state) => { + // how do you want to change this state based on the old state? + // 'state' is the old state, and you return the new state. + return state.data = updatedData; + }); + } render() { - return ; + return ; } } From d98fd8df9d6ae9679a503c691d1e672ed3c11869 Mon Sep 17 00:00:00 2001 From: ddibened <36250224+ddibened@users.noreply.github.com> Date: Sat, 3 Nov 2018 19:40:00 -0500 Subject: [PATCH 3/8] Change README.md to README.txt I couldn't figure out how to make the tree actually indent right, so I switched it to a .txt --- README.md => README.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README.md => README.txt (100%) diff --git a/README.md b/README.txt similarity index 100% rename from README.md rename to README.txt From 7545a4d3dc63dc255ec88a51f99b17b5a735e572 Mon Sep 17 00:00:00 2001 From: ddibened <36250224+ddibened@users.noreply.github.com> Date: Sat, 3 Nov 2018 19:43:42 -0500 Subject: [PATCH 4/8] Change README back because I figured it out got it --- README.txt => README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) rename README.txt => README.md (90%) diff --git a/README.txt b/README.md similarity index 90% rename from README.txt rename to README.md index d35121b7..1387e6cc 100644 --- a/README.txt +++ b/README.md @@ -1,5 +1,7 @@ /--------------------------------- THE TREE -----------------------------------/ - + + +```bash THE TREE... (structure of the html elements) (Electron Window) @@ -16,6 +18,7 @@ THE TREE... (structure of the html elements) --> TabDisplay (this is the display for whichever tab has been clicked) - -> (whatever tab gets clicked. Ex. , , etc.) +``` RENDERING FOR DEBUGGING: @@ -43,8 +46,8 @@ THE TREE... (structure of the html elements) -> 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). - -> 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("", this.state, key), which will be passed as a function into your component (again, through the 'props' argument in the + -> 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("", 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 *** From 4b91f06347da27f9356c53da1aa4a8b7cd96fcf4 Mon Sep 17 00:00:00 2001 From: ddibened <36250224+ddibened@users.noreply.github.com> Date: Sat, 3 Nov 2018 19:46:22 -0500 Subject: [PATCH 5/8] UPDATE README fix spacing --- README.md | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 1387e6cc..75aeac64 100644 --- a/README.md +++ b/README.md @@ -22,14 +22,16 @@ THE TREE... (structure of the html elements) 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 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 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 = { @@ -40,22 +42,29 @@ 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 ('recordFinalState()'), + 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). - -> 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("", 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("", 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? -------------------------------/ From 6de35dd8a58483156d50c1aa3b940b5691532238 Mon Sep 17 00:00:00 2001 From: ddibened <36250224+ddibened@users.noreply.github.com> Date: Sun, 4 Nov 2018 09:57:29 -0600 Subject: [PATCH 6/8] Update README.md, wrong function name Accidentally said name was 'recordFinalState()', but it is 'registerFinalState'. Maybe it should be 'recordFinalState()' though, hmm. --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 75aeac64..964a0938 100644 --- a/README.md +++ b/README.md @@ -43,12 +43,13 @@ 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()'), + 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). + 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'. From 8db42e9b3128ad2ec1d6e7ace95ff4a765645e4b Mon Sep 17 00:00:00 2001 From: Adina Johnson Date: Sun, 4 Nov 2018 19:15:11 -0500 Subject: [PATCH 7/8] figured out how to do some basic form submission --- src/components/Journal/View.js | 18 ++++++++++++---- src/components/Journal/index.js | 37 ++++++++++++++++++--------------- 2 files changed, 34 insertions(+), 21 deletions(-) diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js index 98a2ef68..369a0260 100644 --- a/src/components/Journal/View.js +++ b/src/components/Journal/View.js @@ -1,10 +1,20 @@ import React from 'react'; -const View = ({}) => ( -
- {title} -
+ +const View = ({value, entries, handleSubmit, handleChange}) => ( +
+
+