From d10b4a5bfd75d5bfbfc91ecb25cc1f47822eab83 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Wed, 19 Apr 2017 22:57:27 -0500 Subject: [PATCH 01/16] Homework 1 complete --- src/App.css | 26 ++++++++++++ src/App.js | 88 +++++++++++++++++++++++++++++++++++---- yarn.lock | 116 +++++++++++----------------------------------------- 3 files changed, 131 insertions(+), 99 deletions(-) diff --git a/src/App.css b/src/App.css index 15adfdc7..4769003f 100644 --- a/src/App.css +++ b/src/App.css @@ -18,6 +18,32 @@ font-size: large; } +.Main-container { + display: flex; + justify-content: space-around; + width: 100%; + height: 300px; + border: solid 1px; +} + +.Section-content { + width: 300px; + height: 100px; + color: red; +} + +.Footer-container { + width: 100%; + height: 200px; + background-color: grey; +} + +.Footer-text { + padding-top: 60px; + font-size: 70px; + font-weight: 600; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } diff --git a/src/App.js b/src/App.js index 0042c777..5abab526 100644 --- a/src/App.js +++ b/src/App.js @@ -2,16 +2,90 @@ import React from "react"; import logo from "./logo.svg"; import "./App.css"; +function Header() { + return ( +
+ logo +

Welcome to React

+
+ ); +} + +function Intro() { + return ( +

+ To get started, edit src/App.js and save to reload. +

+ ); +} + +function Main() { + return ( +
+ + + +
+ ); +} + +function Section1() { + return ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse v + estibulum nisi nec est iaculis, ut tristique arcu hendrerit. + Cras velit nibh, mollis sit amet odio ut, dapibus convallis nisi. + Donec id egestas ipsum. Duis id egestas justo, ac porta diam. +

+
+ ); +} + +function Section2() { + return ( +
+

+ Suspendisse maximus, odio vel tincidunt viverra, sem dui feugiat mauris, + eu ultricies lorem dui vitae est. Proin ac vehicula velit. + Vestibulum eget diam ullamcorper, consectetur est at, imperdiet turpis. +

+
+ ); +} + +function Section3() { + return ( +
+

+ Duis dictum fringilla nulla et tincidunt. Praesent rutrum ac nisi ut tempor. + Curabitur non velit eget arcu semper suscipit. + Vestibulum scelerisque laoreet metus quis dapibus. + Proin ultricies velit eget nisl elementum sollicitudin sed eget tortor. + Vivamus aliquam placerat ante sed posuere. Sed finibus vestibulum augue id interdum. + Suspendisse potenti. +

+
+ ); +} + +function Footer() { + return ( +
+

+ THE END +

+
+ ); +} + function App() { return (
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

+
+ +
+
); } diff --git a/yarn.lock b/yarn.lock index 137072ec..1066eff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -239,7 +239,7 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" -autoprefixer@6.5.1: +autoprefixer@6.5.1, autoprefixer@^6.3.1: version "6.5.1" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.1.tgz#ae759a5221e709f3da17c2d656230e67c43cbb75" dependencies: @@ -250,17 +250,6 @@ autoprefixer@6.5.1: postcss "^5.2.4" postcss-value-parser "^3.2.3" -autoprefixer@^6.3.1: - version "6.7.2" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.2.tgz#172ab07b998ae9b957530928a59a40be54a45023" - dependencies: - browserslist "^1.7.1" - caniuse-db "^1.0.30000618" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^5.2.11" - postcss-value-parser "^3.2.3" - aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -277,7 +266,7 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0: esutils "^2.0.2" js-tokens "^3.0.0" -babel-core@6.17.0: +babel-core@6.17.0, babel-core@^6.0.0: version "6.17.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.17.0.tgz#6c4576447df479e241e58c807e4bc7da4db7f425" dependencies: @@ -303,30 +292,6 @@ babel-core@6.17.0: slash "^1.0.0" source-map "^0.5.0" -babel-core@^6.0.0: - version "6.22.1" - resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648" - dependencies: - babel-code-frame "^6.22.0" - babel-generator "^6.22.0" - babel-helpers "^6.22.0" - babel-messages "^6.22.0" - babel-register "^6.22.0" - babel-runtime "^6.22.0" - babel-template "^6.22.0" - babel-traverse "^6.22.1" - babel-types "^6.22.0" - babylon "^6.11.0" - convert-source-map "^1.1.0" - debug "^2.1.1" - json5 "^0.5.0" - lodash "^4.2.0" - minimatch "^3.0.2" - path-is-absolute "^1.0.0" - private "^0.1.6" - slash "^1.0.0" - source-map "^0.5.0" - babel-core@^6.11.4, babel-core@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.0.tgz#8f36a0a77f5c155aed6f920b844d23ba56742a02" @@ -369,7 +334,7 @@ babel-eslint@^7.1.1: babel-types "^6.23.0" babylon "^6.16.1" -babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0: +babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56" dependencies: @@ -483,14 +448,7 @@ babel-helper-get-function-arity@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-helper-hoist-variables@^6.22.0: - version "6.22.0" - resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.22.0.tgz#3eacbf731d80705845dd2e9718f600cfb9b4ba72" - dependencies: - babel-runtime "^6.22.0" - babel-types "^6.22.0" - -babel-helper-hoist-variables@^6.24.1: +babel-helper-hoist-variables@^6.22.0, babel-helper-hoist-variables@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76" dependencies: @@ -569,7 +527,7 @@ babel-helper-replace-supers@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-helpers@^6.16.0, babel-helpers@^6.22.0, babel-helpers@^6.23.0: +babel-helpers@^6.16.0, babel-helpers@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.23.0.tgz#4f8f2e092d0b6a8808a4bde79c27f1e2ecf0d992" dependencies: @@ -592,7 +550,7 @@ babel-loader@6.2.5: mkdirp "^0.5.1" object-assign "^4.0.1" -babel-messages@^6.22.0, babel-messages@^6.23.0, babel-messages@^6.8.0: +babel-messages@^6.23.0, babel-messages@^6.8.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" dependencies: @@ -1180,7 +1138,7 @@ babel-preset-react@6.16.0: babel-plugin-transform-react-jsx-self "^6.11.0" babel-plugin-transform-react-jsx-source "^6.3.13" -babel-register@^6.16.0, babel-register@^6.22.0, babel-register@^6.24.0: +babel-register@^6.16.0, babel-register@^6.24.0: version "6.24.0" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.0.tgz#5e89f8463ba9970356d02eb07dabe3308b080cfd" dependencies: @@ -1226,7 +1184,7 @@ babel-template@^6.24.1: babylon "^6.11.0" lodash "^4.2.0" -babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.23.0, babel-traverse@^6.23.1: +babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.23.0, babel-traverse@^6.23.1: version "6.23.1" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48" dependencies: @@ -1240,7 +1198,7 @@ babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-tr invariant "^2.2.0" lodash "^4.2.0" -babel-traverse@^6.24.1: +babel-traverse@^6.22.0, babel-traverse@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695" dependencies: @@ -1254,7 +1212,7 @@ babel-traverse@^6.24.1: invariant "^2.2.0" lodash "^4.2.0" -babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.22.0, babel-types@^6.23.0: +babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf" dependencies: @@ -1263,7 +1221,7 @@ babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.22 lodash "^4.2.0" to-fast-properties "^1.0.1" -babel-types@^6.19.0, babel-types@^6.24.1: +babel-types@^6.19.0, babel-types@^6.22.0, babel-types@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975" dependencies: @@ -1382,14 +1340,14 @@ browserify-zlib@~0.1.4: dependencies: pako "~0.2.0" -browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.1: +browserslist@^1.0.1, browserslist@^1.5.2: version "1.7.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" dependencies: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@~1.4.0: +browserslist@^1.4.0, browserslist@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049" dependencies: @@ -1467,7 +1425,7 @@ caniuse-api@^1.5.2: lodash.memoize "^4.1.0" lodash.uniq "^4.3.0" -caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554, caniuse-db@^1.0.30000618, caniuse-db@^1.0.30000639: +caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554, caniuse-db@^1.0.30000639: version "1.0.30000646" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000646.tgz#c724b90d61df24286e015fc528d062073c00def4" @@ -2482,7 +2440,7 @@ events@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924" -eventsource@0.1.6, eventsource@^0.1.3: +eventsource@^0.1.3: version "0.1.6" resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232" dependencies: @@ -2579,12 +2537,6 @@ faye-websocket@^0.10.0: dependencies: websocket-driver ">=0.5.1" -faye-websocket@~0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38" - dependencies: - websocket-driver ">=0.5.1" - faye-websocket@~0.7.3: version "0.7.3" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.7.3.tgz#cc4074c7f4a4dfd03af54dd65c354b135132ce11" @@ -3043,7 +2995,7 @@ http-errors@~1.6.1: setprototypeof "1.0.3" statuses ">= 1.3.1 < 2" -http-proxy-middleware@0.17.2: +http-proxy-middleware@0.17.2, http-proxy-middleware@~0.17.1: version "0.17.2" resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.2.tgz#572d517a6d2fb1063a469de294eed96066352007" dependencies: @@ -3052,16 +3004,7 @@ http-proxy-middleware@0.17.2: lodash "^4.16.2" micromatch "^2.3.11" -http-proxy-middleware@~0.17.1: - version "0.17.3" - resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d" - dependencies: - http-proxy "^1.16.2" - is-glob "^3.1.0" - lodash "^4.17.2" - micromatch "^2.3.11" - -http-proxy@^1.15.1, http-proxy@^1.16.2: +http-proxy@^1.15.1: version "1.16.2" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742" dependencies: @@ -3260,7 +3203,7 @@ is-glob@^2.0.0, is-glob@^2.0.1: dependencies: is-extglob "^1.0.0" -is-glob@^3.0.0, is-glob@^3.1.0: +is-glob@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a" dependencies: @@ -3998,7 +3941,7 @@ lodash.words@^3.0.0: dependencies: lodash._root "^3.0.0" -lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0: +lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.2.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4866,7 +4809,7 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11, postcss@^5.2.4: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.4: version "5.2.16" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57" dependencies: @@ -5364,13 +5307,13 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.6.1: +rimraf@2, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.6.1: version "2.6.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d" dependencies: glob "^7.0.5" -rimraf@2.5.4: +rimraf@2.5.4, rimraf@^2.2.8: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -5541,7 +5484,7 @@ sntp@1.x.x: dependencies: hoek "2.x.x" -sockjs-client@1.0.3: +sockjs-client@1.0.3, sockjs-client@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.0.3.tgz#b0d8280998460eb2564c5d79d7e3d7cfd8a353ad" dependencies: @@ -5552,17 +5495,6 @@ sockjs-client@1.0.3: json3 "^3.3.2" url-parse "^1.0.1" -sockjs-client@^1.0.3: - version "1.1.2" - resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5" - dependencies: - debug "^2.2.0" - eventsource "0.1.6" - faye-websocket "~0.11.0" - inherits "^2.0.1" - json3 "^3.3.2" - url-parse "^1.1.1" - sockjs@^0.3.15: version "0.3.18" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207" @@ -5965,7 +5897,7 @@ url-parse@1.0.x: querystringify "0.0.x" requires-port "1.0.x" -url-parse@^1.0.1, url-parse@^1.1.1: +url-parse@^1.0.1: version "1.1.8" resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156" dependencies: From e22387d36a04b0dd2907081f309a6c17a56cecc0 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Sat, 22 Apr 2017 01:15:51 -0500 Subject: [PATCH 02/16] 02HW, Address Book --- src/App.js | 93 -------------------------------- src/{ => components}/App.css | 0 src/components/App.js | 25 +++++++++ src/{ => components}/App.test.js | 0 src/components/Footer.js | 13 +++++ src/components/Header.js | 12 +++++ src/components/Intro.js | 11 ++++ src/components/ListOfUsers.js | 1 + src/components/Main.js | 16 ++++++ src/components/Section1.js | 16 ++++++ src/components/Section2.js | 15 ++++++ src/components/Section3.js | 18 +++++++ src/components/UserDetail.js | 0 src/{ => components}/logo.svg | 0 src/index.js | 4 +- 15 files changed, 129 insertions(+), 95 deletions(-) delete mode 100644 src/App.js rename src/{ => components}/App.css (100%) create mode 100644 src/components/App.js rename src/{ => components}/App.test.js (100%) create mode 100644 src/components/Footer.js create mode 100644 src/components/Header.js create mode 100644 src/components/Intro.js create mode 100644 src/components/ListOfUsers.js create mode 100644 src/components/Main.js create mode 100644 src/components/Section1.js create mode 100644 src/components/Section2.js create mode 100644 src/components/Section3.js create mode 100644 src/components/UserDetail.js rename src/{ => components}/logo.svg (100%) diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 5abab526..00000000 --- a/src/App.js +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react"; -import logo from "./logo.svg"; -import "./App.css"; - -function Header() { - return ( -
- logo -

