Skip to content

Commit 338b694

Browse files
author
AdamUhh
committedJun 27, 2021
Fixed unnecessary database calls
1 parent 67fbe83 commit 338b694

File tree

4 files changed

+16133
-106
lines changed

4 files changed

+16133
-106
lines changed
 

‎package-lock.json

+16,024
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@
4040
"last 1 safari version"
4141
]
4242
}
43-
}
43+
}

‎src/components/Chatarea.js

+100-97
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,112 @@
11
import React, { useEffect, useState } from 'react';
22

3-
import "firebase/firestore";
4-
import "firebase/auth";
5-
import firebase from "firebase/app";
3+
import 'firebase/firestore';
4+
import 'firebase/auth';
5+
import firebase from 'firebase/app';
66
import ScrollBottom from './ScrollBottom';
77

88
import { useAuthState } from 'react-firebase-hooks/auth';
99
import { useCollectionData } from 'react-firebase-hooks/firestore';
1010

11-
import "../firebase.js"
11+
import '../firebase.js';
1212

1313
const auth = firebase.auth();
1414
const db = firebase.firestore();
1515

1616
const Chatarea = (props) => {
17-
const { otherUserUID, otherUserEmail, currentUserUID } = props;
18-
19-
//gets the current state of the logged in user
20-
const [user] = useAuthState(auth);
21-
const [messageDocID, setMessageDocID] = useState();
22-
const [formValue, setFormValue] = useState('');
23-
24-
const messageRef = db.collection('message').doc(messageDocID).collection('messages');
25-
26-
//query to get latest messages from the database
27-
const query = messageRef.orderBy('sentAt').limit(100);
28-
const [chatMessages] = useCollectionData(query, { idField: 'id' });
29-
30-
// eslint-disable-next-line
31-
const createMessageDocID = () => {
32-
if (otherUserUID > currentUserUID) {
33-
setMessageDocID(otherUserUID + currentUserUID);
34-
} else {
35-
setMessageDocID(currentUserUID + otherUserUID);
36-
}
37-
}
38-
39-
const sendMessage = async (e) => {
40-
e.preventDefault();
41-
42-
const { photoURL } = user;
43-
44-
await messageRef.add({
45-
text: formValue,
46-
sentAt: firebase.firestore.FieldValue.serverTimestamp(),
47-
sentBy: currentUserUID,
48-
sentByName: user.email,
49-
photoURL: photoURL
50-
});
51-
52-
setFormValue('');
53-
}
54-
55-
// useEffect(() => {
56-
// createMessageDocID();
57-
// // eslint-disable-next-line
58-
// }, []);
59-
60-
useEffect(() => {
61-
createMessageDocID();
62-
63-
db.collection('message').doc(messageDocID).get()
64-
.then(doc => {
65-
if (doc.exists) {
66-
console.log("chat exists");
67-
} else {
68-
console.log("No such chat! Adding it now");
69-
db.collection('message').doc(messageDocID).set({
70-
71-
});
72-
}
73-
});
74-
75-
}, [messageDocID, createMessageDocID]);
76-
77-
return (
78-
<>
79-
<div className="top-bar">
80-
<p>{otherUserEmail}</p>
81-
<hr />
82-
</div>
83-
<div className="messages">
84-
{
85-
chatMessages && chatMessages.map((mssg) => {
86-
return (
87-
<div key={mssg.id} className="message">
88-
<img src={mssg.photoURL} alt="profile" />
89-
<div className="message-bottom">
90-
<h3 className="username">{mssg.sentByName}</h3>
91-
<p>{mssg.text}</p>
92-
</div>
93-
</div>
94-
);
95-
})
96-
}
97-
{/* <ScrollBottom /> */}
98-
</div>
99-
<div className="input-box">
100-
<form onSubmit={sendMessage}>
101-
<input type="text" name="message" id="input-message" value={formValue} onChange={(e) => setFormValue(e.target.value)} />
102-
<input type="submit" value="Send" id="input-submit" />
103-
</form>
104-
</div>
105-
</>
106-
)
107-
}
108-
109-
export default Chatarea;
17+
const { otherUserUID, otherUserEmail, currentUserUID } = props;
18+
19+
//gets the current state of the logged in user
20+
const [user] = useAuthState(auth);
21+
const [messageDocID, setMessageDocID] = useState();
22+
const [formValue, setFormValue] = useState('');
23+
24+
const messageRef = db.collection('message').doc(messageDocID).collection('messages');
25+
26+
//query to get latest messages from the database
27+
const query = messageRef.orderBy('sentAt').limit(100);
28+
const [chatMessages] = useCollectionData(query, { idField: 'id' });
29+
30+
// eslint-disable-next-line
31+
const createMessageDocID = () => {
32+
if (otherUserUID > currentUserUID) {
33+
setMessageDocID(otherUserUID + currentUserUID);
34+
CheckChatExist(otherUserUID + currentUserUID);
35+
} else {
36+
setMessageDocID(currentUserUID + otherUserUID);
37+
CheckChatExist(currentUserUID + otherUserUID);
38+
}
39+
};
40+
const sendMessage = async (e) => {
41+
e.preventDefault();
42+
43+
const { photoURL } = user;
44+
45+
await messageRef.add({
46+
text: formValue,
47+
sentAt: firebase.firestore.FieldValue.serverTimestamp(),
48+
sentBy: currentUserUID,
49+
sentByName: user.email,
50+
photoURL: photoURL,
51+
});
52+
53+
setFormValue('');
54+
};
55+
56+
useEffect(() => {
57+
createMessageDocID();
58+
}, [otherUserUID]);
59+
60+
const CheckChatExist = (MD_ID) => {
61+
db.collection('message')
62+
.doc(MD_ID)
63+
.get()
64+
.then((doc) => {
65+
if (doc.exists) {
66+
console.log('chat exists');
67+
} else {
68+
console.log('No such chat! Adding it now');
69+
db.collection('message').doc(MD_ID).set({
70+
});
71+
}
72+
});
73+
};
74+
75+
return (
76+
<>
77+
<div className='top-bar'>
78+
<p>{otherUserEmail}</p>
79+
<hr />
80+
</div>
81+
<div className='messages'>
82+
{chatMessages &&
83+
chatMessages.map((mssg) => {
84+
return (
85+
<div key={mssg.id} className='message'>
86+
<img src={mssg.photoURL} alt='profile' />
87+
<div className='message-bottom'>
88+
<h3 className='username'>{mssg.sentByName}</h3>
89+
<p>{mssg.text}</p>
90+
</div>
91+
</div>
92+
);
93+
})}
94+
{/* <ScrollBottom /> */}
95+
</div>
96+
<div className='input-box'>
97+
<form onSubmit={sendMessage}>
98+
<input
99+
type='text'
100+
name='message'
101+
id='input-message'
102+
value={formValue}
103+
onChange={(e) => setFormValue(e.target.value)}
104+
/>
105+
<input type='submit' value='Send' id='input-submit' />
106+
</form>
107+
</div>
108+
</>
109+
);
110+
};
111+
112+
export default Chatarea;

