Skip to content

Commit 08fa3ef

Browse files
burningliliesburninglilies
committed
.ts updates
1 parent 5d1228e commit 08fa3ef

File tree

4 files changed

+114
-104
lines changed

4 files changed

+114
-104
lines changed

‎src/components/includes/Wrapped.tsx

+46-48
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
88
import "../../styles/Wrapped.scss";
99
import "../../styles/WrappedAnimation.scss";
1010
import React, { useEffect, useState } from "react";
11-
import firebase from '../../firebase';
11+
import { firestore } from '../../firebase';
12+
import { collection, doc, getDoc, getDocs } from 'firebase/firestore';
1213
import Couple from "../../media/wrapped/couple.svg"
1314
import Girl from "../../media/wrapped/girl.svg"
1415
import Bus from "../../media/wrapped/bus.svg"
@@ -199,16 +200,17 @@ const Wrapped= (props: Props): JSX.Element => {
199200
};
200201

201202
useEffect(() => {
202-
// add usestate for totalstages calculate it in useEffect
203-
204-
const wrappedRef = firebase.firestore().collection('wrapped');
205203
const fetchData = async () => {
206204
setLoading(true);
207205
try {
208-
const doc = await wrappedRef.doc(props.user?.userId).get();
209-
const usersRef = firebase.firestore().collection('users');
210-
if (doc.exists) {
211-
const studentData = doc.data() as {
206+
const docRef = doc(firestore, 'wrapped', props.user?.userId || '');
207+
const docSnap = await getDoc(docRef);
208+
209+
const userDocRef = doc(firestore, 'users', wrappedData.favTaId || '');
210+
const userDocSnap = await getDoc(userDocRef);
211+
212+
if (docSnap.exists()) {
213+
const studentData = docSnap.data() as {
212214
numVisits: number;
213215
personalityType: string;
214216
timeHelpingStudents: number;
@@ -218,72 +220,68 @@ const Wrapped= (props: Props): JSX.Element => {
218220
favDay: number;
219221
favMonth: number;
220222
numStudentsHelped: number;
221-
}
222-
setWrappedData(studentData);
223-
224-
const data = doc.data();
223+
};
224+
225+
setWrappedData(studentData);
226+
225227
let numStages = 0;
226-
if (data !== undefined) {
227-
if (data.timeHelpingStudents === undefined || data.timeHelpingStudents === 0){
228-
numStages = 6;
229-
setRole(0);
230-
} else if (data.favTaId === "" || data.favTaId === undefined){
231-
numStages = 4;
232-
setRole(2);
233-
} else{
234-
numStages = 7;
235-
setRole(1);
236-
}
228+
if (studentData.timeHelpingStudents === undefined || studentData.timeHelpingStudents === 0) {
229+
numStages = 6;
230+
setRole(0);
231+
} else if (studentData.favTaId === "" || studentData.favTaId === undefined) {
232+
numStages = 4;
233+
setRole(2);
234+
} else {
235+
numStages = 7;
236+
setRole(1);
237237
}
238-
239-
const userDoc = await usersRef.doc(wrappedData.favTaId).get();
238+
240239
let taNameExists = false;
241-
if (userDoc.exists) {
242-
setTaName(userDoc.data() as {
240+
if (userDocSnap.exists()) {
241+
setTaName(userDocSnap.data() as {
243242
firstName: string;
244243
lastName: string;
245244
});
246245
taNameExists = true;
247246
} else {
248-
// eslint-disable-next-line no-console
249-
console.log('No such document!');
247+
console.log('No such TA document!');
250248
}
251-
252-
if (studentData.favClass === "" ||
249+
250+
if (
251+
studentData.favClass === "" ||
253252
studentData.favDay === -1 ||
254253
studentData.favTaId === "" ||
255254
!taNameExists
256255
) {
257256
setDisplayFavs(false);
258257
numStages--;
259258
}
260-
259+
261260
setTotalStages(numStages);
262-
263-
const coursesRef = firebase.firestore().collection("courses");
264-
265-
const coursesDoc = await coursesRef.doc(wrappedData.favClass).get();
266-
if (coursesDoc.exists){
267-
setFavClass(coursesDoc.data() as {
261+
262+
const courseDocRef = doc(firestore, "courses", studentData.favClass);
263+
const coursesDocSnap = await getDoc(courseDocRef);
264+
265+
if (coursesDocSnap.exists()) {
266+
setFavClass(coursesDocSnap.data() as {
268267
code: string;
269-
})
270-
} else{
271-
// eslint-disable-next-line no-console
272-
console.log('No such document!');
273-
}
268+
});
269+
} else {
270+
console.log('No such course document!');
271+
}
274272
} else {
275-
// eslint-disable-next-line no-console
276-
console.log('No such document!');
273+
console.log('No such wrapped document!');
277274
}
278275
} catch (error) {
279-
// eslint-disable-next-line no-console
280276
console.error("Error fetching data: ", error);
277+
} finally {
278+
setLoading(false);
281279
}
282-
283280
};
284-
281+
285282
fetchData();
286283
}, [props.user, wrappedData.favClass, wrappedData.favTaId]);
284+
287285

288286
useEffect(() => {
289287
const timer = setTimeout(() => {

‎src/components/pages/LoginView.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, {useState} from 'react';
22
import { useHistory } from 'react-router-dom';
33

4-
import firebase, { app, firestore } from '../../firebase';
4+
import { auth, firestore } from '../../firebase';
5+
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
56
import { userUpload } from '../../firebasefunctions/user';
67

78
import QMILogo2020 from '../../media/QMILogo2020.svg';
@@ -30,25 +31,29 @@ const LoginView: React.FC = () => {
3031
const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
3132

3233
const googleAuth = () => {
33-
const authProvider = new firebase.auth.GoogleAuthProvider();
34+
const authProvider = new GoogleAuthProvider();
35+
3436
if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_IS_STAGING !== 'true') {
3537
authProvider.setCustomParameters({
3638
hd: 'cornell.edu',
3739
});
3840
}
41+
3942
authProvider.addScope('email');
4043
authProvider.addScope('profile');
41-
42-
return app
43-
.auth()
44-
.signInWithPopup(authProvider)
44+
45+
signInWithPopup(auth, authProvider)
4546
.then((response) => {
4647
const user = response.user;
4748
clearNotifications(user);
4849
userUpload(user, firestore);
4950
history.push('/');
51+
})
52+
.catch((error) => {
53+
console.error('Google Sign-In Error:', error);
5054
});
5155
};
56+
5257

5358
return (
5459
<div className="loginView">

‎src/firebase.ts

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import 'firebase/auth';
2-
import 'firebase/firestore';
3-
4-
import firebase from 'firebase/app';
1+
import { initializeApp } from 'firebase/app';
2+
import { getAuth } from 'firebase/auth';
3+
import { getFirestore, connectFirestoreEmulator, Timestamp } from 'firebase/firestore';
54
import { authState } from 'rxfire/auth';
65
import { collectionData } from 'rxfire/firestore';
76
import { filter } from 'rxjs/operators';
@@ -29,19 +28,17 @@ if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_IS_STAGING !=
2928
};
3029
}
3130

32-
const app = firebase.initializeApp(firebaseConfig);
31+
const app = initializeApp(firebaseConfig);
3332

33+
const firestore = getFirestore(app);
3434

35-
const firestore = firebase.firestore(app); // Initialize firestore
36-
// Use emulator for test mode
3735
if (process.env.NODE_ENV === 'test') {
38-
firestore.useEmulator('localhost', 8080);
36+
connectFirestoreEmulator(firestore, 'localhost', 8080);
3937
}
4038

41-
const auth = firebase.auth(app); // Initialize firebase auth
42-
const loggedIn$ = authState(auth).pipe(filter((user) => !!user)); // Observable only return when user is logged in.
39+
const auth = getAuth(app);
4340

44-
const Timestamp = firebase.firestore.Timestamp;
41+
const loggedIn$ = authState(auth).pipe(filter((user) => !!user));
4542

4643
export {
4744
app,
@@ -51,5 +48,3 @@ export {
5148
loggedIn$,
5249
Timestamp
5350
};
54-
55-
export default firebase;

‎src/firebasefunctions/user.ts

+49-37
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
import firebase from 'firebase/app';
1+
import { getAuth, signOut } from "firebase/auth";
2+
import { Firestore, runTransaction, doc, collection, getDoc, setDoc, updateDoc } from "firebase/firestore";
23

3-
4-
const auth = firebase.auth;
5-
6-
export const userUpload = (user: firebase.User | null, db: firebase.firestore.Firestore) => {
4+
type FireUser = {
5+
userId: string;
6+
email: string;
7+
firstName: string;
8+
lastName: string;
9+
photoUrl: string;
10+
courses: string[];
11+
roles: { [key: string]: boolean };
12+
phoneNumber: string;
13+
textNotifsEnabled: boolean;
14+
};
15+
export const userUpload = async (user: { uid: string; email: string | null; displayName: string | null; photoURL: string | null }, db: Firestore) => {
716
if (user != null) {
817
const uid = user.uid;
918
const email = user.email || undefined;
@@ -19,45 +28,48 @@ export const userUpload = (user: firebase.User | null, db: firebase.firestore.Fi
1928
lastName = displayName.substring(stringSplit + 1);
2029
}
2130
}
22-
if(uid && email && displayName && photoUrl && firstName && lastName) {
31+
if (uid && email && displayName && photoUrl && firstName && lastName) {
2332
const firstNameDefined = firstName || "";
24-
db.runTransaction(async (transaction) => {
25-
const userDocumentReference = db.collection('users').doc(uid);
26-
const userDocument = await transaction.get(userDocumentReference);
27-
if (userDocument.exists) {
28-
const partialUserDocument: Partial<FireUser> = {
29-
email,
30-
firstName: firstNameDefined,
31-
lastName,
32-
photoUrl,
33-
};
34-
transaction.update(userDocumentReference, partialUserDocument);
35-
} else {
36-
const fullUserDocument: Omit<FireUser, 'userId'> = {
37-
email,
38-
firstName: firstNameDefined,
39-
lastName,
40-
photoUrl,
41-
courses: [],
42-
roles: {},
43-
phoneNumber: "Dummy Number",
44-
textNotifsEnabled: false,
45-
};
46-
transaction.set(userDocumentReference, fullUserDocument);
47-
}
48-
// eslint-disable-next-line no-console
49-
}).catch(() => console.error('Unable to upload user.'));
33+
try {
34+
await runTransaction(db, async (transaction) => {
35+
const userDocumentReference = doc(db, 'users', uid);
36+
const userDocument = await transaction.get(userDocumentReference);
37+
if (userDocument.exists()) {
38+
const partialUserDocument: Partial<FireUser> = {
39+
email,
40+
firstName: firstNameDefined,
41+
lastName,
42+
photoUrl,
43+
};
44+
transaction.update(userDocumentReference, partialUserDocument);
45+
} else {
46+
const fullUserDocument: Omit<FireUser, 'userId'> = {
47+
email,
48+
firstName: firstNameDefined,
49+
lastName,
50+
photoUrl,
51+
courses: [],
52+
roles: {},
53+
phoneNumber: "Dummy Number",
54+
textNotifsEnabled: false,
55+
};
56+
transaction.set(userDocumentReference, fullUserDocument);
57+
}
58+
});
59+
} catch (error) {
60+
console.error('Unable to upload user:', error);
61+
}
5062
}
5163
}
5264
};
5365

5466
export const logOut = () => {
55-
auth()
56-
.signOut()
67+
const auth = getAuth();
68+
signOut(auth)
5769
.then(() => {
58-
// Success
70+
console.log("User signed out successfully.");
5971
})
60-
.catch(() => {
61-
// Fail
72+
.catch((error) => {
73+
console.error("Error signing out:", error);
6274
});
6375
};

0 commit comments

Comments
 (0)