Merge pull request #2 from InahoAZ/develop

Develop to Main - First Part of UI and API integration done

playroom_backend/api/admin.py

@@ -1,3 +1,5 @@
 from django.contrib import admin
+from .models import Room
 
 # Register your models here.
+admin.site.register(Room)

playroom_backend/api/migrations/0002_auto_20210418_0142.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.1.7 on 2021-04-18 04:42
+
+import api.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='room',
+            name='code',
+            field=models.CharField(default=api.models.generate_unique_code, max_length=8, unique=True),
+        ),
+    ]

playroom_backend/api/serializers.py

@@ -11,4 +11,11 @@ class Meta:
 class CreateRoomSerializer(serializers.ModelSerializer):
     class Meta:
         model = Room
-        fields = ('guest_can_pause', 'votes_to_skip')
+        fields = ('guest_can_pause', 'votes_to_skip')
+
+class UpdateRoomSerializer(serializers.ModelSerializer):
+    code = serializers.CharField(validators=[])  #para quitar el unique=True definido en models.
+
+    class Meta:
+        model = Room
+        fields = ('guest_can_pause', 'votes_to_skip', 'code')

playroom_backend/api/urls.py

@@ -1,10 +1,13 @@
 from django.urls import path, include
-from .views import RoomView, CreateRoomView, GetRoom, JoinRoom
+from .views import RoomView, CreateRoomView, GetRoom, JoinRoom, UserInRoom, LeaveRoom, UpdateRoom
 
 urlpatterns = [
     path('room', RoomView.as_view()),
     path('create-room', CreateRoomView.as_view()),
     path('get-room', GetRoom.as_view()),
     path('join-room', JoinRoom.as_view()),
+    path('user-in-room', UserInRoom.as_view()),
+    path('leave-room', LeaveRoom.as_view()),
+    path('update-room', UpdateRoom.as_view()),
 
 ]

playroom_backend/api/views.py

@@ -1,9 +1,10 @@
 from django.shortcuts import render
 from rest_framework import generics, status
 from .models import Room
-from .serializers import RoomSerializer, CreateRoomSerializer
+from .serializers import RoomSerializer, CreateRoomSerializer, UpdateRoomSerializer
 from rest_framework.views import APIView
 from rest_framework.response import Response
+from django.http import JsonResponse
 # Create your views here.
 
 class RoomView(generics.ListAPIView):
@@ -16,7 +17,7 @@ class CreateRoomView(APIView):
     def post(self, request, format=None):
         if not self.request.session.exists(self.request.session.session_key):
             self.request.session.create()
-
+        print("El que crea es: ", self.request.session.session_key)
         serializer = self.serializer_class(data=request.data)
         if serializer.is_valid():
             guest_can_pause = serializer.data.get('guest_can_pause')
@@ -28,12 +29,13 @@ def post(self, request, format=None):
                 room.guest_can_pause = guest_can_pause
                 room.votes_to_skip = votes_to_skip
                 room.save(update_fields=['guest_can_pause', 'votes_to_skip'])
+                return Response(RoomSerializer(room).data, status=status.HTTP_200_OK)
             else:
                 room = Room(host=host, guest_can_pause=guest_can_pause, votes_to_skip=votes_to_skip)
                 room.save()
-
-            return Response(RoomSerializer(room).data, status=status.HTTP_201_CREATED)
-
+                self.request.session['room_code'] = room.code            
+                return Response(RoomSerializer(room).data, status=status.HTTP_201_CREATED)
+        return Response({'Bad Request' : 'Invalid Data...'}, status=status.HTTP_400_BAD_REQUEST)
 
 class GetRoom(APIView):
     serializer_class = RoomSerializer
@@ -69,3 +71,63 @@ def post(self, request, format=None):
                 return Response({'Message': 'Room Joined!'}, status=status.HTTP_200_OK)
             return Response({'Room not Found': 'Invalid Room Code'}, status=status.HTTP_404_NOT_FOUND)
         return Response({'Bad Request' : 'Code parameter not found in request'}, status=status.HTTP_400_BAD_REQUEST)
