project in locations

src/app/[locale]/locations/[place]/layout.tsx → src/app/[locale]/locations/[...slug]/layout.tsx

@@ -1,17 +1,11 @@
 export default function LocationsLayout({
   children,
-  selected,
-  program,
 }: {
   children: React.ReactNode;
-  selected: React.ReactNode;
-  program: React.ReactNode;
 }) {
   return (
     <div className="grid h-content grid-cols-1 p-0 xs:grid-cols-5">
       {children}
-      {program}
-      {selected}
     </div>
   );
 }

src/app/[locale]/locations/[...slug]/page.tsx

@@ -0,0 +1,23 @@
+import Place from './place.server';
+import ProgramPage from './program.server';
+import Project from './project.server';
+
+type LocationsPageProps = {
+  params: { slug: string[] };
+};
+
+export default async function LocationsPage(props: LocationsPageProps) {
+  const place = props.params.slug[0];
+  const projectId = props.params.slug[1];
+
+  return (
+    <>
+      <Place place={place} />
+      {projectId ? (
+        <Project projectId={projectId} />
+      ) : (
+        <ProgramPage place={place} />
+      )}
+    </>
+  );
+}

src/app/[locale]/locations/[place]/page.tsx → src/app/[locale]/locations/[...slug]/place.server.tsx

@@ -3,12 +3,12 @@ import { Link } from '@/navigation';
 import Floorplan from '../components/floorplan/index.server';
 import Subnavigation from '../components/subnavigation/index.server';
 
