perf(api): alléger les requêtes du calendrier, des stats et de la médiathèque

Trois défauts se cumulaient : des réponses bien plus larges que nécessaire,
aucun index en base, et des boucles de requêtes là où une seule suffisait.

Réponses
- /api/scheduled-posts renvoyait la ligne `social_pages` entière, jetons
  d'accès Facebook et TikTok compris, jusque dans le navigateur. Seules les
  colonnes réellement affichées sont désormais sélectionnées.
- Le filtre de dates est poussé en SQL. Il était appliqué en JavaScript après
  avoir chargé tout l'historique — que le client ne bornait jamais. Le
  calendrier demande maintenant les six semaines affichées, le sélecteur de
  date les créneaux à venir, le bloc « publications récentes » ses 90 jours.
- /api/media accepte `limit` et `offset` (sans eux, réponse inchangée : des
  écrans doivent retrouver un média par son identifiant). La médiathèque
  pagine côté serveur au lieu de tout charger pour afficher cinq vignettes, et
  l'écran de création ne demande que les douze médias qu'il propose. Le total
  voyage dans l'en-tête X-Total-Count pour garder le compteur juste.

Index
- server/migrate.ts est le seul script exécuté au démarrage et n'en créait
  aucun ; ceux de migration-docker.sql ne servaient à rien, ce fichier n'étant
  monté nulle part. Postgres n'indexant pas les clés étrangères, le calendrier,
  l'historique et le scheduler parcouraient les tables entières. S'y ajoutent
  deux index partiels pour les boucles de fond : publications en attente et
  suivi asynchrone TikTok.

Requêtes
- /api/stats lisait quatre tables entières pour en compter les lignes : c'est
  désormais quatre COUNT filtrés.
- Les vues d'administration listaient les utilisateurs puis interrogeaient les
  pages de chacun ; une seule requête les remplace.
- getPostWithMedia et l'API externe chargeaient les médias un par un.
- /api/reels/ongoing chargeait tous les posts de l'utilisateur pour n'en garder
  que ceux en cours de génération, toutes les trois secondes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qns6Gcpd95bCHWUxySh4Ew
This commit is contained in:
Claude committed 2026-09-10 06:39:16 +00:00
1 parent 25bf0981bd
commit 94e961d0f1
11 files changed
+431 -135

No files matched your search

