Skip to content

Commit

Permalink
Start updating to next 15
Browse files Browse the repository at this point in the history
  • Loading branch information
RubenOlano committed Nov 21, 2024
1 parent 9606371 commit 17da572
Show file tree
Hide file tree
Showing 18 changed files with 3,629 additions and 1,577 deletions.
2 changes: 1 addition & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
4,770 changes: 3,361 additions & 1,409 deletions package-lock.json

Large diffs are not rendered by default.

47 changes: 24 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,33 @@
"drizzle:push": "dotenv drizzle-kit push:pg"
},
"dependencies": {
"@auth/drizzle-adapter": "^0.3.2",
"@hookform/resolvers": "^3.3.2",
"@neondatabase/serverless": "^0.10.2",
"@next/third-parties": "^14.2.15",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3",
"@auth/drizzle-adapter": "^1.7.4",
"@hookform/resolvers": "^3.9.1",
"@neondatabase/serverless": "^0.10.3",
"@next/third-parties": "^15.0.3",
"@radix-ui/react-alert-dialog": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-radio-group": "^1.2.1",
"@tanstack/match-sorter-utils": "^8.8.4",
"@tanstack/react-query": "^5.29.2",
"@tanstack/react-query": "^5.60.6",
"@tanstack/react-table": "^8.11.0",
"@tanstack/react-virtual": "^3.0.1",
"@trpc/client": "^11.0.0-rc.340",
"@trpc/react-query": "^11.0.0-rc.340",
"@trpc/server": "^11.0.0-rc.340",
"@trpc/client": "^11.0.0-rc.638",
"@trpc/next": "^11.0.0-rc.638",
"@trpc/react-query": "^11.0.0-rc.638",
"@trpc/server": "^11.0.0-rc.638",
"date-fns": "^2.30.0",
"dotenv": "^16.0.3",
"drizzle-orm": "^0.28.5",
"drizzle-zod": "^0.5.1",
"next": "^14.2.2",
"next-auth": "^4.23.0",
"next": "^15.0.3",
"next-auth": "^4.24.10",
"postgres": "^3.3.5",
"react": "^18.2.0",
"react-day-picker": "^8.9.1",
"react-dom": "^18.2.0",
"react": "^18.3.1",
"react-day-picker": "^9.3.2",
"react-dom": "^18.3.1",
"react-hook-form": "^7.48.2",
"superjson": "^1.13.1",
"zod": "^3.22.4"
Expand All @@ -50,17 +51,17 @@
"@types/eslint": "^8.44.2",
"@types/jest": "^29.5.5",
"@types/node": "^18.16.0",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^6.3.0",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^8.15.0",
"@typescript-eslint/parser": "^8.15.0",
"autoprefixer": "^10.4.14",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
"dotenv-cli": "^7.3.0",
"drizzle-kit": "^0.19.13",
"eslint": "^8.47.0",
"eslint-config-next": "^14.2.1",
"eslint-config-next": "^15.0.3",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
Expand Down
10 changes: 5 additions & 5 deletions src/app/auth/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import Image from 'next/image';
import BackButton from '@src/components/backButton';

export default async function Auth({
searchParams,
searchParams: paramsPromise,
}: {
searchParams: { [key: string]: string };
searchParams: Promise<{ [key: string]: string }>;
}) {
const params = await paramsPromise;
const session = await getServerAuthSession();
if (session) {
return redirect(searchParams['callbackUrl'] ?? '/');
}
if (session) return redirect(params['callbackUrl'] ?? '/');

const providers = await getProviders();

return (
Expand Down
2 changes: 0 additions & 2 deletions src/app/community/communityEvents.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use server';

import EventCard from '@src/components/events/EventCard';
import { api } from '@src/trpc/server';
import Link from 'next/link';
Expand Down
6 changes: 3 additions & 3 deletions src/app/directory/search/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { ClubSearchComponent } from './ClubSearch';
import { getServerAuthSession } from '@src/server/auth';

type Params = {
searchParams: { [key: string]: string | undefined };
searchParams: Promise<{ [key: string]: string | undefined }>;
};

const clubSearch = async (props: Params) => {
const { searchParams } = props;
const userSearch = searchParams['search'] || '';
const params = await props.searchParams;
const userSearch = params['search'] || '';
const session = await getServerAuthSession();

return (
Expand Down
33 changes: 19 additions & 14 deletions src/app/events/eventView.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
'use client';

Check failure on line 1 in src/app/events/eventView.tsx

View workflow job for this annotation

GitHub Actions / check-formatting

src/app/events/eventView.tsx not formatted correctly
import DateBrowser from '@src/components/events/DateBrowser';
import { type eventParamsSchema } from '@src/utils/eventFilter';
import useSyncedSearchParams from '@src/utils/useSyncedSearchParams';
import { type ReactNode } from 'react';

type Props = {
children: ReactNode;
searchParams: eventParamsSchema;
};

const EventView = ({ children, searchParams }: Props) => {
const [params, setParams] = useSyncedSearchParams(searchParams, '/events');

return (
<div className="w-full px-6">
<main className="w-full px-6">
<div className="flex flex-col pt-4 md:flex-row md:items-end md:pb-12 md:pr-7.5">
<h1 className="h-min align-middle text-2xl font-bold text-[#4D5E80]">
<h1 className="h-min align-middle text-2xl font-bold text-[#4D5E80]"
id="events-heading">
Events
</h1>
<div className="relative z-0 mt-2.5 flex flex-row justify-center gap-x-16 md:ml-auto md:mt-0">
<DateBrowser filterState={params} setParams={setParams} />
</div>
<nav className="relative z-0 mt-2.5 flex flex-row justify-center gap-x-16 md:ml-auto md:mt-0"
aria-label="Event date filter">
<DateBrowser filterState={searchParams}/>
</nav>
</div>
<div className="container flex w-full flex-col overflow-x-clip sm:flex-row sm:space-x-7.5 ">

<section
aria-labelledby="events-heading"
className="container flex w-full flex-col overflow-x-clip sm:flex-row sm:space-x-7.5"
>
<div
data-view={'list'}
className={
'md:items-normal group flex w-full flex-col items-center space-y-7.5 pt-10'
}
data-view="list"
className="group flex w-full flex-col items-center space-y-7.5 pt-10 md:items-start"
>
{children}
</div>
</div>
</div>
</section>
</main>
);
};

export default EventView;
14 changes: 5 additions & 9 deletions src/app/events/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,16 @@ export const metadata: Metadata = {
description: 'Get connected on campus.',
},
};
const Events = async ({
searchParams,
}: {
searchParams: (typeof eventParamsSchema)['_input'];
}) => {
const Events = async ({ searchParams: paramsPromise }: { searchParams: Promise<(typeof eventParamsSchema)['_input']> }) => {
const searchParams = await paramsPromise
const parsed = eventParamsSchema.parse(searchParams);
const { events } = await api.event.findByDate({
date: parsed.date,
});
const { events } = await api.event.findByDate({ date: parsed.date });
return (
<main className="pb-10 md:pl-72">
<EventHeader />
<EventView searchParams={parsed}>
{events.map((event) => {
{ events.length === 0 && <div>No events found for this date</div>}
{ events.map((event) => {
return <EventCard key={event.id} event={event} />;
})}
</EventView>
Expand Down
34 changes: 34 additions & 0 deletions src/app/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export default function Loading() {

Check failure on line 1 in src/app/loading.tsx

View workflow job for this annotation

GitHub Actions / check-formatting

src/app/loading.tsx not formatted correctly
return (
<main className="md:pl-72">
<div className="px-2 md:px-5">
{/* Carousel skeleton */}
<div className="relative block w-full mb-8">
<div className="w-full h-[300px] rounded-xl animate-pulse bg-gray-200" />
</div>

{/* Tag filter skeleton */}
<div className="mb-8">
<div className="flex gap-2 flex-wrap">
{Array.from({ length: 6 }).map((_, i) => (
<div
key={i}
className="h-8 w-24 rounded-full animate-pulse bg-gray-200"
/>
))}
</div>
</div>

{/* Club grid skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<div
key={i}
className="h-[280px] rounded-xl animate-pulse bg-gray-200"
/>
))}
</div>
</div>
</main>
);
}
21 changes: 14 additions & 7 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ 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';
import { getServerAuthSession } from '@src/server/auth';

export const metadata: Metadata = {
title: 'Jupiter - Nebula',
Expand All @@ -17,23 +18,29 @@ export const metadata: Metadata = {
},
};

type Params = {
searchParams: { [key: string]: string | undefined };
type Props = {
searchParams: Promise<{ [key: string]: string | undefined }>
};

const Home = async (props: Params) => {
const tags = await api.club.distinctTags();
const featured = await api.club.getCarousel();
const Home = async ({ searchParams }: Props) => {
const params = await searchParams;
void api.club.all.prefetch({ tag: params.tag});
const [tags, featured, session] = await Promise.all([
api.club.distinctTags(),
api.club.getCarousel(),
getServerAuthSession(),
]);
const onlyClubs = featured.map((item) => item.club);

return (
<main className="md:pl-72">
<Header />
<div className="px-2 md:px-5">
<div className="relative block w-full">
<Carousel clubs={onlyClubs} />
</div>
<TagFilter tags={tags} />
<ClubDirectoryGrid tag={props.searchParams.tag} />
<TagFilter tags={tags} selectedTag={params.tag} />
<ClubDirectoryGrid session={session} />
</div>
</main>
);
Expand Down
54 changes: 35 additions & 19 deletions src/components/club/directory/ClubDirectoryGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
import { type FC } from 'react';
import ClubCard from '../ClubCard';
import { api } from '@src/trpc/server';
import { getServerAuthSession } from '@src/server/auth';
import InfiniteScrollGrid from './InfiniteScrollGrid';
import ScrollTop from './ScrollTop';

interface Props {
tag?: string;
}
'use client';

Check failure on line 1 in src/components/club/directory/ClubDirectoryGrid.tsx

View workflow job for this annotation

GitHub Actions / check-formatting

src/components/club/directory/ClubDirectoryGrid.tsx not formatted correctly

import { api } from '@src/trpc/react';
import { useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
import ClubCard, { ClubCardSkeleton } from '../ClubCard';
import type { Session } from 'next-auth';

type Props = {
session: Session | null;
};

export default function ClubDirectoryGrid({ session }: Props) {
const searchParams = useSearchParams();
const tag = searchParams.get('tag');

const { data, refetch } = api.club.all.useQuery(
{ tag: tag ?? undefined },
{ staleTime: 1000 * 60 * 5 }
);

const ClubDirectoryGrid: FC<Props> = async ({ tag }) => {
const { clubs } = await api.club.all({ tag, limit: 9 });
const session = await getServerAuthSession();
useEffect(() => {
void refetch();
}, [tag, refetch]);

if (!data) return <ClubDirectoryGridSkeleton />;

return (
<div className="grid w-full auto-rows-fr grid-cols-[repeat(auto-fill,320px)] justify-center gap-16 pb-4">
{clubs.map((club) => (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{data?.clubs.map((club) => (
<ClubCard key={club.id} club={club} session={session} priority />
))}
{clubs.length === 9 && <InfiniteScrollGrid tag={tag} session={session} />}
<ScrollTop />
</div>
);
};
}

export default ClubDirectoryGrid;
function ClubDirectoryGridSkeleton() {
return <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: 12 }).map((_, index) => (
<ClubCardSkeleton key={index} />
))}
</div>
}
Loading

0 comments on commit 17da572

Please sign in to comment.