Profile v2 (#108)

* tour and settings bugs * add clear-field msg event * add display rooms scroll * update scroll ui Co-authored-by: Eric Willits <[email protected]>
AdventurePizza · Aug 9, 2021 · 2c51b67 · 2c51b67
1 parent 6a14258
commit 2c51b67
Show file tree

Hide file tree

Showing 12 changed files with 349 additions and 94 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -266,13 +266,16 @@ function App() {
 		weather: { temp: '', condition: '' },
 		soundType: '',
 		currentRoom: 'default',
-		email: ''
+		email: '',
+		location: ''
 	});
+
+
 	const userCursorRef = React.createRef<HTMLDivElement>();
 
 	const [weather, setWeather] = useState<IWeather>({
 		temp: '',
-		condition: ''
+		condition: '',
 	});
 
 	// YouTube function to keep track of timestamps
@@ -310,6 +313,7 @@ function App() {
 
 	useEffect(() => {
 		setHasFetchedRoomPinnedItems(false);
+		console.log(roomId);
 	}, [roomId]);
 
 	const playEmoji = useCallback((dict: IEmojiDict) => {
@@ -364,14 +368,8 @@ function App() {
 		if(accountId && isLoggedIn){
 			firebaseContext.getUser(accountId)
 				.then((res: any) => {
-					if(res.data.email){
-						setShowLoginModal(false);
-					}
-					if(userProfile.email){
-						setUserProfile((profile) => ({ ...profile, name: res.data.screenName, avatar: res.data.avatar }));
-					} else {
-						setUserProfile((profile) => ({ ...profile, name: res.data.screenName, avatar: res.data.avatar, email: res.data.email }));
-					}
+					setShowLoginModal(false);
+					setUserProfile((profile) => ({ ...profile, name: res.data.screenName, avatar: res.data.avatar, email: res.data.email }));
 					socket.emit('event', {
 						key: 'avatar',
 						value: res.data.avatar
@@ -463,7 +461,7 @@ function App() {
 		audio.current.play();
 	}, []);
 
-	const onClickPanelItem = (key: string) => {
+	const onClickPanelItem = (key: string | undefined) => {
 		switch (key) {
 			case 'sound':
 			case 'emoji':
@@ -495,6 +493,8 @@ function App() {
 					selectedPanelItem === key ? undefined : (key as PanelItemEnum)
 				);
 				break;
+			case undefined :
+				setSelectedPanelItem(undefined);
 		}
 	};
 
@@ -1430,7 +1430,6 @@ function App() {
 							[message.id]: { ...profiles[message.id], weather: message.value }
 						}));
 					}
-
 					break;
 				case 'settings-url':
 					if (message.value && message.isSelf) {
@@ -1457,6 +1456,36 @@ function App() {
 				case 'move-item':
 					handleMoveItemMessage(message);
 					break;
+				case 'clear-field':
+					if (message.field === 'music'){
+						if(message.isSelf){
+							setUserProfile((profile) => ({
+								...profile,
+								musicMetadata: undefined
+							}));
+						} else {
+							setUserProfiles((profiles) => ({
+								...profiles,
+								[message.id]: {
+									...profiles[message.id],
+									musicMetadata: undefined
+								}
+							}));
+						}
+					} else if (message.field === 'weather'){
+						if (message.toSelf) {
+							setUserProfile((profile) => ({
+								...profile,
+								weather: { temp: '', condition: ''}
+							}));
+						} else {
+							setUserProfiles((profiles) => ({
+								...profiles,
+								[message.id]: { ...profiles[message.id], weather: { temp: '', condition: ''} }
+							}));
+						}
+					}
+					break;
 				case 'horse':
 					if (message.value) {
 						addHorse(message.value, message.horseKey);
@@ -1684,12 +1713,17 @@ function App() {
 						.catch(err => console.log(err));
 					}
 				} else if (type === "email") {
-					setUserProfile((profile) => ({ ...profile, email: settingsValue }))
+					if(accountId){
+						firebaseContext.updateEmail(accountId, settingsValue)
+						.then(() => setUserProfile((profile) => ({ ...profile, email: settingsValue })))
+						.catch(err => console.log(err));
+					}
 				}
 				break;
 			case 'weather':
 				const location = args[0] as string;
-
+				setUserProfile((profile) => ({ ...profile, location: location }));
+
 				socket.emit('event', {
 					key: 'weather',
 					value: location
@@ -1735,6 +1769,26 @@ function App() {
 					value: videoId
 				});
 				break;
+			case 'clear-field':
+				const field = args[0] as string;
+
+				if(field === "weather"){
+					setUserProfile((profile) => ({ ...profile, location: "" }))
+				}
+
+				if(field === "email"){
+					if(accountId){
+						firebaseContext.updateEmail(accountId, "")
+						.then(res => setUserProfile((profile) => ({ ...profile, email: "" })))
+						.catch(err => console.log(err));
+					}
+				} else {
+					socket.emit('event', {
+						key: 'clear-field',
+						field,
+					});
+				}
+				break;
 			case 'horse':
 				const horseId = args[0] as string;
 				socket.emit('event', {
@@ -2782,13 +2836,19 @@ function App() {
 			<MetamaskSection />
 
 			<Route path="/settings">
-				<SettingsPanel
+				<SettingsPanel 
+					setStep={setStep}
 					onSubmitUrl={(url) => actionHandler('settings', 'url', url)}
 					onChangeName={(name) => actionHandler('settings', 'name', name)}
 					onChangeAvatar={(avatar) => actionHandler('settings', 'avatar', avatar)}
 					onSendLocation={(location) => actionHandler('weather', location)}
+					onSubmitEmail={(email) => actionHandler('settings', 'email', email)}
 					currentAvatar={userProfile.avatar}
-					setStep={setStep}
+					username={userProfile.name}
+					email={userProfile.email}
+					myLocation={userProfile.location}
+					music={userProfile.musicMetadata}
+					clearField={(field) => actionHandler('clear-field', field)}
 				/>
 			</Route>
 
@@ -2872,7 +2932,6 @@ function App() {
 					beginTour={setShowTour}
 					showModal={setShowLoginModal}
 					isFirstVisit={isFirstVisit}
-					userEmail={userProfile.email}
 					setUserEmail={(email) => actionHandler('settings', 'email', email)}
 				/>
 			 ) : null }

diff --git a/client/src/components/Login.css b/client/src/components/Login.css
@@ -161,4 +161,10 @@
     left: 50%;
     transform: translateX(150%);
     display: none;
+}
+
+.login-modal-close-modal {
+	position: absolute;
+	top: 5px;
+	left: 5px;
 }
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useContext } from 'react';
 import { AuthContext } from '../contexts/AuthProvider';
-import { FirebaseContext } from '../contexts/FirebaseContext';
 import "./Login.css";
 import check from "../assets/check.png";
 import maticInput from '../assets/matic-input.png';
@@ -9,6 +8,8 @@ import { MetamaskButton } from './MetamaskButton';
 
 import IconButton from '@material-ui/core/IconButton';
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
+import CloseIcon from '@material-ui/icons/Close';
+
 
 const Checkmark = () => {
     return(
@@ -22,30 +23,39 @@ interface ILoginProps {
     beginTour: (val: boolean) => void;
     showModal: (val: boolean) => void;
     isFirstVisit: boolean;
-    userEmail: string;
     setUserEmail: (email: string) => void;
 }
 
-export const Login = ({ beginTour, showModal, isFirstVisit, userEmail, setUserEmail } : ILoginProps) => {
+export const Login = ({ beginTour, showModal, isFirstVisit, setUserEmail } : ILoginProps) => {
+    const [email, setEmail] = useState("");
     const [showEmail, setShowEmail] = useState(false);
     const [showMetamask, setShowMetamask] = useState(false);
-    const { isLoggedIn, accountId } = useContext(AuthContext);
-    const firebaseContext = useContext(FirebaseContext);
+    const { isLoggedIn } = useContext(AuthContext);
 
     const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setUserEmail(e.target.value);
+        setEmail(e.target.value);
+    }
+
+    const onModalClose = () => {
+        showModal(false);
+        beginTour(true);
     }
 
     return (
         <div className="login-modal-container">
+            <div className="login-modal-close-modal">
+                <IconButton onClick={onModalClose}>
+                    <CloseIcon />
+                </IconButton>
+            </div>
             <div>
                 <h1 className="login-header-primary">Actually,</h1>
                 <h2 className="login-header-secondary">join in.</h2>
             </div>
             {!showEmail ? (
                 <div className="login-button-container">
                     <div className="login-button">
-                        {userEmail ?  <Checkmark /> : <button className="login-button-email" onClick={() => setShowEmail(true)}>Email</button>}
+                        {email ?  <Checkmark /> : <button className="login-button-email" onClick={() => setShowEmail(true)}>Email</button>}
                         <p>Lets get you tricked out</p>
                     </div>
                     <div className="login-button">
@@ -61,18 +71,14 @@ export const Login = ({ beginTour, showModal, isFirstVisit, userEmail, setUserEm
             ) : null}
             {showEmail ? (
                 <div className="login-email-input-container">
-                    <input type="email" placeholder="Email" onChange={e => onEmailChange(e)} value={userEmail} className="login-email-input"/>
+                    <input type="email" placeholder="Email" onChange={e => onEmailChange(e)} value={email} className="login-email-input"/>
                     <button className="login-button-email" onClick={() => setShowEmail(false)}>Trick me out!</button>
                 </div>
             ) : null}
-            {userEmail && isLoggedIn && !showEmail ? (
+            { isLoggedIn && !showEmail ? (
                 <button className="login-button-email" 
                     onClick={() => {
-                        if(accountId){
-                            firebaseContext.updateEmail(accountId, userEmail)
-                                .then(() => console.log("user email updated"))
-                                .catch(err => console.log(err));
-                        }
+                        setUserEmail(email);
                         showModal(false);
                         if(isFirstVisit){
                             beginTour(true);
@@ -121,8 +127,8 @@ const MetamaskTutorial = ({setShowMetamask}: IMetamaskTutorialProps) => {
                         <p>Step 6.  Set up password, store key phrase somewhere secure.</p>
                         <p className="metamask-step-7">Step 7.  Switch to matic mainnet or add matic.</p>
                         <p className="metamask-step-details">Network name:  polygon, customer rpc: https://rpc-mainnet.matic.network, chain id: 137, symbol: MATIC, block explorer url: polygonscan.com</p>
-                        <img src={maticInput} alt="matic inputs" id="step7hover" width={200}/>
-                        <img src={networks} alt="matic netowrks" id="detailshover" width={200}/>
+                        <img src={maticInput} alt="matic inputs" id="detailshover" width={200}/>
+                        <img src={networks} alt="matic netowrks" id="step7hover" width={200}/>
                     </>
                 )}
             </div>

diff --git a/client/src/components/Panel.tsx b/client/src/components/Panel.tsx
@@ -36,7 +36,7 @@ import musicPlayerIcon from '../assets/navbar/musicPlayerIcon.png';
 interface IPanelProps {
 	isOpen: boolean;
 	onClose: () => void;
-	onClick: (key: string) => void;
+	onClick: (key: string | undefined) => void;
 	selectedItem?: PanelItemEnum;
 	avatar?: string;
 }
@@ -89,8 +89,13 @@ export const Panel = ({
 					className="first-step"
 				>
 					<IconButton onClick={() => {
-						onClick('settings');
-						history.push('/settings');
+						if(selectedItem === "settings"){
+							onClick(undefined);
+							history.goBack();
+						} else {
+							onClick('settings');
+							history.push('/settings');
+						}
 					}}>
 						<div>
 							<img src={avatar} alt="user avatar" className="panel-avatar" />

diff --git a/client/src/components/SettingsPanel.css b/client/src/components/SettingsPanel.css
@@ -18,12 +18,11 @@
 .settings-input-container {
     display: flex;
     flex-wrap: wrap;
-    width: 70%;
-    justify-content: space-between;
+    width: calc(100% - 300px);
 }
 
 .settings-input-container > div {
-    margin-bottom: 20px;
+    margin: 0 20px 20px 0;
 }
 
 .settings-avatar {
@@ -34,8 +33,8 @@
 }
 
 .settings-avatar-container {
-    height: 125px;
-    width: 100px;
+    height: 100px;
+    width: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -72,6 +71,8 @@
 
 .settings-rooms {
     display: flex;
+    width: 100%;
+    overflow-x: scroll;
 }
 
 .settings-room-container {
@@ -94,4 +95,8 @@
 .settings-image-container {
     height: 150px;
     width: 200px;
+}
+
+.settings-header {
+    margin: 0 0 10px 0;
 }