From f02d93d8ca88bdce8d457917d9baa10e18052f4b Mon Sep 17 00:00:00 2001 From: Juan Mata Date: Tue, 20 Jun 2017 19:41:50 -0500 Subject: [PATCH 1/3] initial --- src/components/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App.js b/src/components/App.js index 8b9811f..193186c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -6,7 +6,7 @@ class App extends Component { return (
-

React Blog Starter

+

React Blog Starter..

); From 69688a3b7eb7c78334c18b33742d6957cc37a884 Mon Sep 17 00:00:00 2001 From: Juan Mata Date: Thu, 22 Jun 2017 19:05:07 -0500 Subject: [PATCH 2/3] inserted Posts --- .eslintrc.js | 42 ++++++++++++++++++--- src/components/App.css | 29 +++++++++++++-- src/components/App.js | 47 ++++++++++++++++++++++-- src/components/Header.js | 13 +++++++ src/components/ListOfPosts.js | 12 ++++++ src/components/PostPreview.js | 11 ++++++ yarn.lock | 69 +++++++++++++++++++++++++++++++++-- 7 files changed, 207 insertions(+), 16 deletions(-) create mode 100644 src/components/Header.js create mode 100644 src/components/ListOfPosts.js create mode 100644 src/components/PostPreview.js diff --git a/.eslintrc.js b/.eslintrc.js index a7621aa..86df2c6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,8 +1,38 @@ module.exports = { - "extends": "airbnb", + "env": { + "browser": true, + "commonjs": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + }, + "sourceType": "module" + }, "plugins": [ - "react", - "jsx-a11y", - "import" - ] -}; \ No newline at end of file + "react" + ], + "rules": { + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "double" + ], + "semi": [ + "error", + "always" + ], + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + } +}; diff --git a/src/components/App.css b/src/components/App.css index dc0b786..2bd75a9 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -1,16 +1,37 @@ .App { text-align: center; display: flex; + flex-direction: column; justify-content: center; width: 100%; height: 100%; margin-top: 15px; } .App-header { - background-color: rgba(34, 34, 34, 0.52); - height: 150px; - padding: 45px 16.7%; - color: white; + background-color: yellow; + height: 180px; + padding: 10px; + color: black; border-radius: 25px; font: 600 36px sans-serif; + display: flex; + flex-direction: row; + text-align: center; +} + +.Header { + display: flex; + flex-direction: row; +} + +.heroimg { + height: 150px; + border-radius: 100%; + margin: 10px; +} + +.Name { + text-align: center; + font-size: 72px; + margin: 50px; } diff --git a/src/components/App.js b/src/components/App.js index 193186c..039a418 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,14 +1,55 @@ -import React, { Component } from 'react'; -import './App.css'; +import React, { Component } from "react"; +import Header from "./Header.js"; +import ListOfPosts from "./ListOfPosts"; +// import PostPreview from "./PostPreview"; +import axios from "axios"; +import "./App.css"; class App extends Component { + constructor(props) { + super(props); + this.state = { + results: [], + apiPicture: "", + apiPostTitle: "", + apiPostPreview: "", + + }; + } + + componentWillMount() { + axios.get("https://api.github.com/users/juanmata0012/gists") + .then((response) => { + this.setState({apiPicture: response.data[0].owner.avatar_url}); + this.setState({results: response.data}); + }) + .catch((error) => { + // eslint-disable-next-line + console.log(error); + }); + } + + render() { return (
+
-

React Blog Starter..

