change getPost to associate with specific movie ID in community posts

Author: Kerushani

backend/api/migrations/0008_note_movie_imdb_id_note_movie_title.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.20 on 2025-05-24 16:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0007_alter_userprofile_avatar'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='note',
+            name='movie_imdb_id',
+            field=models.CharField(blank=True, max_length=20, null=True),
+        ),
+        migrations.AddField(
+            model_name='note',
+            name='movie_title',
+            field=models.CharField(blank=True, max_length=200, null=True),
+        ),
+    ]

backend/api/models.py

@@ -44,6 +44,8 @@ class Note(models.Model):
     author = models.ForeignKey(User, on_delete=models.CASCADE, related_name="notes")
     parent = models.ForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='replies')
     edited = models.BooleanField(default=False)
+    movie_imdb_id = models.CharField(max_length=20, null=True, blank=True)  # Store IMDb ID of the movie
+    movie_title = models.CharField(max_length=200, null=True, blank=True)    # Store movie title for easier querying
 
     class Meta:
         ordering = ['-created_at']

backend/api/serializers.py

@@ -32,7 +32,7 @@ class Meta:
         model = Note
         fields = ["id", "title", "content", "created_at", "updated_at", "author",
                  "author_username", "author_id", "author_avatar", "time_ago",
-                 "edited", "replies", "reply_count", "parent"]
+                 "edited", "replies", "reply_count", "parent", "movie_imdb_id", "movie_title"]
         extra_kwargs = {"author": {"read_only": True}}
 
     def get_replies(self, obj):

backend/api/views.py

@@ -13,10 +13,22 @@ class NoteListCreate(generics.ListCreateAPIView):
     permission_classes = [permissions.IsAuthenticated]
 
     def get_queryset(self):
+        movie_imdb_id = self.request.query_params.get('movie_imdb_id', None)
+        if movie_imdb_id:
+            return Note.objects.filter(
+                parent=None,
+                movie_imdb_id=movie_imdb_id
+            ).order_by('-created_at')
         return Note.objects.filter(parent=None).order_by('-created_at')
 
     def perform_create(self, serializer):
-        serializer.save(author=self.request.user)
+        movie_imdb_id = self.request.data.get('movie_imdb_id')
+        movie_title = self.request.data.get('movie_title')
+        serializer.save(
+            author=self.request.user,
+            movie_imdb_id=movie_imdb_id,
+            movie_title=movie_title
+        )
 
 class NoteDetail(generics.RetrieveUpdateDestroyAPIView):
     queryset = Note.objects.all()

backend/mydatabase

@@ -7,7 +7,7 @@ import NotFound from "./pages/NotFound"
 import ProtectedRoute from "./components/ProtectedRoute"
 import Home from "./pages/Home"
 import Welcome from "./pages/Welcome"
-import ActiveOrders from "./pages/ActiveOrders"
+import Spotlight from "./pages/Spotlight"
 import Menu from "./pages/Menu"
 import Profile from "./pages/Profile"
 
@@ -34,9 +34,9 @@ function App() {
           }
         >
           <Route index element={<Welcome />} />
-          <Route path="active-orders" element={<ActiveOrders />} />
+          <Route path="spotlight" element={<Spotlight />} />
           <Route path="menu" element={<Menu />} />
-          <Route path="order-history" element={<Profile />} />
+          <Route path="profile" element={<Profile />} />
         </Route>
 
         <Route path="/login" element={<Login />} />

frontend/src/App.jsx

