Full features implementation

Author: andeen171

frontend/src/components/HomePage.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import RoomJoinPage from "./RoomJoinPage";
 import CreateRoomPage from "./CreateRoomPage";
 import Room from "./Room";
+import Info from "./Info";
 import { BrowserRouter as Router, Switch, Route, Redirect, Link } from "react-router-dom";
 import { Grid, Button, ButtonGroup, Typography } from '@material-ui/core'
 
@@ -37,6 +38,7 @@ export default class HomePage extends Component {
                 <Grid item xs={12} align="center">
                     <ButtonGroup disableElevation variant="contained" color="primary">
                         <Button color="primary" to="/join" component={Link}>Join a Room</Button>
+                        <Button color="default" to="/info" component={Link}>Info</Button>
                         <Button color="secondary" to="/create" component={Link}>Create a Room</Button>
                     </ButtonGroup>
                 </Grid>
@@ -55,6 +57,7 @@ export default class HomePage extends Component {
                     <Route path="/room/:RoomCode" render={(props) => {
                         return <Room {...props} leaveRoomCallback={this.clearRoomCode} />;
                     }}/>
+                    <Route path="/info" component={Info}/>
                 </Switch>
             </Router>
         )

frontend/src/components/Info.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { Grid, Button, Typography, IconButton } from '@material-ui/core';
+import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import { Link } from 'react-router-dom';
+
+const pages = {
+    JOIN: "pages.join",
+    CREATE: "pages.create",
+};
+
+// testing functional components functions
+export default function Info(props) {
+    const [page, setPage] = useState(pages.JOIN);
+    function joinInfo() {
+        return "Join a Room with your friends using their code or link,\n" +
+               " but dont forget you should have a valid Spotify account";
+    }
+    function createInfo() {
+        return "Create a room and let your friends listen to the same music as you,\n" +
+               "you can set their permissions and how many votes need to skip a song";
+    }
+    useEffect(() => {
+        console.log("rodou")
+        return () => console.log("limpou");
+    })
+    return (
+        <Grid container spacing={1}>
+            <Grid item xs={12} align="center">
+                <Typography component="h4" variant="h4">
+                    What is spotify controller?
+                </Typography>
+            </Grid>
+            <Grid item xs={12} align="center">
+                <Typography variant="body1">
+                    { page === pages.JOIN ? joinInfo() : createInfo() }
+                </Typography>
+            </Grid>
+            <Grid item xs={12} align="center">
+                <IconButton onClick={() => {page === pages.CREATE ? setPage(pages.JOIN) : setPage(pages.CREATE)}}>
+                    {page === pages.CREATE ? ( <NavigateBeforeIcon/>) : (<NavigateNextIcon/>)}
+                </IconButton>
+            </Grid>
+            <Grid item xs={12} align="center">
+                <Button color="secondary" variant="contained" to="/" component={Link}>
+                    Back
+                </Button>
+            </Grid>
+        </Grid>
+    )
+}

frontend/src/components/Room.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Grid, Button, Typography } from '@material-ui/core';
 import CreateRoomPage from "./CreateRoomPage";
 import MusicPlayer from "./MusicPlayer";
+import {Link} from "react-router-dom";
 
 
 export default class Room extends Component {
@@ -87,7 +88,6 @@ export default class Room extends Component {
         };
         fetch('/api/leave-room/', requestOptions).then((_response) => {
             this.props.leaveRoomCallback();
-            this.props.history.push("/");
         });
     }
     updateShowSetting(value) {
@@ -139,7 +139,7 @@ export default class Room extends Component {
                 <MusicPlayer {...this.state.song}/>
                 {this.state.is_host ? this.renderSettingsButton() : null}
                 <Grid item xs={12} align="center">
-                    <Button variant="contained" color="secondary" onClick={this.leaveButtonPressed}>
+                    <Button variant="contained" color="secondary" onClick={this.leaveButtonPressed} to="/" component={Link}>
                         Leave Room
                     </Button>
                 </Grid>

frontend/static/frontend/main.js

@@ -6,6 +6,10 @@
   !*** ./src/components/app.js ***!
   \*******************************/
 
+/*!********************************!*\
+  !*** ./src/components/Info.js ***!
+  \********************************/
+
 /*!********************************!*\
   !*** ./src/components/Room.js ***!
   \********************************/
@@ -142,6 +146,10 @@
   !*** ../node_modules/@material-ui/core/esm/Menu/Menu.js ***!
   \**********************************************************/
 
+/*!**********************************************************!*\
+  !*** ../node_modules/@material-ui/icons/NavigateNext.js ***!
+  \**********************************************************/
+
 /*!**********************************************************!*\
   !*** ../node_modules/@material-ui/system/esm/memoize.js ***!
   \**********************************************************/
@@ -198,6 +206,10 @@
   !*** ../node_modules/@material-ui/core/esm/utils/index.js ***!
   \************************************************************/
 
+/*!************************************************************!*\
+  !*** ../node_modules/@material-ui/icons/NavigateBefore.js ***!
+  \************************************************************/
+
 /*!************************************************************!*\
   !*** ../node_modules/react-transition-group/esm/config.js ***!
   \************************************************************/

frontend/static/frontend/main.js.LICENSE.txt

@@ -9,4 +9,5 @@
     path('join/', index),
     path('create/', index),
     path('room/<str:RoomCode>', index),
+    path('info/', index),
 ]