Changeset 8496f3c for src/app/students/semesters/page.tsx

Timestamp:

09/15/26 21:16:02 (8 days ago)

Author:

Stefan-Saveski <stefansaveski19@…>

Branches:

master

Children:

b8093a0

Parents:

4fe4582

Message:

• ready for presentation

File:

• src/app/students/semesters/page.tsx (modified) (6 diffs)

src/app/students/semesters/page.tsx

@@ -15 +15 @@
 import { getAccessToken } from '@/lib/auth';
 import { useTranslation } from 'react-i18next';
+import { apiUrl } from '@/lib/api';
+import EnrollSemesterDialog from '@/components/enroll-semester-dialog';
 
 type Semester = {
@@ -113 +115 @@
   const [isLoading, setIsLoading] = useState(true);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [enrollOpen, setEnrollOpen] = useState(false);
+  // Bumped after a successful enrolment so the table reloads.
+  const [reloadKey, setReloadKey] = useState(0);
   const { t } = useTranslation();
 
@@ -130 +135 @@
 
       try {
-        const response = await fetch('https://iknow-api.onrender.com/api/user/getSemesters', {
+        const response = await fetch(apiUrl('/api/user/getSemesters'), {
           method: 'GET',
           headers: {
@@ -158 +163 @@
       cancelled = true;
     };
-  }, []);
+  }, [reloadKey]);
 
   if (isLoading) {
@@ -184 +189 @@
       {/* Header */}
       <div className="bg-primary text-white rounded-xl p-8 mb-8">
-        <div className="flex items-center gap-4">
-          <div className="bg-white rounded-full p-4">
-            <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-[#0272D1]" />
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-4">
+            <div className="bg-white rounded-full p-4">
+              <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-[#0272D1]" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold mb-2">{t('semesters')}</h1>
+              <p className="text-lg opacity-90">
+                {t('semesters_overview')}
+              </p>
+            </div>
           </div>
-          <div>
-            <h1 className="text-3xl font-bold mb-2">{t('semesters')}</h1>
-            <p className="text-lg opacity-90">
-              {t('semesters_overview')}
-            </p>
-          </div>
+
+          <button
+            className="self-start rounded-lg bg-white px-5 py-3 font-semibold text-[#0272D1] shadow-sm hover:bg-white/90 md:self-auto"
+            onClick={() => setEnrollOpen(true)}
+          >
+            + {t('enroll_semester')}
+          </button>
         </div>
       </div>
@@ -373 +387 @@
         </div>
       </div>
+
+      <EnrollSemesterDialog
+        open={enrollOpen}
+        onClose={() => setEnrollOpen(false)}
+        onEnrolled={() => setReloadKey((k) => k + 1)}
+      />
     </div>
   );