Feat: Add meta info to concerts, bands and locations

app/bands/[id]/page.tsx

@@ -18,7 +18,12 @@ async function fetchData(params: { id: string }) {
 
   const { data, error } = await supabase
     .from('bands')
-    .select('*, country:countries(id, iso2, name), genres(*)')
+    .select(
+      `*,
+      country:countries(id, iso2, name),
+      genres(*),
+      creator:profiles!bands_creator_id_fkey(*)`
+    )
     .eq('id', params.id)
     .single()
 

app/concerts/[id]/page.tsx

@@ -23,7 +23,8 @@ async function fetchConcert(concertId: string) {
       `*,
       location:locations(*),
       bands:j_concert_bands(*, ...bands(*, country:countries(id, iso2), genres(*))),
-      bands_seen:j_bands_seen(*)`
+      bands_seen:j_bands_seen(*),
+      creator:profiles!concerts_creator_id_fkey(*)`
     )
     .eq('id', concertId)
     .order('item_index', { referencedTable: 'j_concert_bands', ascending: true })

app/locations/[id]/page.tsx

@@ -19,7 +19,7 @@ async function fetchData(params: { id: string }) {
 
   const { data, error } = await supabase
     .from('locations')
-    .select('*, country:countries(id, iso2)')
+    .select('*, country:countries(id, iso2), creator:profiles!locations_creator_id_fkey(*)')
     .eq('id', params.id)
     .single()
 

components/bands/BandPage.tsx

@@ -17,6 +17,7 @@ import { useSpotifyArtist } from '@/hooks/spotify/useSpotifyArtist'
 import { UserItem } from '../shared/UserItem'
 import { useBandProfiles } from '@/hooks/bands/useBandProfiles'
 import { UserMusicIcon } from '../layout/UserMusicIcon'
+import { MetaInfo } from '../shared/MetaInfo'
 
 type BandPageProps = {
   initialBand: Band
@@ -156,6 +157,9 @@ export const BandPage = ({ initialBand, bandQueryState }: BandPageProps) => {
           {concerts?.data.map(item => <ConcertCard key={item.id} concert={item} nested />)}
         </section>
       )}
+      {(band.created_at || band.creator_id) && (
+        <MetaInfo createdAt={band.created_at} creator={band.creator} />
+      )}
     </main>
   )
 }

components/concerts/ConcertPage.tsx

@@ -22,6 +22,7 @@ import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { modalPaths } from '../shared/ModalProvider'
 import { useConcertProfiles } from '@/hooks/concerts/useConcertProfiles'
 import { Chip } from '../Chip'
+import { MetaInfo } from '../shared/MetaInfo'
 
 type ConcertUserItemProps = {
   concert: Concert
@@ -176,6 +177,7 @@ export const ConcertPage = ({ initialConcert, concertQueryState }: ConcertPagePr
         <div className="rounded-lg bg-slate-800 p-4 md:p-6">
           <Comments />
         </div>
+        <MetaInfo createdAt={concert.created_at} creator={concert.creator} />
       </main>
     </ConcertContext.Provider>
   )

components/locations/LocationPage.tsx

@@ -13,6 +13,7 @@ import { ArrowLeft, Edit, MapPin, Trash } from 'lucide-react'
 import { UserItem } from '../shared/UserItem'
 import { useLocation } from '@/hooks/locations/useLocation'
 import { useLocationProfiles } from '@/hooks/locations/useLocationProfiles'
+import { MetaInfo } from '../shared/MetaInfo'
 
 type LocationPageProps = {
   location: Location
@@ -140,6 +141,9 @@ export const LocationPage = ({
           {concerts?.data.map(item => <ConcertCard key={item.id} concert={item} nested />)}
         </section>
       )}
+      {(location.created_at || location.creator_id) && (
+        <MetaInfo createdAt={location.created_at} creator={location.creator} />
+      )}
     </main>
   )
 }

components/shared/MetaInfo.tsx

@@ -0,0 +1,28 @@
+import { InfoIcon } from 'lucide-react'
+import Link from 'next/link'
+
+type MetaInfoProps = {
+  createdAt: string | null
+  creator?: {
+    username: string
+  } | null
+}
+
+export const MetaInfo = ({ createdAt, creator }: MetaInfoProps) => {
+  return (
+    <section className="flex items-center gap-3 rounded-lg bg-slate-800 p-4 text-sm text-slate-300 md:p-6">
+      <InfoIcon className="size-icon" />
+      <p>
+        Erstellt {createdAt && `am ${new Date(createdAt).toLocaleDateString('de-CH')}`}
+        {creator && (
+          <>
+            {' von '}
+            <Link href={`/users/${creator.username}`} className="text-white hover:underline">
+              {creator.username}
+            </Link>
+          </>
+        )}
+      </p>
+    </section>
+  )
+}

hooks/bands/useBand.ts

@@ -5,7 +5,13 @@ import supabase from '@/utils/supabase/client'
 const fetchBand = async (bandId: number): Promise<Band> => {
   const { data, error } = await supabase
     .from('bands')
-    .select('*, country:countries(id, iso2), genres(*), concerts!j_concert_bands(*)')
+    .select(
+      `*,
+      country:countries(id, iso2),
+      genres(*),
+      concerts!j_concert_bands(*),
+      creator:profiles!bands_creator_id_fkey(*)`
+    )
     .eq('id', bandId)
     .single()
 

hooks/concerts/useConcert.ts

@@ -14,7 +14,8 @@ const fetchConcert = async (concertId: string | null): Promise<Concert> => {
       festival_root:festival_roots(name),
       location:locations(*),
       bands:j_concert_bands(*, ...bands(*, country:countries(id, iso2), genres(*))),
-      bands_seen:j_bands_seen(*)`
+      bands_seen:j_bands_seen(*),
+      creator:profiles!concerts_creator_id_fkey(username)`
     )
     .eq('id', concertId)
     .order('item_index', { referencedTable: 'j_concert_bands', ascending: true })

hooks/locations/useLocation.ts

@@ -5,7 +5,7 @@ import { Location } from '@/types/types'
 async function fetchLocation(id: number): Promise<Location> {
   const { data, error } = await supabase
     .from('locations')
-    .select('*, country:countries(id, iso2)')
+    .select('*, country:countries(id, iso2), creator:profiles!locations_creator_id_fkey(*)')
     .eq('id', id)
     .single()
 

types/supabase.ts

@@ -45,6 +45,20 @@ export type Database = {
             referencedRelation: "countries"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "bands_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profile_stats"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "bands_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "public_bands_creator_id_fkey"
             columns: ["creator_id"]
@@ -98,7 +112,7 @@ export type Database = {
       }
       concerts: {
         Row: {
-          created_at: string | null
+          created_at: string
           creator_id: string | null
           date_end: string | null
           date_start: string
@@ -109,7 +123,7 @@ export type Database = {
           name: string | null
         }
         Insert: {
-          created_at?: string | null
+          created_at?: string
           creator_id?: string | null
           date_end?: string | null
           date_start: string
@@ -120,7 +134,7 @@ export type Database = {
           name?: string | null
         }
         Update: {
-          created_at?: string | null
+          created_at?: string
           creator_id?: string | null
           date_end?: string | null
           date_start?: string
@@ -131,6 +145,20 @@ export type Database = {
           name?: string | null
         }
         Relationships: [
+          {
+            foreignKeyName: "concerts_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profile_stats"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "concerts_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "concerts_location_id_fkey"
             columns: ["location_id"]
@@ -481,6 +509,20 @@ export type Database = {
           zip_code?: string | null
         }
         Relationships: [
+          {
+            foreignKeyName: "locations_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profile_stats"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "locations_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "public_locations_country_id_fkey"
             columns: ["country_id"]
@@ -596,6 +638,20 @@ export type Database = {
           name: string | null
         }
         Relationships: [
+          {
+            foreignKeyName: "concerts_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "concerts_creator_id_fkey"
+            columns: ["creator_id"]
+            isOneToOne: false
+            referencedRelation: "profile_stats"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "concerts_location_id_fkey"
             columns: ["location_id"]

types/types.ts

@@ -41,6 +41,7 @@ export type Concert = Tables<'concerts'> & {
   location?: Location | null
   bands?: Band[]
   bands_seen?: BandSeen[]
+  creator?: { username: string } | null
 }
 
 export type AddConcert = TablesInsert<'concerts'> & {
@@ -70,6 +71,7 @@ export type Band = Tables<'bands'> & {
   genres: Genre[]
   concerts?: Concert[]
   item_index?: number | null
+  creator?: { username: string } | null
 }
 
 export type AddBand = TablesInsert<'bands'> & {
@@ -89,6 +91,7 @@ export type Genre = Tables<'genres'>
 
 export type Location = Tables<'locations'> & {
   country?: Country | null
+  creator?: { username: string } | null
 }
 
 export type AddLocation = TablesInsert<'locations'>