Merge pull request #240 from UTDNebula/component-reworks

Component Reorganization

src/app/about/page.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/admin/carousel/add/page.tsx

@@ -1,12 +1,12 @@
-import AddOrg from '@src/components/admin/AddOrg';
+import AddClub from '@src/components/admin/AddClub';
 
 export default function Page() {
   return (
     <div className="m-5 md:pl-72">
       <h1 className="text-center text-4xl font-bold text-black">
-        Add Orgs to Carousel
+        Add Clubs to Carousel
       </h1>
-      <AddOrg />
+      <AddClub />
     </div>
   );
 }

src/app/admin/orgs/[id]/page.tsx → src/app/admin/clubs/[id]/page.tsx

@@ -1,5 +1,5 @@
-import ApprovedOrg from '@src/components/admin/ApprovedOrg';
-import OtherOrgStatus from '@src/components/admin/OtherOrgStatus';
+import ApprovedClub from '@src/components/admin/ApprovedClub';
+import OtherClubStatus from '@src/components/admin/OtherClubStatus';
 import { db } from '@src/server/db';
 import { eq } from 'drizzle-orm';
 import { notFound } from 'next/navigation';
@@ -16,9 +16,9 @@ export default async function Page({ params: { id } }: Props) {
     <div className="m-5 h-screen md:pl-72">
       <h1 className="text-center text-4xl font-bold">{org.name}</h1>
       {org.approved === 'approved' ? (
-        <ApprovedOrg org={org} />
+        <ApprovedClub club={org} />
       ) : (
-        <OtherOrgStatus org={org} />
+        <OtherClubStatus club={org} />
       )}
     </div>
   );

src/app/admin/orgs/page.tsx → src/app/admin/clubs/page.tsx

@@ -1,11 +1,11 @@
-import OrgTable from '@src/components/admin/OrgTable';
+import ClubTable from '@src/components/admin/ClubTable';
 import { api } from '@src/trpc/server';
 
 export default async function Page() {
-  const clubs = await api.admin.allOrgs();
+  const clubs = await api.admin.allClubs();
   return (
     <div className="m-5 md:pl-72">
-      <OrgTable clubs={clubs} />
+      <ClubTable clubs={clubs} />
     </div>
   );
 }

src/app/admin/page.tsx

