From f15aec1e708e6d359c33c71bee81cbd855e8e09d Mon Sep 17 00:00:00 2001 From: Eddie Date: Thu, 24 Aug 2017 15:59:23 -0700 Subject: [PATCH 01/12] Created file scaffolding --- lab-eddie/.gitignore | 136 ++++++++++++++++++++++++++++++++++ lab-eddie/package.json | 29 ++++++++ lab-eddie/src/index.html | 0 lab-eddie/src/main.js | 0 lab-eddie/src/style/main.sass | 0 lab-eddie/webpack.config.js | 0 6 files changed, 165 insertions(+) create mode 100644 lab-eddie/.gitignore create mode 100644 lab-eddie/package.json create mode 100644 lab-eddie/src/index.html create mode 100644 lab-eddie/src/main.js create mode 100644 lab-eddie/src/style/main.sass create mode 100644 lab-eddie/webpack.config.js diff --git a/lab-eddie/.gitignore b/lab-eddie/.gitignore new file mode 100644 index 0000000..345130c --- /dev/null +++ b/lab-eddie/.gitignore @@ -0,0 +1,136 @@ +# Created by https://www.gitignore.io/api/osx,vim,node,macos,windows + +### macOS ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + +### OSX ### + +# Icon must end with two \r + +# Thumbnails + +# Files that might appear in the root of a volume + +# Directories potentially created on remote AFP share + +### Vim ### +# swap +[._]*.s[a-v][a-z] +[._]*.sw[a-p] +[._]s[a-v][a-z] +[._]sw[a-p] +# session +Session.vim +# temporary +.netrwhist +*~ +# auto-generated tag files +tags + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# End of https://www.gitignore.io/api/osx,vim,node,macos,windows diff --git a/lab-eddie/package.json b/lab-eddie/package.json new file mode 100644 index 0000000..0549212 --- /dev/null +++ b/lab-eddie/package.json @@ -0,0 +1,29 @@ +{ + "name": "lab-eddie", + "version": "1.0.0", + "description": "", + "main": "webpack.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.5", + "extract-text-webpack-plugin": "^3.0.0", + "html-webpack-plugin": "^2.30.1", + "node-sass": "^4.5.3", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "react-router-dom": "^4.2.0", + "sass-loader": "^6.0.6", + "uuid": "^3.1.0", + "webpack": "^3.5.5", + "webpack-dev-server": "^2.7.1" + } +} diff --git a/lab-eddie/src/index.html b/lab-eddie/src/index.html new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/style/main.sass b/lab-eddie/src/style/main.sass new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/webpack.config.js b/lab-eddie/webpack.config.js new file mode 100644 index 0000000..e69de29 From 20edac1887d7f8b819185f961ee05c94fec47ee4 Mon Sep 17 00:00:00 2001 From: Eddie Date: Thu, 24 Aug 2017 21:56:48 -0700 Subject: [PATCH 02/12] Added more to the NoteForm --- .../src/components/NoteCat/_NoteCat.scss | 0 lab-eddie/src/components/NoteCat/index.js | 0 .../src/components/NoteForm/_NoteForm.scss | 0 lab-eddie/src/components/NoteForm/index.js | 0 .../src/components/NoteList/_NoteList.scss | 0 lab-eddie/src/components/NoteList/index.js | 21 ++++++++++++++ .../src/components/NotePad/_NotePad.scss | 0 lab-eddie/src/components/NotePad/index.js | 19 +++++++++++++ lab-eddie/src/index.html | 10 +++++++ lab-eddie/src/main.js | 28 +++++++++++++++++++ 10 files changed, 78 insertions(+) create mode 100644 lab-eddie/src/components/NoteCat/_NoteCat.scss create mode 100644 lab-eddie/src/components/NoteCat/index.js create mode 100644 lab-eddie/src/components/NoteForm/_NoteForm.scss create mode 100644 lab-eddie/src/components/NoteForm/index.js create mode 100644 lab-eddie/src/components/NoteList/_NoteList.scss create mode 100644 lab-eddie/src/components/NoteList/index.js create mode 100644 lab-eddie/src/components/NotePad/_NotePad.scss create mode 100644 lab-eddie/src/components/NotePad/index.js diff --git a/lab-eddie/src/components/NoteCat/_NoteCat.scss b/lab-eddie/src/components/NoteCat/_NoteCat.scss new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteCat/index.js b/lab-eddie/src/components/NoteCat/index.js new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteForm/_NoteForm.scss b/lab-eddie/src/components/NoteForm/_NoteForm.scss new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteForm/index.js b/lab-eddie/src/components/NoteForm/index.js new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteList/_NoteList.scss b/lab-eddie/src/components/NoteList/_NoteList.scss new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteList/index.js b/lab-eddie/src/components/NoteList/index.js new file mode 100644 index 0000000..36f2b10 --- /dev/null +++ b/lab-eddie/src/components/NoteList/index.js @@ -0,0 +1,21 @@ +import React from 'react'; + +class NoteList extends React.Component { + constructor(props) { + super(props); + } + render() { + return ( + +

