diff --git a/src/App.scss b/src/App.scss
index 0acdfc7..b917b51 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,8 @@
@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap');
.app {
+ text-align: center;
+
.header {
margin-bottom: 3em;
height: 10em;
@@ -15,10 +17,22 @@
}
}
+ .back {
+ width: 80%;
+ margin: auto;
+
+ .back-btn {
+ display: flex;
+ height: 30px;
+ background-color: unset;
+ }
+ }
+
.list {
list-style-type: none;
- width: 60em;
+ max-width: 60em;
margin: auto;
+ padding: 0;
.list-item {
display: inline-block;
diff --git a/src/views/Member.jsx b/src/views/Member.jsx
index 12838cd..e4fbf76 100644
--- a/src/views/Member.jsx
+++ b/src/views/Member.jsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react'
import axios from 'axios'
import history from '../history.js'
import config from '../config.json'
+import './Member.scss'
// teamProps, usersProps, userIdCallback
export default function Member(props) {
@@ -11,7 +12,7 @@ export default function Member(props) {
let [user, setUser] = useState([])
let [teamNames, setTeamNames] = useState([])
- // MARK: Effect
+ // MARK: Effects
// MARK: - Load user info from Tempo backend on initialization
useEffect(() => {
let fetchData = async() => {
@@ -33,6 +34,7 @@ export default function Member(props) {
catch(err) {
setLoading(false)
console.log('Fetch data error: ' + err)
+ history.push('/')
}
}
@@ -48,24 +50,31 @@ export default function Member(props) {
// MARK: Return
return (
-
-
-
-
+
{loading ? (
Loading...
) : (
user !== undefined &&
-
{user.name}
+
+
Member {user.name}
+
+
+
+
+
Username:
-
{user.username}
+
Member of:
{teamNames.map((name, index) => (
- -
- {name}
+
-
+
+ {name}
+
))}
diff --git a/src/views/Member.scss b/src/views/Member.scss
new file mode 100644
index 0000000..797b795
--- /dev/null
+++ b/src/views/Member.scss
@@ -0,0 +1,9 @@
+.member {
+ .username {
+ width: 10em;
+ height: 2em;
+ font-family: 'Covered By Your Grace', cursive;
+ font-size: 25px;
+ margin: auto;
+ }
+}
diff --git a/src/views/Team.jsx b/src/views/Team.jsx
index d5675be..b6b3c5f 100644
--- a/src/views/Team.jsx
+++ b/src/views/Team.jsx
@@ -87,14 +87,16 @@ export default function Team(props) {
return (
-
-
{props.teamProps !== undefined &&
-
{props.teamProps.name}
+ Team {props.teamProps.name}
}
+
+
+
+
{loading ? (
Loading...
) : (
@@ -102,7 +104,9 @@ export default function Team(props) {
Team lead
-
{ userData(team.lead) }
+
Team members
diff --git a/src/views/User.jsx b/src/views/User.jsx
deleted file mode 100644
index 4e49c46..0000000
--- a/src/views/User.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
-import config from '../config.json'
-
-export default function User({ userId }) {
- // MARK: State
- let [loading, setLoading] = useState(true)
- let [user, setUser] = useState([])
-
- // MARK: Effect
-
- // MARK: - Load user info from Tempo backend on initialization
- useEffect(() => {
- let fetchData = async() => {
- setLoading(true)
- try {
- let result = await axios(config.api + '/user/' + userId)
- if (result.data) {
- setUser(result.data)
- }
- setLoading(false)
- }
- catch(err) {
- setLoading(false)
- console.log('Fetch data error: ' + err)
- }
- }
-
- fetchData()
- }, [])
-
- // MARK: Return
- return (
-
-
User { userId }
-
- )
-}