Refactor chat features

IndieCoderMM · Oct 31, 2023 · bd2158e · bd2158e
1 parent fc73faa
commit bd2158e
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 227 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@
 - [Convoz](#convoz)
   - [🚀 Visit Live Website](#-visit-live-website)
   - [🔥 Features](#-features)
-  - [🧰 Stack](#-stack)
-  - [🛠️ Getting Started](#️-getting-started)
+  - [🛠️ Stack](#️-stack)
+  - [📙 Getting Started](#-getting-started)
   - [🗂️ Project Structure](#️-project-structure)
   - [🤝 Contributing](#-contributing)
   - [📜 License](#-license)
@@ -35,21 +35,21 @@
 - **User Authentication**: Secure user authentication with Google Sign-In
 - **User-Friendly Interface**: Intuitive UI/UX design to enhance user experience
 
-## 🧰 Stack
+## 🛠️ Stack
 
 This project was built using the following technologies:
 
-- React
-- TypeScript
-- Firebase
-- Redux Toolkit
-- Vite
-- ESLint
-- react-firebase-hooks
-- react-router-dom
-- Tailwind CSS
+- ⚛️ React
+- 🔷 TypeScript
+- 🔥 Firebase
+- 🧰 Redux Toolkit
+- ⚡ Vite
+- 🔍 ESLint
+- 🪝 react-firebase-hooks
+- 🚦 react-router-dom
+- 🎨 Tailwind CSS
 
-## 🛠️ Getting Started
+## 📙 Getting Started
 
 To get started with this project, follow these steps:
 
@@ -99,4 +99,4 @@ Please check out our [Contribution Guide](./CONTRIBUTING.md) for more details.
 
 ## 📜 License
 
-This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) for details.
diff --git a/index.html b/index.html
@@ -5,9 +5,9 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Convoz - Awesome Chat Platform for Any Interest</title>
+  <title>Convoz - Awesome Chat Platform | Open-source Project on GitHub</title>
   <meta name="description"
-    content="Chat, connect, and make friends with Convoz. Join our welcoming online community to discuss your favorite topics, share experiences, and more." />
+    content="Convoz is an open-source chat platform that allows you to easily create and join online chat rooms. Built with React, Redux, Firebase, and Vite" />
 </head>
 
 <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
-import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 
-import ChatWindow from "./features/Chat/ChatWindow";
 import {
   clearUser,
   selectAuthStatus,
@@ -13,16 +12,14 @@ import { AuthStatus } from "./lib/constants";
 import { useAppDispatch, useAppSelector } from "./lib/store";
 import {
   Channels,
-  Chat,
+  ChatPage,
   Explore,
   LandingPage,
   Profile,
   Settings,
 } from "./pages";
 import RootLayout from "./RootLayout";
 
-const GENERAL_CHANNEL_ID = import.meta.env.VITE_GENERAL_CHANNEL_ID || "general";
-
 const App = () => {
   const { user, data, loading } = useAuthUser();
   const authStatus = useAppSelector(selectAuthStatus);
@@ -52,15 +49,7 @@ const App = () => {
           errorElement={<div>Not found</div>}
         >
           <Route index element={<Explore />} />
-          <Route path="chat" element={<Chat />}>
-            <Route
-              index
-              element={
-                <Navigate to={`channels/${GENERAL_CHANNEL_ID}`} replace />
-              }
-            />
-            <Route path="channels/:channelId" element={<ChatWindow />} />
-          </Route>
+          <Route path="chat/channels/:channelId" element={<ChatPage />} />
           <Route path="channels" element={<Channels />} />
           <Route path="profile" element={<Profile />} />
           <Route path="settings" element={<Settings />} />

diff --git a/src/common.types.ts b/src/common.types.ts
diff --git a/src/features/Chat/ChatMessageSkeleton.tsx b/src/features/Chat/ChatMessageSkeleton.tsx
diff --git a/src/features/Chat/ChatWindow.tsx b/src/features/Chat/ChatWindow.tsx
diff --git a/src/features/Chat/Header.tsx b/src/features/Chat/Header.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import type { Channel, User } from "../../schema";
+import Navbar from "./Navbar";
+import { FaEdit, FaPlus } from "react-icons/fa";
+import { avatars } from "../../lib/constants";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import Modal from "../../components/Modal";
+import ChannelForm from "../Channels/ChannelForm";
+
+dayjs.extend(LocalizedFormat);
+
+const ChatHeader = ({
+  channel,
+  editable,
+  creator,
+}: {
+  channel: Channel;
+  editable: boolean;
+  creator?: User;
+}) => {
+  const [openModal, setOpenModal] = useState(false);
+
+  return (
+    <header className="sticky left-0 top-0 flex w-full flex-col gap-2 border-b border-gray-100/50 pb-4 shadow-sm">
+      <Navbar channel={channel} />
+      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-dark-700 text-4xl">
+        <span>#</span>
+      </div>
+      <h2 className="text-3xl font-bold">
+        Welcome to #{channel.name.toLowerCase()} channel!
+      </h2>
+      <p>{channel?.description}</p>
+      {/* Channel Actions ------------------------------------------------------------------------------- */}
+      {editable ? (
+        <div className="flex items-center justify-start gap-2">
+          <button
+            type="button"
+            className="flex items-center rounded-md px-3 py-2 text-secondary transition hover:bg-dark-500"
+          >
+            <FaPlus size={16} />
+            <span className="ml-1">Add Members</span>
+          </button>
+
+          <button
+            onClick={() => setOpenModal(true)}
+            type="button"
+            className="flex items-center rounded-md px-3 py-2 text-secondary transition hover:bg-dark-500"
+          >
+            <FaEdit size={16} />
+            <span className="ml-1">Edit Channel</span>
+          </button>
+        </div>
+      ) : null}
+      <div className="ml-4 flex items-center justify-start gap-2">
+        <div className="flex items-center justify-center rounded-full bg-dark-700 text-4xl">
+          <img
+            src={avatars[creator?.avatarId ?? 0]}
+            alt=""
+            className="h-8 w-8"
+          />
+        </div>
+        <h3 className="font-medium">{creator?.name}</h3>
+        <span className="rounded-full bg-dark-800 px-2 py-1 text-xs">
+          🟢 Admin
+        </span>
+      </div>
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 bg-dark-600 px-2 py-2">
+        <span className="text-sm text-gray-400">
+          {dayjs(channel.createdAt).format("LLLL")}
+        </span>
+      </div>
+
+      {/* Edit Channel Modal --------------------------------------------------------------------------------- */}
+      <Modal
+        show={openModal}
+        handleClose={() => setOpenModal(false)}
+        title="Edit Channel"
+      >
+        <ChannelForm
+          initialValues={channel}
+          onSuccess={() => setOpenModal(false)}
+        />
+      </Modal>
+    </header>
+  );
+};
+
+export default ChatHeader;
diff --git a/src/features/Chat/ChatMessage.tsx → src/features/Chat/Message.tsx b/src/features/Chat/ChatMessage.tsx → src/features/Chat/Message.tsx
@@ -36,4 +36,17 @@ const ChatMessage = (props: Message) => {
   );
 };
 
+export const ChatMessageSkeleton = () => {
+  return (
+    <div className="flex w-full items-start gap-2 ">
+      <div className="h-12 w-12 animate-pulse rounded-full bg-dark-300" />
+      <div className="flex flex-col space-y-1">
+        <div className="h-[2ch] w-[12ch] animate-pulse rounded bg-dark-300" />
+        <div className="h-[1ch] w-[20ch] animate-pulse rounded-sm bg-dark-200" />
+        <div className="h-[1ch] w-[40ch] animate-pulse rounded-sm bg-dark-200" />
+      </div>
+    </div>
+  );
+};
+
 export default ChatMessage;