change color by button

src/App.js

@@ -26,6 +26,7 @@ class App extends Component {
 			error: null,
 			isLoaded: false,
 			logins: logins,
+			isByStudent: false
 		};
 	}
 
@@ -46,13 +47,21 @@ class App extends Component {
 		})
 	}
 
-	showDeleteModal = (event) => {
-		event.preventDefault();
-
+	showByStudent = (e) => {
+		e.preventDefault();
+		this.setState({
+			isByStudent: true
+		})
+	}
+	showByClasses = (e) => {
+		e.preventDefault();
+		this.setState({
+			isByStudent: false
+		})
 	}
 
 	render() {
-		const { currentTimeFormatState, logins, uvs } = this.state;
+		const { currentTimeFormatState, logins, isByStudent } = this.state;
 		return (
 			<div>
 				<header className="App-header">
@@ -66,10 +75,29 @@ class App extends Component {
 								onDataUpdated={this.logDataUpdate}
 								id="schedule"
 								logins={logins}
+								isByStudent={isByStudent}
 							/>
 						</div>
 					</div>
 					<div className="left">
+
+
+						<button
+							type="submit"
+							className="btn btn-primary btn-sm"
+							onClick={this.showByStudent}
+						>
+							Show by student
+                        	</button>
+						<button
+							type="submit"
+							className="btn btn-primary btn-sm"
+							onClick={this.showByClasses}
+						>
+							Show by class
+                        	</button>
+
+
 						<LoginInput
 							handleClick={(this.addLogin)}
 						/>
@@ -79,13 +107,14 @@ class App extends Component {
 						<StudentsList
 							logins={logins}
 							handleClick={(this.deleteLogin)}
+
 						/>
 					</div>
 				</div>
 				<footer className="App-footer">
 					UTC SR03 P20 - Lyu Jiawen - Linh Nguyen
 				</footer>
-			</div>
+			</div >
 		);
 
 	}

src/HOC/withFetchData.js

@@ -56,6 +56,7 @@ export default WrappedComponent => {
 
         render() {
             const { error, isLoaded, data, login } = this.state
+
             if (error) {
                 return <div>Erreur : {error.message}</div>;
             } else if (!isLoaded) {
@@ -63,7 +64,11 @@ export default WrappedComponent => {
             } else {
                 return (
 
-                    <WrappedComponent data={data} login={login}  {...this.props} />
+                    <WrappedComponent
+                        data={data}
+                        login={login}
+                        {...this.props}
+                    />
                 );
             }
 

src/HOC/withUVs.js

@@ -104,9 +104,9 @@ const getCurrentClasses = data => Array.from(new Set(data.map(elem => elem.uv)))
 
 const withUVs = WrappedComponent => props => {
     const { data } = props;
+
     const uvs = extractUvDateInfo(data)
     const classes = getCurrentClasses(data)
-    console.log("classes:", classes)
     return <WrappedComponent
         classes={classes}
         events={uvs}

src/components/Scheduler/Scheduler.js

@@ -38,24 +38,11 @@ const changeColorForEachClass = (events, classes) => {
     })
 }
 
-
-
-function getUVs(events) {
-    let uvs = [];
-
-    events.map(event => {
-        if (uvs.indexOf(event.text) == -1) {
-            uvs.push(event.text)
-        }
-    });
-
-    console.log("uvs in scheduler:", uvs);
-
-    return uvs;
-}
+const changeColor = isByStudent => (events, logins, classes) => isByStudent ? changeColorForEachStudent(events, logins) : changeColorForEachClass(events, classes)
 
 export default class Scheduler extends Component {
 
+
     initSchedulerEvents() {
         if (scheduler._$initialized) {
             return;
@@ -102,25 +89,24 @@ export default class Scheduler extends Component {
 
         this.initSchedulerEvents();
 
-        const { events, logins } = this.props;
-        console.log("logins in scheduler:", logins)
+        const { events, logins, isByStudent, classes } = this.props;
         scheduler.init(this.schedulerContainer, new Date(2020, 5, 10));
         scheduler.clearAll();
         scheduler.parse(events);
-        changeColorForEachStudent(events, logins);
+        console.log(this.props.isByStudent)
+        changeColor(isByStudent)(events, logins, classes)
     }
 
     shouldComponentUpdate(nextProps) {
-        return this.props.events.length !== nextProps.events.length;
+        return (this.props.events.length !== nextProps.events.length) || (this.props.isByStudent !== nextProps.isByStudent);
     }
 
     componentDidUpdate() {
-        const { events, logins, classes } = this.props
+        const { events, logins, classes, isByStudent } = this.props
         scheduler.init(this.schedulerContainer, new Date(2020, 5, 10));
         scheduler.clearAll();
         scheduler.parse(events);
-        // changeColorForEachStudent(events, logins);
-        changeColorForEachClass(events, classes)
+        changeColor(isByStudent)(events, logins, classes)
     }
 
     setTimeFormat(state) {