e

2026-10-01 00:32:59 +00:00 · 2025-01-25 13:05:19 -08:00
parent 82ec3f35aa
commit 4a998a10ab
3 changed files with 164 additions and 96 deletions
@@ -16,7 +16,10 @@ export const classOptions = [ // TODO REMOVE
 ];


-
+function findIfMobile() {
+  //return true;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}

 function App() {
  const [openModal, setOpenModal] = useState(false);
@@ -26,6 +29,7 @@ function App() {
  const [tempFileId, setTempFileId] = useState<string>("");

  const [file, setFile] = useState<File | null>(null);
+  const [isMobile, setIsMobile] = useState(false);


  const [syllabi, setSyllabi] = useState<ClassListing[]>([]);
@@ -56,8 +60,8 @@ function App() {
    let formdata = new FormData();

    if (file === null) {
-        alert("File not uploaded");
-        throw new Error("File not uploaded");
+      alert("File not uploaded");
+      throw new Error("File not uploaded");
    }
    formdata.append("upload", file);
    formdata.append("email", email);
@@ -67,9 +71,9 @@ function App() {
      method: 'POST',
      body: formdata,
    })
-    .then(async (response) => {
+      .then(async (response) => {
        if (!response.ok) {
-            throw new Error(`Server error: ${response.statusText}`);
+          throw new Error(`Server error: ${response.statusText}`);
        }
        setAccordionOpen(true);
        let data = await response.json();
@@ -77,26 +81,36 @@ function App() {
        setTempFileId(data.fileId);
        setOpenModal(false);
        alert("Upload successful! You will receive an email with your volunteer hours within 3 days.");
-    })
-    .catch((error) => {
+      })
+      .catch((error) => {
        console.error("Upload failed:", error);
        alert("Upload failed: " + error.message);
-    });
-}
+      });
+  }

  useEffect(() => {
    console.log("temp file is", tempFileId)
  }, [tempFileId])


+
  useEffect(() => {
    handleSearch();
+
+    if (findIfMobile()) {
+      // Code for mobile devices
+      setIsMobile(true);
+      console.log("mobile")
+    } else {
+      // Code for desktop devices
+      console.log("pc")
+    }
  },
-   [])
+    [])



-  const handleFileChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files === null) return
    if (e.target.files[0] === null) return

@@ -113,33 +127,71 @@ function App() {
  return (
    <>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
-      <h3 className="text-2xl font-bold text-center">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
-      <div className="">
-        <div className="flex space-x-1">
-          <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
-            <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
-            <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
-            <span className="text-xs">2 volunteer hours</span></span>
-          </button>
-          <div className="flex-1 flex bg-white rounded-lg">
-          <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
+      {isMobile === false && <div className="place-items-center p-10">
+        <h3 className="text-2xl font-bold text-center">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
+        <div className="">
+          <div className="flex space-x-1">
+            <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
+              <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
+              <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
+                <span className="text-xs">1 volunteer hours</span></span>
+            </button>
+            <div className="flex-1 flex bg-white rounded-lg">
+              <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>

-          </input>
-          <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
-            
-          <span className="material-symbols-rounded text-black">
-search
-</span>
-          </button></div>
+              </input>
+              <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
+                <span className="material-symbols-rounded text-black">
+                  search
+                </span>
+              </button></div>

+          </div>
+          <div className="listing">
+            {syllabi.map((syllabus, i) => {
+              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+            })}
+            <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+            <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          </div>
        </div>
-        <div className="listing">
+      </div>}
+      {isMobile === true && <div className="p-1 pt-4">
+        <h3 className="text-2xl font-bold">Easily View & Share College Syllabi JFKMCHS/Norco College</h3> <br></br>
+        <div className="">
+          <div className="flex space-x-1">
+            <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-2 text-yellow-50 rounded-lg flex flex-row">
+              <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
+              <span className="flex flex-col">            <span className="text-sm">add a syllabus</span>
+                <span className="text-xs">1 volunteer hours</span></span>
+            </button>
+            <div className="flex-1 flex bg-white rounded-lg">
+              <input type="search" onKeyDown={handleKeyDown} placeholder="search, hit enter or the search button to enter query" className="focus:outline-none bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
+
+              </input>
+              <button className="aspect-square flex justify-center items-center" onClick={handleSearch}>
+                <span className="material-symbols-rounded text-black">
+                  search
+                </span>
+              </button></div>
+
+          </div>
+          <div className="listing">
          {syllabi.map((syllabus, i) => {
-            return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
-          })}
-        </div>
+            return (
+              <>
+                <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+                {i === syllabi.length - 1 && <SyllabusListing key={i + 1} fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />}
+              </>
              
-      </div>
+            )
+
+          })}
+          <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          <SyllabusListing fileName={"syllabus.fileName"} className={"syllabus.className"} professor={"syllabus.professor"} />
+          </div>
+        </div>
+      </div>}


      <Modal show={openModal} size="md" onClose={onCloseModal} popup>
