update liked_videos handling in frontend and backend

backend/videoflix/users/serializer.py

@@ -4,4 +4,10 @@ from .models import CustomUser
 class UserSerializer(serializers.ModelSerializer):
   class Meta:
     model = CustomUser
-    fields = ["id", "username", "email", "liked_videos"]
+    fields = ["id", "username", "email", "liked_videos"]
+    
+
+class LikedVideosSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = CustomUser
+        fields = ['liked_videos']

backend/videoflix/users/views.py

@@ -4,7 +4,7 @@ from rest_framework.decorators import api_view, permission_classes
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 from rest_framework import status
-from .serializer import UserSerializer
+from .serializer import LikedVideosSerializer, UserSerializer
 from .models import CustomUser
 
 @api_view(['GET', 'POST'])
@@ -45,4 +45,19 @@ def user_detail(request, id):
     
     elif request.method == 'DELETE':
       user.delete()
-      return Response(status=status.HTTP_204_NO_CONTENT)
+      return Response(status=status.HTTP_204_NO_CONTENT)
+
+@api_view(['PUT'])
+@permission_classes([IsAuthenticated])
+def user_liked_detail(request, id):
+    try:
+        user = CustomUser.objects.get(pk=id)
+    except CustomUser.DoesNotExist:
+        return Response(status=status.HTTP_404_NOT_FOUND)
+
+    if request.method == 'PUT':
+        serializer = LikedVideosSerializer(user, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

backend/videoflix/videoflix/urls.py

@@ -43,6 +43,7 @@ urlpatterns = [
     # Users URLs
     path('users/', user_views.user_list, name='user_list'),
     path('users/<int:id>/', user_views.user_detail, name='user_detail'),
+    path('users/liked/<int:id>/', user_views.user_liked_detail, name='user_liked_detail'),
 
     # Authentication URLs
     path('auth/', AuthView.as_view(), name='auth_view'),

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -59,7 +59,7 @@
         "
       ></app-btn-large>
       <div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
-        @if(currentUserLikedCurrentMovie) {
+        @if(checkLikeMovies(currentMovie[0].id)) {
         <img
           class="filled"
           src="./../../../../assets/img/favorite-filled.svg"

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss

@@ -94,9 +94,9 @@ section {
     background-color: blue;
     border-radius: 50%;
     cursor: pointer;
+    transition: 300ms ease-in-out;
     &:hover {
       background-color: $white;
-      transition: 300ms ease-in-out;
       img {
         filter: brightness(0) saturate(100%) invert(18%) sepia(98%)
           saturate(7267%) hue-rotate(342deg) brightness(94%) contrast(119%);

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -29,7 +29,7 @@ export class HeroBannerComponent {
   }>();
   @Output() moviesChange = new EventEmitter<any[]>();
 
-  currentUserLikedCurrentMovie: boolean = false;
+  currentUserLikedMovies: number[] = [];
   environmentBaseUrl: string = environment.baseUrl;
   movieIsUploaded: { [resolution: string]: boolean } = {
     '480': false,
@@ -42,25 +42,44 @@ export class HeroBannerComponent {
     public userService: UserService
   ) {}
 
+  ngOnInit() {
+    this.loadLikedMovies();
+  }
+
+  checkLikeMovies(videoId: number) {
+    return this.currentUserLikedMovies.includes(videoId);
+  }
+
   async loadLikedMovies() {
     try {
       const likedMovies = await this.userService.getLikedMovies();
-      this.currentUserLikedCurrentMovie = likedMovies.liked_videos.includes(
+      this.currentUserLikedMovies = likedMovies.liked_videos;
-        this.currentMovie[0].id
-      );
     } catch (error) {
       console.error(error);
     }
   }
 
-  toggleLikeMovie(movieId: number) {
+  toggleLikeMovie(movieId: number): void {
-    this.currentUserLikedCurrentMovie = !this.currentUserLikedCurrentMovie;
+    if (this.currentUserLikedMovies.includes(movieId)) {
+      this.currentUserLikedMovies = this.currentUserLikedMovies.filter(
+        (id) => id !== movieId
+      );
+    } else {
+      this.currentUserLikedMovies.push(movieId);
+    }
+    this.updateLikeMovies();
+  }
+
+  updateLikeMovies() {
+    const body = {
+      liked_videos: this.currentUserLikedMovies,
+    };
+    this.userService.updateLikedMovies(body);
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['currentMovie'] && this.currentMovie.length > 0) {
       const movieId = this.currentMovie[0]?.id;
-      this.loadLikedMovies();
       if (movieId) {
         this.movieService
           .isMovieResolutionUploaded(movieId)

frontend/src/app/services/user.service.ts

@@ -14,10 +14,15 @@ export class UserService {
   async getLikedMovies(): Promise<any> {
     const url = environment.baseUrl + `/users/${this.currentUserId}/`;
     const headers = this.getAuthHeaders();
-
     return lastValueFrom(this.http.get(url, { headers }));
   }
 
+  updateLikedMovies(likedMovies: any) {
+    const url = `${environment.baseUrl}/users/liked/${this.currentUserId}/`;
+    const headers = this.getAuthHeaders();
+    return lastValueFrom(this.http.put(url, likedMovies, { headers }));
+  }
+
   private getAuthHeaders(): HttpHeaders {
     let authToken = localStorage.getItem('authToken');
     if (!authToken) {