feat: Implement connected user API and integrate chat and report components
- Added API routes for fetching connected users, keywords, missions, and stations. - Created a new QueryProvider component for managing query states and socket events. - Introduced connection stores for dispatch and pilot, managing socket connections and states. - Updated Prisma schema for connected aircraft model. - Enhanced UI with toast notifications for status updates and chat interactions. - Implemented query functions for fetching connected users and keywords with error handling.
This commit is contained in:
PxlLoewe
47
apps/dispatch/app/_components/QueryProvider.tsx
Normal file
47
apps/dispatch/app/_components/QueryProvider.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
// components/TanstackProvider.tsx
|
||||
"use client";
|
||||
|
||||
import { toast } from "react-hot-toast";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { dispatchSocket } from "dispatch/socket";
|
||||
|
||||
export function QueryProvider({ children }: { children: ReactNode }) {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
mutations: {
|
||||
onError: (error) => {
|
||||
toast.error("An error occurred: " + (error as Error).message, {
|
||||
position: "top-right",
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
useEffect(() => {
|
||||
const invalidateMission = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["missions"],
|
||||
});
|
||||
};
|
||||
|
||||
const invalidateConnectedUsers = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["connected-users"],
|
||||
});
|
||||
};
|
||||
|
||||
dispatchSocket.on("update-mission", invalidateMission);
|
||||
dispatchSocket.on("delete-mission", invalidateMission);
|
||||
dispatchSocket.on("new-mission", invalidateMission);
|
||||
dispatchSocket.on("dispatchers-update", invalidateConnectedUsers);
|
||||
dispatchSocket.on("pilots-update", invalidateConnectedUsers);
|
||||
}, [queryClient]);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
117
apps/dispatch/app/_components/StationStatusToast.tsx
Normal file
117
apps/dispatch/app/_components/StationStatusToast.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
interface ToastCard {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
const MapToastCard2 = () => {
|
||||
const [cards, setCards] = useState<ToastCard[]>([]);
|
||||
const [openCardId, setOpenCardId] = useState<number | null>(null);
|
||||
|
||||
const addCard = () => {
|
||||
const newCard: ToastCard = {
|
||||
id: Date.now(),
|
||||
title: `Einsatz #${cards.length + 1}`,
|
||||
content: `Inhalt von Einsatz #${cards.length + 1}.`,
|
||||
};
|
||||
setCards([...cards, newCard]);
|
||||
// DEBUG
|
||||
/* toast("😖 Christoph 31 sendet Status 4", {
|
||||
duration: 10000,
|
||||
}); */
|
||||
// DEBUG
|
||||
const toastId = toast.custom(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
lineHeight: 1.3,
|
||||
willChange: "transform",
|
||||
boxShadow:
|
||||
"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)",
|
||||
maxWidth: "350px",
|
||||
pointerEvents: "auto",
|
||||
padding: "8px 10px",
|
||||
borderRadius: "8px",
|
||||
background: "var(--color-base-100)",
|
||||
color: "var(--color-base-content)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="toastText flex items-center"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
margin: "4px 10px",
|
||||
color: "inherit",
|
||||
flex: "1 1 auto",
|
||||
whiteSpace: "pre-line",
|
||||
}}
|
||||
>
|
||||
😖 Christoph 31 sendet Status 5{" "}
|
||||
<button
|
||||
className="btn btn-sm btn-soft btn-accent ml-2"
|
||||
onClick={() => toast.remove(toastId)}
|
||||
>
|
||||
U
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
duration: 999999999,
|
||||
},
|
||||
);
|
||||
// DEBUG
|
||||
};
|
||||
|
||||
const removeCard = (id: number) => {
|
||||
setCards(cards.filter((card) => card.id !== id));
|
||||
};
|
||||
|
||||
const toggleCard = (id: number) => {
|
||||
setOpenCardId(openCardId === id ? null : id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute top-4 right-4 z-[1000] flex flex-col space-y-4">
|
||||
{/* DEBUG */}
|
||||
<button
|
||||
onClick={addCard}
|
||||
className="mb-4 p-2 bg-blue-500 text-white rounded self-end"
|
||||
>
|
||||
Debug Einsatz
|
||||
</button>
|
||||
{/* DEBUG */}
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="collapse collapse-arrow bg-base-100 border-base-300 border w-120 relative"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="absolute top-0 left-0 opacity-0"
|
||||
checked={openCardId === card.id}
|
||||
onChange={() => toggleCard(card.id)}
|
||||
/>
|
||||
<div className="collapse-title font-semibold flex justify-between items-center">
|
||||
<span>{card.title}</span>
|
||||
<button
|
||||
className="btn btn-sm btn-circle btn-ghost z-10 absolute top-3.5 right-8"
|
||||
onClick={(e) => {
|
||||
removeCard(card.id);
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="collapse-content text-sm">{card.content}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapToastCard2;
|
||||
208
apps/dispatch/app/_components/left/Chat.tsx
Normal file
208
apps/dispatch/app/_components/left/Chat.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
"use client";
|
||||
import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
|
||||
import { useLeftMenuStore } from "_store/leftMenuStore";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { cn } from "helpers/cn";
|
||||
import { asPublicUser } from "@repo/db";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getConnectedUserAPI } from "querys/connected-user";
|
||||
|
||||
export const Chat = () => {
|
||||
const {
|
||||
setReportTabOpen,
|
||||
chatOpen,
|
||||
setChatOpen,
|
||||
sendMessage,
|
||||
addChat,
|
||||
chats,
|
||||
setOwnId,
|
||||
selectedChat,
|
||||
setSelectedChat,
|
||||
setChatNotification,
|
||||
} = useLeftMenuStore();
|
||||
const [sending, setSending] = useState(false);
|
||||
const session = useSession();
|
||||
const [addTabValue, setAddTabValue] = useState<string>("default");
|
||||
const [message, setMessage] = useState<string>("");
|
||||
|
||||
const { data: connectedUser } = useQuery({
|
||||
queryKey: ["connected-users"],
|
||||
queryFn: async () => {
|
||||
const user = await getConnectedUserAPI();
|
||||
return user.filter((u) => u.userId !== session.data?.user.id);
|
||||
},
|
||||
refetchInterval: 10000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!session.data?.user.id) return;
|
||||
setOwnId(session.data.user.id);
|
||||
}, [session, setOwnId]);
|
||||
|
||||
return (
|
||||
<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
|
||||
<div className="indicator">
|
||||
{Object.values(chats).some((c) => c.notification) && (
|
||||
<span className="indicator-item status status-info"></span>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-soft btn-sm btn-primary"
|
||||
onClick={() => {
|
||||
setReportTabOpen(false);
|
||||
setChatOpen(!chatOpen);
|
||||
if (selectedChat) {
|
||||
setChatNotification(selectedChat, false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ChatBubbleIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{chatOpen && (
|
||||
<div
|
||||
tabIndex={0}
|
||||
className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-primary"
|
||||
>
|
||||
<div className="card-body">
|
||||
<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
|
||||
<ChatBubbleIcon /> Chat
|
||||
</h2>
|
||||
<div className="join">
|
||||
<select
|
||||
className="select select-sm w-full"
|
||||
value={addTabValue}
|
||||
onChange={(e) => setAddTabValue(e.target.value)}
|
||||
>
|
||||
{!connectedUser?.length && (
|
||||
<option disabled value="default">
|
||||
Keine Chatpartner gefunden
|
||||
</option>
|
||||
)}
|
||||
{connectedUser?.length && (
|
||||
<option disabled value="default">
|
||||
Chatpartner auswählen
|
||||
</option>
|
||||
)}
|
||||
|
||||
{connectedUser?.map((user) => (
|
||||
<option key={user.userId} value={user.userId}>
|
||||
{asPublicUser(user.publicUser).fullName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
className="btn btn-sm btn-soft btn-primary join-item"
|
||||
onClick={() => {
|
||||
const user = connectedUser?.find(
|
||||
(user) => user.userId === addTabValue,
|
||||
);
|
||||
if (!user) return;
|
||||
addChat(addTabValue, asPublicUser(user.publicUser).fullName);
|
||||
setSelectedChat(addTabValue);
|
||||
}}
|
||||
>
|
||||
<span className="text-xl">+</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="tabs tabs-lift">
|
||||
{Object.keys(chats).map((userId) => {
|
||||
const chat = chats[userId];
|
||||
if (!chat) return null;
|
||||
return (
|
||||
<Fragment key={userId}>
|
||||
<input
|
||||
type="radio"
|
||||
name="my_tabs_3"
|
||||
className="tab"
|
||||
aria-label={`<${chat.name}>`}
|
||||
checked={selectedChat === userId}
|
||||
onClick={() => {
|
||||
setChatNotification(userId, false);
|
||||
}}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
// Handle tab change
|
||||
setSelectedChat(userId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="tab-content bg-base-100 border-base-300 p-6">
|
||||
{chat.messages.map((chatMessage) => {
|
||||
const isSender =
|
||||
chatMessage.senderId === session.data?.user.id;
|
||||
return (
|
||||
<div
|
||||
key={chatMessage.id}
|
||||
className={`chat ${isSender ? "chat-end" : "chat-start"}`}
|
||||
>
|
||||
<p className="chat-footer opacity-50">
|
||||
{new Date(
|
||||
chatMessage.timestamp,
|
||||
).toLocaleTimeString()}
|
||||
</p>
|
||||
<div className="chat-bubble">
|
||||
{chatMessage.text}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!chat.messages.length && (
|
||||
<p className="text-xs opacity-50">
|
||||
Noch keine Nachrichten
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="join">
|
||||
<div className="w-full">
|
||||
<label className="input join-item w-full">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full"
|
||||
onChange={(e) => {
|
||||
setMessage(e.target.value);
|
||||
}}
|
||||
value={message}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-soft join-item"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (message.length < 1) return;
|
||||
if (!selectedChat) return;
|
||||
setSending(true);
|
||||
sendMessage(selectedChat, message)
|
||||
.then(() => {
|
||||
setMessage("");
|
||||
setSending(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setSending(false);
|
||||
});
|
||||
return false;
|
||||
}}
|
||||
disabled={sending}
|
||||
role="button"
|
||||
onSubmit={() => false} // prevent submit event for react hook form
|
||||
>
|
||||
{sending ? (
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
) : (
|
||||
<PaperPlaneIcon />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
133
apps/dispatch/app/_components/left/Report.tsx
Normal file
133
apps/dispatch/app/_components/left/Report.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { cn } from "helpers/cn";
|
||||
import { serverApi } from "helpers/axios";
|
||||
import { useLeftMenuStore } from "_store/leftMenuStore";
|
||||
import { asPublicUser } from "@repo/db";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getConnectedUserAPI } from "querys/connected-user";
|
||||
|
||||
export const Report = () => {
|
||||
const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =
|
||||
useLeftMenuStore();
|
||||
const [sending, setSending] = useState(false);
|
||||
const session = useSession();
|
||||
const [selectedPlayer, setSelectedPlayer] = useState<string>("default");
|
||||
const [message, setMessage] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!session.data?.user.id) return;
|
||||
setOwnId(session.data.user.id);
|
||||
}, [session, setOwnId]);
|
||||
|
||||
const { data: connectedUser } = useQuery({
|
||||
queryKey: ["connected-users"],
|
||||
queryFn: async () => {
|
||||
const user = await getConnectedUserAPI();
|
||||
return user.filter((u) => u.userId !== session.data?.user.id);
|
||||
},
|
||||
refetchInterval: 10000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"dropdown dropdown-right",
|
||||
reportTabOpen && "dropdown-open",
|
||||
)}
|
||||
>
|
||||
<div className="indicator">
|
||||
<button
|
||||
className="btn btn-soft btn-sm btn-error"
|
||||
onClick={() => {
|
||||
setChatOpen(false);
|
||||
setReportTabOpen(!reportTabOpen);
|
||||
}}
|
||||
>
|
||||
<ExclamationTriangleIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{reportTabOpen && (
|
||||
<div
|
||||
tabIndex={0}
|
||||
className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
|
||||
>
|
||||
<div className="card-body">
|
||||
<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
|
||||
<ExclamationTriangleIcon /> Report senden
|
||||
</h2>
|
||||
<div className="join">
|
||||
<select
|
||||
className="select select-sm w-full"
|
||||
value={selectedPlayer}
|
||||
onChange={(e) => setSelectedPlayer(e.target.value)}
|
||||
>
|
||||
{!connectedUser?.length && (
|
||||
<option disabled value="default">
|
||||
Keine Chatpartner gefunden
|
||||
</option>
|
||||
)}
|
||||
{connectedUser?.length && (
|
||||
<option disabled value="default">
|
||||
Chatpartner auswählen
|
||||
</option>
|
||||
)}
|
||||
{connectedUser?.map((user) => (
|
||||
<option key={user.userId} value={user.userId}>
|
||||
{asPublicUser(user).fullName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="join mt-4">
|
||||
<div className="w-full">
|
||||
<label className="input join-item w-full">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full"
|
||||
placeholder="Nachricht eingeben"
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
value={message}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-soft join-item"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (message.length < 1 || !selectedPlayer) return;
|
||||
setSending(true);
|
||||
serverApi("/report", {
|
||||
method: "POST",
|
||||
data: {
|
||||
message,
|
||||
to: selectedPlayer,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
setMessage("");
|
||||
setSending(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setSending(false);
|
||||
});
|
||||
}}
|
||||
disabled={sending}
|
||||
>
|
||||
{sending ? (
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
) : (
|
||||
<PaperPlaneIcon />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user