+
+
+class UserInRoom(APIView):    
+
+    def get(self, request, format=None):
+        if not self.request.session.exists(self.request.session.session_key):
+            self.request.session.create()
+        data = {
+            'code' : self.request.session.get('room_code')
+        }
+        print(data)
+        return JsonResponse(data, status=status.HTTP_200_OK)
+
+class LeaveRoom(APIView):
+
+    def post(self, request, format=None):
+        print(self.request.session.get('room_code'))
+        if 'room_code' in self.request.session:
+            self.request.session.pop('room_code')
+            host_id = self.request.session.session_key
+            room_results = Room.objects.filter(host=host_id)
+
+            if len(room_results) > 0:
+                room = room_results[0]
+                print("A eliminar: ", room)
+                print('Se eliminop? ', room.delete())               
+
+        return Response({'Message': 'Success'}, status=status.HTTP_200_OK)
+
+class UpdateRoom(APIView):
+    serializer_class = UpdateRoomSerializer
+
+    def patch(self, request, format=None):
+        if not self.request.session.exists(self.request.session.session_key):
+            self.request.session.create()
+
+        serializer = self.serializer_class(data=request.data)
+        if serializer.is_valid():
+            guest_can_pause = serializer.data.get('guest_can_pause')
+            votes_to_skip = serializer.data.get('votes_to_skip')
+            code = serializer.data.get('code')
+
+            queryset = Room.objects.filter(code=code)
+            if not queryset.exists():
+                return Response({'Message' : 'Room not found.'}, status=status.HTTP_404_NOT_FOUND)
+
+            room = queryset[0]
+            user_id = self.request.session.session_key
+            if room.host != user_id:
+                return Response({'Message' : 'You are not the host of this room.'}, status=status.HTTP_403_FORBIDDEN)
+
+            room.guest_can_pause = guest_can_pause
+            room.votes_to_skip = votes_to_skip
+
+            room.save(update_fields=['guest_can_pause', 'votes_to_skip'])
+
+            return Response(RoomSerializer(room).data, status=status.HTTP_200_OK)
+
+        return Response({'Bad Request': 'Invalid Data...'}, status=status.HTTP_400_BAD_REQUEST)
+

playroom_backend/frontend/package.json

@@ -24,6 +24,7 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "react-router-dom": "^5.2.0"
   }
 }

playroom_backend/frontend/src/components/CreateRoomPage.js

@@ -9,18 +9,30 @@ import { Link } from "react-router-dom"
 import Radio from "@material-ui/core/Radio"
 import RadioGroup from "@material-ui/core/RadioGroup"
 import FormControlLabel from "@material-ui/core/FormControlLabel"
+import { Collapse } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert"
 
 
 export default class CreateRoomJoinPage extends Component{
-    defaultVotes = 2;
+    static defaultProps = {
+        votesToSkip: 2,
+        guestCanPause: true,
+        update: false,
+        roomCode: null,
+        updateCallback: () => {},
+    };
+
     constructor(props){
         super(props);
         this.state = {
-            guestCanPause: true,
-            votesToSkip: this.defaultVotes
+            guestCanPause: this.props.guestCanPause,
+            votesToSkip: this.props.votesToSkip,
+            errorMsg: "",
+            successMsg: "",
         };
 
         this.handleRoomButtonPressed = this.handleRoomButtonPressed.bind(this);
+        this.handleUpdateButtonPressed = this.handleUpdateButtonPressed.bind(this);
         this.handleVotesChange = this.handleVotesChange.bind(this);
         this.handleGuestCanPauseChange = this.handleGuestCanPauseChange.bind(this);
     }
@@ -47,24 +59,95 @@ export default class CreateRoomJoinPage extends Component{
                 guest_can_pause: this.state.guestCanPause
             }),
         };
