diff --git a/frontend/src/pages/AdminPage.css b/frontend/src/pages/AdminPage.css index fb32910..10e86e7 100644 --- a/frontend/src/pages/AdminPage.css +++ b/frontend/src/pages/AdminPage.css @@ -148,6 +148,49 @@ line-height: 1.5; } +.refresh-videos-button { + padding: 10px 20px; + background: var(--color-primary); + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + box-shadow: 0 2px 8px var(--color-shadow); +} + +.refresh-videos-button:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); +} + +.refresh-videos-button:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.refresh-message { + margin-top: 12px; + padding: 8px 12px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; +} + +.refresh-message.success { + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.refresh-message.error { + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + @media (max-width: 1024px) { .admin-content { grid-template-columns: 1fr; diff --git a/frontend/src/pages/VideosAdminPage.tsx b/frontend/src/pages/VideosAdminPage.tsx index bbb3c72..1b7464b 100644 --- a/frontend/src/pages/VideosAdminPage.tsx +++ b/frontend/src/pages/VideosAdminPage.tsx @@ -1,9 +1,33 @@ +import { useState } from 'react'; import { Link } from 'react-router-dom'; import { ChannelManager } from '../components/ChannelManager/ChannelManager'; import { TimeLimitManager } from '../components/TimeLimitManager/TimeLimitManager'; +import { videosApi } from '../services/apiClient'; import './AdminPage.css'; export function VideosAdminPage() { + const [refreshing, setRefreshing] = useState(false); + const [refreshMessage, setRefreshMessage] = useState(null); + const [refreshError, setRefreshError] = useState(null); + + const handleRefreshVideos = async () => { + setRefreshing(true); + setRefreshMessage(null); + setRefreshError(null); + + try { + const response = await videosApi.refresh(); + const data = response.data; + setRefreshMessage( + `Refreshed ${data.channelsRefreshed} channel(s). Added ${data.videosAdded} video(s).` + ); + } catch (err: any) { + setRefreshError(err.response?.data?.error?.message || 'Failed to refresh videos'); + } finally { + setRefreshing(false); + } + }; + return (
@@ -12,6 +36,21 @@ export function VideosAdminPage() {

Video App Settings

Manage YouTube channels and video time limits

+
+ + {refreshMessage && ( +
{refreshMessage}
+ )} + {refreshError && ( +
{refreshError}
+ )} +