‎src/firebase.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import firebase from "firebase/app";
22

33
const firebaseConfig = {
4-
apiKey: "AIzaSyA2OUhI9wMmzZIAxcOvGJU6V9gfy_Ew4-I",
5-
authDomain: "connect-me-567b8.firebaseapp.com",
6-
databaseURL: "https://connect-me-567b8-default-rtdb.firebaseio.com",
7-
projectId: "connect-me-567b8",
8-
storageBucket: "connect-me-567b8.appspot.com",
9-
messagingSenderId: "506373005424",
10-
appId: "1:506373005424:web:549fd3601f7ae4623e14b5",
11-
measurementId: "G-54C2W2KNBD"
4+
apiKey: "AIzaSyBtROcvde12X-P0MMYs-dq_BGiGfYGh8KM",
5+
authDomain: "testingmuntasir-connectme.firebaseapp.com",
6+
// databaseURL: "https://connect-me-567b8-default-rtdb.firebaseio.com",
7+
projectId: "testingmuntasir-connectme",
8+
storageBucket: "testingmuntasir-connectme.appspot.com",
9+
messagingSenderId: "79924300817",
10+
appId: "1:79924300817:web:523f1992af18677f53b5b0",
11+
// measurementId: "G-54C2W2KNBD"
1212
};
1313

1414
firebase.initializeApp(firebaseConfig);

0 commit comments

Comments
 (0)
Please sign in to comment.