feat: connect groups to backend

package.json

@@ -14,7 +14,7 @@
     "check:fix": "biome check --write --unsafe"
   },
   "dependencies": {
-    "@polinetwork/backend": "^0.16.4",
+    "@polinetwork/backend": "^0.18.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",

src/app/groups/didattica/[school]/[level]/[course]/page.tsx

@@ -1,5 +1,7 @@
 import { GroupsResult } from "@/components/groups/groups-result"
 
+export const dynamic = "force-dynamic"
+
 export default async function DidatticaGroupsResultPage({
   params,
 }: {

src/app/groups/didattica/[school]/[level]/page.tsx

@@ -1,6 +1,8 @@
 import { CourseStep } from "@/components/groups/course-step"
 import type { CourseSearchParams } from "@/components/groups/types"
 
+export const dynamic = "force-dynamic"
+
 export default async function DidatticaCoursePage({
   params,
   searchParams,

src/app/groups/extra/page.tsx

@@ -1,5 +1,7 @@
 import { ExtraGroups } from "@/components/groups/extra-groups"
 
+export const dynamic = "force-dynamic"
+
 export default function ExtraGroupsPage() {
   return <ExtraGroups />
 }

src/components/card-course-group.tsx

@@ -22,17 +22,17 @@ export const cardCourseGroupVariants = cva(
 
 export function CardCourseGroup({
   groupName,
-  hasWhatsapp = true,
+  waLink,
   iconWhatsApp: IconWhatsApp = FaWhatsapp,
-  hasTelegram = true,
+  tgLink,
   iconTelegram: IconTelegram = LiaTelegramPlane,
   secondary = false,
   stacked = false,
 }: {
   groupName: string
-  hasWhatsapp?: boolean
+  waLink?: string
   iconWhatsApp?: IconType
-  hasTelegram?: boolean
+  tgLink?: string
   iconTelegram?: IconType
   stacked?: boolean
 } & VariantProps<typeof cardCourseGroupVariants>) {
@@ -48,8 +48,16 @@ export function CardCourseGroup({
         {groupName}
       </CardTitle>
       <div className={cn("flex items-center gap-3", stacked ? "md:contents" : "contents")}>
-        {hasWhatsapp && <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="sm" />}
-        {hasTelegram && <CardAction gradient={false} className={actionClassName} icon={IconTelegram} iconSize="sm" />}
+        {waLink && (
+          <a href={waLink} target="_blank" rel="noopener noreferrer" aria-label={`${groupName} su WhatsApp`}>
+            <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="sm" />
+          </a>
+        )}
+        {tgLink && (
+          <a href={tgLink} target="_blank" rel="noopener noreferrer" aria-label={`${groupName} su Telegram`}>
+            <CardAction gradient={false} className={actionClassName} icon={IconTelegram} iconSize="sm" />
+          </a>
+        )}
       </div>
     </Card>
   )

src/components/card-course.tsx

@@ -5,30 +5,36 @@ import { Card, CardAction, CardContent } from "./ui/card"
 export function CardCourse({
   courseName,
   iconLocation: IconLocation = FiMapPin,
-  location = "Milano Leonardo",
+  location,
   iconLanguage: IconLanguage = FiGlobe,
-  language = "ITA",
+  language,
   iconSelect: IconSelect = FiChevronRight,
 }: {
   courseName: string
   iconLocation?: IconType
-  location?: "Milano Leonardo" | "Milano Bovisa" | "Cremona" | "Lecco" | "Mantova" | "Piacenza" | "Xi'an" //Magari poi si mette solo string come tipo nel caso si pullino da un DB
+  location?: string
   iconLanguage?: IconType
-  language?: "ITA" | "ENG" //Idem
+  language?: string
   iconSelect?: IconType
 }) {
   return (
     <Card className="typo-body-large flex h-fit w-full flex-row items-center gap-2 px-5 py-3.75 font-normal leading-6 tracking-[0.03125rem] sm:gap-0">
       <div className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
-        <CardContent className="min-w-0 truncate sm:basis-1/3">{courseName}</CardContent>
-        <div className="flex min-w-0 items-center gap-4 sm:contents">
-          <CardContent className="flex min-w-0 items-center gap-1.25 sm:basis-1/3">
-            <CardAction icon={IconLocation} iconSize="xs" /> <span className="truncate">{location}</span>
-          </CardContent>
-          <CardContent className="flex min-w-0 items-center gap-1.25 sm:basis-1/3">
-            <CardAction icon={IconLanguage} iconSize="xs" /> <span className="truncate">{language}</span>
-          </CardContent>
-        </div>
+        <CardContent className="min-w-0 truncate sm:flex-1">{courseName}</CardContent>
+        {(location || language) && (
+          <div className="flex min-w-0 items-center gap-4 sm:contents">
+            {location && (
+              <CardContent className="flex min-w-0 items-center gap-1.25 sm:basis-1/3">
+                <CardAction icon={IconLocation} iconSize="xs" /> <span className="truncate">{location}</span>
+              </CardContent>
+            )}
+            {language && (
+              <CardContent className="flex min-w-0 items-center gap-1.25 sm:basis-1/3">
+                <CardAction icon={IconLanguage} iconSize="xs" /> <span className="truncate">{language}</span>
+              </CardContent>
+            )}
+          </div>
+        )}
       </div>
       <CardContent className="flex shrink-0 items-center">
         <IconSelect className="h-4 w-4 text-text-primary" strokeWidth={2} />

src/components/card-icon/basic-card-media.tsx

@@ -1,7 +1,17 @@
+import { cn } from "@/lib/utils"
 import { GradientIcon, type GradientIconType } from "../gradient-icon"
+import { CardMediaImage } from "./card-media-image"
 import type { ResponsiveCardSize } from "./types"
 import { getIconSizeClasses } from "./utils"
 
-export function BasicCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: ResponsiveCardSize }) {
-  return <GradientIcon icon={Icon} className={getIconSizeClasses(size)} />
+export function BasicCardMedia({ icon, size }: { icon: GradientIconType | string; size: ResponsiveCardSize }) {
+  if (typeof icon === "string") {
+    return (
+      <div className={cn("relative", getIconSizeClasses(size))}>
+        <CardMediaImage src={icon} fill sizes="180px" className="object-contain" />
+      </div>
+    )
+  }
+
+  return <GradientIcon icon={icon} className={getIconSizeClasses(size)} />
 }

src/components/card-icon/card-media-image.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image"
+
+type CardMediaImageProps = { src: string; className: string } & (
+  | { fill: true; sizes: string; width?: never; height?: never }
+  | { fill?: false; sizes?: never; width: number; height: number }
+)
+
+/** Renders a card-media icon that's a plain image URL, as opposed to a `GradientIconType` component. */
+export function CardMediaImage(props: CardMediaImageProps) {
+  const { src, className } = props
+  if (props.fill) {
+    return <Image src={src} alt="" fill sizes={props.sizes} className={className} />
+  }
+  return <Image src={src} alt="" width={props.width} height={props.height} className={className} />
+}

src/components/card-icon/description-card-media.tsx

@@ -1,12 +1,17 @@
 import { cn } from "@/lib/utils"
 import { GradientIcon, type GradientIconType } from "../gradient-icon"
+import { CardMediaImage } from "./card-media-image"
 import type { ResponsiveCardSize } from "./types"
 import { getIconSizeClasses } from "./utils"
 
-export function DescriptionCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: ResponsiveCardSize }) {
+export function DescriptionCardMedia({ icon, size }: { icon: GradientIconType | string; size: ResponsiveCardSize }) {
   return (
     <div className={cn("relative", getIconSizeClasses(size))}>
-      <GradientIcon icon={Icon} className="h-full w-full" />
+      {typeof icon === "string" ? (
+        <CardMediaImage src={icon} fill sizes="180px" className="object-contain" />
+      ) : (
+        <GradientIcon icon={icon} className="h-full w-full" />
+      )}
     </div>
   )
 }

src/components/card-icon/inline-card-media.tsx

@@ -1,16 +1,31 @@
 import { cn } from "@/lib/utils"
 import type { GradientIconType } from "../gradient-icon"
+import { CardMediaImage } from "./card-media-image"
 import type { ResponsiveCardSize } from "./types"
 import { getIconSizeClasses, getInlineContainerClasses } from "./utils"
 
-export function InlineCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: ResponsiveCardSize }) {
+export function InlineCardMedia({ icon, size }: { icon: GradientIconType | string; size: ResponsiveCardSize }) {
+  const wrapperClassName = cn(
+    "flex shrink-0 items-center justify-center rounded-lg bg-blue-tertiary",
+    getInlineContainerClasses(size)
+  )
+
+  if (typeof icon === "string") {
+    return (
+      <div className={wrapperClassName}>
+        <CardMediaImage
+          src={icon}
+          width={24}
+          height={24}
+          className={cn(getIconSizeClasses("inline"), "object-contain")}
+        />
+      </div>
+    )
+  }
+
+  const Icon = icon
   return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center justify-center rounded-lg bg-blue-tertiary",
-        getInlineContainerClasses(size)
-      )}
-    >
+    <div className={wrapperClassName}>
       <Icon className={cn(getIconSizeClasses("inline"), "text-text-primary")} />
     </div>
   )

src/components/card-icon/types.ts

@@ -18,7 +18,7 @@ export type ResponsiveCardSize = CardSize | ResponsiveCardSizeConfig
 
 export type SharedCardProps = {
   title: string
-  icon: GradientIconType
+  icon: GradientIconType | string
   size?: ResponsiveCardSize
   align?: CardAlign
   href?: string

src/components/conditional-footer.tsx

@@ -2,11 +2,14 @@
 
 import { usePathname } from "next/navigation"
 import { Footer } from "@/components/footer"
+import { matchesAnyRoutePrefix } from "@/utils/route-match"
 
-const HIDDEN_ON = ["/matricole/guida"]
+const HIDDEN_EXACT = ["/matricole/guida"]
+const HIDDEN_PREFIXES = ["/groups"]
 
 export function ConditionalFooter() {
   const pathname = usePathname()
-  if (HIDDEN_ON.includes(pathname)) return null
+  const hidden = HIDDEN_EXACT.includes(pathname) || matchesAnyRoutePrefix(pathname, HIDDEN_PREFIXES)
+  if (hidden) return null
   return <Footer />
 }

src/components/groups/constants.ts

@@ -1,44 +1,29 @@
-import type { Course, Level, School } from "@/components/groups/types"
+import type { Level, School } from "@/components/groups/types"
 
 export const SCHOOLS: School[] = [
-  { slug: "architettura", name: "Scuola di Architettura" },
+  { slug: "ingegneria-industriale-informazione", name: "Scuola di Ingegneria Industriale e dell'Informazione" },
+  { slug: "auic", name: "Scuola di Architettura, Urbanistica, Ingegneria delle Costruzioni" },
+  { slug: "ingegneria-civile-ambientale-territoriale", name: "Scuola di Ingegneria Civile, Ambientale e Territoriale" },
   { slug: "design", name: "Scuola di Design" },
-  { slug: "ingegneria", name: "Scuole di Ingegneria" },
 ]
 
 export const LEVELS: Level[] = [
   { slug: "triennale", name: "Triennale" },
   { slug: "magistrale", name: "Magistrale" },
 ]
 
-export const COURSES: Record<string, Course[]> = {
-  "design/triennale": [
-    { slug: "design-prodotto", name: "Design del Prodotto", location: "Milano Bovisa", language: "ITA" },
-    { slug: "design-comunicazione", name: "Design della Comunicazione", location: "Milano Bovisa", language: "ITA" },
-    { slug: "design-moda", name: "Design della Moda", location: "Milano Bovisa", language: "ITA" },
-  ],
-}
+const CICLO_UNICO_LEVEL: Level = { slug: "ciclo-unico", name: "Ciclo Unico" }
+
+const SCHOOLS_WITH_CICLO_UNICO = new Set(["auic"])
 
 export function getSchool(slug: string) {
   return SCHOOLS.find((school) => school.slug === slug)
 }
 
-export function getLevel(slug: string) {
-  return LEVELS.find((level) => level.slug === slug)
-}
-
-export function getCourses(school: string, level: string) {
-  return COURSES[`${school}/${level}`] ?? []
-}
-
-export function getCourse(school: string, level: string, slug: string) {
-  return getCourses(school, level).find((course) => course.slug === slug)
+export function getLevelsForSchool(schoolSlug: string): Level[] {
+  return SCHOOLS_WITH_CICLO_UNICO.has(schoolSlug) ? [...LEVELS, CICLO_UNICO_LEVEL] : LEVELS
 }
 
-export function getCourseFilters(school: string, level: string) {
-  const courses = getCourses(school, level)
-  return {
-    campuses: [...new Set(courses.map((course) => course.location))],
-    languages: [...new Set(courses.map((course) => course.language))],
-  }
+export function getLevel(schoolSlug: string, slug: string) {
+  return getLevelsForSchool(schoolSlug).find((level) => level.slug === slug)
 }

src/components/groups/course-filters.tsx

@@ -5,10 +5,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 
 const ALL = "all"
 
+export type FilterOption = { value: string; label: string }
+
 type FilterSelectProps = {
   label: string
   value: string
-  options: string[]
+  options: FilterOption[]
   onChange: (value: string) => void
 }
 
@@ -22,16 +24,16 @@ function FilterSelect({ label, value, options, onChange }: FilterSelectProps) {
       <SelectContent>
         <SelectItem value={ALL}>{label}</SelectItem>
         {options.map((option) => (
-          <SelectItem key={option} value={option}>
-            {option}
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
           </SelectItem>
         ))}
       </SelectContent>
     </Select>
   )
 }
 
-export function CourseFilters({ campuses, languages }: { campuses: string[]; languages: string[] }) {
+export function CourseFilters({ campuses, languages }: { campuses: FilterOption[]; languages: FilterOption[] }) {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()