1 line
6.3 KiB
JavaScript
1 line
6.3 KiB
JavaScript
import{a as y,j as e}from"./vendor-react-BHG7lGYR.js";import{a as D,u as E,b as v}from"./vendor-tanstack-BzWBL1hV.js";import{g as L,B as A,L as g,C as o,e as c,G as P,H as B,J as K}from"./index-BWcMVITa.js";import{B as O}from"./badge-CPAgRIoX.js";import{S as b}from"./select-laDQECdR.js";import{L as U}from"./vendor-router-D-s5vIeO.js";import{k as Y,j as _,l as $,aM as k,aI as w,o as z,ab as G}from"./vendor-icons-DaGlTw4_.js";import{f as H,d as J}from"./vendor-utils-CgOSfOkx.js";import"./vendor-IYr-MHu4.js";import"./dropdown-BYn_8IId.js";import"./input-BGBI2Wze.js";const V={new_message:"Message",track_uploaded:"Track",user_mentioned:"Mention",system:"System",friend_request:"Friend Request",conversation_invite:"Conversation Invite"},W={new_message:e.jsx(k,{className:"h-4 w-4"}),track_uploaded:e.jsx(G,{className:"h-4 w-4"}),user_mentioned:e.jsx(w,{className:"h-4 w-4"}),system:e.jsx(z,{className:"h-4 w-4"}),friend_request:e.jsx(w,{className:"h-4 w-4"}),conversation_invite:e.jsx(k,{className:"h-4 w-4"})};function ce(){const[a,d]=y.useState("all"),[t,m]=y.useState("all"),{success:l,error:N}=L(),r=D(),{data:M,isLoading:F,isError:T,error:p}=E({queryKey:["notifications",a,t],queryFn:()=>K({read:a==="all"?void 0:a==="read",type:t==="all"?void 0:t})}),u=M?.notifications||[],x=u.filter(s=>!s.read),S=u.filter(s=>s.read),R=v({mutationFn:B,onMutate:async s=>{await r.cancelQueries({queryKey:["notifications"]});const i=r.getQueryData(["notifications",a,t]);return i&&r.setQueryData(["notifications",a,t],{...i,notifications:i.notifications.map(n=>n.id===s?{...n,read:!0}:n),unreadCount:Math.max((i.unreadCount||1)-1,0)}),{previousNotifications:i}},onError:(s,i,n)=>{n?.previousNotifications&&r.setQueryData(["notifications",a,t],n.previousNotifications),N(s.message||"Failed to mark notification as read")},onSuccess:()=>{r.invalidateQueries({queryKey:["notifications"]}),l("Notification marked as read")}}),f=v({mutationFn:P,onMutate:async()=>{await r.cancelQueries({queryKey:["notifications"]});const s=r.getQueryData(["notifications",a,t]);return s&&r.setQueryData(["notifications",a,t],{...s,notifications:s.notifications.map(i=>({...i,read:!0})),unreadCount:0}),{previousNotifications:s}},onError:(s,i,n)=>{n?.previousNotifications&&r.setQueryData(["notifications",a,t],n.previousNotifications),N(s.message||"Failed to mark all notifications as read")},onSuccess:()=>{r.invalidateQueries({queryKey:["notifications"]}),l("All notifications marked as read")}}),h=s=>{R.mutate(s)},q=()=>{x.length!==0&&f.mutate()},I=s=>{s.read||h(s.id),s.link},j=a==="all"?u:a==="unread"?x:S,Q=x.length>0;return e.jsx("div",{className:"container mx-auto px-4 py-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsxs("div",{className:"mb-6 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold mb-2",children:"Notifications"}),e.jsx("p",{className:"text-muted-foreground",children:"Manage your notifications and stay updated"})]}),Q&&e.jsx(A,{onClick:q,disabled:f.isPending,variant:"outline",children:f.isPending?e.jsxs(e.Fragment,{children:[e.jsx(g,{className:"mr-2 h-4 w-4"}),"Marking..."]}):e.jsxs(e.Fragment,{children:[e.jsx(Y,{className:"mr-2 h-4 w-4"}),"Mark All as Read"]})})]}),e.jsx(o,{className:"mb-6",children:e.jsx(c,{className:"pt-6",children:e.jsxs("div",{className:"flex flex-col md:flex-row gap-4",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-sm font-medium mb-2 block",children:"Status"}),e.jsx(b,{options:[{value:"all",label:"All"},{value:"unread",label:"Unread"},{value:"read",label:"Read"}],value:a,onChange:s=>d(Array.isArray(s)?s[0]:s)})]}),e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-sm font-medium mb-2 block",children:"Type"}),e.jsx(b,{options:[{value:"all",label:"All Types"},{value:"new_message",label:"Messages"},{value:"track_uploaded",label:"Tracks"},{value:"user_mentioned",label:"Mentions"},{value:"system",label:"System"},{value:"friend_request",label:"Friend Requests"},{value:"conversation_invite",label:"Conversations"}],value:t,onChange:s=>m(Array.isArray(s)?s[0]:s)})]})]})})}),F?e.jsx(o,{children:e.jsx(c,{className:"pt-6",children:e.jsx("div",{className:"flex justify-center py-12",children:e.jsx(g,{})})})}):T?e.jsx(o,{children:e.jsx(c,{className:"pt-6",children:e.jsxs("div",{className:"text-center text-destructive",children:[e.jsx("p",{children:"Failed to load notifications"}),p instanceof Error&&e.jsx("p",{className:"text-sm mt-2",children:p.message})]})})}):j.length===0?e.jsx(o,{children:e.jsx(c,{className:"pt-6",children:e.jsxs("div",{className:"text-center py-12",children:[e.jsx(_,{className:"h-16 w-16 mx-auto mb-4 text-muted-foreground opacity-50"}),e.jsx("h2",{className:"text-xl font-semibold mb-2",children:"No Notifications"}),e.jsx("p",{className:"text-muted-foreground",children:a==="unread"?"You're all caught up! No unread notifications.":"No notifications found."})]})})}):e.jsx("div",{className:"space-y-2",children:j.map(s=>{const i=s.link?e.jsx(U,{to:s.link,onClick:()=>I(s),className:"block",children:e.jsx(C,{notification:s,onMarkAsRead:h})}):e.jsx(C,{notification:s,onMarkAsRead:h});return e.jsx(o,{className:`transition-colors ${s.read?"":"border-primary bg-primary/5"}`,children:i},s.id)})})]})})}function C({notification:a,onMarkAsRead:d}){const t=W[a.type]||e.jsx(_,{className:"h-4 w-4"}),m=V[a.type]||a.type;return e.jsx(c,{className:"p-4",children:e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("div",{className:"mt-1 flex-shrink-0",children:t}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("div",{className:"flex items-start justify-between gap-2",children:[e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[!a.read&&e.jsx("span",{className:"h-2 w-2 bg-primary rounded-full flex-shrink-0"}),e.jsx("h3",{className:`text-sm font-medium ${a.read?"":"font-semibold"}`,children:a.title}),e.jsx(O,{variant:"secondary",className:"text-xs",children:m})]}),e.jsx("p",{className:"text-sm text-muted-foreground mb-2",children:a.content}),e.jsx("p",{className:"text-xs text-muted-foreground",children:H(new Date(a.created_at),{addSuffix:!0,locale:J})})]}),!a.read&&e.jsx(A,{variant:"ghost",size:"icon",className:"h-8 w-8 flex-shrink-0",onClick:l=>{l.preventDefault(),l.stopPropagation(),d(a.id)},"aria-label":"Mark as read",children:e.jsx($,{className:"h-4 w-4"})})]})})]})})}export{ce as NotificationsPage};
|