+ picture +
+
+
+
+ +
+
+ +
+
+ + ); } } diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..101c9a6 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,13 @@ +import React from 'react'; +import props from './App.js' + +function Header(props) { + return ( +
+ +

Juan Mata Blog

+
+ ); +} + +export default Header diff --git a/src/components/ListOfPosts.js b/src/components/ListOfPosts.js new file mode 100644 index 0000000..f574b95 --- /dev/null +++ b/src/components/ListOfPosts.js @@ -0,0 +1,12 @@ +import React from "react"; + +// eslint-disable-next-line +function ListOfPosts(props) { + return ( +
+ List +
+ ); +} + +export default ListOfPosts; diff --git a/src/components/PostPreview.js b/src/components/PostPreview.js new file mode 100644 index 0000000..76508e7 --- /dev/null +++ b/src/components/PostPreview.js @@ -0,0 +1,11 @@ +import React from "react"; + +// eslint-disable-next-line +function PostPreview(props) { + return ( +
+
+ ); +} + +export default PostPreview; diff --git a/yarn.lock b/yarn.lock index 6afb980..290e61e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2047,6 +2047,16 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" +eslint-config-airbnb-base@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-11.2.0.tgz#19a9dc4481a26f70904545ec040116876018f853" + +eslint-config-airbnb@^15.0.1: + version "15.0.1" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-15.0.1.tgz#7b5188e5b7c74b9b2ce639fd5e1daba8fd761aed" + dependencies: + eslint-config-airbnb-base "^11.2.0" + eslint-config-react-app@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-1.0.4.tgz#c0178f535a922236c53daafea4f397203db7d9af" @@ -2098,7 +2108,22 @@ eslint-plugin-import@2.2.0: minimatch "^3.0.3" pkg-up "^1.0.0" -eslint-plugin-jsx-a11y@5.0.3: +eslint-plugin-import@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.3.0.tgz#37c801e0ada0e296cbdf20c3f393acb5b52af36b" + dependencies: + builtin-modules "^1.1.1" + contains-path "^0.1.0" + debug "^2.2.0" + doctrine "1.5.0" + eslint-import-resolver-node "^0.2.0" + eslint-module-utils "^2.0.0" + has "^1.0.1" + lodash.cond "^4.3.0" + minimatch "^3.0.3" + read-pkg-up "^2.0.0" + +eslint-plugin-jsx-a11y@5.0.3, eslint-plugin-jsx-a11y@^5.0.3: version "5.0.3" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.0.3.tgz#4a939f76ec125010528823331bf948cc573380b6" dependencies: @@ -2118,6 +2143,14 @@ eslint-plugin-react@7.0.1: has "^1.0.1" jsx-ast-utils "^1.3.4" +eslint-plugin-react@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.1.0.tgz#27770acf39f5fd49cd0af4083ce58104eb390d4c" + dependencies: + doctrine "^2.0.0" + has "^1.0.1" + jsx-ast-utils "^1.4.1" + eslint-scope@^3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" @@ -2489,7 +2522,7 @@ find-up@^1.0.0: path-exists "^2.0.0" pinkie-promise "^2.0.0" -find-up@^2.1.0: +find-up@^2.0.0, find-up@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7" dependencies: @@ -3641,7 +3674,7 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.3.6" -jsx-ast-utils@^1.3.4, jsx-ast-utils@^1.4.0: +jsx-ast-utils@^1.3.4, jsx-ast-utils@^1.4.0, jsx-ast-utils@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1" @@ -3704,6 +3737,15 @@ load-json-file@^1.0.0: pinkie-promise "^2.0.0" strip-bom "^2.0.0" +load-json-file@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" + dependencies: + graceful-fs "^4.1.2" + parse-json "^2.2.0" + pify "^2.0.0" + strip-bom "^3.0.0" + loader-fs-cache@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc" @@ -4346,6 +4388,12 @@ path-type@^1.0.0: pify "^2.0.0" pinkie-promise "^2.0.0" +path-type@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73" + dependencies: + pify "^2.0.0" + pbkdf2@^3.0.3: version "3.0.12" resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2" @@ -4948,6 +4996,13 @@ read-pkg-up@^1.0.1: find-up "^1.0.0" read-pkg "^1.0.0" +read-pkg-up@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be" + dependencies: + find-up "^2.0.0" + read-pkg "^2.0.0" + read-pkg@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28" @@ -4956,6 +5011,14 @@ read-pkg@^1.0.0: normalize-package-data "^2.3.2" path-type "^1.0.0" +read-pkg@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8" + dependencies: + load-json-file "^2.0.0" + normalize-package-data "^2.3.2" + path-type "^2.0.0" + readable-stream@1.0: version "1.0.34" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" From d6d98f2698b3049bd6f75b3744f02f46b8e07460 Mon Sep 17 00:00:00 2001 From: Juan Mata Date: Thu, 22 Jun 2017 19:27:23 -0500 Subject: [PATCH 3/3] showing posts --- src/components/App.js | 2 +- src/components/Header.js | 4 ++-- src/components/ListOfPosts.js | 8 +++++++- src/components/PostPreview.js | 1 + 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 039a418..c88d93f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -35,7 +35,7 @@ class App extends Component {
- picture + me
diff --git a/src/components/Header.js b/src/components/Header.js index 101c9a6..fba0ba1 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,6 +1,6 @@ -import React from 'react'; -import props from './App.js' +import React from "react"; +// eslint-disable-next-line function Header(props) { return (
diff --git a/src/components/ListOfPosts.js b/src/components/ListOfPosts.js index f574b95..827357d 100644 --- a/src/components/ListOfPosts.js +++ b/src/components/ListOfPosts.js @@ -1,10 +1,16 @@ import React from "react"; +import PostPreview from "./PostPreview"; // eslint-disable-next-line function ListOfPosts(props) { return (
- List + {props.posts.map((post, i) => + + )}
); } diff --git a/src/components/PostPreview.js b/src/components/PostPreview.js index 76508e7..7e3c498 100644 --- a/src/components/PostPreview.js +++ b/src/components/PostPreview.js @@ -4,6 +4,7 @@ import React from "react"; function PostPreview(props) { return (
+ {props.post.description}
); }