@@ -8,10 +8,10 @@ export default function Page() {
       </h1>
       <div className="flex justify-center gap-x-5 pt-20">
         <Link
-          href="/admin/orgs"
+          href="/admin/clubs"
           className="rounded-md bg-slate-300 px-2 py-1 text-blue-500 transition-colors hover:bg-slate-400 hover:text-blue-600"
         >
-          Manage Orgs
+          Manage Clubs
         </Link>
         <Link
           href="/admin/users"

src/app/auth/page.tsx

@@ -1,4 +1,4 @@
-import ProviderButton from '@src/components/ProviderButtons';
+import ProviderButton from '@src/app/auth/ProviderButtons';
 import { getServerAuthSession } from '@src/server/auth';
 import { getProviders } from 'next-auth/react';
 import { redirect } from 'next/navigation';

src/app/community/page.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import { getServerAuthSession } from '@src/server/auth';
 import { type Metadata } from 'next';
 import Image from 'next/image';

src/app/directory/[id]/page.tsx

@@ -1,30 +1,30 @@
-import Header from '@src/components/BaseHeader';
-import OrgHeader from '@src/components/OrgHeader';
-import OrgInfoSegment from '@src/components/OrgInfoSegment';
-import OrgUpcomingEvents from '@src/components/OrgUpcomingEvents';
+import Header from '@src/components/header/BaseHeader';
+import ClubHeader from '@src/components/club/listing/ClubHeader';
+import ClubInfoSegment from '@src/components/club/listing/ClubInfoSegment';
+import ClubUpcomingEvents from '@src/components/club/listing/ClubUpcomingEvents';
 import { api } from '@src/trpc/server';
 import { db } from '@src/server/db';
 import { eq } from 'drizzle-orm';
 import { type Metadata } from 'next';
 import NotFound from '@src/components/NotFound';
 
-const OrganizationPage = async ({ params }: { params: { id: string } }) => {
+const ClubPage = async ({ params }: { params: { id: string } }) => {
   const club = await api.club.getDirectoryInfo({ id: params.id });
   if (!club) return <NotFound elementType="Club" />;
 
   return (
     <main className="w-full md:pl-72">
       <Header />
       <div className="mb-5 flex flex-col space-y-4 px-3">
-        <OrgHeader club={club} />
-        <OrgInfoSegment club={club} />
-        <OrgUpcomingEvents clubId={club.id} />
+        <ClubHeader club={club} />
+        <ClubInfoSegment club={club} />
+        <ClubUpcomingEvents clubId={club.id} />
       </div>
     </main>
   );
 };
 
-export default OrganizationPage;
+export default ClubPage;
 
 export async function generateMetadata({
   params,

src/components/CreateContactSelector.tsx → src/app/directory/create/CreateContactSelector.tsx

@@ -16,7 +16,7 @@ import {
   Website,
   Youtube,
   type logoProps,
-} from './ContactIcons';
+} from '@src/icons/ContactIcons';
 import {
   type Control,
   type UseFormRegister,

src/components/OfficerSelector.tsx → src/app/directory/create/OfficerSelector.tsx

@@ -7,7 +7,7 @@ import {
   type FieldErrors,
 } from 'react-hook-form';
 import { type z } from 'zod';
-import { UserSearchBar } from './SearchBar';
+import { UserSearchBar } from '@src/components/searchBar/UserSearchBar';
 
 type OfficerSelectorProps = {
   control: Control<z.infer<typeof createClubSchema>>;

src/app/directory/create/createForm.tsx

@@ -1,8 +1,8 @@
 'use client';
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { zodResolver } from '@hookform/resolvers/zod';
-import ContactSelector from '@src/components/CreateContactSelector';
-import OfficerSelector from '@src/components/OfficerSelector';
+import ContactSelector from '@src/app/directory/create/CreateContactSelector';
+import OfficerSelector from '@src/app/directory/create/OfficerSelector';
 import { api } from '@src/trpc/react';
 import { createClubSchema } from '@src/utils/formSchemas';
 import { useRouter } from 'next/navigation';

src/app/directory/create/page.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import CreateClubForm from './createForm';
 import { getServerAuthSession } from '@src/server/auth';
 import { redirect } from 'next/navigation';

src/app/event/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { EventHeader } from '@src/components/BaseHeader';
+import { EventHeader } from '@src/components/header/BaseHeader';
 import { db } from '@src/server/db';
 import { and, eq } from 'drizzle-orm';
 import { type Metadata } from 'next';
@@ -8,7 +8,7 @@ import Image from 'next/image';
 import CountdownTimer from './CountdownTimer';
 import Link from 'next/link';
 import { getServerAuthSession } from '@src/server/auth';
-import RegisterButton from '@src/components/RegisterButton';
+import RegisterButton from '@src/app/event/[id]/RegisterButton';
 
 type Params = { params: { id: string } };
 

src/app/events/page.tsx

@@ -1,4 +1,4 @@
-import { EventHeader } from '@src/components/BaseHeader';
+import { EventHeader } from '@src/components/header/BaseHeader';
 import { api } from '@src/trpc/server';
 import EventView from './eventView';
 import { type Metadata } from 'next';

src/app/feedback/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import { type Metadata } from 'next';
 import Form from '@src/app/feedback/Form';
 

src/app/layout.tsx

@@ -4,7 +4,7 @@ import { Inter } from 'next/font/google';
 import { headers } from 'next/headers';
 
 import { TRPCReactProvider } from '@src/trpc/react';
-import Sidebar from '@src/components/Sidebar';
+import Sidebar from '@src/components/nav/Sidebar';
 import { type Metadata } from 'next';
 
 import { Analytics } from '@vercel/analytics/react';

src/app/manage/[clubId]/(dashboard)/layout.tsx

@@ -1,5 +1,5 @@
-import Header from '@src/components/BaseHeader';
-import BackButton from '@src/components/BlueBackButton';
+import Header from '@src/components/header/BaseHeader';
+import { BlueBackButton } from '@src/components/backButton';
 import { getServerAuthSession } from '@src/server/auth';
 import { api } from '@src/trpc/server';
 import { signInRoute } from '@src/utils/redirect';
@@ -30,7 +30,7 @@ const Layout = async ({
       <Header />
       <main className="px-5">
         <div className="flex w-full flex-row gap-x-4 align-middle">
-          <BackButton />
+          <BlueBackButton />
           <h1 className="bg-gradient-to-br from-blue-primary to-blue-700 bg-clip-text text-2xl font-extrabold text-transparent">
             {club.name}
           </h1>

src/app/manage/[clubId]/create/page.tsx

@@ -1,30 +1,32 @@
-import Header from "@src/components/BaseHeader";
-import { getServerAuthSession } from "@src/server/auth";
-import { api } from "@src/trpc/server";
-import { signInRoute } from "@src/utils/redirect";
-import { redirect, notFound } from "next/navigation";
-import CreateEventForm from "./CreateEventForm";
+import Header from '@src/components/header/BaseHeader';
+import { getServerAuthSession } from '@src/server/auth';
+import { api } from '@src/trpc/server';
+import { signInRoute } from '@src/utils/redirect';
+import { redirect, notFound } from 'next/navigation';
+import CreateEventForm from './CreateEventForm';
 
 const Page = async ({ params }: { params: { clubId: string } }) => {
-	const session = await getServerAuthSession();
-	if (!session) {
-		redirect(signInRoute(`manage/${params.clubId}/create`));
-	}
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect(signInRoute(`manage/${params.clubId}/create`));
+  }
 
-	const officerClubs = await api.club.getOfficerClubs();
-	const currentClub = officerClubs.filter(val => {
-		return val.id == params.clubId
-	})[0];
-	if (!currentClub) {
-		notFound();
-	}
+  const officerClubs = await api.club.getOfficerClubs();
+  const currentClub = officerClubs.filter((val) => {
+    return val.id == params.clubId;
+  })[0];
+  if (!currentClub) {
+    notFound();
+  }
+
+  return (
+    <main className="h-screen md:pl-72">
+      <Header />
+      <div className="flex flex-row justify-between gap-20 px-5">
+        <CreateEventForm clubId={currentClub.id} officerClubs={officerClubs} />
+      </div>
+    </main>
+  );
+};
+export default Page;
 
-	return (<main className="md:pl-72 h-screen">
-		<Header />
-		<div className="flex flex-row justify-between gap-20 px-5">
-			<CreateEventForm clubId={currentClub.id} officerClubs={officerClubs} />
-		</div>
-
-	</main>)
-}
-export default Page;

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
-import EditContactSelector from '@src/components/EditContactSelector';
+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 { editClubContactSchema } from '@src/utils/formSchemas';

src/components/EditContactSelector.tsx → src/app/manage/[clubId]/edit/EditContactSelector.tsx

@@ -23,7 +23,7 @@ import {
   Website,
   Youtube,
   type logoProps,
-} from './ContactIcons';
+} from '@src/icons/ContactIcons';
 import { type modifyDeletedAction } from '@src/app/manage/[clubId]/edit/EditContactForm';
 import { type editClubContactSchema } from '@src/utils/formSchemas';
 

src/app/manage/[clubId]/edit/officers/EditOfficerForm.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { UserSearchBar } from '@src/components/SearchBar';
+import { UserSearchBar } from '@src/components/searchBar/UserSearchBar';
 import { api } from '@src/trpc/react';
 import { editOfficerSchema } from '@src/utils/formSchemas';
 import { useRouter } from 'next/navigation';

src/app/manage/[clubId]/edit/officers/page.tsx

@@ -1,5 +1,5 @@
-import Header from '@src/components/BaseHeader';
-import BackButton from '@src/components/BlueBackButton';
+import Header from '@src/components/header/BaseHeader';
+import { BlueBackButton } from '@src/components/backButton';
 import EditOfficerForm from './EditOfficerForm';
 import { api } from '@src/trpc/server';
 import { getServerAuthSession } from '@src/server/auth';
@@ -28,7 +28,7 @@ export default async function Page({
     <main className="h-full md:pl-72">
       <Header />
       <div className="flex flex-col gap-y-2 px-5">
-        <BackButton />
+        <BlueBackButton />
         <h1 className="text-2xl font-extrabold text-blue-primary">
           Edit club officers
         </h1>

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

@@ -1,9 +1,9 @@
 import { api } from '@src/trpc/server';
 import EditClubForm from './EditClubForm';
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import { notFound } from 'next/navigation';
 import EditContactForm from './EditContactForm';
-import BackButton from '@src/components/BlueBackButton';
+import { BlueBackButton } from '@src/components/backButton';
 
 export default async function Page({
   params: { clubId },
@@ -17,7 +17,7 @@ export default async function Page({
       <div className="md:pl-72">
         <Header />
         <div className="flex h-full w-full flex-col gap-y-5 p-5">
-          <BackButton />
+          <BlueBackButton />
           <EditClubForm club={club} />
           <EditContactForm club={club} />
         </div>

src/app/manage/page.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import { getServerAuthSession } from '@src/server/auth';
 import { api } from '@src/trpc/server';
 import ClubCard from './ClubCard';

src/app/page.tsx

@@ -1,7 +1,7 @@
-import Header from '../components/BaseHeader';
-import Carousel from '../components/Carousel';
-import TagFilter from '../components/TagFilter';
-import OrgDirectoryGrid from '../components/OrgDirectoryGrid';
+import Header from '../components/header/BaseHeader';
+import Carousel from '../components/club/directory/Carousel';
+import TagFilter from '../components/club/directory/TagFilter';
+import ClubDirectoryGrid from '../components/club/directory/ClubDirectoryGrid';
 import type { Metadata } from 'next';
 import { api } from '@src/trpc/server';
 
@@ -33,7 +33,7 @@ const Home = async (props: Params) => {
           <Carousel clubs={onlyClubs} />
         </div>
         <TagFilter tags={tags} />
-        <OrgDirectoryGrid tag={props.searchParams.tag} />
+        <ClubDirectoryGrid tag={props.searchParams.tag} />
       </div>
     </main>
   );

src/app/settings/page.tsx

@@ -2,7 +2,7 @@ import { getServerAuthSession } from '@src/server/auth';
 import SettingsForm from '@src/components/settings/SettingsForm';
 import { type Metadata } from 'next';
 import { redirect } from 'next/navigation';
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import { signInRoute } from '@src/utils/redirect';
 export const metadata: Metadata = {
   title: 'Settings - Jupiter',

src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/BaseHeader';
+import Header from '@src/components/header/BaseHeader';
 import React from 'react';
 import { type FC } from 'react';