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 -``` 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/.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/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 new file mode 100644 index 0000000..2548b74 --- /dev/null +++ b/lab-eddie/package.json @@ -0,0 +1,30 @@ +{ + "name": "lab-eddie", + "version": "1.0.0", + "description": "", + "main": "webpack.config.js", + "scripts": { + "build": "webpack", + "watch": "webpack-dev-server --inline --hot" + }, + "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.1.2", + "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/components/NoteBody/_NoteBody.scss b/lab-eddie/src/components/NoteBody/_NoteBody.scss new file mode 100644 index 0000000..2929982 --- /dev/null +++ b/lab-eddie/src/components/NoteBody/_NoteBody.scss @@ -0,0 +1,25 @@ +.note-body { + width: 100%; + height: 15vh; + float: left; +} + +.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/NoteBody/index.js b/lab-eddie/src/components/NoteBody/index.js new file mode 100644 index 0000000..8a9d001 --- /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 ( + +

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

+

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

+ + + ) + } +} + +export default NoteBody; 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..c7f8812 --- /dev/null +++ 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; 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..1f9ab41 --- /dev/null +++ b/lab-eddie/src/components/NoteForm/index.js @@ -0,0 +1,82 @@ +import React from 'react'; +import uuid from 'uuid/v1' + +class NoteForm extends React.Component { + constructor(props) { + super(props); + this.state = { + title: '', + content: '', + category: undefined, + 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; + 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/_NoteList.scss b/lab-eddie/src/components/NoteList/_NoteList.scss new file mode 100644 index 0000000..c236d37 --- /dev/null +++ b/lab-eddie/src/components/NoteList/_NoteList.scss @@ -0,0 +1,53 @@ +.note-list { + background: pink; + width: 80vw; + height: 10vh; + border-radius: 40px; + margin-top: 2vh; + margin-bottom: 2vh; + transition: 500ms all; +} + +.note-list>* { + float: left; + margin: 0; + padding: 0; +} + +.note-list>h3 { + padding: 0; + font-size: 5vh; + width: 40vw; + margin-left: 5vw; + margin-top: 2.5vh; +} + +.note-list>button { + margin-top: 2.5vh; + width: 10vw; + height: 5vh; + border-radius: 50px; + background: white; +} + +.note-list>ul { + display: block; + width: 80vw; + height: 0; + overflow: scroll; + transition: 500ms all; +} + +.note-list>ul>li { + margin-left: 5vw; + position: relative; + margin-top: 1vh; +} + +.note-list:hover { + height: 50vh; +} + +.note-list:hover>ul{ + height: 39vh; +} diff --git a/lab-eddie/src/components/NoteList/index.js b/lab-eddie/src/components/NoteList/index.js new file mode 100644 index 0000000..897b39d --- /dev/null +++ b/lab-eddie/src/components/NoteList/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import NoteModal from '../NoteModal'; +require('./_NoteList.scss'); + +class NoteList extends React.Component { + constructor(props) { + super(props); + } + render() { + return ( +
  • +

    {`Category: ${this.props.category}`}

    + + +
    • + ) + } +} + +export default NoteList; 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; 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..f48b352 --- /dev/null +++ b/lab-eddie/src/components/NotePad/index.js @@ -0,0 +1,37 @@ +import React from 'react'; +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 ( +
      + {allCategories.map((cat, ind) => { + return this.compileAllLists(cat, appState.lists[cat], ind) + })} +
    + ) + } +} + +export default NotePad; 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 new file mode 100644 index 0000000..641c6a8 --- /dev/null +++ b/lab-eddie/src/components/NoteUpdateForm/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +require('./_NoteUpdateForm.scss') + +class updateNote extends React.Component { + constructor(props) { + super(props); + let note = this.props.note; + this.state = note; + + this.onChange = this.onChange.bind(this); + this.updateForm = this.updateForm.bind(this); + } + + onChange(e) { + this.setState({ + [e.target.name]: e.target.value + }) + } + componentDidUpdate() { + console.log('xxx') + console.log('__STATE__', this.state); + } + + updateForm(e) { + e.preventDefault() + let cat = this.props.note.category; + let ind = this.props.ind; + let appState = this.props.appState(); + appState.state.lists[cat][ind] = this.state; + appState.setState(appState.state); + this.props.renderModal(e); + } + + render() { + let cat = this.state.category; + return ( +
    + + + + +
    + + ) + } +} + +export default updateNote; diff --git a/lab-eddie/src/index.html b/lab-eddie/src/index.html new file mode 100644 index 0000000..0a89cdb --- /dev/null +++ b/lab-eddie/src/index.html @@ -0,0 +1,10 @@ + + + + + My Bad Ass Note Pad + + +
    + + diff --git a/lab-eddie/src/main.js b/lab-eddie/src/main.js new file mode 100644 index 0000000..bfa1032 --- /dev/null +++ b/lab-eddie/src/main.js @@ -0,0 +1,49 @@ +import React from 'react'; +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) { + super(props); + this.state = { + lists: {} + } + this.appState = this.appState.bind(this); + this.removeCat = this.removeCat.bind(this); + } + + componentDidUpdate() { + console.log('__STATE__', this.state); + } + + appState() { + return { + state: this.state, + setState: this.setState.bind(this) + } + } + + removeCat(category) { + delete this.state.lists[category]; + this.setState(this.state); + } + + render() { + return ( + +

    {'Eddie\'s Awesome Note Pad'}

    + + + +     + ) + } +} + +ReactDom.render(, document.getElementById('root')) 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; +} diff --git a/lab-eddie/webpack.config.js b/lab-eddie/webpack.config.js new file mode 100644 index 0000000..9ff2af8 --- /dev/null +++ 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']) + } + ] + } +};