-        fetch('/api/join-room', requestOptions)
+        console.log(requestOptions);
+        fetch('/api/create-room', requestOptions)
             .then((response) => response.json())
             .then((data) => this.props.history.push('/room/' + data.code));
     }
 
+    handleUpdateButtonPressed(){
+        const requestOptions = {
+            method: 'PATCH',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                votes_to_skip: this.state.votesToSkip,
+                guest_can_pause: this.state.guestCanPause,
+                code: this.props.roomCode,
+            }),
+        };
+        console.log(requestOptions);
+        fetch('/api/update-room', requestOptions)
+            .then((response) => {
+                if (response.ok){
+                    this.setState({
+                        successMsg : "Room updated successfully!"
+                    })
+                } else {
+                    this.setState({
+                        errorMsg : "Error updating room..."
+                    })
+
+                }
+                this.props.updateCallback();
+            });
+
+    }
+
+    renderCreateButtons(){
+        return(
+            <Grid container spacing={1}>
+                <Grid item xs={12} align="center">
+                    <Button 
+                        color="primary" 
+                        variant="contained"
+                        onClick={this.handleRoomButtonPressed}
+                    >
+                        Create a Room
+                    </Button>
+                </Grid>
+                <Grid item xs={12} align="center">
+                    <Button color="secondary" variant="contained" to="/" component={Link}>Back</Button>
+                </Grid>
+            </Grid>
+        );
+    }
+
+    renderUpdateButtons(){
+        return(
+            <Grid item xs={12} align="center">
+                <Button 
+                    color="primary" 
+                    variant="contained"
+                    onClick={this.handleUpdateButtonPressed}
+                >
+                    Update Room
+                </Button>
+            </Grid>
+        );
+    }
     render(){
+        const title = this.props.update ? "Update Room" : "Create a Room";
         return (
         <Grid container spacing={1}>
+            <Grid item xs={12} align="center">
+                <Collapse in={this.state.errorMsg !="" || this.state.successMsg !=""}>
+                    {this.state.successMsg != "" ? (
+                        <Alert severity="success" onClose={() => { this.setState({successMsg : ""})}}>{this.state.successMsg}</Alert>
+                    ) : (
+                        <Alert severity="error" onClose={() => { this.setState({errorMsg : ""})}}>{this.state.errorMsg}</Alert>
+                    )}
+                </Collapse>
+            </Grid>
             <Grid item xs={12} align="center">
                 <Typography component='h4' variant='h4'>
-                    Create A Room
+                    {title}
                 </Typography>
             </Grid>
             <Grid item xs={12} align="center">
                 <FormControl component='fieldset'>                    
                     <RadioGroup 
                         row 
-                        defaultValue='true' 
+                        defaultValue={this.props.guestCanPause.toString()} 
                         onChange={this.handleGuestCanPauseChange}
                     >
                         <FormControlLabel
@@ -93,7 +176,7 @@ export default class CreateRoomJoinPage extends Component{
                         required={true} 
                         type="number"
                         onChange={this.handleVotesChange}
-                        defaultValue={this.defaultVotes}
+                        defaultValue={this.state.votesToSkip}
                         inputProps={{
                             min: 1,
                             style: { textAlign: 'center'}
@@ -106,18 +189,7 @@ export default class CreateRoomJoinPage extends Component{
                     </FormHelperText>
                 </FormControl>               
             </Grid>
-            <Grid item xs={12} align="center">
-                <Button 
-                    color="primary" 
-                    variant="contained"
-                    onClick={this.handleRoomButtonPressed}
-                >
-                    Create a Room
-                </Button>
-            </Grid>
-            <Grid item xs={12} align="center">
-                <Button color="secondary" variant="contained" to="/" component={Link}>Back</Button>
-            </Grid>
+            {this.props.update ? this.renderUpdateButtons() : this.renderCreateButtons()}
         </Grid>
         )
     }