+22 -1
View File
@@ -13,6 +13,24 @@ import { useMediaQuery } from "@/hooks/use-media-query";
import { PreviewModal } from "@/components/preview-modal"; import { PreviewModal } from "@/components/preview-modal";
import type { Media } from "@shared/schema"; import type { Media } from "@shared/schema";
/**
* Bornes de la grille affichée : 42 cases à partir du lundi qui précède le 1er
* du mois. Demander cette fenêtre plutôt que tout l'historique évite de charger
* des années de publications pour en afficher six semaines.
*/
function visibleRange(currentDate: Date): { startDate: string; endDate: string } {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const firstDay = new Date(year, month, 1);
const startingDayOfWeek = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
const start = new Date(year, month, 1 - startingDayOfWeek);
const end = new Date(year, month, 1 - startingDayOfWeek + 42);
end.setMilliseconds(-1); // fin de la 42e journée
return { startDate: start.toISOString(), endDate: end.toISOString() };
}
export default function CalendarView() { export default function CalendarView() {
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [editDialogOpen, setEditDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -22,8 +40,11 @@ export default function CalendarView() {
const { toast } = useToast(); const { toast } = useToast();
const isDesktop = useMediaQuery("(min-width: 768px)"); const isDesktop = useMediaQuery("(min-width: 768px)");
// La fenêtre fait partie de la clé : changer de mois redéclenche la requête.
const range = visibleRange(currentDate);
const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({ const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
queryKey: ["/api/scheduled-posts"], queryKey: ["/api/scheduled-posts", range],
refetchInterval: 30000, // Auto-refresh every 30 seconds refetchInterval: 30000, // Auto-refresh every 30 seconds
}); });
+42 -10
View File
@@ -2,25 +2,57 @@ import { useState, useCallback, useRef, useEffect } from "react";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog"; import { Dialog, DialogContent } from "@/components/ui/dialog";
import { useMutation, useQuery } from "@tanstack/react-query"; import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient"; import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient";
import { MediaThumbnail } from "@/components/media-thumbnail"; import { MediaThumbnail } from "@/components/media-thumbnail";
import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2, ZoomIn, Camera } from "lucide-react"; import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2, ZoomIn, Camera } from "lucide-react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { SiFacebook, SiInstagram } from "react-icons/si"; import { SiFacebook, SiInstagram } from "react-icons/si";
/** Nombre de vignettes chargées par page. */
const MEDIA_PAGE_SIZE = 15;
export default function MediaUpload() { export default function MediaUpload() {
const { toast } = useToast(); const { toast } = useToast();
const [selectedFile, setSelectedFile] = useState<any>(null); const [selectedFile, setSelectedFile] = useState<any>(null);
const [visibleCount, setVisibleCount] = useState(5);
const [zoomImage, setZoomImage] = useState<string | null>(null); const [zoomImage, setZoomImage] = useState<string | null>(null);
const loadMoreRef = useRef<HTMLDivElement>(null); const loadMoreRef = useRef<HTMLDivElement>(null);
const cameraInputRef = useRef<HTMLInputElement>(null); const cameraInputRef = useRef<HTMLInputElement>(null);
const { data: mediaList } = useQuery({ // Pagination côté serveur : la médiathèque entière transitait pour n'afficher
queryKey: ["/api/media"], // que les premières vignettes. La clé reste préfixée par « /api/media » afin
// que les invalidations existantes continuent de la rafraîchir.
const {
data: mediaPages,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useInfiniteQuery({
queryKey: ["/api/media", "pages"],
initialPageParam: 0,
queryFn: async ({ pageParam }) => {
const response = await fetch(`/api/media?limit=${MEDIA_PAGE_SIZE}&offset=${pageParam}`, {
credentials: "include",
});
if (!response.ok) {
// Même traitement que les autres requêtes : une session expirée renvoie
// vers l'écran de connexion plutôt que sur une médiathèque vide.
if (response.status === 401) handleUnauthorized("/api/media");
throw new Error("Impossible de charger la médiathèque");
}
const items = (await response.json()) as any[];
const total = Number(response.headers.get("X-Total-Count"));
return { items, total: Number.isFinite(total) ? total : items.length };
},
getNextPageParam: (lastPage, allPages) => {
const loaded = allPages.reduce((count, page) => count + page.items.length, 0);
return loaded < lastPage.total ? loaded : undefined;
},
}); });
const mediaList = mediaPages?.pages.flatMap(page => page.items) ?? [];
const totalMedia = mediaPages?.pages[0]?.total ?? 0;
const [uploadingCount, setUploadingCount] = useState(0); const [uploadingCount, setUploadingCount] = useState(0);
const uploadMutation = useMutation({ const uploadMutation = useMutation({
@@ -163,8 +195,8 @@ export default function MediaUpload() {
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
if (entries[0].isIntersecting && mediaList && visibleCount < (mediaList as any[]).length) { if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
setVisibleCount(prev => Math.min(prev + 5, (mediaList as any[]).length)); fetchNextPage();
} }
}, },
{ threshold: 0.1 } { threshold: 0.1 }
@@ -179,7 +211,7 @@ export default function MediaUpload() {
observer.unobserve(loadMoreRef.current); observer.unobserve(loadMoreRef.current);
} }
}; };
}, [mediaList, visibleCount]); }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
return ( return (
<div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg"> <div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
@@ -268,13 +300,13 @@ export default function MediaUpload() {
<h4 className="text-sm font-semibold text-foreground flex items-center justify-between"> <h4 className="text-sm font-semibold text-foreground flex items-center justify-between">
<span>Fichiers téléchargés</span> <span>Fichiers téléchargés</span>
<span className="text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1 rounded-full"> <span className="text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1 rounded-full">
{(mediaList as any[])?.length || 0} média(s) {totalMedia} média(s)
</span> </span>
</h4> </h4>
<div className="max-h-[500px] overflow-y-auto"> <div className="max-h-[500px] overflow-y-auto">
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
{(mediaList as any[])?.slice(0, visibleCount).map((media: any) => ( {mediaList.map((media: any) => (
<div <div
key={media.id} key={media.id}
onClick={() => setSelectedFile(media)} onClick={() => setSelectedFile(media)}
@@ -316,7 +348,7 @@ export default function MediaUpload() {
</div> </div>
{/* Élément sentinelle pour le scroll infini */} {/* Élément sentinelle pour le scroll infini */}
{(mediaList && visibleCount < (mediaList as any[]).length) ? ( {hasNextPage ? (
<div ref={loadMoreRef} className="flex justify-center py-4 mt-3"> <div ref={loadMoreRef} className="flex justify-center py-4 mt-3">
<Loader2 className="w-5 h-5 text-primary animate-spin" /> <Loader2 className="w-5 h-5 text-primary animate-spin" />
</div> </div>
+16 -1
View File
@@ -29,6 +29,16 @@ import { Trash2 } from "lucide-react";
import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient"; import { apiRequest } from "@/lib/queryClient";
/** Profondeur d'historique du bloc « Publications récentes ». */
const RECENT_WINDOW_DAYS = 90;
/** Minuit, pour que la clé de requête reste stable d'un rendu à l'autre. */
function startOfDay(date: Date): Date {
const copy = new Date(date);
copy.setHours(0, 0, 0, 0);
return copy;
}
export default function RecentPublications() { export default function RecentPublications() {
const [previewModalOpen, setPreviewModalOpen] = useState(false); const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] }); const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
@@ -37,8 +47,13 @@ export default function RecentPublications() {
const { toast } = useToast(); const { toast } = useToast();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Ce bloc n'affiche que les dix dernières publications : inutile de faire
// remonter tout l'historique pour cela.
const since = new Date();
since.setDate(since.getDate() - RECENT_WINDOW_DAYS);
const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({ const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
queryKey: ['/api/scheduled-posts'], queryKey: ['/api/scheduled-posts', { startDate: startOfDay(since).toISOString() }],
}); });
// Filter and sort attempted posts (scheduled in the past) // Filter and sort attempted posts (scheduled in the past)
+28 -1
View File
@@ -69,13 +69,40 @@ export async function apiRequest(
return res; return res;
} }
/**
* Construit l'URL d'une requête à partir de sa clé.
*
* Les segments texte forment le chemin (`['/api/posts', id]`). Un objet en
* dernière position porte les paramètres de requête : c'est ce qui permet de
* demander une fenêtre de dates plutôt que tout l'historique
* (`['/api/scheduled-posts', { startDate, endDate }]`).
*/
export function urlFromQueryKey(queryKey: readonly unknown[]): string {
const segments = [...queryKey];
const last = segments[segments.length - 1];
if (last !== null && typeof last === "object") {
segments.pop();
const params = new URLSearchParams();
for (const [key, value] of Object.entries(last as Record<string, unknown>)) {
if (value !== undefined && value !== null && value !== "") {
params.set(key, String(value));
}
}
const query = params.toString();
return query ? `${segments.join("/")}?${query}` : segments.join("/");
}
return segments.join("/");
}
type UnauthorizedBehavior = "returnNull" | "throw"; type UnauthorizedBehavior = "returnNull" | "throw";
export const getQueryFn: <T>(options: { export const getQueryFn: <T>(options: {
on401: UnauthorizedBehavior; on401: UnauthorizedBehavior;
}) => QueryFunction<T> = }) => QueryFunction<T> =
({ on401: unauthorizedBehavior }) => ({ on401: unauthorizedBehavior }) =>
async ({ queryKey }) => { async ({ queryKey }) => {
const url = queryKey.join("/") as string; const url = urlFromQueryKey(queryKey);
const res = await fetch(url, { const res = await fetch(url, {
credentials: "include", credentials: "include",
}); });
+17 -3
View File
@@ -104,6 +104,16 @@ function SortableMediaItem({
); );
} }
/** Nombre de médias récents proposés à la sélection. */
const RECENT_MEDIA_COUNT = 12;
/** Minuit, pour que la clé de requête reste stable d'un rendu à l'autre. */
function startOfToday(): Date {
const date = new Date();
date.setHours(0, 0, 0, 0);
return date;
}
export default function NewPostMobile() { export default function NewPostMobile() {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
const [, navigate] = useLocation(); const [, navigate] = useLocation();
@@ -127,8 +137,10 @@ export default function NewPostMobile() {
}); });
const pages = allPages.filter(p => p.platform !== 'tiktok'); const pages = allPages.filter(p => p.platform !== 'tiktok');
// Seuls les douze derniers médias sont proposés ici : autant ne demander
// que ceux-là plutôt que toute la médiathèque.
const { data: allMedia = [] } = useQuery<Media[]>({ const { data: allMedia = [] } = useQuery<Media[]>({
queryKey: ['/api/media'], queryKey: ['/api/media', { limit: RECENT_MEDIA_COUNT }],
}); });
const mediaList = useMemo(() => { const mediaList = useMemo(() => {
@@ -142,11 +154,13 @@ export default function NewPostMobile() {
const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0; const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
return dateB - dateA; return dateB - dateA;
}) })
.slice(0, 12); .slice(0, RECENT_MEDIA_COUNT);
}, [allMedia, recentUploads]); }, [allMedia, recentUploads]);
// Ne sert qu'à griser les créneaux déjà pris dans le sélecteur de date : le
// passé n'a aucune influence sur une planification à venir.
const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({ const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
queryKey: ['/api/scheduled-posts'], queryKey: ['/api/scheduled-posts', { startDate: startOfToday().toISOString() }],
}); });
const uploadMutation = useMutation({ const uploadMutation = useMutation({
+17 -3
View File
@@ -102,6 +102,16 @@ function SortableMediaItem({
); );
} }
/** Nombre de médias récents proposés à la sélection. */
const RECENT_MEDIA_COUNT = 12;
/** Minuit, pour que la clé de requête reste stable d'un rendu à l'autre. */
function startOfToday(): Date {
const date = new Date();
date.setHours(0, 0, 0, 0);
return date;
}
export default function NewPost() { export default function NewPost() {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
const [, navigate] = useLocation(); const [, navigate] = useLocation();
@@ -124,8 +134,10 @@ export default function NewPost() {
}); });
const pages = allPages.filter(p => p.platform !== 'tiktok'); const pages = allPages.filter(p => p.platform !== 'tiktok');
// Seuls les douze derniers médias sont proposés ici : autant ne demander
// que ceux-là plutôt que toute la médiathèque.
const { data: allMedia = [] } = useQuery<Media[]>({ const { data: allMedia = [] } = useQuery<Media[]>({
queryKey: ['/api/media'], queryKey: ['/api/media', { limit: RECENT_MEDIA_COUNT }],
}); });
// Afficher seulement les 12 derniers médias triés par date décroissante // Afficher seulement les 12 derniers médias triés par date décroissante
@@ -138,11 +150,13 @@ export default function NewPost() {
const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0; const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
return dateB - dateA; // Tri décroissant (plus récent en premier) return dateB - dateA; // Tri décroissant (plus récent en premier)
}) })
.slice(0, 12); .slice(0, RECENT_MEDIA_COUNT);
}, [allMedia]); }, [allMedia]);
// Ne sert qu'à griser les créneaux déjà pris dans le sélecteur de date : le
// passé n'a aucune influence sur une planification à venir.
const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({ const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
queryKey: ['/api/scheduled-posts'], queryKey: ['/api/scheduled-posts', { startDate: startOfToday().toISOString() }],
}); });
const uploadMutation = useMutation({ const uploadMutation = useMutation({
+47
View File
@@ -213,6 +213,53 @@ export async function migrate() {
ADD COLUMN IF NOT EXISTS "publish_status" text; ADD COLUMN IF NOT EXISTS "publish_status" text;
`); `);
// 4. Index de performance
//
// Postgres n'indexe pas les clés étrangères tout seul : sans ces index, le
// calendrier, l'historique et le scheduler faisaient des parcours complets
// de table à chaque appel. Ils existaient dans migration-docker.sql, qui
// n'est monté nulle part — ce fichier-ci est le seul exécuté au démarrage.
//
// Chaque index est créé isolément : une table absente sur une vieille
// installation ne doit pas empêcher la création des suivants.
const indexes: [string, string][] = [
// Filtres par propriétaire
["idx_posts_user_id", `CREATE INDEX IF NOT EXISTS "idx_posts_user_id" ON "posts" ("user_id")`],
["idx_media_user_id", `CREATE INDEX IF NOT EXISTS "idx_media_user_id" ON "media" ("user_id")`],
["idx_social_pages_user_id", `CREATE INDEX IF NOT EXISTS "idx_social_pages_user_id" ON "social_pages" ("user_id")`],
["idx_ai_generations_user_id", `CREATE INDEX IF NOT EXISTS "idx_ai_generations_user_id" ON "ai_generations" ("user_id")`],
// Jointures
["idx_scheduled_posts_post_id", `CREATE INDEX IF NOT EXISTS "idx_scheduled_posts_post_id" ON "scheduled_posts" ("post_id")`],
["idx_post_media_post_id", `CREATE INDEX IF NOT EXISTS "idx_post_media_post_id" ON "post_media" ("post_id")`],
["idx_post_media_media_id", `CREATE INDEX IF NOT EXISTS "idx_post_media_media_id" ON "post_media" ("media_id")`],
["idx_post_analytics_post_id", `CREATE INDEX IF NOT EXISTS "idx_post_analytics_post_id" ON "post_analytics" ("post_id")`],
["idx_page_analytics_history_page_date", `CREATE INDEX IF NOT EXISTS "idx_page_analytics_history_page_date" ON "page_analytics_history" ("page_id", "date")`],
["idx_user_page_permissions_user_id", `CREATE INDEX IF NOT EXISTS "idx_user_page_permissions_user_id" ON "user_page_permissions" ("user_id")`],
["idx_user_page_permissions_page_id", `CREATE INDEX IF NOT EXISTS "idx_user_page_permissions_page_id" ON "user_page_permissions" ("page_id")`],
// Calendrier et historique : « les publications de ces pages, sur cette période »
["idx_scheduled_posts_page_scheduled_at", `CREATE INDEX IF NOT EXISTS "idx_scheduled_posts_page_scheduled_at" ON "scheduled_posts" ("page_id", "scheduled_at")`],
// Scheduler (toutes les minutes) : seules les publications non encore
// traitées comptent, d'où un index partiel qui reste minuscule.
["idx_scheduled_posts_pending", `CREATE INDEX IF NOT EXISTS "idx_scheduled_posts_pending" ON "scheduled_posts" ("scheduled_at") WHERE "published_at" IS NULL`],
// Suivi asynchrone TikTok (toutes les deux minutes)
["idx_scheduled_posts_publish_id", `CREATE INDEX IF NOT EXISTS "idx_scheduled_posts_publish_id" ON "scheduled_posts" ("publish_id") WHERE "publish_id" IS NOT NULL`],
// Reels en cours de génération
["idx_posts_generation_status", `CREATE INDEX IF NOT EXISTS "idx_posts_generation_status" ON "posts" ("generation_status") WHERE "generation_status" IS NOT NULL`],
];
for (const [name, statement] of indexes) {
try {
await client.query(statement);
} catch (error) {
console.warn(`[Migration] Index ${name} non créé:`, error instanceof Error ? error.message : error);
}
}
console.log("[Migration] Safe migration completed."); console.log("[Migration] Safe migration completed.");
} catch (error) { } catch (error) {
console.error("[Migration] Error during migration:", error); console.error("[Migration] Error during migration:", error);
+46 -36
View File
@@ -111,6 +111,20 @@ function requireAdmin(req: Request, res: Response, next: NextFunction) {
next(); next();
} }
/** Convertit un paramètre de requête en entier positif, ou `undefined`. */
function parsePositiveInt(value: unknown): number | undefined {
if (typeof value !== "string" || value === "") return undefined;
const parsed = Number.parseInt(value, 10);
return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
}
/** Convertit un paramètre de requête en date, ou `undefined` s'il est inutilisable. */
function parseDateParam(value: unknown): Date | undefined {
if (typeof value !== "string" || value === "") return undefined;
const date = new Date(value);
return Number.isNaN(date.getTime()) ? undefined : date;
}
export async function registerRoutes(app: Express): Promise<Server> { export async function registerRoutes(app: Express): Promise<Server> {
@@ -544,39 +558,28 @@ export async function registerRoutes(app: Express): Promise<Server> {
const user = req.user as User; const user = req.user as User;
const userId = user.id; const userId = user.id;
const posts = await storage.getPosts(userId);
const pages = await storage.getSocialPages(userId);
const media = await storage.getMedia(userId);
const aiGenerations = await storage.getAiGenerations(userId);
// Statistiques actuelles
const scheduledPosts = posts.filter(p => p.status === "scheduled").length;
const currentAiTexts = aiGenerations.length;
const currentMedia = media.length;
// Calculer les statistiques de la période précédente (hier pour les textes IA, mois dernier pour les posts) // Calculer les statistiques de la période précédente (hier pour les textes IA, mois dernier pour les posts)
const now = new Date(); const now = new Date();
const yesterday = new Date(now); const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1); yesterday.setDate(yesterday.getDate() - 1);
yesterday.setHours(0, 0, 0, 0); yesterday.setHours(0, 0, 0, 0);
const today = new Date(yesterday);
today.setDate(today.getDate() + 1);
const lastMonth = new Date(now); const lastMonth = new Date(now);
lastMonth.setMonth(lastMonth.getMonth() - 1); lastMonth.setMonth(lastMonth.getMonth() - 1);
// Textes IA générés hier const stats = await storage.getDashboardStats(userId, {
const aiTextsYesterday = aiGenerations.filter(gen => { yesterdayStart: yesterday,
if (!gen.createdAt) return false; yesterdayEnd: today,
const genDate = new Date(gen.createdAt); lastMonth,
genDate.setHours(0, 0, 0, 0); });
return genDate.getTime() === yesterday.getTime();
}).length;
// Posts planifiés le mois dernier const scheduledPosts = stats.scheduledPosts;
const scheduledPostsLastMonth = posts.filter(p => { const scheduledPostsLastMonth = stats.scheduledPostsLastMonth;
if (!p.createdAt) return false; const currentAiTexts = stats.aiTextsGenerated;
const createdDate = new Date(p.createdAt); const aiTextsYesterday = stats.aiTextsYesterday;
return p.status === "scheduled" && createdDate < lastMonth;
}).length;
// Calculer les variations en pourcentage // Calculer les variations en pourcentage
const aiTextChange = aiTextsYesterday > 0 const aiTextChange = aiTextsYesterday > 0
@@ -591,11 +594,11 @@ export async function registerRoutes(app: Express): Promise<Server> {
scheduledPosts, scheduledPosts,
scheduledPostsChange: scheduledPostsChange > 0 ? `+${scheduledPostsChange}%` : `${scheduledPostsChange}%`, scheduledPostsChange: scheduledPostsChange > 0 ? `+${scheduledPostsChange}%` : `${scheduledPostsChange}%`,
scheduledPostsTrending: scheduledPostsChange >= 0 ? "up" : "down", scheduledPostsTrending: scheduledPostsChange >= 0 ? "up" : "down",
connectedPages: pages.length, connectedPages: stats.connectedPages,
aiTextsGenerated: currentAiTexts, aiTextsGenerated: currentAiTexts,
aiTextsChange: aiTextChange > 0 ? `+${aiTextChange}%` : `${aiTextChange}%`, aiTextsChange: aiTextChange > 0 ? `+${aiTextChange}%` : `${aiTextChange}%`,
aiTextsTrending: aiTextChange >= 0 ? "up" : "down", aiTextsTrending: aiTextChange >= 0 ? "up" : "down",
mediaStored: media.length, mediaStored: stats.mediaStored,
}); });
} catch (error) { } catch (error) {
console.error("Error fetching stats:", error); console.error("Error fetching stats:", error);
@@ -723,7 +726,19 @@ export async function registerRoutes(app: Express): Promise<Server> {
try { try {
const user = req.user as User; const user = req.user as User;
const userId = user.id; const userId = user.id;
const media = await storage.getMedia(userId);
// Sans paramètre, la médiathèque entière est renvoyée comme avant : les
// écrans qui doivent retrouver un média par son identifiant en dépendent.
const limit = parsePositiveInt(req.query.limit);
const offset = parsePositiveInt(req.query.offset);
const media = await storage.getMedia(userId, { limit, offset });
// Le total permet à l'appelant paginé de savoir s'il reste des pages —
// et à la médiathèque d'afficher un compteur juste sans tout charger.
if (limit !== undefined) {
res.setHeader("X-Total-Count", String(await storage.getMediaCount(userId)));
}
res.json(media); res.json(media);
} catch (error) { } catch (error) {
console.error("Error fetching media:", error); console.error("Error fetching media:", error);
@@ -1415,16 +1430,15 @@ export async function registerRoutes(app: Express): Promise<Server> {
const userId = user.id; const userId = user.id;
const { startDate, endDate } = req.query; const { startDate, endDate } = req.query;
const start = startDate ? new Date(startDate as string) : undefined; // Une date illisible est ignorée plutôt que transmise telle quelle à SQL.
const end = endDate ? new Date(endDate as string) : undefined; const start = parseDateParam(startDate);
const end = parseDateParam(endDate);
let scheduledPosts; let scheduledPosts;
if (user.role === 'admin') { if (user.role === 'admin') {
// Admin voit tous les posts programmés - on récupère toutes les pages // Admin voit tous les posts programmés - on récupère toutes les pages
const allPages = await storage.getAllUsers().then(users => const allPages = await storage.getAllSocialPages();
Promise.all(users.map(u => storage.getSocialPages(u.id)))
).then(pagesArrays => pagesArrays.flat());
const allPageIds = allPages.map(p => p.id); const allPageIds = allPages.map(p => p.id);
if (allPageIds.length > 0) { if (allPageIds.length > 0) {
@@ -1577,11 +1591,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
if (user.role === 'admin') { if (user.role === 'admin') {
// Les admins voient toutes les pages de tous les utilisateurs // Les admins voient toutes les pages de tous les utilisateurs
const allUsers = await storage.getAllUsers(); pages = await storage.getAllSocialPages();
const allPages = await Promise.all(
allUsers.map(u => storage.getSocialPages(u.id))
);
pages = allPages.flat();
} else { } else {
// Les utilisateurs normaux voient uniquement les pages auxquelles ils ont accès // Les utilisateurs normaux voient uniquement les pages auxquelles ils ont accès
pages = await storage.getUserAccessiblePages(userId); pages = await storage.getUserAccessiblePages(userId);
+14 -15
View File
@@ -270,9 +270,7 @@ router.get("/posts", async (req, res) => {
} }
pageIds = [pageId]; pageIds = [pageId];
} else { } else {
const users = await storage.getAllUsers(); pageIds = (await storage.getAllSocialPages()).map(p => p.id);
const allPages = await Promise.all(users.map(u => storage.getSocialPages(u.id)));
pageIds = allPages.flat().map(p => p.id);
} }
if (pageIds.length === 0) { if (pageIds.length === 0) {
@@ -312,19 +310,20 @@ router.get("/posts", async (req, res) => {
if (post.status !== postStatus && postStatus !== "all") continue; if (post.status !== postStatus && postStatus !== "all") continue;
if (!postMap.has(post.id)) { if (!postMap.has(post.id)) {
// Récupérer les médias du post // Récupérer les médias du post, en une requête plutôt qu'une par média
const postMediaLinks = await storage.getPostMedia(post.id); const postMediaLinks = await storage.getPostMedia(post.id);
const mediaItems: Array<{ id: string; url: string; type: string }> = []; const byId = new Map(
for (const link of postMediaLinks) { (await storage.getMediaByIds(postMediaLinks.map(link => link.mediaId)))
const mediaItem = await storage.getMediaById(link.mediaId); .map(item => [item.id, item])
if (mediaItem) { );
mediaItems.push({ const mediaItems = postMediaLinks
id: mediaItem.id, .map(link => byId.get(link.mediaId))
url: mediaItem.originalUrl, .filter((item): item is NonNullable<typeof item> => item !== undefined)
type: mediaItem.type, .map(item => ({
}); id: item.id,
} url: item.originalUrl,
} type: item.type,
}));
postMap.set(post.id, { postMap.set(post.id, {
id: post.id, id: post.id,
+1 -4
View File
@@ -898,10 +898,7 @@ reelsRouter.get('/reels/config', async (req: Request, res: Response) => {
reelsRouter.get('/reels/ongoing', async (req: Request, res: Response) => { reelsRouter.get('/reels/ongoing', async (req: Request, res: Response) => {
try { try {
const user = req.user as User; const user = req.user as User;
const allPosts = await storage.getPosts(user.id); const ongoing = await storage.getOngoingReelPosts(user.id);
const ongoing = allPosts.filter(
(p) => p.generationStatus === 'processing' || p.generationStatus === 'pending'
);
res.json(ongoing); res.json(ongoing);
} catch (error) { } catch (error) {
console.error('❌ Error fetching ongoing reels:', error); console.error('❌ Error fetching ongoing reels:', error);
+181 -61
View File
@@ -44,7 +44,7 @@ import {
type InsertFacebookConfig, type InsertFacebookConfig,
} from "@shared/schema"; } from "@shared/schema";
import { db } from "./db"; import { db } from "./db";
import { eq, and, gte, lte, desc, asc, isNull, isNotNull, inArray, notInArray } from "drizzle-orm"; import { eq, and, gte, lte, desc, asc, isNull, isNotNull, inArray, notInArray, getTableColumns, sql, type SQL } from "drizzle-orm";
import { encrypt, decrypt, isEncrypted } from "./utils/encryption"; import { encrypt, decrypt, isEncrypted } from "./utils/encryption";
/** /**
@@ -71,24 +71,73 @@ function decryptPageTokens(page: SocialPage): SocialPage {
}; };
} }
/** Bornes temporelles utilisées pour les comparaisons du tableau de bord. */
export interface DashboardStatsRange {
yesterdayStart: Date;
yesterdayEnd: Date;
lastMonth: Date;
}
export interface DashboardStats {
scheduledPosts: number;
scheduledPostsLastMonth: number;
connectedPages: number;
aiTextsGenerated: number;
aiTextsYesterday: number;
mediaStored: number;
}
/**
* Colonnes renvoyées pour une publication planifiée.
*
* On ne sélectionne pas la ligne `social_pages` entière : elle porte les jetons
* d'accès Facebook et TikTok, qui partaient jusqu'ici dans chaque réponse HTTP
* — y compris vers le navigateur, qui n'en fait rien.
*/
const SCHEDULED_POST_COLUMNS = {
...getTableColumns(scheduledPosts),
post: {
id: posts.id,
userId: posts.userId,
content: posts.content,
status: posts.status,
scheduledFor: posts.scheduledFor,
aiGenerated: posts.aiGenerated,
generationStatus: posts.generationStatus,
generationProgress: posts.generationProgress,
createdAt: posts.createdAt,
},
page: {
id: socialPages.id,
pageId: socialPages.pageId,
pageName: socialPages.pageName,
platform: socialPages.platform,
avatarUrl: socialPages.avatarUrl,
},
};
export interface IStorage { export interface IStorage {
// Users // Users
getUser(id: string): Promise<User | undefined>; getUser(id: string): Promise<User | undefined>;
getUserByUsername(username: string): Promise<User | undefined>; getUserByUsername(username: string): Promise<User | undefined>;
getAllUsers(): Promise<User[]>; getAllUsers(): Promise<User[]>;
getDashboardStats(userId: string, options: DashboardStatsRange): Promise<DashboardStats>;
createUser(user: InsertUser): Promise<User>; createUser(user: InsertUser): Promise<User>;
updateUser(id: string, user: Partial<InsertUser>): Promise<User>; updateUser(id: string, user: Partial<InsertUser>): Promise<User>;
deleteUser(id: string): Promise<void>; deleteUser(id: string): Promise<void>;
// Social Pages // Social Pages
getSocialPages(userId: string): Promise<SocialPage[]>; getSocialPages(userId: string): Promise<SocialPage[]>;
getAllSocialPages(): Promise<SocialPage[]>;
getSocialPage(id: string): Promise<SocialPage | undefined>; getSocialPage(id: string): Promise<SocialPage | undefined>;
createSocialPage(page: InsertSocialPage): Promise<SocialPage>; createSocialPage(page: InsertSocialPage): Promise<SocialPage>;
updateSocialPage(id: string, page: Partial<SocialPage>): Promise<SocialPage>; updateSocialPage(id: string, page: Partial<SocialPage>): Promise<SocialPage>;
deleteSocialPage(id: string): Promise<void>; deleteSocialPage(id: string): Promise<void>;
// Media // Media
getMedia(userId: string): Promise<Media[]>; getMedia(userId: string, options?: { limit?: number; offset?: number }): Promise<Media[]>;
getMediaByIds(ids: string[]): Promise<Media[]>;
getMediaCount(userId: string): Promise<number>;
getMediaById(id: string): Promise<Media | undefined>; getMediaById(id: string): Promise<Media | undefined>;
createMedia(media: InsertMedia): Promise<Media>; createMedia(media: InsertMedia): Promise<Media>;
deleteMedia(id: string): Promise<void>; deleteMedia(id: string): Promise<void>;
@@ -98,6 +147,7 @@ export interface IStorage {
getPosts(userId: string): Promise<Post[]>; getPosts(userId: string): Promise<Post[]>;
getPost(id: string): Promise<Post | undefined>; getPost(id: string): Promise<Post | undefined>;
getPostWithMedia(id: string): Promise<{ post: Post; media: Media[] } | undefined>; getPostWithMedia(id: string): Promise<{ post: Post; media: Media[] } | undefined>;
getOngoingReelPosts(userId: string): Promise<Post[]>;
createPost(post: InsertPost): Promise<Post>; createPost(post: InsertPost): Promise<Post>;
updatePost(id: string, post: Partial<InsertPost>): Promise<Post>; updatePost(id: string, post: Partial<InsertPost>): Promise<Post>;
updatePostGenerationStatus(id: string, status: string, progress: number, error?: string): Promise<Post>; updatePostGenerationStatus(id: string, status: string, progress: number, error?: string): Promise<Post>;
@@ -194,12 +244,58 @@ export class DatabaseStorage implements IStorage {
await db.delete(users).where(eq(users.id, id)); await db.delete(users).where(eq(users.id, id));
} }
/**
* Compteurs du tableau de bord.
*
* Comptés en SQL : les charger en mémoire revenait à lire quatre tables
* entières — tous les posts, toutes les pages, tous les médias, toutes les
* générations — pour n'en garder que le nombre de lignes.
*/
async getDashboardStats(userId: string, range: DashboardStatsRange): Promise<DashboardStats> {
const [postCounts, generationCounts, pageCount, mediaCount] = await Promise.all([
db
.select({
scheduled: sql<string>`count(*) filter (where ${posts.status} = 'scheduled')`,
scheduledLastMonth: sql<string>`count(*) filter (where ${posts.status} = 'scheduled' and ${posts.createdAt} < ${range.lastMonth})`,
})
.from(posts)
.where(eq(posts.userId, userId)),
db
.select({
total: sql<string>`count(*)`,
yesterday: sql<string>`count(*) filter (where ${aiGenerations.createdAt} >= ${range.yesterdayStart} and ${aiGenerations.createdAt} < ${range.yesterdayEnd})`,
})
.from(aiGenerations)
.where(eq(aiGenerations.userId, userId)),
db.select({ total: sql<string>`count(*)` }).from(socialPages).where(eq(socialPages.userId, userId)),
db.select({ total: sql<string>`count(*)` }).from(media).where(eq(media.userId, userId)),
]);
return {
scheduledPosts: Number(postCounts[0]?.scheduled ?? 0),
scheduledPostsLastMonth: Number(postCounts[0]?.scheduledLastMonth ?? 0),
connectedPages: Number(pageCount[0]?.total ?? 0),
aiTextsGenerated: Number(generationCounts[0]?.total ?? 0),
aiTextsYesterday: Number(generationCounts[0]?.yesterday ?? 0),
mediaStored: Number(mediaCount[0]?.total ?? 0),
};
}
// Social Pages // Social Pages
async getSocialPages(userId: string): Promise<SocialPage[]> { async getSocialPages(userId: string): Promise<SocialPage[]> {
const pages = await db.select().from(socialPages).where(eq(socialPages.userId, userId)); const pages = await db.select().from(socialPages).where(eq(socialPages.userId, userId));
return pages.map(page => decryptPageTokens(page)); return pages.map(page => decryptPageTokens(page));
} }
/**
* Toutes les pages de l'instance, pour les vues d'administration.
* Remplace un `getAllUsers()` suivi d'une requête par utilisateur.
*/
async getAllSocialPages(): Promise<SocialPage[]> {
const pages = await db.select().from(socialPages);
return pages.map(page => decryptPageTokens(page));
}
async getSocialPage(id: string): Promise<SocialPage | undefined> { async getSocialPage(id: string): Promise<SocialPage | undefined> {
const [page] = await db.select().from(socialPages).where(eq(socialPages.id, id)); const [page] = await db.select().from(socialPages).where(eq(socialPages.id, id));
return page ? decryptPageTokens(page) : undefined; return page ? decryptPageTokens(page) : undefined;
@@ -234,8 +330,37 @@ export class DatabaseStorage implements IStorage {
} }
// Media // Media
async getMedia(userId: string): Promise<Media[]> { /**
return await db.select().from(media).where(eq(media.userId, userId)).orderBy(desc(media.createdAt)); * Médias d'un utilisateur, du plus récent au plus ancien.
* `limit` sert aux écrans qui n'en affichent qu'une poignée : sans lui, la
* médiathèque entière transitait pour en montrer cinq.
*/
async getMedia(userId: string, options: { limit?: number; offset?: number } = {}): Promise<Media[]> {
let query = db
.select()
.from(media)
.where(eq(media.userId, userId))
.orderBy(desc(media.createdAt))
.$dynamic();
if (options.limit !== undefined) query = query.limit(options.limit);
if (options.offset !== undefined) query = query.offset(options.offset);
return await query;
}
async getMediaByIds(ids: string[]): Promise<Media[]> {
if (ids.length === 0) return [];
return await db.select().from(media).where(inArray(media.id, ids));
}
/** Total de médias, pour que la pagination sache où elle s'arrête. */
async getMediaCount(userId: string): Promise<number> {
const [row] = await db
.select({ total: sql<string>`count(*)` })
.from(media)
.where(eq(media.userId, userId));
return Number(row?.total ?? 0);
} }
async getMediaById(id: string): Promise<Media | undefined> { async getMediaById(id: string): Promise<Media | undefined> {
@@ -271,14 +396,16 @@ export class DatabaseStorage implements IStorage {
if (!post) return undefined; if (!post) return undefined;
const postMediaLinks = await this.getPostMedia(id); const postMediaLinks = await this.getPostMedia(id);
const mediaItems: Media[] = [];
for (const link of postMediaLinks) { // Une seule requête pour tous les médias, puis remise dans l'ordre
const mediaItem = await this.getMediaById(link.mediaId); // d'affichage : une requête par média rendait le coût proportionnel au
if (mediaItem) { // nombre de visuels du post.
mediaItems.push(mediaItem); const byId = new Map(
} (await this.getMediaByIds(postMediaLinks.map(link => link.mediaId))).map(item => [item.id, item])
} );
const mediaItems = postMediaLinks
.map(link => byId.get(link.mediaId))
.filter((item): item is Media => item !== undefined);
return { post, media: mediaItems }; return { post, media: mediaItems };
} }
@@ -352,67 +479,42 @@ export class DatabaseStorage implements IStorage {
// Scheduled Posts // Scheduled Posts
async getScheduledPosts(userId: string, startDate?: Date, endDate?: Date): Promise<any[]> { async getScheduledPosts(userId: string, startDate?: Date, endDate?: Date): Promise<any[]> {
let query = db return this.queryScheduledPosts(eq(posts.userId, userId), startDate, endDate);
.select()
.from(scheduledPosts)
.innerJoin(posts, eq(scheduledPosts.postId, posts.id))
.leftJoin(socialPages, eq(scheduledPosts.pageId, socialPages.id))
.where(eq(posts.userId, userId));
if (startDate && endDate) {
const results = await query;
return results
.filter(r => {
const scheduledAt = new Date(r.scheduled_posts.scheduledAt);
return scheduledAt >= startDate && scheduledAt <= endDate;
})
.map(r => ({
...r.scheduled_posts,
post: r.posts,
page: r.social_pages,
}));
}
const results = await query;
return results.map(r => ({
...r.scheduled_posts,
post: r.posts,
page: r.social_pages,
}));
} }
async getScheduledPostsByPages(pageIds: string[], startDate?: Date, endDate?: Date): Promise<any[]> { async getScheduledPostsByPages(pageIds: string[], startDate?: Date, endDate?: Date): Promise<any[]> {
if (pageIds.length === 0) { if (pageIds.length === 0) {
return []; return [];
} }
return this.queryScheduledPosts(inArray(scheduledPosts.pageId, pageIds), startDate, endDate);
}
let query = db /**
.select() * Publications planifiées, avec le post et la page auxquels elles se rapportent.
*
* La période est filtrée en SQL : la charger entière pour la filtrer en
* mémoire revenait à lire tout l'historique à chaque affichage du calendrier.
*/
private async queryScheduledPosts(
scope: SQL,
startDate?: Date,
endDate?: Date
): Promise<any[]> {
const conditions: SQL[] = [scope];
if (startDate) conditions.push(gte(scheduledPosts.scheduledAt, startDate));
if (endDate) conditions.push(lte(scheduledPosts.scheduledAt, endDate));
const rows = await db
.select(SCHEDULED_POST_COLUMNS)
.from(scheduledPosts) .from(scheduledPosts)
.innerJoin(posts, eq(scheduledPosts.postId, posts.id)) .innerJoin(posts, eq(scheduledPosts.postId, posts.id))
.leftJoin(socialPages, eq(scheduledPosts.pageId, socialPages.id)) .leftJoin(socialPages, eq(scheduledPosts.pageId, socialPages.id))
.where(inArray(scheduledPosts.pageId, pageIds)); .where(conditions.length === 1 ? conditions[0] : and(...conditions))
.orderBy(desc(scheduledPosts.scheduledAt));
if (startDate && endDate) { // La jointure externe renvoie un objet aux champs nuls quand la page a été
const results = await query; // supprimée ; les appelants attendent `page: null` dans ce cas.
return results return rows.map(row => ({ ...row, page: row.page?.id ? row.page : null }));
.filter(r => {
const scheduledAt = new Date(r.scheduled_posts.scheduledAt);
return scheduledAt >= startDate && scheduledAt <= endDate;
})
.map(r => ({
...r.scheduled_posts,
post: r.posts,
page: r.social_pages,
}));
}
const results = await query;
return results.map(r => ({
...r.scheduled_posts,
post: r.posts,
page: r.social_pages,
}));
} }
async getScheduledPost(id: string): Promise<ScheduledPost | undefined> { async getScheduledPost(id: string): Promise<ScheduledPost | undefined> {
@@ -468,6 +570,24 @@ export class DatabaseStorage implements IStorage {
); );
} }
/**
* Reels dont la génération est en cours. Filtré en SQL : la route chargeait
* tous les posts de l'utilisateur pour n'en garder qu'une poignée, toutes les
* trois secondes.
*/
async getOngoingReelPosts(userId: string): Promise<Post[]> {
return await db
.select()
.from(posts)
.where(
and(
eq(posts.userId, userId),
inArray(posts.generationStatus, ['processing', 'pending'])
)
)
.orderBy(desc(posts.createdAt));
}
// AI Generations // AI Generations
async getAiGenerations(userId: string): Promise<AiGeneration[]> { async getAiGenerations(userId: string): Promise<AiGeneration[]> {
return await db.select().from(aiGenerations).where(eq(aiGenerations.userId, userId)).orderBy(desc(aiGenerations.createdAt)); return await db.select().from(aiGenerations).where(eq(aiGenerations.userId, userId)).orderBy(desc(aiGenerations.createdAt));