{'NoteList'}

+
    +
  • +

    {'This is where the notes will go :D'}

    +
    • +
+ + ) + } +} + +export default NoteList; diff --git a/lab-eddie/src/components/NotePad/_NotePad.scss b/lab-eddie/src/components/NotePad/_NotePad.scss new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NotePad/index.js b/lab-eddie/src/components/NotePad/index.js new file mode 100644 index 0000000..5cb3667 --- /dev/null +++ b/lab-eddie/src/components/NotePad/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import NoteList from '../NoteList' + +class NotePad extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + +

{'NotePad Component'}

+ + + ) + } +} + +export default NotePad; diff --git a/lab-eddie/src/index.html b/lab-eddie/src/index.html index e69de29..9069766 100644 --- a/lab-eddie/src/index.html +++ b/lab-eddie/src/index.html @@ -0,0 +1,10 @@ + + + + + + + +
+ + diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js index e69de29..c394e3d 100644 --- a/lab-eddie/src/main.js +++ b/lab-eddie/src/main.js @@ -0,0 +1,28 @@ +import React from 'react'; +import ReactDom from 'react-dom'; +import NotePad from './components/NotePad' + +class App extends React.Component { + constructor(props) { + super(props); + this.state = {} + this.appState = this.appState.bind(this); + } + + appState() { + return { + state: this.state, + setState: this.setState.bind(this) + } + } + render() { + return ( +
+

{'Hello'}

+ +
+ ) + } +} + +ReactDom.render(, document.getElementById('root')) From ab941f7b007768a9433bee8d135a406a12a004ff Mon Sep 17 00:00:00 2001 From: Eddie Date: Thu, 24 Aug 2017 23:13:12 -0700 Subject: [PATCH 03/12] Added note form and category creater with a dropdown menu to select which category the note gets added to --- lab-eddie/src/components/NoteCat/index.js | 44 +++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/lab-eddie/src/components/NoteCat/index.js b/lab-eddie/src/components/NoteCat/index.js index e69de29..c7f8812 100644 --- a/lab-eddie/src/components/NoteCat/index.js +++ b/lab-eddie/src/components/NoteCat/index.js @@ -0,0 +1,44 @@ +import React from 'react'; + +class NoteCat extends React.Component { + constructor(props) { + super(props); + this.state ={ + category: '' + } + this.onChange = this.onChange.bind(this); + this.addCat = this.addCat.bind(this); + } + + onChange(e) { + this.setState({ + [e.target.name]: e.target.value + }) + } + + addCat(e) { + e.preventDefault(); + let appState = this.props.appState() + let tempState = appState.state; + if(!tempState.lists[this.state.category]) tempState.lists[this.state.category] = []; + appState.setState(tempState); + } + + render() { + return ( +
+ + +
+ ) + } +} + +export default NoteCat; From 5a25eac64e63dd2d9cbe6d17c7be7b9312cce1d3 Mon Sep 17 00:00:00 2001 From: Eddie Date: Thu, 24 Aug 2017 23:27:00 -0700 Subject: [PATCH 04/12] Added delete category functionality --- lab-eddie/src/components/Modal/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 lab-eddie/src/components/Modal/index.js diff --git a/lab-eddie/src/components/Modal/index.js b/lab-eddie/src/components/Modal/index.js new file mode 100644 index 0000000..5939c3a --- /dev/null +++ b/lab-eddie/src/components/Modal/index.js @@ -0,0 +1,17 @@ +import React from 'react'; + +class Modal extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
  • + +
    • + ) + } +} + +export default Modal; From 9fb2b6f4d1b569cf3ebe5f69ae47c1845531f5f8 Mon Sep 17 00:00:00 2001 From: Eddie Date: Thu, 24 Aug 2017 23:27:25 -0700 Subject: [PATCH 05/12] Added delete category functionality --- lab-eddie/src/components/NoteForm/index.js | 86 +++++++++++++++++++ lab-eddie/src/components/NoteList/index.js | 9 +- lab-eddie/src/components/NotePad/index.js | 21 ++++- .../components/NoteUpdateForm/_NoteForm.scss | 0 .../src/components/NoteUpdateForm/index.js | 0 lab-eddie/src/main.js | 21 ++++- 6 files changed, 130 insertions(+), 7 deletions(-) create mode 100644 lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss create mode 100644 lab-eddie/src/components/NoteUpdateForm/index.js diff --git a/lab-eddie/src/components/NoteForm/index.js b/lab-eddie/src/components/NoteForm/index.js index e69de29..dcd5eda 100644 --- a/lab-eddie/src/components/NoteForm/index.js +++ b/lab-eddie/src/components/NoteForm/index.js @@ -0,0 +1,86 @@ +import React from 'react'; +import uuid from 'uuid/v1' + +class NoteForm extends React.Component { + constructor(props) { + super(props); + let defaultCat = Object.keys(this.props.appState().state.lists)[0]; + this.state = { + title: '', + content: '', + category: defaultCat, + error: false + } + + this.onChange = this.onChange.bind(this); + this.addNoteToCat = this.addNoteToCat.bind(this); + this.compileNote = this.compileNote.bind(this); + } + + addNoteToCat(e) { + e.preventDefault(); + if(!this.state.category) return this.setState({ + error: true + }); + + this.setState({ + error: false + }); + + let newNote = this.compileNote(); + let appState = this.props.appState().state; + console.log(appState) + appState.lists[newNote.category].push(newNote); + this.props.appState().setState(appState); + } + + compileNote() { + let newNote = this.state; + delete newNote.error; + newNote.id = uuid(); + return newNote; + } + + onChange(e) { + this.setState({ + [e.target.name] : e.target.value + }); + } + + render() { + + let options = Object.keys(this.props.appState().state.lists); + let formError = this.state.error ? 'note-form-error' : '' + + return( +
    + + + + +
    + ) + } +} + +export default NoteForm; diff --git a/lab-eddie/src/components/NoteList/index.js b/lab-eddie/src/components/NoteList/index.js index 36f2b10..816ad3e 100644 --- a/lab-eddie/src/components/NoteList/index.js +++ b/lab-eddie/src/components/NoteList/index.js @@ -7,11 +7,12 @@ class NoteList extends React.Component { render() { return ( -

    {'NoteList'}

    + +

    {this.props.category}

      -
    • -

      {'This is where the notes will go :D'}

      -
      • +
    ) diff --git a/lab-eddie/src/components/NotePad/index.js b/lab-eddie/src/components/NotePad/index.js index 5cb3667..827437a 100644 --- a/lab-eddie/src/components/NotePad/index.js +++ b/lab-eddie/src/components/NotePad/index.js @@ -4,13 +4,32 @@ import NoteList from '../NoteList' class NotePad extends React.Component { constructor(props) { super(props); + + this.compileAllLists = this.compileAllLists.bind(this) + } + + compileAllLists(cat, notes, ind) { + return( + + ) } render() { + let appState = this.props.appState().state; + let allCategories = Object.keys(appState.lists); + return (

    {'NotePad Component'}

    - + {allCategories.map((cat, ind) => { + return this.compileAllLists(cat, appState.lists[cat], ind) + })}     ) } diff --git a/lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss b/lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/components/NoteUpdateForm/index.js b/lab-eddie/src/components/NoteUpdateForm/index.js new file mode 100644 index 0000000..e69de29 diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js index c394e3d..744bdd6 100644 --- a/lab-eddie/src/main.js +++ b/lab-eddie/src/main.js @@ -1,12 +1,21 @@ import React from 'react'; import ReactDom from 'react-dom'; import NotePad from './components/NotePad' +import NoteForm from './components/NoteForm' +import NoteCat from './components/NoteCat' class App extends React.Component { constructor(props) { super(props); - this.state = {} + this.state = { + lists: {} + } this.appState = this.appState.bind(this); + this.removeCat = this.removeCat.bind(this); + } + + componentDidUpdate() { + console.log('__STATE__', this.state); } appState() { @@ -15,11 +24,19 @@ class App extends React.Component { setState: this.setState.bind(this) } } + + removeCat(category) { + delete this.state.lists[category]; + this.setState(this.state); + } + render() { return (

    {'Hello'}

    - + + +
    ) } From 05e090c14e9ff3735a66c3447f1b75266dcf5639 Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 13:32:05 -0700 Subject: [PATCH 06/12] Added a bunch of stuff and I forgot to commit. Please forgive my sins --- .../src/components/NoteModal/_NoteModal.scss | 6 ++ lab-eddie/src/components/NoteModal/index.js | 61 +++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 lab-eddie/src/components/NoteModal/_NoteModal.scss create mode 100644 lab-eddie/src/components/NoteModal/index.js diff --git a/lab-eddie/src/components/NoteModal/_NoteModal.scss b/lab-eddie/src/components/NoteModal/_NoteModal.scss new file mode 100644 index 0000000..87762c6 --- /dev/null +++ b/lab-eddie/src/components/NoteModal/_NoteModal.scss @@ -0,0 +1,6 @@ +.note { + background: white; + height: 15vh; + width: 70vw; + border-radius: 40px; +} diff --git a/lab-eddie/src/components/NoteModal/index.js b/lab-eddie/src/components/NoteModal/index.js new file mode 100644 index 0000000..08748e4 --- /dev/null +++ b/lab-eddie/src/components/NoteModal/index.js @@ -0,0 +1,61 @@ +import React from 'react'; +import NoteBody from '../NoteBody'; +import NoteUpdateForm from '../NoteUpdateForm'; +require('./_NoteModal.scss'); + +class NoteModal extends React.Component { + constructor(props) { + super(props); + this.state = { + updating: false + } + this.update = this.update.bind(this); + this.cancel = this.cancel.bind(this); + } + + update() { + this.setState({ + updating: true + }) + } + cancel(e) { + e.preventDefault(); + this.setState({ + updating: false + }) + } + componentDidUpdate() { + console.log('__STATE__', this.state); + } + + switchToUpdate() { + let appState = this.props.appState; + let note = this.props.note; + let ind = this.props.ind; + return (!this.state.updating ? + : + + ) + } + + render() { + return ( +
  • + {this.switchToUpdate()} +
    • + ) + } +} + +export default NoteModal; From f3f3e76feb5ee837d270ae6e9517c6f96aade714 Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 13:32:28 -0700 Subject: [PATCH 07/12] Added a bunch of stuff and I forgot to commit. Please forgive my sins --- lab-eddie/src/components/Modal/index.js | 17 ------ .../src/components/NoteBody/_NoteBody.scss | 4 ++ lab-eddie/src/components/NoteBody/index.js | 32 ++++++++++ lab-eddie/src/components/NoteForm/index.js | 8 +-- .../src/components/NoteList/_NoteList.scss | 53 +++++++++++++++++ lab-eddie/src/components/NoteList/index.js | 18 +++++- lab-eddie/src/components/NotePad/index.js | 5 +- .../src/components/NoteUpdateForm/index.js | 59 +++++++++++++++++++ lab-eddie/src/index.html | 2 +- lab-eddie/src/main.js | 13 ++-- lab-eddie/src/style/main.sass | 0 lab-eddie/src/style/main.scss | 36 +++++++++++ 12 files changed, 213 insertions(+), 34 deletions(-) delete mode 100644 lab-eddie/src/components/Modal/index.js create mode 100644 lab-eddie/src/components/NoteBody/_NoteBody.scss create mode 100644 lab-eddie/src/components/NoteBody/index.js delete mode 100644 lab-eddie/src/style/main.sass create mode 100644 lab-eddie/src/style/main.scss diff --git a/lab-eddie/src/components/Modal/index.js b/lab-eddie/src/components/Modal/index.js deleted file mode 100644 index 5939c3a..0000000 --- a/lab-eddie/src/components/Modal/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -class Modal extends React.Component { - constructor(props) { - super(props); - } - - render() { - return ( -
  • - -
    • - ) - } -} - -export default Modal; diff --git a/lab-eddie/src/components/NoteBody/_NoteBody.scss b/lab-eddie/src/components/NoteBody/_NoteBody.scss new file mode 100644 index 0000000..18c1b83 --- /dev/null +++ b/lab-eddie/src/components/NoteBody/_NoteBody.scss @@ -0,0 +1,4 @@ +.note-body { + float: left; + background: green; +} diff --git a/lab-eddie/src/components/NoteBody/index.js b/lab-eddie/src/components/NoteBody/index.js new file mode 100644 index 0000000..a56e597 --- /dev/null +++ b/lab-eddie/src/components/NoteBody/index.js @@ -0,0 +1,32 @@ +import React from 'react'; +require('./_NoteBody.scss'); + +class NoteBody extends React.Component { + constructor(props) { + super(props); + + this.deleteNote.bind(this) + } + + deleteNote(cat, ind) { + let appState = this.props.appState(); + appState.state.lists[cat].splice(ind, 1); + return appState.setState(appState.state); + } + + render() { + let note = this.props.note; + return ( + +

    {note.title}

    +

    {note.content}

    + +     + ) + } +} + +export default NoteBody; diff --git a/lab-eddie/src/components/NoteForm/index.js b/lab-eddie/src/components/NoteForm/index.js index dcd5eda..1f9ab41 100644 --- a/lab-eddie/src/components/NoteForm/index.js +++ b/lab-eddie/src/components/NoteForm/index.js @@ -4,14 +4,12 @@ import uuid from 'uuid/v1' class NoteForm extends React.Component { constructor(props) { super(props); - let defaultCat = Object.keys(this.props.appState().state.lists)[0]; this.state = { title: '', content: '', - category: defaultCat, + category: undefined, error: false } - this.onChange = this.onChange.bind(this); this.addNoteToCat = this.addNoteToCat.bind(this); this.compileNote = this.compileNote.bind(this); @@ -22,14 +20,12 @@ class NoteForm extends React.Component { if(!this.state.category) return this.setState({ error: true }); - this.setState({ error: false }); let newNote = this.compileNote(); let appState = this.props.appState().state; - console.log(appState) appState.lists[newNote.category].push(newNote); this.props.appState().setState(appState); } @@ -48,7 +44,6 @@ class NoteForm extends React.Component { } render() { - let options = Object.keys(this.props.appState().state.lists); let formError = this.state.error ? 'note-form-error' : '' @@ -72,6 +67,7 @@ class NoteForm extends React.Component { /> + + + + + + ) + } +} + +export default updateNote; diff --git a/lab-eddie/src/index.html b/lab-eddie/src/index.html index 9069766..0a89cdb 100644 --- a/lab-eddie/src/index.html +++ b/lab-eddie/src/index.html @@ -2,7 +2,7 @@ - + My Bad Ass Note Pad
    diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js index 744bdd6..6f13957 100644 --- a/lab-eddie/src/main.js +++ b/lab-eddie/src/main.js @@ -3,6 +3,7 @@ import ReactDom from 'react-dom'; import NotePad from './components/NotePad' import NoteForm from './components/NoteForm' import NoteCat from './components/NoteCat' +require('./style/main.scss'); class App extends React.Component { constructor(props) { @@ -32,12 +33,16 @@ class App extends React.Component { render() { return ( -
    -

    {'Hello'}

    + +

    {'Eddie\'s Awesome Note Pad'}

    - -
    +

    {'NotePad Component'}

    + + ) } } diff --git a/lab-eddie/src/style/main.sass b/lab-eddie/src/style/main.sass deleted file mode 100644 index e69de29..0000000 diff --git a/lab-eddie/src/style/main.scss b/lab-eddie/src/style/main.scss new file mode 100644 index 0000000..c4b7e8c --- /dev/null +++ b/lab-eddie/src/style/main.scss @@ -0,0 +1,36 @@ +body { + background: pink; +} + +li { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul { + margin: 0; + padding: 0; +} + +button { + border: none; +} + +#root { + margin: 0; + padding: 0; + width: 90vw; + height: 90vh; + background: white; + border-radius: 40px; + float: left; + margin-left: 5vw; + margin-top: 5vh; + overflow-x: scroll; +} + +#root>span { + float: left; + margin-left: 5vw; +} From a257078c07e5595e5009c552a7865e147a8e61b0 Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 13:48:05 -0700 Subject: [PATCH 08/12] Added styling --- .../src/components/NoteBody/_NoteBody.scss | 23 ++++++++++++++++++- .../components/NoteUpdateForm/_NoteForm.scss | 0 .../NoteUpdateForm/_NoteUpdateForm.scss | 21 +++++++++++++++++ .../src/components/NoteUpdateForm/index.js | 3 ++- 4 files changed, 45 insertions(+), 2 deletions(-) delete mode 100644 lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss create mode 100644 lab-eddie/src/components/NoteUpdateForm/_NoteUpdateForm.scss diff --git a/lab-eddie/src/components/NoteBody/_NoteBody.scss b/lab-eddie/src/components/NoteBody/_NoteBody.scss index 18c1b83..2929982 100644 --- a/lab-eddie/src/components/NoteBody/_NoteBody.scss +++ b/lab-eddie/src/components/NoteBody/_NoteBody.scss @@ -1,4 +1,25 @@ .note-body { + width: 100%; + height: 15vh; float: left; - background: green; +} + +.note-body { + h4, p { + margin: 0; + padding: 0; + float: left; + margin-left: 5%; + margin-right: 15%; + width: 80%; + font-size: 4vh; + height: 5vh; + } + + button { + float: left; + margin-left: 5%; + width: 10%; + border: 40px; + } } diff --git a/lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss b/lab-eddie/src/components/NoteUpdateForm/_NoteForm.scss deleted file mode 100644 index e69de29..0000000 diff --git a/lab-eddie/src/components/NoteUpdateForm/_NoteUpdateForm.scss b/lab-eddie/src/components/NoteUpdateForm/_NoteUpdateForm.scss new file mode 100644 index 0000000..08431be --- /dev/null +++ b/lab-eddie/src/components/NoteUpdateForm/_NoteUpdateForm.scss @@ -0,0 +1,21 @@ +.update-form { + height: 15vh; + width: 100%; +} + +.update-form { + input { + float: left; + margin-left: 5%; + width: 25%; + margin-right: 65%; + height: 4vh; + font-size: 3vh; + margin-top: 1vh; + } + + button { + float: left; + margin-left: 5%; + } +} diff --git a/lab-eddie/src/components/NoteUpdateForm/index.js b/lab-eddie/src/components/NoteUpdateForm/index.js index 4fedc68..641c6a8 100644 --- a/lab-eddie/src/components/NoteUpdateForm/index.js +++ b/lab-eddie/src/components/NoteUpdateForm/index.js @@ -1,4 +1,5 @@ import React from 'react'; +require('./_NoteUpdateForm.scss') class updateNote extends React.Component { constructor(props) { @@ -33,7 +34,7 @@ class updateNote extends React.Component { render() { let cat = this.state.category; return ( -
    + Date: Sat, 26 Aug 2017 13:56:44 -0700 Subject: [PATCH 09/12] Added README file and config files :D --- lab-eddie/.babelrc | 3 +++ lab-eddie/.eslintignore | 5 +++++ lab-eddie/.eslintrc | 21 +++++++++++++++++++++ lab-eddie/README.md | 8 ++++++++ lab-eddie/package.json | 5 +++-- lab-eddie/webpack.config.js | 34 ++++++++++++++++++++++++++++++++++ 6 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 lab-eddie/.babelrc create mode 100644 lab-eddie/.eslintignore create mode 100644 lab-eddie/.eslintrc create mode 100644 lab-eddie/README.md diff --git a/lab-eddie/.babelrc b/lab-eddie/.babelrc new file mode 100644 index 0000000..ad8d1fe --- /dev/null +++ b/lab-eddie/.babelrc @@ -0,0 +1,3 @@ +{ + "presets" : ["es2015", "react"] +} diff --git a/lab-eddie/.eslintignore b/lab-eddie/.eslintignore new file mode 100644 index 0000000..05b1cf3 --- /dev/null +++ b/lab-eddie/.eslintignore @@ -0,0 +1,5 @@ +**/node_modules/* +**/vendor/* +**/*.min.js +**/coverage/* +**/build/* diff --git a/lab-eddie/.eslintrc b/lab-eddie/.eslintrc new file mode 100644 index 0000000..8dc6807 --- /dev/null +++ b/lab-eddie/.eslintrc @@ -0,0 +1,21 @@ +{ + "rules": { + "no-console": "off", + "indent": [ "error", 2 ], + "quotes": [ "error", "single" ], + "semi": ["error", "always"], + "linebreak-style": [ "error", "unix" ] + }, + "env": { + "es6": true, + "node": true, + "mocha": true, + "jasmine": true + }, + "ecmaFeatures": { + "modules": true, + "experimentalObjectRestSpread": true, + "impliedStrict": true + }, + "extends": "eslint:recommended" +} diff --git a/lab-eddie/README.md b/lab-eddie/README.md new file mode 100644 index 0000000..02b50d5 --- /dev/null +++ b/lab-eddie/README.md @@ -0,0 +1,8 @@ +This is my note pad app :D + +I tweaked it a little bit to add some more features :o + +It allows you to create a category to file the notes in. +Whenever you add a category, it gets added to the dropdown selector. When you add a note, it might not show up. That's because there's some animations thrown in there. Hover over the added category and it should show up. If you click the list item, it'll change to an update form. :D + +Thanks for reading diff --git a/lab-eddie/package.json b/lab-eddie/package.json index 0549212..2548b74 100644 --- a/lab-eddie/package.json +++ b/lab-eddie/package.json @@ -4,7 +4,8 @@ "description": "", "main": "webpack.config.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build": "webpack", + "watch": "webpack-dev-server --inline --hot" }, "keywords": [], "author": "", @@ -20,7 +21,7 @@ "node-sass": "^4.5.3", "react": "^15.6.1", "react-dom": "^15.6.1", - "react-router-dom": "^4.2.0", + "react-router-dom": "^4.1.2", "sass-loader": "^6.0.6", "uuid": "^3.1.0", "webpack": "^3.5.5", diff --git a/lab-eddie/webpack.config.js b/lab-eddie/webpack.config.js index e69de29..9ff2af8 100644 --- a/lab-eddie/webpack.config.js +++ b/lab-eddie/webpack.config.js @@ -0,0 +1,34 @@ +'use strict'; + +const HtmlPlugin = require('html-webpack-plugin'); +const ExtractPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + devtool: 'cheap-module-eval-source-map', + devServer: { + historyApiFallback: true + }, + entry: `${__dirname}/src/main.js`, + output: { + path: `${__dirname}/build`, + publicPath: '/', + filename: 'bundle-[hash].js' + }, + plugins: [ + new HtmlPlugin({template: `${__dirname}/src/index.html`}), + new ExtractPlugin('bundle-[hash].css') + ], + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader' + }, + { + test: /\.scss$/, + loader: ExtractPlugin.extract(['css-loader', 'sass-loader']) + } + ] + } +}; From 011213c7777817befdfc75720ee93dbad870fd09 Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 13:57:11 -0700 Subject: [PATCH 10/12] Deleted default README.md file --- README.md | 51 --------------------------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 872470e..0000000 --- a/README.md +++ /dev/null @@ -1,51 +0,0 @@ -![cf](https://i.imgur.com/7v5ASc8.png) 24: Component Composition -====== - -## Submission Instructions -* continue working on the fork you created from lab 23 -* open a **new branch** for today's assignment -* upon completion, create a **new pull request** in github -* submit a link to your PR in canvas - -## Learning Objectives -* students will be able to utilize proper component composition constructs -* students will be able to compose react components through the use of props - -#### Configuration -* `README.md` -* `.babelrc` -* `.gitignore` -* `package.json` -* `webpack.config.js` -* `src/**` -* `src/main.js` -* `src/style` -* `src/style/main.scss` - -## Requirements -#### Feature Tasks -refactor and add the following components: - -###### NoteUpdateForm -* create a `NoteUpdateForm` component that inherits a note through props - * on submit, this should update the App's state with an updated note - -###### Refactor the NoteItem Component -* include the following behavior: - * if the user double clicks on the notes content, it should switch to the edit view -* default view - * display the note content and a delete button - * the delete button should remove the note from the application's state -* edit view - * show the `NoteUpdateForm` and a cancel button - * `onNoteUpdateForm` submit (or click of the cancel button) should switch back to the default view - -###### App Component Tree -your components should be nested in the following layout -``` -App - NoteCreateForm - NoteList - NoteItem - NoteUpdateForm -``` From fac86e805b55cc85521e78ef82717760d8ab23e4 Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 14:10:10 -0700 Subject: [PATCH 11/12] Added lables on the li elements --- lab-eddie/src/components/NoteBody/index.js | 4 ++-- lab-eddie/src/components/NoteList/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lab-eddie/src/components/NoteBody/index.js b/lab-eddie/src/components/NoteBody/index.js index a56e597..8a9d001 100644 --- a/lab-eddie/src/components/NoteBody/index.js +++ b/lab-eddie/src/components/NoteBody/index.js @@ -18,8 +18,8 @@ class NoteBody extends React.Component { let note = this.props.note; return ( -

    {note.title}

    -

    {note.content}

    +

    {`Title: ${note.title}`}

    +

    {`Content: ${note.content}`}

    From f8f473bfdb253e951d5921dee2f079051821f3db Mon Sep 17 00:00:00 2001 From: Eddie Date: Sat, 26 Aug 2017 14:11:03 -0700 Subject: [PATCH 12/12] Removed h3 tag --- lab-eddie/src/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js index 6f13957..bfa1032 100644 --- a/lab-eddie/src/main.js +++ b/lab-eddie/src/main.js @@ -37,7 +37,6 @@ class App extends React.Component {

    {'Eddie\'s Awesome Note Pad'}

    -

    {'NotePad Component'}