Merge pull request #233 from ufsasewebmaster/main

Sync main

app.config.ts

@@ -1,13 +1,12 @@
-import { defineConfig } from "@tanstack/start/config";
+import { defineConfig, type TanStackStartOutputConfig } from "@tanstack/start/config";
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 import tsConfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig({
+const config = {
   server: {
-    preset: "vercel", // Switched from vercel-edge
+    preset: "vercel",
     prerender: {
       routes: ["/"],
-      // crawlLinks: true,
     },
   },
   tsr: {
@@ -26,11 +25,11 @@ export default defineConfig({
     },
   },
   vite: {
-    plugins: [
-      tsConfigPaths({
-        projects: ["./tsconfig.json"],
-      }),
-      ViteImageOptimizer(),
-    ],
+    plugins: [tsConfigPaths({ projects: ["./tsconfig.json"] }), ViteImageOptimizer()],
   },
-});
+};
+
+// Cast the final output to a portable type. WTF???? Such weird workaround
+const finalConfig = defineConfig(config) as TanStackStartOutputConfig;
+
+export default finalConfig;

drizzle/meta/_journal.json

@@ -10,4 +10,4 @@
       "breakpoints": true
     }
   ]
-}
+}

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "vinxi dev",
-    "build": "concurrently \"bun run db:push\" \"bunx dotenv-cli -- vinxi build\"",
+    "build": "concurrently \"bun run db:push\" \"bunx dotenv -- vinxi build\"",
     "start": "vinxi start",
     "fix": "concurrently \"bun run lint:js:fix\" \"bun run lint:fmt:fix\"",
     "generate": "bun run src/client/assets/generateImageMaps.ts",
@@ -19,7 +19,7 @@
     "test": "vitest --run",
     "test:watch": "vitest",
     "clean": "git clean -xdf -e .env -e local.db",
-    "db:push": "npx drizzle-kit push",
+    "db:push": "bun drizzle-kit push --force",
     "db:generate": "drizzle-kit generate",
     "db:local:init": "node scripts/initDb.mjs",
     "db:local:seed": "node scripts/seed.mjs",
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.272",
+    "@iconify/react": "^5.2.0",
     "@libsql/client": "0.14.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
@@ -60,6 +61,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
+    "react-hot-toast": "^2.5.1",
     "react-icons": "^5.3.0",
     "react-quill": "^2.0.0",
     "resend": "^4.0.1",
@@ -89,7 +91,7 @@
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
     "autoprefixer": "^10.4.20",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.2",
     "drizzle-kit": "^0.28.1",
     "eslint": "^9.10.0",
     "eslint-import-resolver-typescript": "^3.6.3",

src/client/assets/imageUrls.tsx

@@ -105,7 +105,10 @@ export const imageUrls = {
   "SETGroup.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKW5CkJSsusEmDk9J5QvCe8u0VFISZHXd2jwgn",
   "StarLogo.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKKkbiQJRau5S173OCZMnlcgUAzrajkIEisoLt",
   "spring2024_9.jpg": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKegjTCwHJG28TPIR6BtLr7xf4aMpwXlNZOQDs",
-  "Diamond.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKJFKkLL402P9k7UlC1m8TYv6nZxQhaz5yRqWd",
+  "Diamond.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK2M71F0XhyMOTKFBbxuVXQADWHeCt1ph9aUmR",
+  "Gold.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKaoGxuFnXYPwCL3hnGoHcRr14xNQzV28Tf9AJ",
+  "Silver.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK2MMtrEIhyMOTKFBbxuVXQADWHeCt1ph9aUmR",
+  "Bronze.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK0Zzf2VvfmUDLvlEFI6HpA2aq5tQX7dbR8hWr",
   "ProfessionalIcon.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK6Ri8h5V2tKiqvkdQeT9gAcWOu7pHP0yx3G4f",
   "People.png": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKyWkHBFJ4t568AOzNaFme9wlZQ1YMr3dRCLcj",
   "spring2024_8.JPG": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKub5I2v1qQZ4jYNG9Died5b2HW7PTrE6ofnMy",

src/client/assets/image_data.json

@@ -865,9 +865,33 @@
   },
   {
     "name": "Diamond.png",
-    "key": "2ipokchyMOTKJFKkLL402P9k7UlC1m8TYv6nZxQhaz5yRqWd",
+    "key": "2ipokchyMOTK2M71F0XhyMOTKFBbxuVXQADWHeCt1ph9aUmR",
     "customId": null,
-    "url": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKJFKkLL402P9k7UlC1m8TYv6nZxQhaz5yRqWd",
+    "url": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK2M71F0XhyMOTKFBbxuVXQADWHeCt1ph9aUmR",
+    "size": 6173,
+    "uploadedAt": "2024-12-05T19:43:59.000Z"
+  },
+  {
+    "name": "Gold.png",
+    "key": "2ipokchyMOTKaoGxuFnXYPwCL3hnGoHcRr14xNQzV28Tf9AJ",
+    "customId": null,
+    "url": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTKaoGxuFnXYPwCL3hnGoHcRr14xNQzV28Tf9AJ",
+    "size": 6173,
+    "uploadedAt": "2024-12-05T19:43:59.000Z"
+  },
+  {
+    "name": "Silver.png",
+    "key": "2ipokchyMOTKaPRusEnXYPwCL3hnGoHcRr14xNQzV28Tf9AJ",
+    "customId": null,
+    "url": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK2MMtrEIhyMOTKFBbxuVXQADWHeCt1ph9aUmR",
+    "size": 6173,
+    "uploadedAt": "2024-12-05T19:43:59.000Z"
+  },
+  {
+    "name": "Bronze.png",
+    "key": "2ipokchyMOTK0Zzf2VvfmUDLvlEFI6HpA2aq5tQX7dbR8hWr",
+    "customId": null,
+    "url": "https://moqsegbvdj.ufs.sh/f/2ipokchyMOTK0Zzf2VvfmUDLvlEFI6HpA2aq5tQX7dbR8hWr",
     "size": 6173,
     "uploadedAt": "2024-12-05T19:43:59.000Z"
   },

