@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/app/page.tsx

@@ -1,339 +1,339 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { GalleryHero } from "@/components/addOns/non-functional/Heros/HeroSection";
-import { AboutSection } from "@/components/addOns/functional/aboutSections/AboutSection";
-import { ScheduleCarousel } from "@/components/addOns/functional/ScheduleCarousel";
-import { FileUploader } from "@/components/addOns/functional/FileUploader";
-import { FeaturesSection } from "@/components/addOns/non-functional/FeaturesSection";
-import BlogList from "@/components/addOns/functional/blogSections/BlogList";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { HOME_PAGE } from "../lib/constants/page";
-
-interface ScheduleClass {
-  name: string;
-  startTime: string;
-  endTime: string;
-}
-
-interface WeeklySchedule {
-  [key: string]: ScheduleClass[];
-}
-
-interface UploadedFile {
-  id: number;
-  documentId: string;
-  name: string;
-  url: string;
-  createdAt: string;
-}
-
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-  documentId?: string;
-}
-
-export default function Home() {
-  const [pdfUrl, setPdfUrl] = useState<string>("");
-  const [weeklySchedule, setWeeklySchedule] = useState<WeeklySchedule>({
-    Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
-  const hasFetched = useRef(false);
-
-  const { getToken } = useAuth();
-  const { user: clerkUser, isSignedIn } = useUser();
-  const { user, authLoading } = useStrapiAuth();
-
-  const numberToDayKey: { [key: number]: string } = {
-    1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", 7: "Sunday",
-  };
-
-  const backgroundImages = [
-    HOME_PAGE.UI.BACKGROUND_IMAGE_1,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_2,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_3,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_4,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_5,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_6,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_7,
-  ];
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    if (hasFetched.current) return;
-    hasFetched.current = true;
-
-    const fetchInitialData = async () => {
-      setIsLoading(true);
-      try {
-        let updatedSchedule: WeeklySchedule = {
-          Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
-        };
-        const scheduleResponse = await fetch(`/api/schedule?t=${Date.now()}`, {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (scheduleResponse.ok) {
-          const scheduleResult = await scheduleResponse.json();
-          const fetchedClasses = (scheduleResult.data || []).map((event: any) => ({
-            name: event.title || "Untitled",
-            startTime: event.startTime || "00:00",
-            endTime: event.endTime || "00:00",
-            daysOfWeek: event.daysOfWeek || [],
-          }));
-          fetchedClasses.forEach((cls: any) => {
-            cls.daysOfWeek.forEach((dayNum: number) => {
-              const dayKey = numberToDayKey[dayNum];
-              if (dayKey && updatedSchedule[dayKey]) {
-                updatedSchedule[dayKey].push({
-                  name: cls.name,
-                  startTime: cls.startTime,
-                  endTime: cls.endTime,
-                });
-              }
-            });
-          });
-        } else {
-          setError(HOME_PAGE.ERRORS.FETCH_SCHEDULE_FAILED);
-        }
-        setWeeklySchedule(updatedSchedule);
-
-        const filesResponse = await fetch(`/api/files?t=${Date.now()}`, {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (filesResponse.ok) {
-          const filesResult = await filesResponse.json();
-          if (filesResult.meta?.pagination?.total > 100) {
-            setError(HOME_PAGE.ERRORS.PAGINATION_WARNING);
-          }
-          setUploadedFiles(
-            filesResult.data.map((file: any) => ({
-              id: file.id,
-              documentId: file.documentId,
-              name: file.name || "Untitled",
-              url: file.url,
-              createdAt: file.createdAt,
-            })) || []
-          );
-        } else {
-          setError(HOME_PAGE.ERRORS.FETCH_FILES_FAILED);
-        }
-      } catch (err) {
-        console.error("Fetch Error:", err);
-        setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.FETCH_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchInitialData();
-  }, []);
-
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isSignedIn || !user?.businessAdminId) {
-      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
-      return;
-    }
-    const file = e.target.files?.[0];
-    if (!file) {
-      setError(HOME_PAGE.ERRORS.NO_FILE_SELECTED);
-      return;
-    }
-    if (file.type !== "application/pdf") {
-      setError(HOME_PAGE.ERRORS.INVALID_FILE_TYPE);
-      return;
-    }
-    setError(null);
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-      const formData = new FormData();
-      formData.append("files", file);
-
-      const response = await fetch("/api/files", {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || HOME_PAGE.ERRORS.UPLOAD_FILE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-      const filesResult = await response.json();
-      setUploadedFiles(
-        filesResult.data.map((file: any) => ({
-          id: file.id,
-          documentId: file.documentId,
-          name: file.name || "Unnamed File",
-          url: file.url,
-          createdAt: file.createdAt,
-        })) || []
-      );
-      setPdfUrl(filesResult.newFileUrl || "");
-    } catch (err) {
-      console.error("Upload Error:", err);
-      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.UPLOAD_FILE_ERROR);
-    }
-  };
-
-  const handleDeleteFile = async (documentId: string) => {
-    if (!isSignedIn || !user?.businessAdminId) {
-      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_DELETE);
-      return;
-    }
-    setError(null);
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-      const response = await fetch("/api/files", {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ documentId }),
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || HOME_PAGE.ERRORS.DELETE_FILE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-      const filesResult = await response.json();
-      setUploadedFiles(
-        filesResult.data.map((file: any) => ({
-          id: file.id,
-          documentId: file.documentId,
-          name: file.name || "Unnamed File",
-          url: file.url,
-          createdAt: file.createdAt,
-        })) || []
-      );
-      if (pdfUrl === uploadedFiles.find((f) => f.documentId === documentId)?.url) {
-        setPdfUrl("");
-      }
-    } catch (err) {
-      console.error("Delete Error:", err);
-      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.DELETE_FILE_ERROR);
-    }
-  };
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="w-full min-h-screen bg-[#FFFFFF] overflow-hidden">
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #FFFFFF;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-        }
-
-        * {
-          font-family: "Inter", sans-serif;
-          font-weight: 400;
-        }
-
-        .gradient-text {
-          background: linear-gradient(90deg, var(--exuberant-blue), var(--jubilee));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-        }
-
-        body.overflow-hidden {
-          overflow: hidden !important;
-          -webkit-overflow-scrolling: none;
-        }
-
-        section {
-          position: relative;
-          z-index: 1;
-        }
-      `}</style>
-
-      <div className="hidden">
-        {backgroundImages.map((src, index) => (
-          <img key={index} src={src} alt="" />
-        ))}
-      </div>
-
-      <div className="relative w-full min-h-screen flex flex-col">
-        <GalleryHero
-          title={HOME_PAGE.UI.HERO_TITLE}
-          subtitle={HOME_PAGE.UI.HERO_SUBTITLE}
-          ctaText={HOME_PAGE.BUTTONS.HERO_CTA_TEXT}
-          ctaLink="/schedule"
-          videoSrc={HOME_PAGE.UI.HERO_VIDEO_SRC}
-          posterSrc=""
-          videoAriaLabel={HOME_PAGE.UI.HERO_VIDEO_ARIA_LABEL}
-        />
-
-        <AboutSection
-          user={user}
-          authLoading={authLoading}
-        />
-
-        <ScheduleCarousel
-          weeklySchedule={weeklySchedule}
-          backgroundImages={backgroundImages}
-          error={error}
-        />
-
-        <BlogList />
-        
-        <section className="relative z-10">
-          <FileUploader
-            uploadedFiles={uploadedFiles}
-            setUploadedFiles={setUploadedFiles}
-            setPdfUrl={setPdfUrl}
-            pdfUrl={pdfUrl}
-            isAdmin={isAdmin}
-            error={error}
-            setError={setError}
-            handleFileUpload={handleFileUpload}
-            handleDeleteFile={handleDeleteFile}
-          />
-        </section>
-
-        <FeaturesSection
-          features={[
-            { text: HOME_PAGE.UI.FEATURE_1 },
-            { text: HOME_PAGE.UI.FEATURE_2 },
-            { text: HOME_PAGE.UI.FEATURE_3 },
-            { text: HOME_PAGE.UI.FEATURE_4 },
-            { text: HOME_PAGE.UI.FEATURE_5 },
-          ]}
-          title={HOME_PAGE.UI.FEATURES_TITLE}
-          description={HOME_PAGE.UI.FEATURES_DESCRIPTION}
-          ctaText={HOME_PAGE.BUTTONS.FEATURES_CTA_TEXT}
-          ctaLink="/schedule"
-        />
-      </div>
-    </div>
-  );
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { GalleryHero } from "@/components/addOns/non-functional/Heros/HeroSection";
+import { AboutSection } from "@/components/addOns/functional/aboutSections/AboutSection";
+import { ScheduleCarousel } from "@/components/addOns/functional/ScheduleCarousel";
+import { FileUploader } from "@/components/addOns/functional/FileUploader";
+import { FeaturesSection } from "@/components/addOns/non-functional/FeaturesSection";
+import BlogList from "@/components/addOns/functional/blogSections/BlogList";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { HOME_PAGE } from "../lib/constants/page";
+
+interface ScheduleClass {
+  name: string;
+  startTime: string;
+  endTime: string;
+}
+
+interface WeeklySchedule {
+  [key: string]: ScheduleClass[];
+}
+
+interface UploadedFile {
+  id: number;
+  documentId: string;
+  name: string;
+  url: string;
+  createdAt: string;
+}
+
+interface StrapiUser {
+  id: number;
+  username: string;
+  email: string;
+  businessAdminId?: string;
+  documentId?: string;
+}
+
+export default function Home() {
+  const [pdfUrl, setPdfUrl] = useState<string>("");
+  const [weeklySchedule, setWeeklySchedule] = useState<WeeklySchedule>({
+    Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const hasFetched = useRef(false);
+
+  const { getToken } = useAuth();
+  const { user: clerkUser, isSignedIn } = useUser();
+  const { user, authLoading } = useStrapiAuth();
+
+  const numberToDayKey: { [key: number]: string } = {
+    1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", 7: "Sunday",
+  };
+
+  const backgroundImages = [
+    HOME_PAGE.UI.BACKGROUND_IMAGE_1,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_2,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_3,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_4,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_5,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_6,
+    HOME_PAGE.UI.BACKGROUND_IMAGE_7,
+  ];
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchInitialData = async () => {
+      setIsLoading(true);
+      try {
+        let updatedSchedule: WeeklySchedule = {
+          Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
+        };
+        const scheduleResponse = await fetch(`/api/schedule?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (scheduleResponse.ok) {
+          const scheduleResult = await scheduleResponse.json();
+          const fetchedClasses = (scheduleResult.data || []).map((event: any) => ({
+            name: event.title || "Untitled",
+            startTime: event.startTime || "00:00",
+            endTime: event.endTime || "00:00",
+            daysOfWeek: event.daysOfWeek || [],
+          }));
+          fetchedClasses.forEach((cls: any) => {
+            cls.daysOfWeek.forEach((dayNum: number) => {
+              const dayKey = numberToDayKey[dayNum];
+              if (dayKey && updatedSchedule[dayKey]) {
+                updatedSchedule[dayKey].push({
+                  name: cls.name,
+                  startTime: cls.startTime,
+                  endTime: cls.endTime,
+                });
+              }
+            });
+          });
+        } else {
+          setError(HOME_PAGE.ERRORS.FETCH_SCHEDULE_FAILED);
+        }
+        setWeeklySchedule(updatedSchedule);
+
+        const filesResponse = await fetch(`/api/files?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (filesResponse.ok) {
+          const filesResult = await filesResponse.json();
+          if (filesResult.meta?.pagination?.total > 100) {
+            setError(HOME_PAGE.ERRORS.PAGINATION_WARNING);
+          }
+          setUploadedFiles(
+            filesResult.data.map((file: any) => ({
+              id: file.id,
+              documentId: file.documentId,
+              name: file.name || "Untitled",
+              url: file.url,
+              createdAt: file.createdAt,
+            })) || []
+          );
+        } else {
+          setError(HOME_PAGE.ERRORS.FETCH_FILES_FAILED);
+        }
+      } catch (err) {
+        console.error("Fetch Error:", err);
+        setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.FETCH_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchInitialData();
+  }, []);
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isSignedIn || !user?.businessAdminId) {
+      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+    const file = e.target.files?.[0];
+    if (!file) {
+      setError(HOME_PAGE.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+    if (file.type !== "application/pdf") {
+      setError(HOME_PAGE.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+    setError(null);
+    try {
+      const token = await getToken();
+      if (!token) {
+        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
+      }
+      const formData = new FormData();
+      formData.append("files", file);
+
+      const response = await fetch("/api/files", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || HOME_PAGE.ERRORS.UPLOAD_FILE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+      const filesResult = await response.json();
+      setUploadedFiles(
+        filesResult.data.map((file: any) => ({
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name || "Unnamed File",
+          url: file.url,
+          createdAt: file.createdAt,
+        })) || []
+      );
+      setPdfUrl(filesResult.newFileUrl || "");
+    } catch (err) {
+      console.error("Upload Error:", err);
+      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.UPLOAD_FILE_ERROR);
+    }
+  };
+
+  const handleDeleteFile = async (documentId: string) => {
+    if (!isSignedIn || !user?.businessAdminId) {
+      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+    setError(null);
+    try {
+      const token = await getToken();
+      if (!token) {
+        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
+      }
+      const response = await fetch("/api/files", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || HOME_PAGE.ERRORS.DELETE_FILE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+      const filesResult = await response.json();
+      setUploadedFiles(
+        filesResult.data.map((file: any) => ({
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name || "Unnamed File",
+          url: file.url,
+          createdAt: file.createdAt,
+        })) || []
+      );
+      if (pdfUrl === uploadedFiles.find((f) => f.documentId === documentId)?.url) {
+        setPdfUrl("");
+      }
+    } catch (err) {
+      console.error("Delete Error:", err);
+      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.DELETE_FILE_ERROR);
+    }
+  };
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+
+  if (authLoading || isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="w-full min-h-screen bg-[#FFFFFF] overflow-hidden">
+      <style jsx global>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #FFFFFF;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+        }
+
+        * {
+          font-family: "Inter", sans-serif;
+          font-weight: 400;
+        }
+
+        .gradient-text {
+          background: linear-gradient(90deg, var(--exuberant-blue), var(--jubilee));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+
+        body.overflow-hidden {
+          overflow: hidden !important;
+          -webkit-overflow-scrolling: none;
+        }
+
+        section {
+          position: relative;
+          z-index: 1;
+        }
+      `}</style>
+
+      <div className="hidden">
+        {backgroundImages.map((src, index) => (
+          <img key={index} src={src} alt="" />
+        ))}
+      </div>
+
+      <div className="relative w-full min-h-screen flex flex-col">
+        <GalleryHero
+          title={HOME_PAGE.UI.HERO_TITLE}
+          subtitle={HOME_PAGE.UI.HERO_SUBTITLE}
+          ctaText={HOME_PAGE.BUTTONS.HERO_CTA_TEXT}
+          ctaLink="/schedule"
+          videoSrc={HOME_PAGE.UI.HERO_VIDEO_SRC}
+          posterSrc=""
+          videoAriaLabel={HOME_PAGE.UI.HERO_VIDEO_ARIA_LABEL}
+        />
+
+        <AboutSection
+          user={user}
+          authLoading={authLoading}
+        />
+
+        <ScheduleCarousel
+          weeklySchedule={weeklySchedule}
+          backgroundImages={backgroundImages}
+          error={error}
+        />
+
+        <BlogList />
+        
+        <section className="relative z-10">
+          <FileUploader
+            uploadedFiles={uploadedFiles}
+            setUploadedFiles={setUploadedFiles}
+            setPdfUrl={setPdfUrl}
+            pdfUrl={pdfUrl}
+            isAdmin={isAdmin}
+            error={error}
+            setError={setError}
+            handleFileUpload={handleFileUpload}
+            handleDeleteFile={handleDeleteFile}
+          />
+        </section>
+
+        <FeaturesSection
+          features={[
+            { text: HOME_PAGE.UI.FEATURE_1 },
+            { text: HOME_PAGE.UI.FEATURE_2 },
+            { text: HOME_PAGE.UI.FEATURE_3 },
+            { text: HOME_PAGE.UI.FEATURE_4 },
+            { text: HOME_PAGE.UI.FEATURE_5 },
+          ]}
+          title={HOME_PAGE.UI.FEATURES_TITLE}
+          description={HOME_PAGE.UI.FEATURES_DESCRIPTION}
+          ctaText={HOME_PAGE.BUTTONS.FEATURES_CTA_TEXT}
+          ctaLink="/schedule"
+        />
+      </div>
+    </div>
+  );
 }