diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c91aff0..2dba52b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -28,7 +28,7 @@ To get started with this project, follow these steps: 3. Install the dependencies by running `npm install`. 4. Create a new branch for your changes by running `git checkout -b my-new-branch`. 5. Create a new Firebase project and enable Google authentication. (See [this guide](https://firebase.google.com/docs/web/setup) to get started with Firebase.) -6. Change `.env.example` to `.env` and fill in the required values from your Firebase project. +6. Copy `.env.example` to `.env` and fill in the required values from your Firebase project. 7. Start the development server by running `npm start`. 8. Push your changes to your fork. 9. Submit a pull request to the original repository. diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 9636008..6523f8e 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -44,7 +44,7 @@ const Sidebar = () => {
{ ))} -
); diff --git a/src/features/Channels/utils.ts b/src/features/Channels/utils.ts index 88a75a4..0db2a80 100644 --- a/src/features/Channels/utils.ts +++ b/src/features/Channels/utils.ts @@ -66,7 +66,7 @@ export const leaveChannel = async (channel: Channel, userId: string) => { } if (channel.type === "static" || channel.type === "announcement") { - throw new Error("All members must be in this channel."); + throw new Error("All users must be in this channel."); } const newChannel = validateChannel({ diff --git a/src/features/Chat/ChannelList.tsx b/src/features/Chat/ChannelList.tsx index b563a3e..044c7b0 100644 --- a/src/features/Chat/ChannelList.tsx +++ b/src/features/Chat/ChannelList.tsx @@ -41,7 +41,7 @@ const ChannelList = ({ heading, channels }: Props) => { `cursor-pointer rounded transition-all hover:bg-gray-400/10 hover:text-white`, pathname === href(id) ? "bg-gray-400/10 text-white" - : "text-gray-300", + : "text-gray-400", )} > diff --git a/src/features/Chat/Sidebar.tsx b/src/features/Chat/Sidebar.tsx index 27df52e..cde13e4 100644 --- a/src/features/Chat/Sidebar.tsx +++ b/src/features/Chat/Sidebar.tsx @@ -69,8 +69,8 @@ const Sidebar = () => { placeholder="Browse channels" /> - - + + ); }; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index cfe48ae..d5a7a8a 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,11 +1,11 @@ -import { FaCog, FaHashtag, FaRegCompass } from "react-icons/fa"; +import { FaRegCompass } from "react-icons/fa"; import { HiHashtag, HiLockClosed, HiOutlineChat, HiSpeakerphone, } from "react-icons/hi"; -import { HiMiniChatBubbleLeftRight } from "react-icons/hi2"; +import { HiMiniChatBubbleLeftRight, HiCog6Tooth } from "react-icons/hi2"; import { bandit, @@ -37,12 +37,12 @@ export const NavLinks = [ { href: "/channels", label: "Channels", - icon: FaHashtag, + icon: HiHashtag, }, { href: "/settings", label: "Settings", - icon: FaCog, + icon: HiCog6Tooth, }, ]; diff --git a/src/lib/firestore-utils.ts b/src/lib/firestore-utils.ts index 835f10f..53b0b29 100644 --- a/src/lib/firestore-utils.ts +++ b/src/lib/firestore-utils.ts @@ -1,6 +1,6 @@ -import { doc, getDoc, limit, query, where } from "firebase/firestore"; +import { and, doc, getDoc, limit, or, query, where } from "firebase/firestore"; -import { usersRef } from "./firebase"; +import { channelsRef, usersRef } from "./firebase"; import type { CollectionReference, DocumentData } from "firebase/firestore"; import type { Channel, User } from "../schema"; @@ -17,6 +17,21 @@ export const getDocIfExists = async (ref: CollectionReference, id: string) => { export const queryUserById = (id: string) => query(usersRef, where("id", "==", id), limit(1)); +export const queryUserChannels = (userId: string) => + query( + channelsRef, + or( + where("type", "!=", "private"), + where("members", "array-contains", userId), + ), + ); + +export const queryUnjoinedChannels = (userId: string) => + query( + channelsRef, + and(where("type", "!=", "private"), where(userId, "not-in", "members")), + ); + export const mapDocToUser = (docData: DocumentData): User => { return { id: docData.id, diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 1c29247..db09799 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,9 +1,9 @@ -import { useState } from 'react'; +import { useState } from "react"; -import ChangeAvatar from '../features/User/ChangeAvatar'; -import { selectUser } from '../features/User/userSlice'; -import { avatars } from '../lib/constants'; -import { useAppSelector } from '../lib/store'; +import ChangeAvatar from "../features/User/ChangeAvatar"; +import { selectUser } from "../features/User/userSlice"; +import { avatars } from "../lib/constants"; +import { useAppSelector } from "../lib/store"; const Profile = () => { const currentUser = useAppSelector(selectUser); @@ -18,13 +18,13 @@ const Profile = () => {
-
- -

{currentUser?.name}

+ {currentUser?.name} +
+

{currentUser?.name}

-

Bio

+

About Me

- {currentUser?.bio ?? "No information yet"} + {currentUser?.bio.length === 0 + ? "No information yet" + : currentUser?.bio}

diff --git a/src/styles/index.css b/src/styles/index.css index 3ea1121..7fdf700 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -48,7 +48,7 @@ html { } .btn { - @apply inline-block appearance-none rounded-md bg-blue-500 px-4 py-2 text-center font-medium text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500; + @apply inline-block appearance-none rounded-md bg-primary px-4 py-2 text-center font-medium text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary; } }