changed the page structure for the database integration

frontend/pages/admin/index.tsx

@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+const AdminPage = () => {
+  return (
+    <Link href='training'>
+      <a>Training</a>
+    </Link>
+  )
+}
+
+export default AdminPage

frontend/pages/admin/training/[id].tsx

@@ -11,7 +11,6 @@ const EditTrainingPage = () => {
 
   if (loading) return <p>Loading data...</p>
   if (error) return <p>Error loading data.</p>
-  console.log(data?.training)
   if (data?.training) return <EditTraining training={data.training} />
   else return <p>Training {id} not found.</p>
 }

frontend/pages/index.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link'
 
-import initialData from '../initial-data'
-import { useTrainingsQuery } from '../src/gql'
+//import initialData from '../initial-data'
+import { usePublishedTrainingsQuery } from '../src/gql'
 import { Training } from '../src/training'
 
 const Home = () => {
-  //const { data, error, loading } = useTrainingsQuery();
+  const { data, error, loading } = usePublishedTrainingsQuery()
 
   return (
     <>
@@ -25,7 +25,13 @@ const Home = () => {
       </section>
 
       <section id='nextTraining'>
-        <Training training={initialData.trainings[0]} />
+        {loading && <p>Loading trainings...</p>}
+        {error && <p>Error loading trainings: {error.message}</p>}
+        {data?.publishedTrainings && data.publishedTrainings.length > 0 ? (
+          <Training training={data.publishedTrainings[0]} />
+        ) : (
+          <p>No trainings found.</p>
+        )}
       </section>
 
       <style jsx>

frontend/pages/timer.tsx

@@ -1,8 +0,0 @@
-import initialData from '../initial-data'
-import { Timer } from '../src/timer'
-
-const TimerPage = () => {
-  return <Timer training={initialData.trainings[0]} />
-}
-
-export default TimerPage

frontend/pages/timer/[id].tsx

@@ -0,0 +1,19 @@
+//import initialData from '../../initial-data'
+import { Timer } from '../../src/timer'
+import { useRouter } from 'next/router'
+import { useTrainingQuery } from '../../src/gql'
+
+const TimerPage = () => {
+  const router = useRouter()
+  const { id } = router.query
+
+  const { data, error, loading } = useTrainingQuery({
+    variables: { id: typeof id === 'string' ? id : id[0] }
+  })
+
+  if (loading) return <p>Loading data...</p>
+  if (error) return <p>Error loading data.</p>
+  if (data?.training) return <Timer training={data.training} />
+}
+
+export default TimerPage

frontend/pages/training/[id].tsx

@@ -1,10 +1,18 @@
-import EditTraining from '../../src/training/components/EditTraining'
 import { useRouter } from 'next/router'
+import { Training } from '../../src/training'
+import { useTrainingQuery } from '../../src/gql'
 
 const TrainingPage = () => {
   const router = useRouter()
+  const { id } = router.query
+  const { data, error, loading } = useTrainingQuery({
+    variables: { id: typeof id === 'string' ? id : id[0] }
+  })
 
-  return <p>Nothing here yet...</p>
+  if (loading) return <p>Loading data...</p>
+  if (error) return <p>Error loading data.</p>
+  if (data?.training) return <Training training={data.training} />
+  else return <p>Training {id} not found.</p>
 }
 
 export default TrainingPage