From a700548dcb57996e3ac88cd148905df91efedff3 Mon Sep 17 00:00:00 2001 From: lyzamaemirabete Date: Thu, 14 Nov 2019 14:37:01 +0800 Subject: [PATCH 1/3] Steps 1-3 Done --- package-lock.json | 97 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 30 ++++++++++----- src/routes.js | 14 +++++++ 4 files changed, 132 insertions(+), 10 deletions(-) create mode 100644 src/routes.js diff --git a/package-lock.json b/package-lock.json index cfc02c6..090615a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5749,6 +5749,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", @@ -5928,6 +5933,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 +5956,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "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", @@ -8479,6 +8505,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", @@ -10585,6 +10621,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 +11085,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", @@ -12192,6 +12274,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", @@ -12698,6 +12790,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..166c2c9 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "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..de30f03 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 Routes from "./routes"; export default class App extends Component { render() { return ( -
- -
+ +
+ + +
+ ); } } diff --git a/src/routes.js b/src/routes.js new file mode 100644 index 0000000..09c6a13 --- /dev/null +++ b/src/routes.js @@ -0,0 +1,14 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; + +import Home from "./components/Home/Home"; +import About from "./components/About/About"; + +export default function Routes() { + return ( + + + + + ); +} From d5e8afc8f9f4707eebe833185080113ef4ec51ee Mon Sep 17 00:00:00 2001 From: lyzamaemirabete Date: Fri, 15 Nov 2019 10:18:38 +0800 Subject: [PATCH 2/3] Steps 4-9 Done --- package-lock.json | 33 +++++++++++++++-- package.json | 1 + src/components/About/About.js | 51 +++++++++++++++++++++++++-- src/components/ClassList/ClassList.js | 31 +++++++++++++--- src/components/Home/Home.js | 15 +++++--- src/components/Student/Student.js | 22 ++++++++++-- src/routes.js | 8 +++-- 7 files changed, 142 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 090615a..3ed15a2 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", @@ -5957,9 +5984,9 @@ } }, "hoist-non-react-statics": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", - "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "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" } diff --git a/package.json b/package.json index 166c2c9..1bc760c 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "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", 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..9f5cb91 100644 --- a/src/components/Student/Student.js +++ b/src/components/Student/Student.js @@ -1,14 +1,30 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import axios from "axios"; export default class Student extends Component { - constructor() { - super(); + constructor(props) { + super(props); + + this.state = { + studentInfo: {} + }; + } + + componentDidMount() { + axios + .get(`http://localhost:9090/students/${this.props.match.params.id}`) + .then(response => this.setState({ studentInfo: response.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/routes.js b/src/routes.js index 09c6a13..abd4d68 100644 --- a/src/routes.js +++ b/src/routes.js @@ -3,12 +3,16 @@ 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 Routes() { return ( - - + + + + ); } From aa38b4bddff06bafc0a6741ae62fa1081a9cba23 Mon Sep 17 00:00:00 2001 From: lyzamaemirabete Date: Fri, 15 Nov 2019 10:56:04 +0800 Subject: [PATCH 3/3] Done with Black Diamond --- src/components/ClassList/ClassList.js | 6 ++++++ src/components/Student/Student.js | 6 ++++++ src/main.css | 17 ++++++++++++----- src/routes.js | 1 - 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/ClassList/ClassList.js b/src/components/ClassList/ClassList.js index 5c14a37..73ea5c9 100644 --- a/src/components/ClassList/ClassList.js +++ b/src/components/ClassList/ClassList.js @@ -33,6 +33,12 @@ export default class ClassList extends Component { ))} +
); } diff --git a/src/components/Student/Student.js b/src/components/Student/Student.js index 9f5cb91..613a674 100644 --- a/src/components/Student/Student.js +++ b/src/components/Student/Student.js @@ -25,6 +25,12 @@ export default class Student extends Component {

Grade: {this.state.studentInfo.grade}

Email: {this.state.studentInfo.email}

+
); } diff --git a/src/main.css b/src/main.css index 6e69a6f..5bcac09 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; } @@ -81,3 +84,7 @@ a { width: 60%; margin: 0 auto; } +.back-btn { + background-color: lightskyblue; + border: 1px solid black; +} diff --git a/src/routes.js b/src/routes.js index abd4d68..18a1725 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,6 +1,5 @@ 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";