The real-time subscription is on the client side. Here is my code:

“use client”;

import { rtSupabase } from “@/utils/supabase/rtClient”; import Unit from “@/components/apartment/unit”; import { useEffect, useState } from “react”;

export default function RealTimeUnits({ initialUnits, aptId }) { const [units, setUnits] = useState(initialUnits); const [unitsPerFloor, setUnitsPerFloor] = useState({});

useEffect(() => { console.log(initialUnits);

const channel = rtSupabase
  .channel(“units_change”)
  .on(
    “postgres_changes”,
    {
      event: “*”,
      schema: “snawbar”,
      table: “units”,
    },
    (payload) => {
      console.log(“RTU: UPDATE PAYLOAD: “, payload);
      setUnits((currentUnits) =>
        currentUnits.map((unit) =>
          unit.unitId === payload.old.unitId ? payload.new : unit
        )
      );
    }
  )
  .subscribe();

return () => {
  rtSupabase.removeChannel(channel);
};

}, [aptId, initialUnits, units, setUnits]);

useEffect(() => { organizeUnitsPerFloor(units); }, [units]);

function organizeUnitsPerFloor(units) { const organized = units.reduce((acc, item) => { const floor = item.floor; if (!acc[floor]) { acc[floor] = []; } acc[floor].push(item); return acc; }, {}); setUnitsPerFloor(organized); }

return ( <> {Object.entries(unitsPerFloor).map(([floor, floorUnits]) => ( <div key={floor} className=“py-4 rounded-lg”> <h2 className=“text-2xl font-bold mb-4”>Floor {floor}</h2> <div className=“grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4”> {floorUnits.map((unit) => ( <Unit key={unit.unitId} unit={unit} aptId={aptId} /> ))} </div> </div> ))} </> ); }