#428

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
+import { useQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -19,6 +20,7 @@ import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/
 import { clientAnimationTransition,
 	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPost } from '@/lib/posts'
+import { theatresKeys } from '@/lib/queryKeys'
 import {
   getClientTheatreLayoutMode,
   getClientTheatreTagFlow,
@@ -234,23 +236,30 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 
   const [leftSidebarWidth, setLeftSidebarWidth] = useState (256)
   const [rightSidebarWidth, setRightSidebarWidth] = useState (256)
-  const [sidebarContainerWidth, setSidebarContainerWidth] = useState (
-      () => typeof window === 'undefined' ? 0 : window.innerWidth)
+  const [sidebarContainerWidth, setSidebarContainerWidth] = useState (0)
   const [comments, setComments] = useState<TheatreComment[]> ([])
   const [content, setContent] = useState ('')
   const [editingPost, setEditingPost] = useState<Post | null> (null)
   const [loading, setLoading] = useState (false)
-  const [programmes, setProgrammes] = useState<TheatreProgramme[]> ([])
+  const { data: initialTheatre, error: theatreError } = useQuery ({
+      queryKey: theatresKeys.show (id ?? '', locale),
+      queryFn: () => apiGet<Theatre> (`/theatres/${ id }`, { locale }),
+      enabled: id != null })
+  const { data: initialProgrammes } = useQuery ({
+      queryKey: theatresKeys.programmes (id ?? '', locale),
+      queryFn: () => apiGet<TheatreProgramme[]> (`/theatres/${ id }/programmes`, {
+	  locale, params: { limit: '100' } }), enabled: id != null })
+  const [programmes, setProgrammes] = useState<TheatreProgramme[]> (initialProgrammes ?? [])
   const [sending, setSending] = useState (false)
-  const [status, setStatus] = useState (200)
-  const [theatre, setTheatre] = useState<Theatre | null> (null)
+  const status = isApiError (theatreError) ? theatreError.response?.status ?? 200 : 200
+  const [theatre, setTheatre] = useState<Theatre | null> (initialTheatre ?? null)
   const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
   const [post, setPost] = useState<Post | null> (null)
   const [videoLength, setVideoLength] = useState (0)
   const [weights, setWeights] = useState<TheatrePostSelectionWeights> (INITIAL_WEIGHTS)
   const [layoutMode, setLayoutMode] =
-      useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
-  const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
+      useState<TheatreLayoutMode> ('threeColumns')
+  const [tagFlow, setTagFlow] = useState<TagFlow> ('vertical')
   const { fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<TheatreCommentField> ()
 
@@ -259,6 +268,11 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     setClientTheatreLayoutMode (mode)
   }
 
+  useEffect (() => {
+    setLayoutMode (getClientTheatreLayoutMode ())
+    setTagFlow (getClientTheatreTagFlow ())
+  }, [])
+
   const changeTagFlow = (flow: TagFlow) => {
     setTagFlow (flow)
     setClientTheatreTagFlow (flow)
@@ -348,39 +362,20 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     if (!(id))
       return
 
-    let cancelled = false
-
     setComments ([])
     setEditingPost (null)
     setPost (null)
-    setProgrammes ([])
-    setTheatre (null)
+    setProgrammes (initialProgrammes ?? [])
+    setTheatre (initialTheatre ?? null)
     theatreInfoReceivedAtRef.current = performance.now ()
     setTheatreInfo (INITIAL_THEATRE_INFO)
     setVideoLength (0)
     setWeights (INITIAL_WEIGHTS)
     lastCommentNoRef.current = 0
 
-    void (async () => {
-      try
-      {
-	const data = await apiGet<Theatre> (`/theatres/${ id }`, { locale })
-	if (!(cancelled))
-	  setTheatre (data)
-      }
-      catch (error)
-      {
-	setStatus (isApiError (error) ? error.response?.status ?? 200 : 200)
-      }
-    }) ()
-
-    void refreshProgrammes ()
     void refreshWeights ()
 
-    return () => {
-      cancelled = true
-    }
-  }, [id, refreshProgrammes, refreshWeights, locale])
+  }, [id, initialProgrammes, initialTheatre, refreshWeights, locale])
 
   useEffect (() => {
     if (!(id))