Styling (ongoing)

src/App.css

@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import Router from './components/Router'
+import './App.scss'
 
 export default function App() {
   return (
-    <div>
+    <div className='app'>
 			<Router />
     </div>
   );

src/App.scss

@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap');
+
+.app {
+	.header {
+		margin-bottom: 3em;
+		height: 10em;
+		width: 80%;
+		margin: auto auto 2em auto;
+		border-bottom: thin solid lightgray;
+		display: table;
+
+		h1 {
+			vertical-align: middle;
+			display: table-cell;
+		}
+	}
+
+	.list {
+		list-style-type: none;
+		width: 60em;
+		margin: auto;
+
+		.list-item {
+			display: inline-block;
+		}
+	}
+
+	.selector-btn {
+		margin: 20px;
+		width: 10em;
+		height: 5em;
+		font-family: 'Covered By Your Grace', cursive;
+		font-size: 25px;
+		cursor: pointer;
+	}
+}

src/components/FilterForm.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
+import './FilterForm.scss'
 
 export default function FilterForm({ filterCallback }) {
 	return (
 		<form>
-			<div className="form-group">
-				<label htmlFor="title">Filter </label>
-				<input onChange={filterCallback} />
+			<div className='form-group'>
+				<input placeholder='Filter' onChange={filterCallback} />
 			</div>
 		</form>
 	)

src/components/FilterForm.scss

@@ -0,0 +1,8 @@
+.form-group {
+	input {
+		margin: 10px;
+		font-size: 20px;
+		text-align: center;
+		padding: 10px;
+	}
+}

src/components/TeamList.jsx

@@ -7,7 +7,7 @@ export default function TeamList({ teams, users, selectTeam, selectUser }) {
 				{teams.map(team => (
 					<li className = 'list-item' key={team.id}>
 						<div>
-							<button onClick={() => selectTeam(team)}>
+							<button className='selector-btn' onClick={() => selectTeam(team)}>
 								{ team.name }
 							</button>
 						</div>

src/views/Home.jsx

@@ -5,15 +5,14 @@ import axios from 'axios'
 import config from '../config.json'
 import TeamList from '../components/TeamList.jsx'
 import FilterForm from '../components/FilterForm.jsx'
+import './Home.scss'
 
 export default function Home(props) {
 	// MARK: State
 	let [loading, setLoading] = useState(true)
-	let [loadingDetails, setLoadingDetails] = useState(true)
 	let [loadingUsers, setLoadingUsers] = useState(true)
 	let [teams, setTeams] = useState([])
 	let [users, setUsers] = useState([])
-	let [teamDetails, setTeamDetails] = useState([])
 	let [filteredTeams, setFilteredTeams] = useState([])
 
 	// MARK: Effects
@@ -39,37 +38,6 @@ export default function Home(props) {
 		fetchData()
 	}, [])
 
-	// MARK: - Load teams' details
-	useEffect(() => {
-		let fetched = 0
-
-		teams.map(team => {
-			let fetchData = async() => {
-				try {
-					setLoadingDetails(true)
-					let result = await axios(config.api + '/team/' + team.id)
-					if (result.data) {
-						fetched++
-						setTeamDetails(t => [...t, result.data])
-						if (fetched === teams.length) {
-							setLoadingDetails(false)
-						}
-					}
-				}
-				catch(err) {
-					fetched++
-					if (fetched === teams.length) {
-							setLoadingDetails(false)
-					}
-					console.log('Fetch data error: ' + err)
-				}
-			}
-
-			fetchData()
-
-			return null
-		})
-	}, [teams])
 
 	// MARK: - Load users
 	useEffect(() => {
@@ -115,7 +83,9 @@ export default function Home(props) {
 	// MARK: Return
 	return (
 		<div className='home'>
-			<h1>Tempo</h1>
+			<div className='header'>
+				<h1>Tempo teams</h1>
+			</div>
 
 			<FilterForm filterCallback = { filterCallback } />
 
@@ -129,19 +99,6 @@ export default function Home(props) {
 				/>
 			)}
 
-			{loadingDetails || loadingUsers ? (<div>Loading...</div>) : (
-				teamDetails !== undefined &&
-				<div className='details'>
-					<ul className='list'>
-						{teamDetails.map(team => (
-							<li className = 'list-item' key={team.id}>
-								{ team.members.length}
-							</li>
-						))}
-					</ul>
-				</div>
-			)}
-
 		</div>
 	)
 }

src/views/Home.scss

@@ -0,0 +1,3 @@
+.home {
+	text-align: center;
+}

src/views/Team.jsx

@@ -4,6 +4,7 @@ import axios from 'axios'
 import history from  '../history.js'
 import config from '../config.json'
 import FilterForm from '../components/FilterForm.jsx'
+import './Team.scss'
 
 // teamProps, usersProps, userIdCallback
 export default function Team(props) {
@@ -25,16 +26,24 @@ export default function Team(props) {
 
 					result.data.members.map(memberId => {
 						let arr = props.usersProps.filter(el => el.id === memberId)
-						let tupple = {
-							name: arr[0].name,
-							id: memberId
+						if (arr[0] !== undefined) {
+							let tupple = {
+								name: arr[0].name,
+								id: memberId
+							}
+							setMembers(t => [...t, tupple])
+							setFilteredMembers(t => [...t, tupple])
+						}
+						else {
+							history.push('/')
 						}
-						setMembers(t => [...t, tupple])
-						setFilteredMembers(t => [...t, tupple])
 
 						return null
 					})
 				}
+				else {
+					history.push('/')
+				}
 				setLoading(false)
 			}
 			catch(err) {
@@ -49,7 +58,12 @@ export default function Team(props) {
 	// MARK: Helpers
 	let userData = (userId) => {
 		let arr = props.usersProps.filter(el => el.id === userId)
-		return arr[0].name
+		if (arr[0] !== undefined) {
+			return arr[0].name
+		}
+		else {
+			history.push('/')
+		}
 	}
 
 	let selectUser = (id) => {
@@ -71,12 +85,14 @@ export default function Team(props) {
 
 	// MARK: Return
 	return (
-		<div className='user'>
+		<div className='team'>
 
 			<button onClick={navBack}>Back</button>
 
 			{props.teamProps !== undefined &&
-			<h1>{props.teamProps.name}</h1>
+				<div className='header'>
+					<h1>{props.teamProps.name}</h1>
+				</div>
 			}
 
 			<FilterForm filterCallback = { filterCallback } />
@@ -93,7 +109,7 @@ export default function Team(props) {
 					<ul className='list'>
 						{filteredMembers.map((member, index) => (
 							<li className = 'list-item' key={index}>
-								<button onClick={() => selectUser(member.id)}>
+								<button className='selector-btn' onClick={() => selectUser(member.id)}>
 									{member.name}
 								</button>
 							</li>

src/views/Team.scss

@@ -0,0 +1,3 @@
+.team {
+	text-align: center;
+}