@@ -148,49 +200,49 @@ search
          <div className="space-y-6">
            <h3 className="text-xl font-medium text-gray-900 dark:text-white">Upload a Syllabus</h3>
            <div>
-            <div className="mb-2 block">
-              <Label htmlFor="large-file-upload" value="(pdf, doc, or docx) *"></Label>
-            </div>
-            <form method="post" className="space-y-6">
-             <FileInput id="large-file-upload" onChange={handleFileChange} sizing="lg"  /> 
-             
-             <Accordion>
-            <Accordion.Panel isOpen={accordionOpen}>
-              <Accordion.Title className="">(Optional) Fill out information to get volunteer hours</Accordion.Title>
-              <Accordion.Content className="space-y-6">
-              <div>
              <div className="mb-2 block">
-                <Label htmlFor="email" value="Your email (cnusd school email is fine)" />
+                <Label htmlFor="large-file-upload" value="(pdf, doc, or docx) *"></Label>
              </div>
-              <TextInput
-                id="email"
-                placeholder="name@company.com"
-                value={email}
-                // @ts-ignore
-                onChange={(event: Event) => setEmail(event?.target?.value)}
+              <form method="post" className="space-y-6">
+                <FileInput id="large-file-upload" onChange={handleFileChange} sizing="lg" />

-              />
+                <Accordion>
+                  <Accordion.Panel isOpen={accordionOpen}>
+                    <Accordion.Title className="">(Optional) Fill out information to get volunteer hours</Accordion.Title>
+                    <Accordion.Content className="space-y-6">
+                      <div>
+                        <div className="mb-2 block">
+                          <Label htmlFor="email" value="Your email (cnusd school email is fine)" />
+                        </div>
+                        <TextInput
+                          id="email"
+                          placeholder="name@company.com"
+                          value={email}
+                          // @ts-ignore
+                          onChange={(event: Event) => setEmail(event?.target?.value)}

-            </div>
-            <div>
-              <div className="mb-2 block">
-                <Label value="Your Name" />
-              </div>
-              <TextInput
-                placeholder="John Doe"
-                value={name}
-                // @ts-ignore
-                onChange={(event: Event) => setName(event?.target?.value)}
+                        />

-              />
-            </div>
-            <p className="text-xs text-black">We will handle classifying and organizing your syllabus and will contact you within 3 days to give you community service hours — College Success Club</p>
-              </Accordion.Content>
-            </Accordion.Panel>
-            </Accordion>
+                      </div>
+                      <div>
+                        <div className="mb-2 block">
+                          <Label value="Your Name" />
+                        </div>
+                        <TextInput
+                          placeholder="John Doe"
+                          value={name}
+                          // @ts-ignore
+                          onChange={(event: Event) => setName(event?.target?.value)}

-             <Button onClick={uploadFile} className="bg-blue-700 text-white">Upload File</Button>
-            </form>
+                        />
+                      </div>
+                      <p className="text-xs text-black">We will handle classifying and organizing your syllabus and will contact you within 3 days to give you community service hours — College Success Club</p>
+                    </Accordion.Content>
+                  </Accordion.Panel>
+                </Accordion>
+
+                <Button onClick={uploadFile} className="bg-blue-700 text-white">Upload File</Button>
+              </form>
            </div>

          </div>
@@ -8,7 +8,7 @@
  line-height: 1.5;
  font-weight: 400;

-  color-scheme: light dark;
+  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);

  font-synthesis: none;
@@ -29,7 +29,6 @@ a:hover {
 body {
  margin: 0;
  display: flex;
-  place-items: center;
  min-width: 320px;
  min-height: 100vh;
 }
@@ -1,11 +1,15 @@
 import "./syllabuslisting.css";
+import "./App.tsx";

 export interface ClassListing {
    className: string;
    professor: string;
    fileName: string;
 }
-
+function findIfMobile() {
+    //return true;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
 function SyllabusListing({className, professor, fileName}: ClassListing) {

    async function handleDownload() {
@@ -17,15 +21,28 @@ function SyllabusListing({className, professor, fileName}: ClassListing) {
        window.URL.revokeObjectURL(`https://api.sharesyllabus.me/files/${fileName}`);
    }

-    return(
-        <>
-            <div className="w-full flex bg-white text-black rounded-lg p-3">
-                <span className=" font-extrabold">{className}</span>
-                <span className="flex-1">{professor}</span>
-                <button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
-            </div>
-        </>
-    )
+    if (!findIfMobile()) {
+
+        return(
+            <>
+                <div className="w-full flex bg-white text-black rounded-lg p-3">
+                    <span className=" font-extrabold">{className}</span>
+                    <span className="flex-1">{professor}</span>
+                    <button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
+                </div>
+            </>
+        )
+    } else {
+        return(
+            <>
+                <div className="w-full flex flex-col text-left bg-white space-y-2 text-black rounded-lg p-3">
+                    <span className=" font-extrabold">{className}</span>
+                    <span className="flex-1">{professor}</span>
+                    <button className="border-2 h-20 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>view pdf 📄</button>
+                </div>
+            </>
+        )
+    }
 }

 export default SyllabusListing;