-type LocationsPageProps = {
-  params: { place: string };
+type PlaceProps = {
+  place: string;
 };
 
-export default async function LocationsPage(props: LocationsPageProps) {
-  const location = await getLocation(props.params.place);
+export default async function Place(props: PlaceProps) {
+  const location = await getLocation(props.place);
 
   return (
     <div className="relative z-50 col-span-3 h-full w-full bg-primary p-border pr-0 sm:top-[50dvh] sm:overflow-y-scroll sm:overscroll-contain">

src/app/[locale]/locations/[place]/@program/default.tsx → src/app/[locale]/locations/[...slug]/program.server.tsx

@@ -5,23 +5,23 @@ import { Item } from '@/types/item';
 import JumpToTop from '@/components/jumpToTop';
 
 export type ProgramPageProps = {
-  params: { place: string };
-  searchParams: { [key: string]: string | undefined };
+  place: string;
 };
 
 export const revalidate = 0;
 
-export default async function ProgramPage({
-  searchParams,
-  params: { place },
-}: ProgramPageProps) {
-  const items = await getFilteredGraphQLLocationItems(searchParams, place);
+export default async function ProgramPage({ place }: ProgramPageProps) {
+  const items = await getFilteredGraphQLLocationItems({}, place);
 
   return (
     items && (
       <ProgramContainer>
         {items.map((item) => (
-          <ProjectCard key={item.id} item={item} />
+          <ProjectCard
+            key={item.id}
+            item={item}
+            linkPathname={`/locations/${place}`}
+          />
         ))}
       </ProgramContainer>
     )
@@ -33,8 +33,8 @@ export type ProgramProps = {
 
 function ProgramContainer({ children }: ReactNodeProps) {
   return (
-    <div className="z-50 -ml-[1px] h-full bg-primary xs:col-span-2 sm:h-content sm:overflow-y-scroll">
-      <div className="min-h-content col-span-1 max-h-fit columns-1 items-start justify-start gap-0 bg-primary xs:col-span-2 md:columns-2">
+    <div className="max-h-content min-h-content z-50 -ml-[1px] h-content bg-primary md:col-span-2 md:overflow-y-scroll">
+      <div className="min-h-content col-span-1 grid max-h-full w-full columns-1 items-start justify-start gap-border bg-primary px-border md:grid-cols-2">
         {children}
       </div>
       <JumpToTop />

src/app/[locale]/locations/[...slug]/project.server.tsx

@@ -0,0 +1,15 @@
+import { getParsedItem } from '@/api/rest/item';
+import Project from '@/app/project/[id]/components/project.server';
+
+export type ProjectPageProps = {
+  projectId: string;
+};
+
+export default async function ProjectPage({ projectId }: ProjectPageProps) {
+  const item = await getParsedItem(projectId);
+  return (
+    <div className="z-50 col-span-2 h-content overflow-y-scroll">
+      <Project item={item} withCloseOption />
+    </div>
+  );
+}

src/components/project/authors.server.tsx

@@ -1,22 +1,19 @@
 import { ProjectCardProps } from '@/components/project/card.server';
-import {Link} from "@/navigation";
+import { Link } from '@/navigation';
 
-export default function ProjectCardAuthors({ item }: ProjectCardProps) {
+export default function ProjectCardAuthors({
+  item,
+  linkPathname = '/project',
+}: ProjectCardProps) {
   if (item.authors.length === 0) {
     return <></>;
   }
 
   return (
-      <Link
-          href={{
-            pathname: `/project/[id]`,
-            params: { id: item.id },
-          }}
-          className="w-full max-w-full"
-      >
-        <div className="pb-gutter-md text-right text-xs">
-          {item.authors?.join(' ')}
-        </div>
-      </Link>
+    <Link href={`${linkPathname}/${item.id}`} className="w-full max-w-full">
+      <div className="pb-gutter-md text-right text-xs">
+        {item.authors?.join(' ')}
+      </div>
+    </Link>
   );
 }

src/components/project/card.server.tsx

@@ -7,19 +7,20 @@ import ProjectCardContainer from '@/components/project/container.client';
 
 export type ProjectCardProps = {
   item: Item;
+  linkPathname?: string;
 };
 
-export default function ProjectCard({ item }: ProjectCardProps) {
+export default function ProjectCard({ item, linkPathname }: ProjectCardProps) {
   return (
     <ProjectCardContainer item={item}>
-        <div>
-            <ProjectCardImage item={item} />
-            <ProjectCardName item={item} />
-        </div>
-        <div className="grow flex flex-col">
-            <ProjectCardAuthors item={item} />
-            <ProjectCardFilters item={item} />
-        </div>
+      <div>
+        <ProjectCardImage item={item} linkPathname={linkPathname} />
+        <ProjectCardName item={item} linkPathname={linkPathname} />
+      </div>
+      <div className="flex grow flex-col">
+        <ProjectCardAuthors item={item} linkPathname={linkPathname} />
+        <ProjectCardFilters item={item} />
+      </div>
     </ProjectCardContainer>
   );
 }

src/components/project/container.client.tsx

@@ -5,7 +5,7 @@ import { useStore } from 'zustand';
 
 import { ReactNodeProps } from '@/types/types';
 import { useUIStore } from '@/lib/uiStore';
-import {ProjectCardProps} from "@/components/project/card.server";
+import { ProjectCardProps } from '@/components/project/card.server';
 
 export default function ProjectCardContainer({
   children,
@@ -16,11 +16,13 @@ export default function ProjectCardContainer({
   );
 
   return (
-      <div className={cx(
-          'rounded-border p-gutter-xs hover:bg-highlight text-primary flex-col flex',
-          isSaved ? 'bg-highlight' : 'bg-secondary',
-      )}>
-          {children}
-      </div>
+    <div
+      className={cx(
+        'flex flex-col rounded-border p-gutter-xs text-primary hover:bg-highlight',
+        isSaved ? 'bg-highlight' : 'bg-secondary',
+      )}
+    >
+      {children}
+    </div>
   );
 }

src/components/project/filters/filters.server.tsx

@@ -7,32 +7,41 @@ export type ProjectCardProps = {
 };
 
 const filterFetchers: {
-    translation: 'format' | 'faculty' | 'language' ,
-    data: 'formats' | 'faculties' | 'languages',
+  translation: 'format' | 'faculty' | 'language';
+  data: 'formats' | 'faculties' | 'languages';
 }[] = [
-    {translation: 'format', data: 'formats'},
-    {translation: 'faculty', data: 'faculties'},
-    {translation: 'language', data: 'languages'}
-]
+  { translation: 'format', data: 'formats' },
+  { translation: 'faculty', data: 'faculties' },
+  { translation: 'language', data: 'languages' },
+];
 
 export default function ProjectCardFilters({ item }: ProjectCardProps) {
-    const t = useTranslations();
-    return (
-      <div className="max-w-full w-full flex flex-wrap gap-gutter-sm">
-          {filterFetchers.map((fetcher) => {
-              const filters = item[fetcher.data].filter((f) => f.name);
+  const t = useTranslations();
+  return (
+    <div className="flex w-full max-w-full flex-wrap gap-gutter-sm">
+      {filterFetchers.map((fetcher) => {
+        const filters = item[fetcher.data].filter((f) => f.name);
 
-              if (filters.length === 0) {
-                  return <></>;
-              }
+        if (filters.length === 0) {
+          return <></>;
+        }
 
-              return (
-                  <div key={fetcher.translation}>
-                      <div className="pb-gutter-xs text-xxxs text-grey">{t(fetcher.translation, { count: 2 })}</div>
-                      <div className="flex wrap gap-gutter-sm">{filters.map((filter) => <FilterTag filter={filter} />)}</div>
-                  </div>
-              )
-          })}
-      </div>
+        return (
+          <div key={fetcher.translation}>
+            <div className="pb-gutter-xs text-xxxs text-grey">
+              {t(fetcher.translation, { count: 2 })}
+            </div>
+            <div className="wrap flex gap-gutter-sm">
+              {filters.map((filter) => (
+                <FilterTag
+                  key={`item-tag-${item.id}-${filter.id}`}
+                  filter={filter}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
   );
 }

src/components/project/image.server.tsx

@@ -1,23 +1,24 @@
 import Image from '@/components/image';
 import { ProjectCardProps } from '@/components/project/card.server';
 import SaveButton from '@/components/saveButton.client';
-import {Link} from "@/navigation";
+import { Link } from '@/navigation';
 
-export default function ProjectCardImage({ item }: ProjectCardProps) {
+export default function ProjectCardImage({
+  item,
+  linkPathname = '/project',
+}: ProjectCardProps) {
   return (
     <div className="relative w-full overflow-hidden">
-        <Link
-            href={{
-                pathname: `/project/[id]`,
-                params: { id: item.id },
-            }}
-        >
-            <Image
-                className="rounded-md bg-primary"
-                src={item.thumbnail != '' ? item.thumbnail : '/assets/placeholder.png'}
-            />
-        </Link>
-        <SaveButton itemId={item.id} />
+      <Link href={`${linkPathname}/${item.id}`}>
+        <Image
+          className="rounded-md bg-primary"
+          src={
+            item.thumbnail != '' ? item.thumbnail : '/assets/placeholder.png'
+          }
+          alt="thumbnail"
+        />
+      </Link>
+      <SaveButton itemId={item.id} />
     </div>
   );
 }

src/components/project/name.server.tsx

@@ -1,16 +1,13 @@
 import { ProjectCardProps } from '@/components/project/card.server';
-import {Link} from "@/navigation";
+import { Link } from '@/navigation';
 
-export default function ProjectCardName({ item }: ProjectCardProps) {
+export default function ProjectCardName({
+  item,
+  linkPathname = '/project',
+}: ProjectCardProps) {
   return (
-      <Link
-          href={{
-            pathname: `/project/[id]`,
-            params: { id: item.id },
-          }}
-          className="w-full max-w-full"
-      >
-        <div className="py-gutter-md text-sm">{item.name}</div>
-      </Link>
+    <Link href={`${linkPathname}/${item.id}`} className="w-full max-w-full">
+      <div className="py-gutter-md text-sm">{item.name}</div>
+    </Link>
   );
 }