Welcome to React

-
- ); -} - -function Intro() { - return ( -

- To get started, edit src/App.js and save to reload. -

- ); -} - -function Main() { - return ( -
- - - -
- ); -} - -function Section1() { - return ( -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse v - estibulum nisi nec est iaculis, ut tristique arcu hendrerit. - Cras velit nibh, mollis sit amet odio ut, dapibus convallis nisi. - Donec id egestas ipsum. Duis id egestas justo, ac porta diam. -

-
- ); -} - -function Section2() { - return ( -
-

- Suspendisse maximus, odio vel tincidunt viverra, sem dui feugiat mauris, - eu ultricies lorem dui vitae est. Proin ac vehicula velit. - Vestibulum eget diam ullamcorper, consectetur est at, imperdiet turpis. -

-
- ); -} - -function Section3() { - return ( -
-

- Duis dictum fringilla nulla et tincidunt. Praesent rutrum ac nisi ut tempor. - Curabitur non velit eget arcu semper suscipit. - Vestibulum scelerisque laoreet metus quis dapibus. - Proin ultricies velit eget nisl elementum sollicitudin sed eget tortor. - Vivamus aliquam placerat ante sed posuere. Sed finibus vestibulum augue id interdum. - Suspendisse potenti. -

-
- ); -} - -function Footer() { - return ( -
-

- THE END -

-
- ); -} - -function App() { - return ( -
-
- -
-
-
- ); -} - -export default App; diff --git a/src/App.css b/src/components/App.css similarity index 100% rename from src/App.css rename to src/components/App.css diff --git a/src/components/App.js b/src/components/App.js new file mode 100644 index 00000000..0b8d8fd9 --- /dev/null +++ b/src/components/App.js @@ -0,0 +1,25 @@ +import React from "react"; +import "./App.css"; +import Header from "./Header"; +import Intro from "./Intro"; +import Main from "./Main"; +import Footer from "./Footer"; +import ListOfUsers from "./ListOfUsers"; +import UserDetail from "./UserDetail"; +import users from "../users"; + +function App(props) { + const firstUser = props.users[0]; + return ( +
+
+ +
+
+ + +
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/components/App.test.js similarity index 100% rename from src/App.test.js rename to src/components/App.test.js diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 00000000..9b667e3f --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,13 @@ +import React from "react"; + +function Footer() { + return ( +
+

+ THE END +

+
+ ); +} + +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..485549a3 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,12 @@ +import React from "react"; +import logo from "./logo.svg"; + +function Header() { + return ( +
+ logo +

Welcome to React

+
+ ); +} +export default Header; diff --git a/src/components/Intro.js b/src/components/Intro.js new file mode 100644 index 00000000..c75512fe --- /dev/null +++ b/src/components/Intro.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Intro() { + return ( +

+ To get started, edit src/App.js and save to reload. +

+ ); +} + +export default Intro; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/src/components/ListOfUsers.js @@ -0,0 +1 @@ + diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 00000000..559b6b71 --- /dev/null +++ b/src/components/Main.js @@ -0,0 +1,16 @@ +import React from "react"; +import Section1 from "./Section1"; +import Section2 from "./Section1"; +import Section3 from "./Section1"; + +function Main() { + return ( +
+ + + +
+ ); +} + +export default Main; diff --git a/src/components/Section1.js b/src/components/Section1.js new file mode 100644 index 00000000..b838a8cd --- /dev/null +++ b/src/components/Section1.js @@ -0,0 +1,16 @@ +import React from "react"; + +function Section1() { + return ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse v + estibulum nisi nec est iaculis, ut tristique arcu hendrerit. + Cras velit nibh, mollis sit amet odio ut, dapibus convallis nisi. + Donec id egestas ipsum. Duis id egestas justo, ac porta diam. +

+
+ ); +} + +export default Section1; diff --git a/src/components/Section2.js b/src/components/Section2.js new file mode 100644 index 00000000..e25ec95c --- /dev/null +++ b/src/components/Section2.js @@ -0,0 +1,15 @@ +import React from "react"; + +function Section2() { + return ( +
+

+ Suspendisse maximus, odio vel tincidunt viverra, sem dui feugiat mauris, + eu ultricies lorem dui vitae est. Proin ac vehicula velit. + Vestibulum eget diam ullamcorper, consectetur est at, imperdiet turpis. +

+
+ ); +} + +export default Section2; diff --git a/src/components/Section3.js b/src/components/Section3.js new file mode 100644 index 00000000..3c77d5ad --- /dev/null +++ b/src/components/Section3.js @@ -0,0 +1,18 @@ +import React from "react"; + +function Section3() { + return ( +
+

+ Duis dictum fringilla nulla et tincidunt. Praesent rutrum ac nisi ut tempor. + Curabitur non velit eget arcu semper suscipit. + Vestibulum scelerisque laoreet metus quis dapibus. + Proin ultricies velit eget nisl elementum sollicitudin sed eget tortor. + Vivamus aliquam placerat ante sed posuere. Sed finibus vestibulum augue id interdum. + Suspendisse potenti. +

+
+ ); +} + +export default Section3; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..e69de29b diff --git a/src/logo.svg b/src/components/logo.svg similarity index 100% rename from src/logo.svg rename to src/components/logo.svg diff --git a/src/index.js b/src/index.js index 8e6bfe35..563428dd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,13 @@ import React from "react"; import ReactDOM from "react-dom"; -import App from "./App"; +import App from "./components/App"; import "./index.css"; import users from "./users"; function render() { ReactDOM.render( - , + , document.getElementById("root") ); } From 15533735e07721dcd89e185340c7c6b536b4d30c Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Sat, 22 Apr 2017 12:47:55 -0500 Subject: [PATCH 03/16] 02HW, Address Book: complete --- src/components/App.js | 6 +----- src/components/ListOfUsers.js | 19 +++++++++++++++++++ src/components/Main.js | 11 ++++++----- src/components/Section1.js | 10 +++------- src/components/Section2.js | 10 ++++------ src/components/UserDetail.js | 13 +++++++++++++ 6 files changed, 46 insertions(+), 23 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 0b8d8fd9..b74815ad 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,9 +4,7 @@ import Header from "./Header"; import Intro from "./Intro"; import Main from "./Main"; import Footer from "./Footer"; -import ListOfUsers from "./ListOfUsers"; import UserDetail from "./UserDetail"; -import users from "../users"; function App(props) { const firstUser = props.users[0]; @@ -14,10 +12,8 @@ function App(props) {
-
+
- -
); } diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 8b137891..a32ff70b 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1 +1,20 @@ +import React from "react"; +function ListOfUsers(props) { + const userList = props.users.map((user, index) => { + return ( +
    +
  • + {user.first_name} +
    • +
+ ); + }); + return ( +
+ {userList} +
+ ); +} + +export default ListOfUsers; diff --git a/src/components/Main.js b/src/components/Main.js index 559b6b71..1551b2ec 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,13 +1,14 @@ import React from "react"; import Section1 from "./Section1"; -import Section2 from "./Section1"; -import Section3 from "./Section1"; +import Section2 from "./Section2"; +import Section3 from "./Section3"; -function Main() { +function Main(props) { + const first = props.user; return (
- - + +
); diff --git a/src/components/Section1.js b/src/components/Section1.js index b838a8cd..a6bcfbcc 100644 --- a/src/components/Section1.js +++ b/src/components/Section1.js @@ -1,14 +1,10 @@ import React from "react"; +import ListOfUsers from "./ListOfUsers"; -function Section1() { +function Section1(props) { return (
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse v - estibulum nisi nec est iaculis, ut tristique arcu hendrerit. - Cras velit nibh, mollis sit amet odio ut, dapibus convallis nisi. - Donec id egestas ipsum. Duis id egestas justo, ac porta diam. -

+
); } diff --git a/src/components/Section2.js b/src/components/Section2.js index e25ec95c..76ac7a2f 100644 --- a/src/components/Section2.js +++ b/src/components/Section2.js @@ -1,13 +1,11 @@ import React from "react"; +import UserDetail from "./UserDetail"; -function Section2() { +function Section2(props) { + const first = props.user; return (
-

- Suspendisse maximus, odio vel tincidunt viverra, sem dui feugiat mauris, - eu ultricies lorem dui vitae est. Proin ac vehicula velit. - Vestibulum eget diam ullamcorper, consectetur est at, imperdiet turpis. -

+
); } diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index e69de29b..cf4884f3 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -0,0 +1,13 @@ +import React from "react"; + +function UserDetail(props) { + const firstName = (props.user.first_name); + const lastName = (props.user.last_name); + return ( +
    +
  • {firstName} {lastName}
    • +
+ ); +} + +export default UserDetail; From 0d406db80f6c1c20e1768b64c2d316b93c244c5a Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Mon, 24 Apr 2017 19:32:52 -0500 Subject: [PATCH 04/16] add prop validation --- package.json | 3 ++- src/components/App.js | 6 +++++- src/components/Main.js | 6 ++++++ src/components/Section1.js | 5 +++++ src/components/Section2.js | 5 +++++ src/components/UserDetail.js | 5 +++++ yarn.lock | 2 +- 7 files changed, 29 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index a449367b..cb655ff4 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "foreman": "^2.0.0", "json-server": "^0.9.4", + "prop-types": "^15.5.8", "react": "^15.3.2", "react-dom": "^15.3.2" }, @@ -24,5 +25,5 @@ "test": "npm run lint && react-scripts test --env=jsdom", "eject": "react-scripts eject" }, - "proxy" : "http://localhost:3001" + "proxy": "http://localhost:3001" } diff --git a/src/components/App.js b/src/components/App.js index b74815ad..b90131f0 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,7 @@ import Header from "./Header"; import Intro from "./Intro"; import Main from "./Main"; import Footer from "./Footer"; -import UserDetail from "./UserDetail"; +import PropTypes from "prop-types"; function App(props) { const firstUser = props.users[0]; @@ -18,4 +18,8 @@ function App(props) { ); } +App.propTypes = { + users: PropTypes.array +}; + export default App; diff --git a/src/components/Main.js b/src/components/Main.js index 1551b2ec..303fd64f 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -2,6 +2,7 @@ import React from "react"; import Section1 from "./Section1"; import Section2 from "./Section2"; import Section3 from "./Section3"; +import PropTypes from "prop-types"; function Main(props) { const first = props.user; @@ -14,4 +15,9 @@ function Main(props) { ); } +Main.propTypes = { + user: PropTypes.object, + users: PropTypes.array +}; + export default Main; diff --git a/src/components/Section1.js b/src/components/Section1.js index a6bcfbcc..d590a297 100644 --- a/src/components/Section1.js +++ b/src/components/Section1.js @@ -1,5 +1,6 @@ import React from "react"; import ListOfUsers from "./ListOfUsers"; +import PropTypes from "prop-types"; function Section1(props) { return ( @@ -9,4 +10,8 @@ function Section1(props) { ); } +Section1.propTypes = { + users: PropTypes.array +}; + export default Section1; diff --git a/src/components/Section2.js b/src/components/Section2.js index 76ac7a2f..e50fb88a 100644 --- a/src/components/Section2.js +++ b/src/components/Section2.js @@ -1,5 +1,6 @@ import React from "react"; import UserDetail from "./UserDetail"; +import PropTypes from "prop-types"; function Section2(props) { const first = props.user; @@ -10,4 +11,8 @@ function Section2(props) { ); } +Section2.propTypes = { + user: PropTypes.object +}; + export default Section2; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index cf4884f3..54e67bc4 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -1,4 +1,5 @@ import React from "react"; +import PropTypes from "prop-types"; function UserDetail(props) { const firstName = (props.user.first_name); @@ -10,4 +11,8 @@ function UserDetail(props) { ); } +UserDetail.propTypes = { + user: PropTypes.object +}; + export default UserDetail; diff --git a/yarn.lock b/yarn.lock index 1066eff8..d89f530f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4863,7 +4863,7 @@ promise@7.1.1, promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.7, prop-types@~15.5.7: +prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: From 0effb193cf1617d37fbfbd1fbab58555d723dabb Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Tue, 25 Apr 2017 20:24:29 -0500 Subject: [PATCH 05/16] require props-types --- src/components/App.js | 2 +- src/components/Main.js | 4 ++-- src/components/Section1.js | 2 +- src/components/Section2.js | 2 +- src/components/UserDetail.js | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index b90131f0..acd9b735 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -19,7 +19,7 @@ function App(props) { } App.propTypes = { - users: PropTypes.array + users: PropTypes.array.isRequired }; export default App; diff --git a/src/components/Main.js b/src/components/Main.js index 303fd64f..698bf5cb 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -16,8 +16,8 @@ function Main(props) { } Main.propTypes = { - user: PropTypes.object, - users: PropTypes.array + user: PropTypes.object.isRequired, + users: PropTypes.array.isRequired }; export default Main; diff --git a/src/components/Section1.js b/src/components/Section1.js index d590a297..d082ee6f 100644 --- a/src/components/Section1.js +++ b/src/components/Section1.js @@ -11,7 +11,7 @@ function Section1(props) { } Section1.propTypes = { - users: PropTypes.array + users: PropTypes.array.isRequired }; export default Section1; diff --git a/src/components/Section2.js b/src/components/Section2.js index e50fb88a..bafa0d15 100644 --- a/src/components/Section2.js +++ b/src/components/Section2.js @@ -12,7 +12,7 @@ function Section2(props) { } Section2.propTypes = { - user: PropTypes.object + user: PropTypes.object.isRequired }; export default Section2; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 54e67bc4..694f1992 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -12,7 +12,7 @@ function UserDetail(props) { } UserDetail.propTypes = { - user: PropTypes.object + user: PropTypes.object.isRequired }; export default UserDetail; From 984e7d7315fffb68cf5bf7d9aea4e34f815a77ba Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Tue, 25 Apr 2017 20:29:05 -0500 Subject: [PATCH 06/16] fix eslint errors in users.js --- src/users.js | 87 +++++++++++++++++++++++++--------------------------- 1 file changed, 42 insertions(+), 45 deletions(-) diff --git a/src/users.js b/src/users.js index b700dc61..cac36936 100644 --- a/src/users.js +++ b/src/users.js @@ -1,60 +1,57 @@ export default [ { - "id": 1, - "first_name": "george", - "last_name": "bluth", - "address": "4116 Magnolia Drive, Portland, ME 04103", - "phone": 15551234567, - "occupation": "father", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" + id: 1, + firstName: "george", + lastName: "bluth", + address: "4116 Magnolia Drive, Portland, ME 04103", + phone: 15551234567, + occupation: "father", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }, { - "id": 2, - "first_name": "lucille", - "last_name": "bluth", - "address": "6428 3rd Street East, Zion, IL 60099", - "phone": 15552345678, - "occupation": "mother", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" + id: 2, + firstName: "lucille", + lastName: "bluth", + address: "6428 3rd Street East, Zion, IL 60099", + phone: 15552345678, + occupation: "mother", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" }, { - "id": 3, - "first_name": "oscar", - "last_name": "bluth", - "address": "4797 Sycamore Lane, Dover, NH 03820", - "phone": 15553456789, - "occupation": "uncle", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" + id: 3, + firstName: "oscar", + lastName: "bluth", + address: "4797 Sycamore Lane, Dover, NH 03820", + phone: 15553456789, + occupation: "uncle", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" }, { - "id": 4, - "first_name": "steve", - "last_name": "holt", - "address": "3722 Circle Drive, Bristow, VA 20136", - "phone": 15554567890, - "occupation": "friend", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" + id: 4, + firstName: "steve", + lastName: "holt", + address: "3722 Circle Drive, Bristow, VA 20136", + phone: 15554567890, + occupation: "friend", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" }, { - "id": 5, - "first_name": "gob", - "last_name": "bluth", - "address": "959 Hilltop Road, Apple Valley, CA 92307", - "phone": 15555678901, - "occupation": "brother", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" + id: 5, + firstName: "gob", + lastName: "bluth", + address: "959 Hilltop Road, Apple Valley, CA 92307", + phone: 15555678901, + occupation: "brother", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" }, { - "id": 6, - "first_name": "tracey", - "last_name": "bluth", - "address": "2640 Primrose Lane, Longview, TX 75604", - "phone": 15556789012, - "occupation": "wife", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" + id: 6, + firstName: "tracey", + lastName: "bluth", + address: "2640 Primrose Lane, Longview, TX 75604", + phone: 15556789012, + occupation: "wife", + avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" } ]; - - - From 5fff7ecd45380ae02dd684bc8b8277e9b83e31b7 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Tue, 25 Apr 2017 20:31:37 -0500 Subject: [PATCH 07/16] add prop validation in ListOfUsers.js --- src/components/ListOfUsers.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index a32ff70b..486478b1 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,4 +1,5 @@ import React from "react"; +import PropTypes from "prop-types"; function ListOfUsers(props) { const userList = props.users.map((user, index) => { @@ -17,4 +18,8 @@ function ListOfUsers(props) { ); } +ListOfUsers.propTypes = { + users: PropTypes.array.isRequired +}; + export default ListOfUsers; From 623c00504ac8f1bd9816cd87cf04706b3438977e Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Tue, 25 Apr 2017 20:33:38 -0500 Subject: [PATCH 08/16] update firstName/lastName syntax to camelcase --- src/components/ListOfUsers.js | 2 +- src/components/UserDetail.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 486478b1..6cbf2a3b 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -6,7 +6,7 @@ function ListOfUsers(props) { return (
  • - {user.first_name} + {user.firstName}
); diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 694f1992..b8d17cf6 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -2,8 +2,8 @@ import React from "react"; import PropTypes from "prop-types"; function UserDetail(props) { - const firstName = (props.user.first_name); - const lastName = (props.user.last_name); + const firstName = (props.user.firstName); + const lastName = (props.user.lastName); return (
  • {firstName} {lastName}
    • From d7f19debad932e17f32c297c54c81c43dd48e473 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Fri, 28 Apr 2017 21:21:22 -0500 Subject: [PATCH 09/16] added hide button --- README.md | 10 ++++------ src/components/App.css | 1 - src/components/App.js | 4 ---- src/components/Button.js | 9 +++++++++ src/components/ListOfUsers.js | 36 +++++++++++++++++++++-------------- 5 files changed, 35 insertions(+), 25 deletions(-) create mode 100644 src/components/Button.js diff --git a/README.md b/README.md index 9c7fd665..d65a2b41 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ * From address book directory, run yarn install, yarn start ### Do -* Import the array of users into index.js + ### Do -* Add a button to the ListOfUsers component that says Hide + * Add an onClick to the button and a handler * Make clicking the button hide the list and change the text to “Show” * If you click it again it will show the list and change the text back to “Hide” @@ -32,11 +32,9 @@ * In onChange handler function, setState the searchText to the value from the textbox ### Do -* Create a variable called currentUser in index.js. +* Create a variable called currentUser in index.js. * Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser. * Send this function down the child tree so that ListOfUsers can call it * Change index.js to send currentUser down the child tree instead of App.js hard coding the first one * Register click event for ListOfUsers view link, call the function sent into props by parents, supply the argument of whatever user was clicked on. * Re render the components - - diff --git a/src/components/App.css b/src/components/App.css index 4769003f..713eb380 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -23,7 +23,6 @@ justify-content: space-around; width: 100%; height: 300px; - border: solid 1px; } .Section-content { diff --git a/src/components/App.js b/src/components/App.js index acd9b735..b933d975 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,9 +1,7 @@ import React from "react"; import "./App.css"; import Header from "./Header"; -import Intro from "./Intro"; import Main from "./Main"; -import Footer from "./Footer"; import PropTypes from "prop-types"; function App(props) { @@ -11,9 +9,7 @@ function App(props) { return (
    -
    -
    ); } diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 00000000..4e81da7c --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,9 @@ +import React from "react"; + +function Button() { + return ( + + ); +} + +export default Button; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 6cbf2a3b..23f50896 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,21 +1,29 @@ -import React from "react"; +import React, {Component} from "react"; import PropTypes from "prop-types"; +import Button from "./Button"; -function ListOfUsers(props) { - const userList = props.users.map((user, index) => { +class ListOfUsers extends Component { + constructor(props) { + super(props); + } + + render() { + const userList = this.props.users.map((user, index) => { + return ( +
      +
    • + {user.firstName} {user.lastName} +
      • +
    + ); + }); return ( -
      -
    • - {user.firstName} -
      • -
    +
    + {userList} +
    ); - }); - return ( -
    - {userList} -
    - ); + } } ListOfUsers.propTypes = { From 7a66b21b5f50719d0b97a374c35369c38be73f69 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Fri, 28 Apr 2017 21:24:43 -0500 Subject: [PATCH 10/16] converted Button to class component --- src/components/Button.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Button.js b/src/components/Button.js index 4e81da7c..ef7c32df 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,9 +1,15 @@ -import React from "react"; +import React, {Component} from "react"; -function Button() { - return ( - - ); +class Button extends Component { + constructor() { + super(); + } + + render() { + return ( + + ); + } } export default Button; From 26645a6be5c5aee59002748974c2889aaabd1266 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Fri, 28 Apr 2017 22:29:04 -0500 Subject: [PATCH 11/16] toggle userlist complete --- src/components/Button.js | 15 --------------- src/components/ListOfUsers.js | 34 +++++++++++++++++++++++++--------- 2 files changed, 25 insertions(+), 24 deletions(-) delete mode 100644 src/components/Button.js diff --git a/src/components/Button.js b/src/components/Button.js deleted file mode 100644 index ef7c32df..00000000 --- a/src/components/Button.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, {Component} from "react"; - -class Button extends Component { - constructor() { - super(); - } - - render() { - return ( - - ); - } -} - -export default Button; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 23f50896..13801f75 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,26 +1,42 @@ import React, {Component} from "react"; import PropTypes from "prop-types"; -import Button from "./Button"; class ListOfUsers extends Component { constructor(props) { super(props); + this.state = { + hideButtonWasClicked: false, + }; + } + + handleClick() { + this.setState({ + hideButtonWasClicked: !this.state.hideButtonWasClicked + }); } render() { const userList = this.props.users.map((user, index) => { - return ( -
      -
    • - {user.firstName} {user.lastName} -
      • -
    - ); + if (!this.state.hideButtonWasClicked) { + return ( +
      +
    • + {user.firstName} {user.lastName} +
      • +
    + ); + } else { + return null; + } }); + return (
    {userList} -
    ); } From b6913a5310a5ce3c0333efdcddf6e0dcbe7b13e4 Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Fri, 28 Apr 2017 22:32:46 -0500 Subject: [PATCH 12/16] refactored toggle functionality --- src/components/ListOfUsers.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 13801f75..586c98f4 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -5,19 +5,19 @@ class ListOfUsers extends Component { constructor(props) { super(props); this.state = { - hideButtonWasClicked: false, + visible: true }; } handleClick() { this.setState({ - hideButtonWasClicked: !this.state.hideButtonWasClicked + visible: !this.state.visible }); } render() { const userList = this.props.users.map((user, index) => { - if (!this.state.hideButtonWasClicked) { + if (this.state.visible) { return (
    • @@ -35,7 +35,7 @@ class ListOfUsers extends Component { {userList} ); From f4a8556209396f2f6e6dff2a9e02b6cdba6ca37f Mon Sep 17 00:00:00 2001 From: MicahMonfrini Date: Sat, 29 Apr 2017 13:57:18 -0500 Subject: [PATCH 13/16] added alphabet sorting --- README.md | 16 ++++++++-------- src/components/ListOfUsers.js | 21 +++++++++++++++------ src/components/Main.js | 3 +-- src/components/Section2.js | 8 +++----- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index d65a2b41..110e4ceb 100644 --- a/README.md +++ b/README.md @@ -11,16 +11,16 @@ ### Do -* Add an onClick to the button and a handler -* Make clicking the button hide the list and change the text to “Show” -* If you click it again it will show the list and change the text back to “Hide” + + + ### Do -* Change ListOfUsers to be a class component -* Add a constructor -* Add a property called “state” that is an object -* Add a property on the state object called "visible" -* Add a method called “render” that returns the jsx the function returned + + + + + ### Do * Add text box anywhere to ListOfUsers with a label “Search” diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index 586c98f4..380dd302 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,11 +1,14 @@ import React, {Component} from "react"; import PropTypes from "prop-types"; +import UserDetail from "./UserDetail"; class ListOfUsers extends Component { constructor(props) { super(props); this.state = { - visible: true + visible: true, + letters: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", + "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] }; } @@ -15,14 +18,20 @@ class ListOfUsers extends Component { }); } + checkForEntry() { + + } + render() { - const userList = this.props.users.map((user, index) => { + const renderLetters = (users, letters) => letters.map((letter, index) => { if (this.state.visible) { return (
        -
      • - {user.firstName} {user.lastName} -
        • +

        {letter}

        + { users.map((user, index) => { + return (user.lastName.substring(0, 1).toUpperCase() === letter) ? + : null; + })}
      ); } else { @@ -32,7 +41,7 @@ class ListOfUsers extends Component { return (
      - {userList} + { renderLetters && renderLetters(this.props.users, this.state.letters)}