@@ -138,26 +142,9 @@ export default function Home() {
);
})}
-
-
-
setMessage(e.target.value)}
- mt={10}
- radius="xl"
- size="md"
- rightSection={
-
-
-
- }
- placeholder="Type something..."
- rightSectionWidth={42}
- onKeyDown={(e) => {
- if (e.key === "Enter") sendMessage();
- }}
- />
+
+
+
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 9ca74b9..5f5bb35 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -10,8 +10,8 @@ type Prop = {
};
export const metadata = {
- title: "Tiny Socket.io demo",
- description: "This repo implements a simple chat app with Socket.io and Next.js 13.",
+ title: "A Simple Full-Stack Socket.io Demo",
+ description: "This repo implements a simple chat app with Socket.io, Next.js 13, Mantine and Zustand.",
};
export default function RootLayout({ children }: Prop) {
diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
new file mode 100644
index 0000000..6ad157a
--- /dev/null
+++ b/frontend/src/components/Avatar.tsx
@@ -0,0 +1,69 @@
+import { createStyles, Indicator, Overlay, Avatar as MantineAvatar } from "@mantine/core";
+import { IconPencil } from "@tabler/icons-react";
+import React, { useEffect, useState } from "react";
+import NameModal from "./NameModal";
+import useBasicStore from "@/store/basic";
+import { useDisclosure } from "@mantine/hooks";
+import useSocketStore from "@/store/socket";
+
+const useStyles = createStyles((theme, { isShown }: { isShown: boolean }) => ({
+ overlay: {
+ cursor: "pointer",
+ opacity: !isShown ? "0" : "1",
+ transition: "all .2s",
+ visibility: !isShown ? "hidden" : "visible",
+ },
+}));
+
+const Avatar = () => {
+ const socket = useSocketStore((state) => state.socket); // deconstructing socket and its method from socket store
+ const storeName = useBasicStore((state) => state.name); // get name from basic store
+ const [name, setName] = useState(null); // avoiding Next.js hydration error
+ const [modalOpened, { open: modalOpen, close: modalClose }] = useDisclosure(false); // control change name modal open/close
+ const [isShown, setIsShown] = useState(false);
+ const { classes } = useStyles({ isShown });
+
+ useEffect(() => {
+ setName(storeName);
+ if (!storeName) modalOpen();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [storeName]);
+
+ return (
+ <>
+
+ setIsShown(true)}
+ onMouseLeave={() => setIsShown(false)}
+ >
+ {name && name.length > 3 ? `${name.slice(0, 1)}` : name}
+
+
+
+
+
+
+
+ );
+};
+
+export default Avatar;
diff --git a/frontend/src/components/ChatroomInput.tsx b/frontend/src/components/ChatroomInput.tsx
new file mode 100644
index 0000000..4f95e4f
--- /dev/null
+++ b/frontend/src/components/ChatroomInput.tsx
@@ -0,0 +1,62 @@
+import useSocketStore from "@/store/socket";
+import { ActionIcon, Group, Textarea, createStyles } from "@mantine/core";
+import { IconSend } from "@tabler/icons-react";
+import { KeyboardEvent, FC, useRef, useState } from "react";
+import toast from "react-hot-toast";
+
+type Props = {
+ targetSocketId: string;
+};
+const useStyles = createStyles((theme) => ({
+ inputWithoutBorder: {
+ border: "none",
+ },
+}));
+const ChatroomInput: FC = ({ targetSocketId }) => {
+ const { socket, emit } = useSocketStore((state) => state); // deconstructing socket and its method from socket store
+ const [message, setMessage] = useState(""); // message input value
+ const messageInputRef = useRef(null); // binding message input ref to focus
+ const { classes } = useStyles();
+
+ const sendMessage = () => {
+ console.log("sendMessage", message === "");
+ if (!message) return toast.error("Please enter a message");
+ if (!socket?.connected) return toast.error("Please reconnect server first");
+ if (!targetSocketId) return toast.error("Please enter a target socket id");
+ emit("message", { from: socket?.id, to: targetSocketId, timestamp: Date.now(), message });
+ setMessage("");
+ messageInputRef.current?.focus();
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" && e.altKey !== true && e.shiftKey !== true && e.ctrlKey !== true) {
+ e.preventDefault();
+ sendMessage();
+ }
+ };
+
+ return (
+
+ 
+