Merge branch 'develop' of https://github.com/UTDNebula/jupiter into d…

…evelop

.github/workflows/generateCheck.sh

@@ -1,4 +1,6 @@
-if [ $status == 'success' ]; then
+files=$(npx prettier . -l)
+status=$?
+if [ $status == 0 ]; then
   echo "## Formatting Check passed 🥳" >>$GITHUB_STEP_SUMMARY
   echo "All files are formatted correctly" >>$GITHUB_STEP_SUMMARY
   exit 0

.github/workflows/prettierCheck.yml

@@ -12,13 +12,5 @@ jobs:
           cache: 'npm'
       - name: Run npm install
         run: npm ci
-      - name: Run prettier
-        id: prettier
-        continue-on-error: true
-        run: |
-          files=`npx prettier . -l` 
-          echo files=$files >> "$GITHUB_ENV"
-      - name: generate errors/summary
+      - name: Run prettier & generate problems
         run: .github/workflows/generateCheck.sh
-        env:
-          status: ${{ steps.prettier.outcome }}

src/app/about/page.tsx

@@ -14,59 +14,104 @@ export const metadata: Metadata = {
 };
 
 const About = () => {
+  const teamMembers = [
+    { name: 'Ethan Bickel', position: 'Project Lead' },
+    { name: 'Braeden Kotko', position: 'Engineer' },
+    { name: 'Connor Harris', position: 'Engineer' },
+    { name: 'Jonathan Le', position: 'Engineer' },
+    { name: 'Alex Vazquez', position: 'Engineer' },
+    { name: 'Ishaan Gupta', position: 'Engineer' },
+    { name: 'Ritvik Thota', position: 'Engineer' },
+  ];
+  const recruits = [
+    { name: 'Jordan Joelson', position: 'Engineer' },
+    { name: 'Mansi Cherukupally', position: 'Engineer' },
+    { name: 'Aryav Rastogi', position: 'Engineer' },
+    { name: 'Sreevasan Siasubramanian', position: 'Engineer' },
+    { name: 'Ninad Sudarsanam', position: 'Engineer' },
+    { name: 'Shivesh Gupta', position: 'Engineer' },
+    { name: 'Natalia Sekulic', position: 'Engineer' },
+    { name: 'Mamoun Elmamoun', position: 'Engineer' },
+    { name: 'Chloe Alzaga', position: 'Engineer' },
+    { name: 'Joshua Perez', position: 'Engineer' },
+    { name: 'Ankith Ganji', position: 'Engineer' },
+    { name: 'Valeria Gallardo', position: 'Designer' },
+    { name: 'Waseef Kabir', position: 'Designer' },
+    { name: 'Ved Mahant', position: 'Designer' },
+  ];
   return (
     <main className="h-full md:pl-72">
       <Header />
       <div className="mx-6 h-full">
-        <h1 className="p-2 py-12 text-2xl font-bold text-slate-500">
-          About us
-        </h1>
         <div className="rounded-lg bg-slate-100 p-8 shadow-md">
           <h2 className="mb-4 text-lg font-semibold text-slate-500">
-            Project Jupiter
+            About Jupiter
           </h2>
-          <h3 className="mb-2 text-base text-slate-500">Our Goal</h3>
+
           <p className="mt-2 space-y-4 text-sm font-light text-slate-500">
-            Jupiter is a user-friendly platform that can be utilized by students
-            to seamlessly join school clubs. This tool allows students to browse
-            through the list of available clubs, their activities, and
-            objectives, all in one place. Students can easily sign up for clubs
-            that interest them and receive real-time updates on events,
-            meetings, and other activities organized by the clubs. The platform
-            also enables club leaders to manage and promote their clubs more
-            efficiently, keeping members informed about important details and
-            facilitating communication between members.
+            Jupiter is a platform being developed by nebula labs in order to
+            help students find organizations and events on and around campus.
             <br />
+            You&apos;re able to track organizations you&apos;re interested in,
+            find new organizations, and keep up to date on events you want to
+            attend.
             <br />
-            Jupiter comes with several features that make it an ideal tool for
-            school club management. For instance, the platform provides a
-            comprehensive dashboard that enables club leaders to track
-            attendance, monitor club performance, and collect feedback from
-            members. The tool also integrates with the school&apos;s social
-            media pages and website, making it easy for students to discover
-            clubs that match their interests. With Jupiter, students can easily
-            find and join clubs, and club leaders can manage their clubs more
-            effectively, leading to more successful and fulfilling club
-            experiences for everyone involved.
+            For organizations we offer a better way to keep your info up to
+            date, and for people well suited for your organization to find out
+            about you and your events.
+          </p>
+          <p className="mt-2 space-y-4 text-sm font-light text-slate-500">
+            If you&apos;re interested in contributing to Jupiter check out the{' '}
+            <a
+              href="https://discord.utdnebula.com/"
+              className="text-blue-primary hover:underline"
+            >
+              Nebula Discord
+            </a>
+            , or our{' '}
+            <a
+              href="https://github.com/UTDNebula/jupiter"
+              className="text-blue-primary hover:underline"
+            >
+              Github
+            </a>
           </p>
         </div>
         <div className="mt-16 py-3">
           <h1 className="mb-10 text-center text-3xl font-bold text-slate-500">
             Our Team
           </h1>
           <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4">
-            {Array.from({ length: 8 }).map((_, key) => (
+            {teamMembers.map((member, key) => (
               <div
                 key={key}
                 className="rounded-lg bg-slate-100 p-5 shadow-md transition-shadow duration-300 hover:shadow-lg"
               >
                 <h2 className="mb-2 text-xl font-medium text-slate-500">
-                  Name
+                  {member.name}
                 </h2>
-                <h3 className="text-lg text-slate-500">Position</h3>
+                <h3 className="text-lg text-slate-500">{member.position}</h3>
               </div>
             ))}
           </div>
+          <div className="mt-16 py-3">
+            <h1 className="mb-10 text-center text-3xl font-bold text-slate-500">
+              Recruits
+            </h1>
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4">
+              {recruits.map((member, key) => (
+                <div
+                  key={key}
+                  className="rounded-lg bg-slate-100 p-5 shadow-md transition-shadow duration-300 hover:shadow-lg"
+                >
+                  <h2 className="mb-2 text-xl font-medium text-slate-500">
+                    {member.name}
+                  </h2>
+                  <h3 className="text-lg text-slate-500">{member.position}</h3>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </main>

src/app/directory/search/ClubSearch.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { api } from '@src/trpc/react';
+import type { SelectClub as Club } from '@src/server/db/models';
+import { type Session } from 'next-auth';
+import ClubCard from '@src/components/club/ClubCard';
+
+interface ClubSearchComponentProps {
+  userSearch: string;
+  session: Session | null;
+}
+
+export const ClubSearchComponent = ({
+  userSearch,
+  session,
+}: ClubSearchComponentProps) => {
+  const { data } = api.club.byNameNoLimit.useQuery(
+    { name: userSearch },
+    { enabled: !!userSearch },
+  );
+
+  if (!data) {
+    return <p />;
+  }
+  if (data.length === 0) {
+    return (
+      <div className="text-center text-4xl font-bold text-slate-500">
+        No Search Results Found
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid w-full auto-rows-fr grid-cols-[repeat(auto-fill,320px)] justify-center gap-16 pb-4">
+      {data.map((club: Club) => (
+        <ClubCard key={club.id} club={club} session={session} priority />
+      ))}
+    </div>
+  );
+};

src/app/directory/search/page.tsx

@@ -0,0 +1,24 @@
+import Header from '@src/components/header/BaseHeader';
+import { ClubSearchComponent } from './ClubSearch';
+import { getServerAuthSession } from '@src/server/auth';
+
+type Params = {
+  searchParams: { [key: string]: string | undefined };
+};
+
+const clubSearch = async (props: Params) => {
+  const { searchParams } = props;
+  const userSearch = searchParams['search'] || '';
+  const session = await getServerAuthSession();
+
+  return (
+    <main className="md:pl-72">
+      <div>
+        <Header />
+        <ClubSearchComponent userSearch={userSearch} session={session} />
+      </div>
+    </main>
+  );
+};
+
+export default clubSearch;

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { TRPCReactProvider } from '@src/trpc/react';
 import Sidebar from '@src/components/nav/Sidebar';
 import { type Metadata } from 'next';
 
-import { GoogleAnalytics } from '@next/third-parties/google'
+import { GoogleAnalytics } from '@next/third-parties/google';
 
 const inter = Inter({
   subsets: ['latin'],

src/app/manage/[clubId]/edit/EditContactForm.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import EditContactSelector from '@src/app/manage/[clubId]/edit/EditContactSelector';
 import { type SelectClub, type SelectContact } from '@src/server/db/models';
 import { api } from '@src/trpc/react';
+import { type contact } from '@src/utils/contact';
 import { editClubContactSchema } from '@src/utils/formSchemas';
 import { useRouter } from 'next/navigation';
 import { useReducer } from 'react';
@@ -55,7 +56,7 @@ const deletedReducer = (
 export default function EditContactForm({
   club,
 }: {
-  club: SelectClub & { contacts: SelectContact[] };
+  club: SelectClub & { contacts: contact[] };
 }) {
   const {
     register,

src/components/club/listing/ContactButtons.tsx

@@ -2,21 +2,40 @@ import type { SelectContact as Contacts } from '@src/server/db/models';
 import { logo } from '@src/icons/ContactIcons';
 import Link from 'next/link';
 
+const EmailButton = ({ item }: { item: Contacts }) => {
+  return (
+    <button
+      key={item.url}
+      className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
+    >
+      <Link href={`mailto:${item.url}`}>
+        <div className="relative h-8 w-8">{logo[item.platform]}</div>
+      </Link>
+    </button>
+  );
+};
+
 type contentButtonProps = {
   contacts: Array<Contacts>;
 };
 const ContactButtons = ({ contacts }: contentButtonProps) => {
   return (
     <div className="flex flex-row content-center gap-x-4">
       {contacts.map((item) => (
-        <button
-          key={item.url}
-          className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
-        >
-          <Link href={item.url} target="_blank">
-            <div className="relative h-8 w-8">{logo[item.platform]}</div>
-          </Link>
-        </button>
+        <>
+          {item.platform === 'email' ? (
+            <EmailButton item={item} />
+          ) : (
+            <button
+              key={item.url}
+              className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
+            >
+              <Link href={item.url} target="_blank">
+                <div className="relative h-8 w-8">{logo[item.platform]}</div>
+              </Link>
+            </button>
+          )}
+        </>
       ))}
     </div>
   );

src/components/events/EventTimeAlert.tsx

@@ -6,10 +6,12 @@ import {
   differenceInMinutes,
 } from 'date-fns';
 import { type ReactNode } from 'react';
+import { useState, useEffect } from 'react';
 
 type EventTimeAlertProps = {
   event: SelectEvent;
 };
+
 type BaseProps = { children: ReactNode; className?: string };
 const Base = ({ children, className }: BaseProps) => {
   return (
@@ -22,12 +24,23 @@ const Base = ({ children, className }: BaseProps) => {
     </div>
   );
 };
+
 const EventTimeAlert = ({ event }: EventTimeAlertProps) => {
-  const now = new Date();
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   const start = event.startTime;
   const hourDiff = differenceInHours(start, now);
-  if (event.startTime.getTime() < Date.now()) {
-    if (event.endTime.getTime() < Date.now()) {
+
+  if (event.startTime.getTime() < now) {
+    if (event.endTime.getTime() < now) {
       return <Base className="bg-red-600">over :(</Base>;
     } else {
       return <Base className="bg-green-600">NOW</Base>;

src/components/searchBar/ClubSearchBar.tsx

@@ -23,9 +23,7 @@ export const ClubSearchBar = () => {
       onClick={onClickSearchResult}
       submitButton
       submitLogic={() => {
-        if (data && data[0]) {
-          onClickSearchResult(data[0]);
-        }
+        router.push(`/directory/search?search=${encodeURIComponent(search)}`);
       }}
     />
   );