From fb6b41532a001b3825e87b2b68cecf28bbaddd75 Mon Sep 17 00:00:00 2001 From: vincegludovice Date: Fri, 15 Nov 2019 10:18:55 +0800 Subject: [PATCH 1/2] React 4 Completion --- package-lock.json | 193 ++++++++++++++++++++------ package.json | 2 + src/App.js | 30 ++-- src/components/About/About.js | 51 ++++++- src/components/ClassList/ClassList.js | 31 ++++- src/components/Home/Home.js | 15 +- src/components/Student/Student.js | 18 ++- src/router.js | 18 +++ 8 files changed, 294 insertions(+), 64 deletions(-) create mode 100644 src/router.js diff --git a/package-lock.json b/package-lock.json index cfc02c6..f78c03a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1974,6 +1974,33 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -4967,9 +4994,19 @@ } }, "eslint-utils": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz", - "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==" + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", + "requires": { + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", + "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" + } + } }, "eslint-visitor-keys": { "version": "1.0.0", @@ -5749,6 +5786,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -5764,9 +5806,9 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" }, "handlebars": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz", - "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz", + "integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==", "requires": { "neo-async": "^2.6.0", "optimist": "^0.6.1", @@ -5928,6 +5970,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5938,6 +5993,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -8175,9 +8238,9 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash-id": { "version": "0.14.0", @@ -8479,6 +8542,16 @@ "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -8530,9 +8603,9 @@ } }, "mixin-deep": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", - "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", + "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", "requires": { "for-in": "^1.0.2", "is-extendable": "^1.0.1" @@ -10585,6 +10658,47 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -11008,6 +11122,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11330,9 +11449,9 @@ "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, "set-value": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", - "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", + "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", "requires": { "extend-shallow": "^2.0.1", "is-extendable": "^0.1.1", @@ -12192,6 +12311,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -12429,35 +12558,14 @@ } }, "union-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", - "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", + "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", "requires": { "arr-union": "^3.1.0", "get-value": "^2.0.6", "is-extendable": "^0.1.1", - "set-value": "^0.4.3" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - }, - "set-value": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", - "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", - "requires": { - "extend-shallow": "^2.0.1", - "is-extendable": "^0.1.1", - "is-plain-object": "^2.0.1", - "to-object-path": "^0.3.0" - } - } + "set-value": "^2.0.1" } }, "uniq": { @@ -12698,6 +12806,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 7a728bb..1bc760c 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,13 @@ "private": true, "homepage": "https://boomcamp.github.io/react-4/", "dependencies": { + "axios": "^0.19.0", "concurrently": "^4.1.0", "json-server": "^0.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-icons": "^3.7.0", + "react-router-dom": "^5.1.2", "react-scripts": "3.0.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index e4c0372..2e7e3dd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,27 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import { HashRouter, Link } from "react-router-dom"; + +import Router from "./router"; export default class App extends Component { render() { return ( -
- -
+ +
+ + +
+ ); } } diff --git a/src/components/About/About.js b/src/components/About/About.js index b1482ee..03902be 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -1,11 +1,56 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import { Link, Switch, Route } from "react-router-dom"; + +import History from "../History/History"; +import Contact from "../Contact/Contact"; export default class About extends Component { render() { return (
-
-
+
+ +

About

+ + +

History

+ + +

Contact

+ +
+ +
+ + + + ( +
+

About the University

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + euismod eu lorem et ultricies. In porta lorem at dui semper + porttitor. Nullam quis cursus dui. Cras tincidunt vehicula + tellus eu facilisis. Donec nisi turpis, iaculis et arcu a, + aliquet ultrices nisl. Nam in pharetra odio, ac blandit + metus. Suspendisse potenti. Praesent elementum diam non orci + cursus rutrum. Pellentesque condimentum ultrices dignissim. + Sed a tempor ligula, vel luctus sapien. Mauris vehicula + rutrum massa. Duis condimentum, ex quis ullamcorper rhoncus, + erat libero tempor arcu, condimentum facilisis tellus lectus + ut nunc. Pellentesque vitae faucibus diam. Vestibulum eu + erat ex. Ut justo neque, varius aliquet erat vel, + scelerisque convallis lacus. Mauris semper lorem mauris, sed + dignissim eros consectetur nec. +

+
+ )} + /> + +
); } diff --git a/src/components/ClassList/ClassList.js b/src/components/ClassList/ClassList.js index b030255..5c14a37 100644 --- a/src/components/ClassList/ClassList.js +++ b/src/components/ClassList/ClassList.js @@ -1,15 +1,38 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import axios from "axios"; +import { Link } from "react-router-dom"; export default class ClassList extends Component { - constructor() { - super(); + constructor(props) { + super(props); + + this.state = { + students: [] + }; + } + + componentDidMount() { + axios + .get( + `http://localhost:9090/students?class=${this.props.match.params.class}` + ) + .then(response => { + this.setState({ students: response.data }); + }); } render() { return (
-

+

{this.props.match.params.class}

ClassList:

+ {this.state.students.map((student, i) => ( + +

+ {student.first_name} {student.last_name} +

+ + ))}
); } diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 743003e..bf1d6dc 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,12 +1,19 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; export default class Home extends Component { render() { return (
- - - + + + + + + + + +
); } diff --git a/src/components/Student/Student.js b/src/components/Student/Student.js index 6ba478f..98d1c8e 100644 --- a/src/components/Student/Student.js +++ b/src/components/Student/Student.js @@ -1,14 +1,26 @@ -import React, { Component } from 'react'; - +import React, { Component } from "react"; +import axios from "axios"; export default class Student extends Component { constructor() { super(); + this.state = { + studentInfo: {} + }; + } + componentDidMount() { + axios + .get(`http://localhost:9090/students/${this.props.match.params.id}`) + .then(studs => this.setState({ studentInfo: studs.data })); } - render() { return (

Student

+

+ {this.state.studentInfo.first_name} {this.state.studentInfo.last_name} +

+

Grade: {this.state.studentInfo.grade}

+

Email: {this.state.studentInfo.email}

); } diff --git a/src/router.js b/src/router.js new file mode 100644 index 0000000..bf1f058 --- /dev/null +++ b/src/router.js @@ -0,0 +1,18 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; + +import Home from "./components/Home/Home"; +import About from "./components/About/About"; +import ClassList from "./components/ClassList/ClassList"; +import Student from "./components/Student/Student"; + +export default function Router() { + return ( + + + + + + + ); +} From a4b41576be12df3d2720e2770ac29c464cb0df14 Mon Sep 17 00:00:00 2001 From: vincegludovice Date: Fri, 15 Nov 2019 11:25:26 +0800 Subject: [PATCH 2/2] React 4 complete w/ Black Diamond --- src/components/ClassList/ClassList.js | 25 +++++++++++++-------- src/components/Student/Student.js | 31 ++++++++++++++++++++------- src/main.css | 21 ++++++++++++------ 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/components/ClassList/ClassList.js b/src/components/ClassList/ClassList.js index 5c14a37..9ca1062 100644 --- a/src/components/ClassList/ClassList.js +++ b/src/components/ClassList/ClassList.js @@ -23,16 +23,23 @@ export default class ClassList extends Component { render() { return ( -
-

{this.props.match.params.class}

-

ClassList:

- {this.state.students.map((student, i) => ( - -

- {student.first_name} {student.last_name} -

+
+
+ +

Back

- ))} +
+
+

{this.props.match.params.class}

+

ClassList:

+ {this.state.students.map((student, i) => ( + +

+ {student.first_name} {student.last_name} +

+ + ))} +
); } diff --git a/src/components/Student/Student.js b/src/components/Student/Student.js index 98d1c8e..e52de73 100644 --- a/src/components/Student/Student.js +++ b/src/components/Student/Student.js @@ -1,5 +1,7 @@ import React, { Component } from "react"; import axios from "axios"; +import { Link } from "react-router-dom"; +import Router from "../../router"; export default class Student extends Component { constructor() { super(); @@ -10,17 +12,30 @@ export default class Student extends Component { componentDidMount() { axios .get(`http://localhost:9090/students/${this.props.match.params.id}`) - .then(studs => this.setState({ studentInfo: studs.data })); + .then(studs => { + this.setState({ studentInfo: studs.data }); + }); } render() { return ( -
-

Student

-

- {this.state.studentInfo.first_name} {this.state.studentInfo.last_name} -

-

Grade: {this.state.studentInfo.grade}

-

Email: {this.state.studentInfo.email}

+
+
+ +

Back

+ +
+
+

Student

+

+ {this.state.studentInfo.first_name}{" "} + {this.state.studentInfo.last_name} +

+

Grade: {this.state.studentInfo.grade}

+

Email: {this.state.studentInfo.email}

+
); } diff --git a/src/main.css b/src/main.css index 6e69a6f..d6a4486 100644 --- a/src/main.css +++ b/src/main.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Crimson+Text'); +@import url("https://fonts.googleapis.com/css?family=Crimson+Text"); body { margin: 0; @@ -6,8 +6,11 @@ body { font-family: sans-serif; } -h1, h2, h3, p { - font-family: 'Crimson Text', serif; +h1, +h2, +h3, +p { + font-family: "Crimson Text", serif; } .btn { @@ -37,11 +40,11 @@ h1, h2, h3, p { nav { font-size: 24px; padding: 25px 50px; - font-family: 'Crimson Text', serif; + font-family: "Crimson Text", serif; display: flex; justify-content: space-between; border-bottom: solid 1px #222; - background: #143A56; + background: #143a56; color: white; height: 35px; } @@ -53,7 +56,13 @@ nav { background: lightgray; padding: 0 75px 0 0; } - +.subnav-back { + display: flex; + justify-content: flex-start; + width: calc(100% - 75px); + background: lightgray; + padding: 0 0 0 75px; +} .subnav_links { margin: 0 25px; }