src/client/components/AuthForm.tsx

@@ -12,6 +12,7 @@ interface AuthFormProps {
   buttonLabel: string;
   linkText: string;
   linkRoute: string;
+  errorMessage?: string;
   isSignUp?: boolean;
   additionalButton?: {
     text: string;
@@ -37,7 +38,7 @@ const StyledFormField = ({ children, hasError, icon }: { children: React.ReactNo
   </div>
 );
 
-const AuthForm = ({ additionalButton, buttonLabel, isSignUp = false, linkRoute, linkText, onSubmit, title }: AuthFormProps) => {
+const AuthForm = ({ additionalButton, buttonLabel, errorMessage, isSignUp = false, linkRoute, linkText, onSubmit, title }: AuthFormProps) => {
   const {
     formState: { errors },
     handleSubmit,
@@ -70,6 +71,8 @@ const AuthForm = ({ additionalButton, buttonLabel, isSignUp = false, linkRoute,
         <Logo />
       </div>
       <h3 className="heading mb-3 pb-2 text-center font-oswald text-4xl font-semibold">{title}</h3>
+      {errorMessage && <div className="mb-3 w-full text-center text-sm text-red-600">{errorMessage}</div>}
+
       <StyledFormField icon="icon-[qlementine-icons--user-16]" hasError={!!errors.username}>
         <Input
           id="username"

src/client/components/about/ContactForm.tsx

@@ -1,12 +1,54 @@
 import React from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+
+export interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  message: string;
+}
+const notify = () =>
+  toast.success("Thanks for your feedback!", {
+    position: "bottom-center",
+  });
 
 const ContactForm = () => {
+  const { handleSubmit, register, reset } = useForm<FormData>({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    notify();
+    reset();
+    const url = "/api/contact/submit";
+    try {
+      const resp = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      if (!resp.ok) {
+        throw new Error(`Response status: ${resp.status}"`);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
   return (
     <div className="mx-auto max-w-5xl p-4">
       <h2 className="mb-4 text-lg font-medium text-gray-800">
         Have any questions or comments? Submit the form below and we will get in contact with you shortly!
       </h2>
-      <form className="space-y-4">
+      <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
         <div className="-mx-2 flex flex-wrap">
           <div className="mb-4 w-1/2 px-2">
             <label htmlFor="firstName" className="block text-sm font-semibold text-gray-700">
@@ -17,7 +59,7 @@ const ContactForm = () => {
               id="firstName"
               placeholder="First"
               className="mt-1 w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring-blue-500"
-              required
+              {...register("firstName", { required: "This is required.", maxLength: 256 })}
             />
           </div>
           <div className="mb-4 w-1/2 px-2">
@@ -29,7 +71,7 @@ const ContactForm = () => {
               id="lastName"
               placeholder="Last"
               className="mt-1 w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring-blue-500"
-              required
+              {...register("lastName", { required: "This is required.", maxLength: 256 })}
             />
           </div>
         </div>
@@ -43,7 +85,7 @@ const ContactForm = () => {
             id="email"
             placeholder="Email"
             className="mt-1 w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring-blue-500"
-            required
+            {...register("email", { required: "Email is required.", minLength: 4, maxLength: 256 })}
           />
         </div>
 
@@ -56,9 +98,9 @@ const ContactForm = () => {
             rows={4}
             placeholder="Your message"
             className="mt-1 w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring-blue-500"
+            {...register("message", { required: "Message cannot be empty", maxLength: { value: 3000, message: "Message is too long." } })}
           ></textarea>
         </div>
-
         <button
           type="submit"
           className="w-full rounded-md bg-saseBlue p-2 font-medium text-white transition duration-300 hover:bg-saseGreen hover:text-black"

src/client/components/navigation/Header.tsx

@@ -39,13 +39,17 @@ const navItems = [
       { name: "Sports", path: "/sports" },
     ],
   },
+  {
+    name: "Resources",
+    path: "/resources",
+  },
 ];
 
 const Header: React.FC = () => {
   const location = useLocation();
   const isHomePage = location.pathname === "/";
   const [menuOpen, setMenuOpen] = useState(false);
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, logout } = useAuth();
   const menuRef = useRef<HTMLDivElement>(null);
   const hamburgerRef = useRef<HTMLButtonElement>(null);
 
@@ -99,14 +103,14 @@ const Header: React.FC = () => {
           <div className="ml-auto flex items-center gap-4">
             <DesktopMenu navItems={navItems} isHomePage={isHomePage} />
             <SearchBar />
-            <UserButton isLoggedIn={isAuthenticated} />
+            <UserButton isLoggedIn={isAuthenticated} onLogout={logout} />
           </div>
         </div>
 
         {/* Mobile Navigation */}
         <div className="flex items-center gap-4 md:hidden">
           <SearchBar className="w-32 focus:w-64" />
-          <UserButton isLoggedIn={isAuthenticated} />
+          <UserButton isLoggedIn={isAuthenticated} onLogout={logout} />
           <button ref={hamburgerRef} className="focus:outline-none">
             <Hamburger toggled={menuOpen} toggle={setMenuOpen} color={isHomePage ? "#fff" : "#000"} size={22} />
           </button>

src/client/components/navigation/SearchBar.tsx

@@ -24,9 +24,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({ className = "", placeholde
   }, [query]);
 
   useEffect(() => {
-    setIsDropdownOpen(filteredResults.length > 0);
+    setIsDropdownOpen(query?.trim() !== "");
     setSelectedIndex(-1);
-  }, [filteredResults]);
+  }, [filteredResults, query]);
 
   useEffect(() => {
     if (!isDropdownOpen) return;
@@ -90,7 +90,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ className = "", placeholde
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 18a8 8 0 100-16 8 8 0 000 16zm6-4l4 4" />
       </svg>
 
-      {isDropdownOpen && (
+      {isDropdownOpen && query?.trim() && (
         <div className="search-dropdown">
           {filteredResults.length > 0 ? (
             filteredResults.map((result, index) => (
@@ -107,7 +107,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ className = "", placeholde
               </Link>
             ))
           ) : (
-            <div className="no-results">No results found</div>
+            <div className="no-results">No results found for '{query}'</div>
           )}
         </div>
       )}

src/client/components/navigation/UserButton.tsx

@@ -3,9 +3,10 @@ import React from "react";
 
 interface UserButtonProps {
   isLoggedIn: boolean;
+  onLogout: () => void;
 }
 
-export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn }) =>
+export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn, onLogout }) =>
   isLoggedIn ? (
     <Link to="/profile">
       <button className="transform rounded-full text-gray-600 duration-300 hover:scale-105 hover:text-[#000000]">
@@ -14,7 +15,10 @@ export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn }) =>
     </Link>
   ) : (
     <Link to="/login">
-      <button className="inline-block transform rounded-full bg-[#0f6cb6] px-5 py-2 text-white duration-300 hover:scale-105 hover:bg-[#8dc63f] hover:text-[#000000]">
+      <button
+        className="inline-block transform rounded-full bg-[#0f6cb6] px-5 py-2 text-white duration-300 hover:scale-105 hover:bg-[#8dc63f] hover:text-[#000000]"
+        onClick={onLogout}
+      >
         Log In
       </button>
     </Link>