36 | {text}
37 |
38 | );
39 | };
40 |
41 | export default Alert;
42 |
--------------------------------------------------------------------------------
/src/components/Chat/AvatarFromId.tsx:
--------------------------------------------------------------------------------
1 | import { DEFAULT_AVATAR, IMAGE_PROXY } from "../../shared/constants";
2 |
3 | import { FC } from "react";
4 | import Skeleton from "../Skeleton";
5 | import { useUsersInfo } from "../../hooks/useUsersInfo";
6 |
7 | interface AvatarFromIdProps {
8 | uid: string;
9 | size?: number;
10 | }
11 |
12 | const AvatarFromId: FC
31 |
107 |
108 | {isConversationSettingsOpened && (
109 |
32 |
33 |
34 |
35 | {
36 | loading ? (
37 | ?.photoURL)})
47 | ) : (
48 | <>
49 | {
50 | conversation?.group?.groupImage ? (
51 | 
56 | ) : (
57 |
92 |
93 | {!loading && (
94 | <>
95 | {conversation.users.length > 2 && (
96 |
99 | )}
100 |
101 |
104 |
105 | )}
106 |
58 |
63 | ?.photoURL)})
68 |
69 | )
70 | }
71 |
72 | )}
73 |
74 | )
75 | }
76 |
77 | {loading ? (
78 | 81 | { 82 | conversation.users.length > 2 && conversation?.group?.groupName 83 | ? conversation.group.groupName 84 | : filtered 85 | ?.map((user) => user.data()?.displayName) 86 | .slice(0, 3) 87 | .join(", ") 88 | } 89 |
90 | )} 91 |
104 |
106 | );
107 |
108 | if (error)
109 | return (
110 |
111 |
113 | );
114 |
115 | if (data?.empty)
116 | return (
117 | Something went wrong
112 |
118 |
122 | );
123 |
124 | return (
125 | 119 | No message recently. Start chatting now. 120 |
121 |
132 |
134 | }
135 | style={{ display: "flex", flexDirection: "column-reverse" }}
136 | height={`calc(100vh - ${144 + inputSectionOffset}px)`}
137 | >
138 |
139 | {
140 | data?.docs
141 | .map((doc) => ({ id: doc.id, ...doc.data() } as MessageItem))
142 | .map(
143 | (item, index) => (
144 |
145 | {
146 | item.sender === currentUser?.uid ? (
147 |
181 | )
182 | )
183 | }
184 |
185 |
186 |
168 | {
169 | Object.entries(conversation.seen)
170 | .filter(
171 | ([key, value]) => key !== currentUser?.uid && value === item.id
172 | )
173 | .map(([key, value]) => (
174 |
178 | )
179 | }
180 | setIsOpened(false)}
99 | className={`animate-fade-in fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080] transition-all duration-300`}
100 | >
101 |
236 | );
237 | };
238 |
239 | export default ConversationSettings;
240 |
--------------------------------------------------------------------------------
/src/components/Chat/ReactionPopup.tsx:
--------------------------------------------------------------------------------
1 | import { FC, Ref } from "react";
2 | import { doc, updateDoc } from "firebase/firestore";
3 |
4 | import { REACTIONS_UI } from "../../shared/constants";
5 | import { db } from "../../shared/firebase";
6 | import { useParams } from "react-router-dom";
7 | import { useStore } from "../../store";
8 |
9 | interface ReactionPopupProps {
10 | position: "left" | "right";
11 | forwardedRef: Ref e.stopPropagation()}
103 | className="bg-dark mx-2 w-full max-w-[500px] rounded-lg"
104 | >
105 |
235 |
106 |
107 |
121 |
122 |
108 |
112 | 109 | Conversation settings 110 |
111 |
113 |
119 |
120 |
123 | {conversation.users.length > 2 && (
124 | <>
125 |
140 | {isChangeChatNameOpened && (
141 |
155 | )}
156 |
163 |
164 |
172 |
173 |
234 |
199 | {THEMES.map((theme) => (
200 |
210 | )}
211 |
221 |
222 | {conversation.users.length > 2 && (
223 |
232 | )}
233 | changeTheme(theme)}
204 | className={`h-14 w-14 cursor-pointer rounded-full ${
205 | conversation.theme === theme ? "check-overlay" : ""
206 | }`}
207 | >
208 | ))}
209 |
41 | {Object.entries(REACTIONS_UI).map(([key, value], index) => (
42 |
64 | );
65 | };
66 |
67 | export default ReactionPopup;
68 |
--------------------------------------------------------------------------------
/src/components/Chat/ReactionStatus.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 | import { IMAGE_PROXY, REACTIONS_UI } from "../../shared/constants";
3 |
4 | import { MessageItem } from "../../shared/types";
5 | import Spin from "react-cssfx-loading/src/Spin";
6 | import { useUsersInfo } from "../../hooks/useUsersInfo";
7 |
8 | interface ReactionStatusProps {
9 | position: "left" | "right" | "left-tab";
10 | message: MessageItem;
11 | }
12 |
13 | const ReactionStatus: FC
50 | ![]()
{
52 | if (index + 1 === currentReaction) updateReaction(0);
53 | else updateReaction(index + 1);
54 | setIsOpened(false);
55 | }}
56 | title={key}
57 | className={`h-7 w-7 origin-bottom cursor-pointer transition duration-300 hover:scale-[115%]`}
58 | src={value.gif}
59 | alt=""
60 | />
61 |
62 | ))}
63 | setIsReactionStatusOpened(true)}
26 | className={`bg-dark-lighten border-dark absolute top-full flex -translate-y-1/2 cursor-pointer items-center gap-[2px] rounded-lg border px-2 text-sm ${
27 | position === "right"
28 | ? "right-8"
29 | : position === "left-tab"
30 | ? "left-[70px]"
31 | : "left-8"
32 | }`
33 | }
34 | >
35 | {Object.entries(
36 | Object.entries(message.reactions).reduce((acc, [key, value]) => {
37 | if (value) acc[value] = (acc[value] || 0) + 1;
38 | return acc;
39 | }, {} as { [key: number]: number })
40 | )
41 | .sort(([key1, value1], [key2, value2]) => value1 - value2)
42 | .slice(0, 3)
43 | .map(([key, value]) => (
44 | [Number(key))
50 | ))
51 | }
52 |
53 |
54 | {
55 | Object.entries(message.reactions).filter(([key, value]) => value)
56 | .length
57 | }
58 |
59 |
60 |
61 | {isReactionStatusOpened && (
62 | setIsReactionStatusOpened(false)}
64 | className="animate-fade-in fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080]"
65 | >
66 |
127 | )}
128 |
129 | );
130 | };
131 |
132 | export default ReactionStatus;
133 |
--------------------------------------------------------------------------------
/src/components/Chat/ReplyBadge.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 |
3 | import Alert from "../Alert";
4 | import { db } from "../../shared/firebase";
5 | import { doc } from "firebase/firestore";
6 | import { useDocumentQuery } from "../../hooks/useDocumentQuery";
7 | import { useParams } from "react-router-dom";
8 |
9 | interface ReplyBadgeProps {
10 | messageId: string;
11 | }
12 |
13 | const ReplyBadge: FC e.stopPropagation()}
68 | className="bg-dark flex h-96 w-screen max-w-[400px] flex-col rounded-lg"
69 | >
70 |
126 |
71 |
72 |
84 |
85 | {loading || error ? (
86 |
73 |
75 | Reactions
74 |
76 |
82 |
83 |
87 |
89 | ) : (
90 |
91 | {Object.entries(message.reactions)
92 | .filter(([key, value]) => value)
93 | .map(([key, value]) => (
94 |
124 | )}
125 |
98 | [value)
120 |
121 | ))
122 | }
123 |
99 | 
user.id === key)?.data()
103 | ?.photoURL
104 | )}
105 | alt=""
106 | />
107 |
114 |
115 | 108 | { 109 | usersInfo?.find((user) => user.id === key)?.data() 110 | ?.displayName 111 | } 112 |
113 | {
28 | const el = document.querySelector(`#message-${messageId}`);
29 |
30 | if (el) el.scrollIntoView({ behavior: "smooth" });
31 | else setIsAlertOpened(true);
32 | }}
33 | className="cursor-pointer rounded-lg bg-[#4E4F50] p-2 opacity-60"
34 | >
35 | {
36 | data?.data()?.type === "text"
37 | ? (
43 | {data?.data()?.content}
) : data?.data()?.type === "image" 38 | ? ("An image") : data?.data()?.type === "file" 39 | ? ("A file") : data?.data()?.type === "sticker" 40 | ? ("A sticker") : ("Message has been removed") 41 | } 42 |
41 |
43 | );
44 |
45 | return (
46 |
47 | {data?.docs
48 | ?.map((item) => item.data() as SavedUser)
49 | .map((user) => (
50 |
66 | );
67 | };
68 |
69 | export default AddMembers;
70 |
--------------------------------------------------------------------------------
/src/components/Group/Admin.tsx:
--------------------------------------------------------------------------------
1 | import { ConversationInfo, SavedUser } from "../../shared/types";
2 | import { FC, useState } from "react";
3 | import { arrayRemove, doc, updateDoc } from "firebase/firestore";
4 |
5 | import { IMAGE_PROXY } from "../../shared/constants";
6 | import Spin from "react-cssfx-loading/src/Spin";
7 | import { db } from "../../shared/firebase";
8 | import { useParams } from "react-router-dom";
9 | import { useStore } from "../../store";
10 | import { useUsersInfo } from "../../hooks/useUsersInfo";
11 |
12 | interface AdminProps {
13 | conversation: ConversationInfo;
14 | }
15 |
16 | const Admin: FC
51 | })
56 |
63 | ))}
64 | {data?.empty &&
57 |
59 |
62 | {user.displayName}
58 |No more user to add
} 65 |
33 |
35 | );
36 |
37 | return (
38 |
39 | {
40 | data
41 | ?.map((item) => item.data() as SavedUser)
42 | .map((user) => (
43 |
77 | );
78 | };
79 |
80 | export default Admin;
81 |
--------------------------------------------------------------------------------
/src/components/Group/Members.tsx:
--------------------------------------------------------------------------------
1 | import { ConversationInfo, SavedUser } from "../../shared/types";
2 | import { FC, useState } from "react";
3 | import { arrayRemove, arrayUnion, doc, updateDoc } from "firebase/firestore";
4 | import { useNavigate, useParams } from "react-router-dom";
5 |
6 | import Alert from "../Alert";
7 | import { IMAGE_PROXY } from "../../shared/constants";
8 | import Spin from "react-cssfx-loading/src/Spin";
9 | import { db } from "../../shared/firebase";
10 | import { useStore } from "../../store";
11 | import { useUsersInfo } from "../../hooks/useUsersInfo";
12 |
13 | interface MembersProps {
14 | conversation: ConversationInfo;
15 | }
16 |
17 | const Members: FC
44 |
49 |
50 |
74 | ))
75 | }
76 |
51 |
53 |
54 | {conversation.group?.admins?.includes(currentUser?.uid as string) &&
55 | user.uid !== currentUser?.uid && (
56 | {user.displayName}
52 |
57 |
60 |
61 |
71 | )
72 | }
73 |
62 |
69 |
70 |
58 |
60 | );
61 |
62 | return (
63 | <>
64 |
65 | {data
66 | ?.map((item) => item.data() as SavedUser)
67 | .map((user) => (
68 |
117 |
118 |
69 |
74 |
75 |
115 | ))}
116 |
76 |
78 |
79 | {conversation.group?.admins?.includes(
80 | currentUser?.uid as string
81 | ) && (
82 | {user.displayName}
77 |
83 |
86 |
87 |
113 | )}
114 |
88 | {conversation.users.length > 3 && (
89 |
101 | )}
102 | {user.uid !== currentUser?.uid && (
103 |
110 | )}
111 |
112 | setIsOpened(false)}
24 | className={`animate-fade-in fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080] transition-all duration-300`}
25 | >
26 |
82 | );
83 | };
84 |
85 | export default ViewGroup;
86 |
--------------------------------------------------------------------------------
/src/components/Home/CreateConversation.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 | import { IMAGE_PROXY, THEMES } from "../../shared/constants";
3 | import {
4 | addDoc,
5 | collection,
6 | getDocs,
7 | query,
8 | serverTimestamp,
9 | where,
10 | } from "firebase/firestore";
11 |
12 | import Spin from "react-cssfx-loading/src/Spin";
13 | import { db } from "../../shared/firebase";
14 | import { useCollectionQuery } from "../../hooks/useCollectionQuery";
15 | import { useNavigate } from "react-router-dom";
16 | import { useStore } from "../../store";
17 |
18 | interface CreateConversationProps {
19 | setIsOpened: (value: boolean) => void;
20 | }
21 |
22 | const CreateConversation: FC e.stopPropagation()}
28 | className="bg-dark mx-2 w-full max-w-[500px] rounded-lg"
29 | >
30 |
81 |
31 |
32 |
46 |
47 |
33 |
37 | 34 | Group Members 35 |
36 |
38 |
44 |
45 |
48 |
56 |
64 |
72 |
73 |
74 | {
75 | selectedSection === Sections.members
76 | ? ( setIsOpened(false)}
77 | className="fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080]"
78 | >
79 |
151 | );
152 | };
153 |
154 | export default CreateConversation;
155 |
--------------------------------------------------------------------------------
/src/components/Home/SelectConversation.tsx:
--------------------------------------------------------------------------------
1 | import { Link, useParams } from "react-router-dom";
2 |
3 | import { ConversationInfo } from "../../shared/types";
4 | import { FC } from "react";
5 | import { IMAGE_PROXY } from "../../shared/constants";
6 | import Skeleton from "../Skeleton";
7 | import { useLastMessage } from "../../hooks/useLastMessage";
8 | import { useStore } from "../../store";
9 | import { useUsersInfo } from "../../hooks/useUsersInfo";
10 |
11 | interface SelectConversationProps {
12 | conversation: ConversationInfo;
13 | conversationId: string;
14 | }
15 |
16 | const SelectConversation: FC e.stopPropagation()}
81 | className="bg-dark mx-3 w-full max-w-[500px] overflow-hidden rounded-lg"
82 | >
83 |
150 |
84 |
85 |
99 | {loading ? (
100 |
86 |
90 | 87 | New conversation 88 |
89 |
91 |
97 |
98 |
101 |
103 | ) : error ? (
104 |
105 |
107 | ) : (
108 | <>
109 | {isCreating && (
110 | Something went wrong
106 |
111 |
113 | )}
114 |
115 | {data?.docs
116 | .filter((doc) => doc.data().uid !== currentUser?.uid)
117 | .map((doc) => (
118 |
138 | handleToggle(doc.data().uid)}
121 | className="hover:bg-dark-lighten flex cursor-pointer items-center gap-2 px-5 py-2 transition"
122 | >
123 |
129 | .photoURL)})
134 |
136 | ))}
137 | {doc.data().displayName}
135 |
139 |
146 |
147 |
148 | )}
149 |
33 |
39 | );
40 |
41 | if (conversation.users.length === 2)
42 | return (
43 |
49 |
35 |
38 |
55 |
66 | {!lastMessageLoading && (
67 | <>
68 | {
69 | lastMessage?.lastMessageId !== null &&
70 | lastMessage?.lastMessageId !==
71 | conversation.seen[currentUser?.uid as string] && (
72 |
73 | )}
74 |
75 | )}
76 |
77 | );
78 |
79 | return (
80 |
86 | {conversation?.group?.groupImage ? (
87 | 56 | {filtered?.[0].data()?.displayName} 57 |
58 | {lastMessageLoading ? ( 59 |62 | {lastMessage?.message} 63 |
64 | )} 65 |
94 |
99 |
106 |
107 | )}
108 |
109 |
122 | {!lastMessageLoading && (
123 | <>
124 | {lastMessage?.lastMessageId !== null &&
125 | lastMessage?.lastMessageId !==
126 | conversation.seen[currentUser?.uid as string] && (
127 |
128 | )
129 | }
130 |
131 | )}
132 |
133 | );
134 | };
135 |
136 | export default SelectConversation;
137 |
--------------------------------------------------------------------------------
/src/components/Home/SideBar.tsx:
--------------------------------------------------------------------------------
1 | import { DEFAULT_AVATAR, IMAGE_PROXY } from "../../shared/constants";
2 | import { FC, useState } from "react";
3 | import { Link, useLocation } from "react-router-dom";
4 | import { collection, orderBy, query, where } from "firebase/firestore";
5 |
6 | import ClickAwayListener from "../ClickAwayListener";
7 | import { ConversationInfo } from "../../shared/types";
8 | import CreateConversation from "./CreateConversation";
9 | import SelectConversation from "./SelectConversation";
10 | import Spin from "react-cssfx-loading/src/Spin";
11 | import UserInfo from "./UserInfo";
12 | import { auth } from "../../shared/firebase";
13 | import { db } from "../../shared/firebase";
14 | import { signOut } from "firebase/auth";
15 | import { useCollectionQuery } from "../../hooks/useCollectionQuery";
16 | import { useStore } from "../../store";
17 |
18 | const SideBar: FC = () => {
19 | const currentUser = useStore((state) => state.currentUser);
20 | const [isDropdownOpened, setIsDropdownOpened] = useState(false);
21 | const [createConversationOpened, setCreateConversationOpened] = useState(false);
22 | const [isUserInfoOpened, setIsUserInfoOpened] = useState(false);
23 | const { data, error, loading } = useCollectionQuery(
24 | "conversations",
25 | query(
26 | collection(db, "conversations"),
27 | orderBy("updatedAt", "desc"),
28 | where("users", "array-contains", currentUser?.uid)
29 | )
30 | );
31 | const location = useLocation();
32 |
33 | return (
34 | <>
35 | 110 | {conversation?.group?.groupName || filtered?.map((user) => user.data()?.displayName) 111 | .slice(0, 3) 112 | .join(", ")} 113 |
114 | {lastMessageLoading ? ( 115 |118 | {lastMessage?.message} 119 |
120 | )} 121 |
42 |
131 |
132 | {createConversationOpened && (
133 |
43 |
44 | 
45 |
100 |
101 | {loading ? (
102 |
45 | FireVerse
46 | 47 | 48 |
49 |
55 |
56 | setIsDropdownOpened(false)}>
57 | {(ref) => (
58 |
98 |
99 |
59 | ![]()
setIsDropdownOpened((prev) => !prev)}
61 | className="h-8 w-8 cursor-pointer rounded-full object-cover"
62 | src={
63 | currentUser?.photoURL
64 | ? IMAGE_PROXY(currentUser.photoURL)
65 | : DEFAULT_AVATAR
66 | }
67 | alt=""
68 | />
69 |
70 |
96 | )}
97 |
77 |
87 |
94 |
95 |
103 |
105 | ) : error ? (
106 |
107 |
109 | ) : data?.empty ? (
110 | Something went wrong
108 |
111 |
119 | ) : (
120 | No conversation found
112 | 118 |
121 | {data?.docs.map((item) => (
122 |
129 | )}
130 | setIsOpened(false)}
16 | className={`fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080] transition-all duration-300 ${
17 | isOpened ? "visible opacity-100" : "invisible opacity-0"
18 | }`}
19 | >
20 |
61 | );
62 | };
63 |
64 | export default UserInfo;
65 |
--------------------------------------------------------------------------------
/src/components/Icon/GifIcon.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | const GifIcon: FC<{ className?: string }> = ({ className }) => {
4 | return (
5 |
31 | );
32 | };
33 |
34 | export default GifIcon;
--------------------------------------------------------------------------------
/src/components/Icon/ReplyIcon.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | const ReplyIcon: FC<{ className?: string }> = ({ className }) => {
4 | return (
5 |
13 | );
14 | };
15 |
16 | export default ReplyIcon;
17 |
--------------------------------------------------------------------------------
/src/components/Icon/StickerIcon.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | const StickerIcon: FC<{ className?: string }> = ({ className }) => {
4 | return (
5 |
16 | );
17 | };
18 |
19 | export default StickerIcon;
20 |
--------------------------------------------------------------------------------
/src/components/ImageView.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | interface ImageViewProps {
4 | src: string;
5 | isOpened: boolean;
6 | setIsOpened: (value: boolean) => void;
7 | }
8 |
9 | const ImageView: FC e.stopPropagation()}
22 | className="bg-dark mx-2 w-full max-w-[400px] rounded-lg"
23 | >
24 |
60 |
25 |
26 |
40 |
27 |
31 | 28 | Your Profile 29 |
30 |
32 |
38 |
39 |
41 |
59 |
42 | 
47 |
54 |
55 |
48 |
53 | {currentUser?.displayName}
49 |ID: {currentUser?.uid}
50 |Email: {currentUser?.email || "None"}
51 |Phone Number: {currentUser?.phoneNumber || "None"}
52 |56 | Change your google / facebook avatar or username to update it here 57 |
58 | setIsOpened(false)}
13 | className={`fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080] transition-all duration-300 ${
14 | isOpened ? "visible opacity-100" : "invisible opacity-0"
15 | }`}
16 | >
17 | {src && (
18 | ![]()
e.stopPropagation()}
20 | src={src}
21 | className="h-auto max-h-full w-auto max-w-full"
22 | />
23 | )}
24 |
25 |
31 |
32 | );
33 | };
34 |
35 | export default ImageView;
36 |
--------------------------------------------------------------------------------
/src/components/Input/EmojiPicker.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Picker } from "emoji-mart";
3 |
4 | interface EmojiPickerProps {
5 | onSelect: (emoji: any) => void;
6 | }
7 |
8 | const EmojiPicker: FC
33 |
75 | )}
76 |
34 | {
36 | if (timeOutRef.current) clearTimeout(timeOutRef.current);
37 | timeOutRef.current = setTimeout(() => {
38 | setSearchInputValue(e.target.value);
39 | }, 500);
40 | }}
41 | type="text"
42 | className="bg-dark-lighten w-full rounded-full py-2 pl-10 pr-4 outline-none"
43 | placeholder="Search..."
44 | />
45 |
46 |
47 |
48 | {loading ? (
49 |
50 |
52 | ) : error ? (
53 |
54 |
58 | ) : (
59 | 55 | Sorry... Giphy has limited the request 56 |
57 |
60 | {(data as any).data.map((item: any) => (
61 | ![]()
{
64 | onSelect(item?.images?.original?.url);
65 | setIsOpened(false);
66 | }}
67 | className="h-[100px] flex-1 cursor-pointer object-cover"
68 | src={item?.images?.original?.url}
69 | alt=""
70 | />
71 | ))}
72 |
73 | )}
74 |
46 | {loading || error ? (
47 |
130 | )}
131 |
48 |
50 | ) : (
51 |
52 |
128 | )}
129 |
53 | {recentStickers.length > 0 && (
54 | <>
55 |
78 |
98 | ))}
99 |
100 |
101 | 56 | Recent stickers 57 |
58 |
59 | {recentStickers.map((url) => (
60 | {
63 | onSelect(url);
64 | addRecentSticker(url);
65 | setIsOpened(false);
66 | }}
67 | className="hover:bg-dark-lighten cursor-pointer"
68 | src={url}
69 | runOnHover
70 | />
71 | ))}
72 |
73 |
74 | )}
75 |
76 | {data?.map((collection) => (
77 | 79 | {collection.name} 80 |
81 |
82 | {collection.stickers.map((sticker) => (
83 | {
87 | onSelect(sticker.spriteURL);
88 | addRecentSticker(sticker.spriteURL);
89 | setIsOpened(false);
90 | }}
91 | className="hover:bg-dark-lighten cursor-pointer"
92 | src={sticker.spriteURL}
93 | runOnHover
94 | />
95 | ))}
96 |
97 |
102 | {recentStickers.length > 0 && (
103 |
113 | )}
114 | {data?.map((collection) => (
115 | ![]()
117 | document
118 | .querySelector(`#sticker-${collection.id}`)
119 | ?.scrollIntoView()
120 | }
121 | className="h-9 w-9 cursor-pointer object-cover"
122 | src={collection.icon}
123 | alt=""
124 | />
125 | ))}
126 |
127 |
25 |
27 | );
28 |
29 | if (data?.empty)
30 | return (
31 |
32 |
34 | );
35 |
36 | return (
37 | No file found
33 |
38 | {data?.docs.map((file) => (
39 |
59 | );
60 | };
61 |
62 | export default Files;
63 |
--------------------------------------------------------------------------------
/src/components/Media/Image.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 | import { collection, orderBy, query, where } from "firebase/firestore";
3 |
4 | import ImageView from "../ImageView";
5 | import Spin from "react-cssfx-loading/src/Spin";
6 | import { db } from "../../shared/firebase";
7 | import { useCollectionQuery } from "../../hooks/useCollectionQuery";
8 | import { useParams } from "react-router-dom";
9 |
10 | const ImageItem: FC<{ src: string }> = ({ src }) => {
11 | const [isImageViewOpened, setIsImageViewOpened] = useState(false);
12 |
13 | return (
14 | <>
15 |
40 |
57 | ))}
58 |
45 |
48 |
54 |
55 |
56 | {file.data()?.file?.name}
46 |{formatFileSize(file.data()?.file?.size)}
47 |
45 |
47 | );
48 |
49 | if (data?.empty)
50 | return (
51 |
52 |
54 | );
55 |
56 | return (
57 | No image found
53 |
58 | {data?.docs.map((image) => (
59 |
62 | );
63 | };
64 |
65 | export default Image;
66 |
--------------------------------------------------------------------------------
/src/components/Media/ViewMedia.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 |
3 | import Files from "./Files";
4 | import Image from "./Image";
5 |
6 | interface ViewMediaProps {
7 | setIsOpened: (value: boolean) => void;
8 | }
9 |
10 | const ViewMedia: FC setIsOpened(false)}
20 | className={`animate-fade-in fixed top-0 left-0 z-20 flex h-full w-full items-center justify-center bg-[#00000080] transition-all duration-300`}
21 | >
22 |
68 | );
69 | };
70 |
71 | export default ViewMedia;
72 |
--------------------------------------------------------------------------------
/src/components/Message/LeftMessage.tsx:
--------------------------------------------------------------------------------
1 | import { ConversationInfo, MessageItem } from "../../shared/types";
2 | import { FC, Fragment, useState } from "react";
3 | import {
4 | formatDate,
5 | formatFileSize,
6 | splitLinkFromMessage,
7 | } from "../../shared/utils";
8 |
9 | import AvatarFromId from "../Chat/AvatarFromId";
10 | import ClickAwayListener from "../ClickAwayListener";
11 | import { EMOJI_REGEX } from "../../shared/constants";
12 | import FileIcon from "../FileIcon";
13 | import ImageView from "../ImageView";
14 | import ReactionPopup from "../Chat/ReactionPopup";
15 | import ReactionStatus from "../Chat/ReactionStatus";
16 | import ReplyBadge from "../Chat/ReplyBadge";
17 | import ReplyIcon from "../Icon/ReplyIcon";
18 | import SpriteRenderer from "../SpriteRenderer";
19 | import { useStore } from "../../store";
20 |
21 | interface LeftMessageProps {
22 | message: MessageItem;
23 | conversation: ConversationInfo;
24 | index: number;
25 | docs: any[];
26 | replyInfo: any;
27 | setReplyInfo: (value: any) => void;
28 | }
29 |
30 | const LeftMessage: FC e.stopPropagation()}
24 | className="bg-dark mx-2 w-full max-w-[500px] rounded-lg"
25 | >
26 |
67 |
27 |
28 |
42 |
43 |
29 |
33 | 30 | View images and files 31 |
32 |
34 |
40 |
41 |
44 |
52 |
60 |
61 |
62 | {
63 | selectedSection === Sections.images ? (
48 |
225 | );
226 | };
227 |
228 | export default LeftMessage;
229 |
--------------------------------------------------------------------------------
/src/components/Message/RightMessage.tsx:
--------------------------------------------------------------------------------
1 | import { FC, Fragment, useState } from "react";
2 | import { doc, updateDoc } from "firebase/firestore";
3 | import {
4 | formatDate,
5 | formatFileSize,
6 | splitLinkFromMessage,
7 | } from "../../shared/utils";
8 |
9 | import ClickAwayListener from "../ClickAwayListener";
10 | import { EMOJI_REGEX } from "../../shared/constants";
11 | import FileIcon from "../FileIcon";
12 | import ImageView from "../ImageView";
13 | import { MessageItem } from "../../shared/types";
14 | import ReactionPopup from "../Chat/ReactionPopup";
15 | import ReactionStatus from "../Chat/ReactionStatus";
16 | import ReplyBadge from "../Chat/ReplyBadge";
17 | import ReplyIcon from "../Icon/ReplyIcon";
18 | import SpriteRenderer from "../SpriteRenderer";
19 | import { db } from "../../shared/firebase";
20 | import { useParams } from "react-router-dom";
21 | import { useStore } from "../../store";
22 |
23 | interface RightMessageProps {
24 | message: MessageItem;
25 | replyInfo: any;
26 | setReplyInfo: (value: any) => void;
27 | }
28 |
29 | const RightMessage: FC
53 | {!!message.replyTo && (
54 |
57 | {
59 | if (e.detail === 2 && message.type !== "removed") {
60 | setReplyInfo(message);
61 | }
62 | }}
63 | className={`group relative flex items-stretch gap-2 px-8 ${
64 | Object.keys(message.reactions || {}).length > 0 ? "mb-2" : ""
65 | }`}
66 | >
67 | {conversation.users.length > 2 && (
68 | ![]()
{
120 | setIsImageViewOpened(true);
121 | e.stopPropagation();
122 | }}
123 | title={formattedDate}
124 | className="max-w-[60%] cursor-pointer transition duration-300 hover:brightness-[85%]"
125 | src={message.content}
126 | alt=""
127 | />
128 | e.stopPropagation()}
166 | title={formattedDate}
167 | src={message.content}
168 | size={130}
169 | />
170 | ) : (
171 | setIsSelectReactionOpened(false)}
201 | >
202 | {(ref) => (
203 |
214 | )}
215 |
216 | )}
217 | {Object.keys(message.reactions || {}).length > 0 && (
218 | 2 ? "left-tab" : "left"}
221 | />
222 | )}
223 |
224 | e.stopPropagation()} className="h-full py-1">
69 |
75 | )}
76 |
77 | {message.type === "text" ? (
78 | <>
79 | {EMOJI_REGEX.test(message.content) ? (
80 |
70 | {docs[index - 1]?.data()?.sender !== message.sender && (
71 |
74 | e.stopPropagation()}
82 | title={formattedDate}
83 | className="text-4xl"
84 | >
85 | {message.content}
86 |
87 | ) : (
88 | e.stopPropagation()}
90 | title={formattedDate}
91 | className={`bg-dark-lighten rounded-lg p-2 text-white ${
92 | conversation.users.length === 2
93 | ? "after:border-dark-lighten relative after:absolute after:right-full after:bottom-[6px] after:border-8 after:border-t-transparent after:border-l-transparent"
94 | : ""
95 | }`}
96 | >
97 | {splitLinkFromMessage(message.content).map((item, index) => (
98 |
99 | {typeof item === "string" ? (
100 | {item}
101 | ) : (
102 |
108 | {item.link}
109 |
110 | )}
111 |
112 | ))}
113 |
114 | )}
115 |
116 | ) : message.type === "image" ? (
117 | <>
118 | e.stopPropagation()}
137 | title={formattedDate}
138 | className="bg-dark-lighten flex items-center gap-2 overflow-hidden rounded-lg py-3 px-5"
139 | >
140 |
163 | ) : message.type === "sticker" ? (
164 |
145 |
153 |
154 |
160 |
161 |
162 | 146 | {message.file?.name} 147 |
148 | 149 |150 | {formatFileSize(message.file?.size as number)} 151 |
152 | e.stopPropagation()}
173 | title={formattedDate}
174 | className="border-dark-lighten rounded-lg border p-3 text-gray-400"
175 | >
176 | Message has been removed
177 |
178 | )}
179 |
180 | {message.type !== "removed" && (
181 | <>
182 |
188 |
197 |
198 | {isSelectReactionOpened && (
199 |
50 |
219 | );
220 | };
221 |
222 | export default RightMessage;
223 |
--------------------------------------------------------------------------------
/src/components/PrivateRoute.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate, useLocation } from "react-router-dom";
2 |
3 | import { FC } from "react";
4 | import { useStore } from "../store";
5 |
6 | const PrivateRoute: FC = ({ children }) => {
7 | const currentUser = useStore((state) => state.currentUser);
8 | const location = useLocation();
9 |
10 | if (!currentUser)
11 | return (
12 |
51 | {!!message.replyTo && (
52 |
55 | {
57 | if (e.detail === 2 && message.type !== "removed") {
58 | setReplyInfo(message);
59 | }
60 | }}
61 | className={`group relative flex flex-row-reverse items-stretch gap-2 px-8 ${
62 | Object.keys(message.reactions || {}).length > 0 ? "mb-2" : ""
63 | }`}
64 | >
65 | {message.type === "text" ? (
66 | <>
67 | {EMOJI_REGEX.test(message.content) ? (
68 | ![]()
{
104 | setIsImageViewOpened(true);
105 | e.stopPropagation();
106 | }}
107 | title={formattedDate}
108 | className="max-w-[60%] cursor-pointer transition duration-300 hover:brightness-[85%]"
109 | src={message.content}
110 | alt=""
111 | />
112 | e.stopPropagation()}
151 | title={formattedDate}
152 | src={message.content}
153 | size={130}
154 | />
155 | ) : (
156 | setIsSelectReactionOpened(false)}
197 | >
198 | {(ref) => (
199 |
210 | )}
211 |
212 | {Object.keys(message.reactions || {}).length > 0 && (
213 |
218 | e.stopPropagation()}
70 | title={formattedDate}
71 | className="text-4xl"
72 | >
73 | {message.content}
74 |
75 | ) : (
76 | e.stopPropagation()}
78 | title={formattedDate}
79 | className={`bg-primary after:border-primary relative rounded-lg p-2 text-white after:absolute after:left-full after:bottom-[6px] after:border-8 after:border-t-transparent after:border-r-transparent`}
80 | >
81 | {splitLinkFromMessage(message.content).map((item, index) => (
82 |
83 | {typeof item === "string" ? (
84 | {item}
85 | ) : (
86 |
92 | {item.link}
93 |
94 | )}
95 |
96 | ))}
97 |
98 | )}
99 |
100 | ) : message.type === "image" ? (
101 | <>
102 | e.stopPropagation()}
121 | title={formattedDate}
122 | className="bg-dark-lighten flex items-center gap-2 overflow-hidden rounded-lg py-3 px-5"
123 | >
124 |
148 | ) : message.type === "sticker" ? (
149 |
130 |
138 |
139 |
145 |
146 |
147 | 131 | {message.file?.name} 132 |
133 | 134 |135 | {formatFileSize(message.file?.size as number)} 136 |
137 | e.stopPropagation()}
158 | title={formattedDate}
159 | className="border-dark-lighten rounded-lg border p-3 text-gray-400"
160 | >
161 | Message has been removed
162 |
163 | )}
164 |
165 | {message.type !== "removed" && (
166 | <>
167 |
173 |
174 |
183 |
184 |
193 |
194 | {isSelectReactionOpened && (
195 |
37 |
70 | );
71 | };
72 |
73 | export default Chat;
--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import SideBar from "../components/Home/SideBar";
3 |
4 | const Home: FC = () => {
5 | return (
6 |
40 | {loading ? (
41 | <>
42 |
43 |
44 |
69 |
48 | 
49 |
51 | ) : (
52 | <>
53 |
49 | Conversation does not exists
50 |
7 |
13 | );
14 | };
15 |
16 | export default Home;
17 |
--------------------------------------------------------------------------------
/src/pages/SignIn.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AuthProvider,
3 | FacebookAuthProvider,
4 | GoogleAuthProvider,
5 | signInWithPopup,
6 | } from "firebase/auth";
7 | import { FC, useState } from "react";
8 |
9 | import Alert from "../components/Alert";
10 | import { Navigate } from "react-router-dom";
11 | import { auth } from "../shared/firebase";
12 | import { useQueryParams } from "../hooks/useQueryParams";
13 | import { useStore } from "../store";
14 |
15 | const SignIn: FC = () => {
16 | const { redirect } = useQueryParams();
17 |
18 | const currentUser = useStore((state) => state.currentUser);
19 |
20 | const [loading, setLoading] = useState(false);
21 | const [error, setError] = useState("");
22 | const [isAlertOpened, setIsAlertOpened] = useState(false);
23 |
24 | const handleSignIn = (provider: AuthProvider) => {
25 |
26 | setLoading(true);
27 |
28 | signInWithPopup(auth, provider)
29 | .then((res) => {
30 | console.log(res.user);
31 | })
32 | .catch((err) => {
33 | setIsAlertOpened(true);
34 | setError(`Error: ${err.code}`);
35 | })
36 | .finally(() => {
37 | setLoading(false);
38 | });
39 | };
40 |
41 | if (currentUser) return
10 |
12 | Select a conversation to start chatting
11 |
46 |
98 |
99 |
47 |
97 |
48 |
62 |
63 |
49 |
50 | FireVerse
51 |
52 |
58 |
59 | Github
60 |
61 |
50 | FireVerse
51 |
64 |
96 |
65 | 
66 |
67 |
68 |
66 |
69 |
95 | 70 | The best place for messaging 71 |
72 |73 | It's free, fast and secure. We make it easy and fun to stay 74 | close to your favourite people. 75 |
76 | 77 | 85 | 86 | 94 |