@devvistatech/devvista-kit 0.0.1

package/app/page.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { HeroSection } from "@/components/addOns/non-functional/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 "./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">
+        <HeroSection
+          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>
+  );
+}