@@ -39,7 +39,7 @@ const Sidebar = () => {
       <h2 className="logo">Flicks</h2>
       <nav>
         <NavLink to="/" end className={getLinkClass}>Home</NavLink>
-        <NavLink to="/active-orders" className={getLinkClass}>Spotlight</NavLink>
+        <NavLink to="/spotlight" className={getLinkClass}>Spotlight</NavLink>
          {/* TO DO: Add chat functionality */}
         {/* <NavLink to="/menu" className={getLinkClass}>Chat</NavLink> */}
         <div className="profile-menu" ref={dropdownRef}>
@@ -55,8 +55,8 @@ const Sidebar = () => {
           </button>
           {showDropdown && (
             <div className="dropdown-menu">
-              <NavLink to="/order-history" className="dropdown-item">
-                Dashboard
+              <NavLink to="/profile" className="dropdown-item">
+                Profile
               </NavLink>
               <NavLink to="/logout" className="dropdown-item">
                 Logout

frontend/src/components/Sidebar.jsx

@@ -5,7 +5,7 @@ import SoundtrackWidget from "../components/SoundtrackWidget"
 import "../style/Home.css"
 import "../style/MovieReviews.css"
 
-const MovieReviews = () => {
+const Spotlight = () => {
     const [posts, setPosts] = useState([]);
     const [postContent, setPostContent] = useState("");
     const [postTitle, setPostTitle] = useState("");
@@ -27,7 +27,9 @@ const MovieReviews = () => {
         const savedDate = localStorage.getItem('movieDate');
 
         if (savedMovie && savedDate === today) {
-            setDailyMovie(JSON.parse(savedMovie));
+            const movie = JSON.parse(savedMovie);
+            setDailyMovie(movie);
+            getMovieReviews(movie.imdbID);
             setLoading(false);
             return;
         }
@@ -42,6 +44,7 @@ const MovieReviews = () => {
 
             if (data.Response === "True") {
                 setDailyMovie(data);
+                getMovieReviews(data.imdbID);
                 localStorage.setItem('dailyMovie', JSON.stringify(data));
                 localStorage.setItem('movieDate', today);
             }
@@ -52,7 +55,6 @@ const MovieReviews = () => {
     };
 
     useEffect(() => {
-        getPosts();
         getDailyMovie();
         getCurrentUser();
     }, []);
@@ -66,28 +68,37 @@ const MovieReviews = () => {
         }
     };
 
-    const getPosts = () => {
-        api.get("/api/notes/")
-            .then((res) => res.data)
-            .then((data) => setPosts(data))
-            .catch((err) => console.error("Failed to fetch posts:", err));
+    const getMovieReviews = async (imdbId) => {
+        try {
+            const response = await api.get("/api/notes/", {
+                params: { movie_imdb_id: imdbId }
+            });
+            setPosts(response.data);
+        } catch (err) {
+            console.error("Failed to fetch movie reviews:", err);
+        }
     };
 
-    const deletePost = (id) => {
-        api.delete(`/api/notes/delete/${id}/`)
-            .then((res) => {
-                if (res.status === 204) getPosts();
-            })
-            .catch((error) => console.error("Error deleting post:", error));
+    const deletePost = async (id) => {
+        try {
+            const response = await api.delete(`/api/notes/delete/${id}/`);
+            if (response.status === 204) {
+                getMovieReviews(dailyMovie.imdbID);
+            }
+        } catch (error) {
+            console.error("Error deleting post:", error);
+        }
     };
 
     const editPost = async (id, newContent) => {
         try {
             const response = await api.put(`/api/notes/${id}/`, {
-                content: newContent
+                content: newContent,
+                movie_imdb_id: dailyMovie.imdbID,
+                movie_title: dailyMovie.Title
             });
             if (response.status === 200) {
-                getPosts();
+                getMovieReviews(dailyMovie.imdbID);
             }
         } catch (error) {
             console.error("Error editing post:", error);
@@ -99,33 +110,38 @@ const MovieReviews = () => {
             const response = await api.post("/api/notes/", {
                 title: "Reply",
                 content: content,
-                parent: parentId
+                parent: parentId,
+                movie_imdb_id: dailyMovie.imdbID,
+                movie_title: dailyMovie.Title
             });
             if (response.status === 201) {
-                getPosts();
+                getMovieReviews(dailyMovie.imdbID);
             }
         } catch (error) {
             console.error("Error replying to post:", error);
         }
     };
 
-    const createPost = (e) => {
+    const createPost = async (e) => {
         e.preventDefault();
         if (!postTitle.trim() || !postContent.trim()) {
             return;
         }
-        api.post("/api/notes/", {
-            title: postTitle,
-            content: postContent
-        })
-        .then((res) => {
-            if (res.status === 201) {
-                getPosts();
+        try {
+            const response = await api.post("/api/notes/", {
+                title: postTitle,
+                content: postContent,
+                movie_imdb_id: dailyMovie.imdbID,
+                movie_title: dailyMovie.Title
+            });
+            if (response.status === 201) {
+                getMovieReviews(dailyMovie.imdbID);
                 setPostTitle("");
                 setPostContent("");
             }
-        })
-        .catch((error) => console.error("Error creating post:", error));
+        } catch (error) {
+            console.error("Error creating post:", error);
+        }
     };
 
     return (
@@ -220,4 +236,4 @@ const MovieReviews = () => {
     );
 };
 
-export default MovieReviews;
+export default Spotlight;