#68 4.10 Filter out expired screening on movie details page

src/app/admin/page.jsx

@@ -38,6 +38,7 @@ export default function AdminPanel() {
     roomError,
     setRoomError,
     confirmDeleteRoom,
+    loading,
   } = useAdminData()
 
   return (
@@ -56,12 +57,14 @@ export default function AdminPanel() {
                 screenings={screenings}
                 onDeleteMovie={confirmDeleteMovie}
                 onDeleteScreening={confirmDeleteScreening}
+                loading={loading}
               />
               <ErrorMessage message={deleteError} onClose={() => setDeleteError(null)} />
             </section>
 
             <section className="admin-page__section">
-              <AdminRoomList rooms={rooms} onDeleteRoom={confirmDeleteRoom} />
+              <h3 className="admin-room__list-title">Alla salonger</h3>
+              <AdminRoomList rooms={rooms} onDeleteRoom={confirmDeleteRoom} loading={loading} />
               <ErrorMessage message={roomError} onClose={() => setRoomError(null)} />
             </section>
           </>
@@ -111,6 +114,7 @@ export default function AdminPanel() {
             </section>
 
             <section className="admin-page__section">
+              <h3 className="admin-room__list-title">Alla salonger</h3>
               <AdminRoomList rooms={rooms} onDeleteRoom={confirmDeleteRoom} />
               <ErrorMessage message={roomError} onClose={() => setRoomError(null)} />
             </section>

src/app/movies/[id]/page.jsx

@@ -1,7 +1,7 @@
 import mongoose from 'mongoose'
 import MovieDetailCard from '@/components/MovieDetailCard'
 import { findMovieById } from '@/lib/db/movieDbService'
-import { getAllScreeningsWithMovieInfo } from '@/lib/db/screeningDbService'
+import { getActiveScreeningsWithMovieInfo } from '@/lib/db/screeningDbService'
 import { notFound } from 'next/navigation'
 import { translatePlot } from '@/lib/services/translateApiService'
 
@@ -25,7 +25,7 @@ export default async function MovieDetailPage({ params }) {
     : 'Ursäkta, ingen filmbeskrivning finns tillgänglig just nu.'
 
   //filter screenings for only one specific movie and group them by date
-  const allScreenings = await getAllScreeningsWithMovieInfo()
+  const allScreenings = await getActiveScreeningsWithMovieInfo()
   const screenings = allScreenings
     .filter((s) => s.movie._id.toString() === movieId)
     .reduce((acc, curr) => {

src/components/MovieDetailCard.jsx

@@ -51,7 +51,11 @@ export default function MovieDetailCard({
           {/*Booking tickets*/}
           <div className={styles.booking}>
             <div className={styles['booking-header']}>Boka biljetter</div>
-            <ShowtimesTabs screenings={screenings} />
+            {screenings.length > 0 ? (
+              <ShowtimesTabs screenings={screenings} />
+            ) : (
+              <p className={styles.noScreenings}>Inga kommande visningar tillgängliga just nu.</p>
+            )}
           </div>
         </div>
       </div>

src/components/admin/AdminList.jsx

@@ -3,9 +3,17 @@
 import { useAdminList } from '@/hooks/useAdminList'
 import { formatTime, formatDate, formatDateTime } from '@/lib/utils/formatDateTime'
 
-export default function AdminList({ movies, screenings, onDeleteMovie, onDeleteScreening }) {
+export default function AdminList({ movies, screenings, onDeleteMovie, onDeleteScreening, loading }) {
   const { isExpanded, toggle } = useAdminList()
 
+  if (loading) {
+    return <p className="admin-page__loading">Laddar filmer...</p>
+  }
+
+  if (movies.length === 0) {
+    return <p className="admin-page__empty">Inga filmer tillgängliga</p>
+  }
+
   return (
     <ul className="admin-list">
       {movies.map((movie) => {
@@ -34,7 +42,9 @@ export default function AdminList({ movies, screenings, onDeleteMovie, onDeleteS
                     return (
                       <li
                         key={screening._id}
-                        className={`admin-list__screening ${isExpired ? 'admin-list__screening--expired' : 'admin-list__screening--active'}`}
+                        className={`admin-list__screening ${
+                          isExpired ? 'admin-list__screening--expired' : 'admin-list__screening--active'
+                        }`}
                       >
                         <span className="admin-list__screening-info">
                           {formatTime(screening.date)} – {formatTime(screening.endTime)} ({formatDate(screening.date)})

src/components/admin/AdminRoomList.jsx

@@ -3,12 +3,19 @@
 import { useState } from 'react'
 import AdminRoomModal from './AdminRoomModal'
 
-export default function AdminRoomList({ rooms, onDeleteRoom }) {
+export default function AdminRoomList({ rooms, onDeleteRoom, loading }) {
   const [selectedRoom, setSelectedRoom] = useState(null)
 
+  if (loading) {
+    return <p className="admin-page__loading">Laddar salonger...</p>
+  }
+
+  if (rooms.length === 0) {
+    return <p className="admin-page__empty">Inga salonger tillgängliga</p>
+  }
+
   return (
     <div className="admin-room__list">
-      <h3 className="admin-room__list-title">Alla salonger</h3>
       <ul>
         {rooms.map((room) => (
           <li key={room._id} className="admin-room__item">

src/hooks/useAdminData.js

@@ -13,11 +13,12 @@ export function useAdminData() {
   const [deleteError, setDeleteError] = useState(null)
   const [rooms, setRooms] = useState([])
   const [roomError, setRoomError] = useState(null)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    loadMovies()
-    loadScreenings()
-    loadRooms()
+    Promise.all([loadMovies(), loadScreenings(), loadRooms()]).finally(() => {
+      setLoading(false)
+    })
   }, [])
 
   const loadMovies = async () => {
@@ -140,5 +141,6 @@ export function useAdminData() {
     roomError,
     setRoomError,
     confirmDeleteRoom,
+    loading,
   }
 }

src/lib/db/screeningDbService.js

@@ -9,6 +9,12 @@ export async function getAllScreeningsWithMovieInfo() {
   return await Screening.find().populate('movie', 'title runtime').populate('room', 'name').lean()
 }
 
+export async function getActiveScreeningsWithMovieInfo() {
+  await markExpiredScreenings()
+
+  return await Screening.find({ status: 'active' }).populate('movie', 'title runtime').populate('room', 'name').lean()
+}
+
 export async function getUpcomingScreenings() {
   const today = new Date()
   const fiveDaysFromNow = new Date(today)

src/styles/admin/AdminPage.scss

@@ -57,4 +57,18 @@
       cursor: pointer;
     }
   }
+
+  &__loading {
+    text-align: center;
+    color: #1b3a57;
+    font-weight: bold;
+    font-size: 1.3rem;
+  }
+
+  &__empty {
+    text-align: center;
+    color: #1b3a57;
+    font-weight: bold;
+    font-size: 1.3rem;
+  }
 }