header changes

rayzhou-bit · Apr 19, 2024 · e0a1879 · e0a1879
1 parent bf6ae3b
commit e0a1879
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 125 deletions.
diff --git a/src/components/Canvas/hooks.js b/src/components/Canvas/hooks.js
@@ -16,8 +16,8 @@ export const CANVAS_STATES = {
 };
 
 export const CANVAS_DIMENSIONS = {
-  width: 100 * GRID.size,
-  height: 70 * GRID.size,
+  width: 150 * GRID.size,
+  height: 100 * GRID.size,
 };
 
 export const useCanvasHooks = () => {

diff --git a/src/components/HeaderMenu/Title.jsx b/src/components/HeaderMenu/Title.jsx
@@ -6,27 +6,21 @@ import './index.scss';
 
 const Title = () => {
   const {
-    inputClassName,
-    readOnly,
     titleRef,
     titleValue,
     changeTitleValue,
-    beginTitleEdit,
     endTitleEdit,
     handleTitleKeyPress,
   } = useTitleHooks();
 
   return (
     <div className='usermenu-title'>
       <input
-        className={inputClassName}
         maxLength='300'
         onBlur={endTitleEdit}
         onChange={e => changeTitleValue(e.target.value)}
-        onDoubleClick={beginTitleEdit}
         onDragOver={e => e.preventDefault()}
         onKeyDown={handleTitleKeyPress}
-        readOnly={readOnly}
         ref={titleRef}
         required
         size=''

diff --git a/src/components/HeaderMenu/VersionControls.jsx b/src/components/HeaderMenu/VersionControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useVersionControlHooks } from './hooks';
+import { useVersionControlHooks, SAVE_BUTTON } from './hooks';
 
 import './index.scss';
 import UndoDisabledIcon from '../../assets/icons/undo-disabled.svg';
@@ -20,21 +20,21 @@ const VersionControls = () => {
     redo,
     disableRedo,
     save,
-    saveStatus,
+    saveButtonStatus,
   } = useVersionControlHooks();
 
   let saveIcon = SaveEnabledIcon;
-  switch (saveStatus) {
-    case 'disabled':
+  switch (saveButtonStatus) {
+    case SAVE_BUTTON.disabled:
       saveIcon = SaveDisabledIcon;
       break;
-    case 'pending':
+    case SAVE_BUTTON.pending:
       saveIcon = SavePendingIcon;
       break;
-    case 'saving':
+    case SAVE_BUTTON.saving:
       saveIcon = SaveSpinnerIcon;
       break;
-    case 'completed':
+    case SAVE_BUTTON.completed:
       saveIcon = SaveCompletedIcon;
       break;
   }
@@ -57,13 +57,13 @@ const VersionControls = () => {
       </button>
       <button
         className='save'
-        disabled={saveStatus === 'disabled'}
+        disabled={saveButtonStatus === SAVE_BUTTON.disabled}
         onClick={save}
       >
         <span>Save</span>
         <img
           alt='save'
-          className={saveStatus === 'saving' ? 'spin' : null}
+          className={saveButtonStatus === SAVE_BUTTON.saving ? 'spin' : null}
           draggable='false'
           src={saveIcon}
         />

diff --git a/src/components/HeaderMenu/hooks.js b/src/components/HeaderMenu/hooks.js
@@ -9,15 +9,23 @@ import * as api from  '../../data/api/database';
 import * as authApi from '../../data/api/auth';
 import * as userApi from '../../data/api/user';
 
+import { NETWORK_STATUS } from '../../data/redux/session/constants';
 import { POPUP_KEYS } from '../Popup/PopupKey';
 
+export const SAVE_BUTTON = {
+  enabled: 'enabled',
+  disabled: 'disabled',
+  pending: 'pending',
+  saving: 'saving',
+  completed: 'completed',
+};
+
 export const useTitleHooks = () => {
   const dispatch = useDispatch();
 
   const id = useSelector(state => state.session.activeCampaignId);
   const value = useSelector(state => state.project.present.title || '');
   const [ titleValue, setTitleValue ] = useState('');
-  const [ isEditing, setIsEditing ] = useState(false);
   const titleRef = useRef();
 
   // Initialize title value
@@ -26,38 +34,21 @@ export const useTitleHooks = () => {
   }, [setTitleValue, value]);
 
   const endEdit = () => {
-    if (isEditing) {
-      document.getSelection().removeAllRanges();
-      if (titleValue !== value) {
-        dispatch(actions.project.updateProjectTitle({ title: titleValue }));
-        dispatch(actions.session.updateProjectTitle({ id, title: titleValue }));
-      }
-      setIsEditing(false);
+    document.getSelection().removeAllRanges();
+    if (titleValue !== value) {
+      dispatch(actions.project.updateProjectTitle({ title: titleValue }));
+      dispatch(actions.session.updateProjectTitle({ id, title: titleValue }));
     }
   };
 
   return {
     titleRef,
     titleValue,
-    readOnly: !isEditing,
-    inputClassName: isEditing ? 'editing' : '',
     changeTitleValue: (newValue) => setTitleValue(newValue),
-    beginTitleEdit: () => {
-      if (!isEditing) {
-        setIsEditing(true);
-        titleRef.current.focus();
-        titleRef.current.setSelectionRange(
-          titleRef.current.value.length,
-          titleRef.current.value.length,
-        );
-      }
-    },
     endTitleEdit: endEdit,
     handleTitleKeyPress: (event) => {
-      if (isEditing) {
-        if(event.key === 'Enter' || event.key === 'Tab') {
-          endEdit();
-        }
+      if(event.key === 'Enter' || event.key === 'Tab') {
+        endEdit();
       }
     },
   };
@@ -66,22 +57,22 @@ export const useTitleHooks = () => {
 export const useVersionControlHooks = () => {
   const dispatch = useDispatch();
   const userId = useSelector(state => state.user.userId || '');
-  const status = useSelector(state => state.session.status || 'idle');
+  const status = useSelector(state => state.session.status || NETWORK_STATUS.idle);
   const activeProject = useSelector(state => state.session.activeCampaignId || '');
   const projectData = useSelector(state => state.project.present || {});
   const pastProjectData = useSelector(state => state.project.past || {});
   const futureProjectData = useSelector(state => state.project.future || {});
   const [ saveCompleted, setSaveCompleted ] = useState(false);
 
-  let saveStatus = 'enabled';
-  if (status === 'saving') {
-    saveStatus = 'saving';
-  } else if (!((status === 'idle') && userId && activeProject)) {
-    saveStatus = 'disabled';
-  // } else if (pending) {
-  //   saveStatus = 'pending';  // (there are multiple changes since last save; currently not implemented)
+  let saveButtonStatus = SAVE_BUTTON.enabled;
+  if (status === NETWORK_STATUS.saving) {
+    saveButtonStatus = SAVE_BUTTON.saving;
+  } else if (!((status === NETWORK_STATUS.idle) && userId && activeProject)) {
+    saveButtonStatus = SAVE_BUTTON.disabled;
+  // } else if (pending??) {
+  //   saveButtonStatus = SAVE_BUTTON.pending;  // (there are multiple changes since last save; currently not implemented)
   } else if (saveCompleted) {
-    saveStatus = 'completed';
+    saveButtonStatus = SAVE_BUTTON.completed;
   }
 
   return {
@@ -94,7 +85,7 @@ export const useVersionControlHooks = () => {
         setSaveCompleted(true);
       }));
     },
-    saveStatus,
+    saveButtonStatus,
   };
 };
 
@@ -226,7 +217,7 @@ export const useDisplayNameHooks = () => {
   const endDisplayNameInputEdit = () => {
     document.getSelection().removeAllRanges();
     if (displayNameInput !== username && displayNameInput !== '') {
-      dispatch(actions.user.updUserDisplayname({ displayName: displayNameInput }));
+      dispatch(actions.user.updateUserDisplayName({ displayName: displayNameInput }));
       dispatch(userApi.updateDisplayName(displayNameInput));
     }
     setShowDisplayInput(false);
@@ -353,7 +344,7 @@ export const useSignInHooks = () => {
     signInViaEmail,
     signInViaGoogle: (event) => {
       event.preventDefault();
-      dispatch(authApi.googleSignIn());
+      dispatch(authApi.googleSignIn({}));
     },
     authError,
     clearAuthError: () => setAuthError(''),
@@ -363,39 +354,42 @@ export const useSignInHooks = () => {
 export const useSignUpHooks = () => {
   const dispatch = useDispatch();
   const userId = useSelector(state => state.user.userId || '');
-  const [ showSignUpDropdown, setShowSignUpDropdown ] = useState(false);
   const [ email, setEmail ] = useState('');
-  const [ emailError, setEmailError ] = useState('');
   const [ password, setPassword ] = useState('');
+  const [ emailError, setEmailError ] = useState('');
   const [ passwordError, setPasswordError ] = useState('');
   const [ authError, setAuthError ] = useState('');
-  const signUpBtnRef = useRef();
-  const signUpDropdownRef = useRef();
 
   // Initialize sign up form
   useEffect(() => {
     if (!!userId) {
-      setShowSignUpDropdown(false);
       setEmail('');
-      setPassword("");
+      setPassword('');
     }
   }, [userId]);
 
-  useOutsideClick(
-    [signUpBtnRef, signUpDropdownRef],
-    showSignUpDropdown,
-    () => setShowSignUpDropdown(false),
-  );
-
-  const signUpViaEmail = (event) => {
-    event.preventDefault();
+  const clearErrors = () => {
     setEmailError('');
     setPasswordError('');
     setAuthError('');
+  };
+
+  const signUpViaEmail = (event) => {
+    event.preventDefault();
+    clearErrors();
     dispatch(authApi.emailSignUp({
       email,
       password,
-      callback: () => setAuthError(''),
+      callback: () => clearErrors(),
+      errorCallback: errorCode => setAuthError(convertToMsg({ errorCode })),
+    }));
+  };
+
+  const signUpViaGoogle = (event) => {
+    event.preventDefault();
+    clearErrors();
+    dispatch(authApi.googleSignIn({
+      callback: () => dispatch(actions.session.resetPopup()),
       errorCallback: errorCode => setAuthError(convertToMsg({ errorCode })),
     }));
   };
@@ -432,10 +426,7 @@ export const useSignUpHooks = () => {
     },
 
     signUpViaEmail,
-    signUpViaGoogle: (event) => {
-      event.preventDefault();
-      dispatch(authApi.googleSignIn());
-    },
+    signUpViaGoogle,
     authError,
     clearAuthError: () => setAuthError(''),
   };

diff --git a/src/data/api/auth.js b/src/data/api/auth.js
@@ -33,7 +33,7 @@ export const authListener = ({
 }) => {
   onAuthStateChanged(auth, user => {
     if (user) {   // User is signed in
-      console.log('[authListener] signed in', user.uid);
+      console.log('[authListener] signed in user:', user.uid);
       const userData = {
         userId: user.uid,
         displayName: user.displayName,
@@ -86,21 +86,35 @@ export const emailSignIn = ({
 
 export const emailSignOut = () => {
   signOut(auth)
-    .then(response => console.log('[emailSignout] success', response))
+    .then(response => console.log('[emailSignout] success'))
     .catch(error => console.log('[emailSignOut] error', error));
 };
 
-export const googleSignIn = () => dispatch => {
+export const googleSignIn = ({
+  callback,
+  errorCallback,
+}) => dispatch => {
+  console.log(callback)
   signInWithPopup(auth, googleProvider)
-    .then(response => console.log('[googleSignIn] success', response))
-    .catch(error => console.log('[googleSignIn] error', error));
+    .then(response => {
+      console.log('[googleSignIn] success');
+      if (callback) {
+        callback();
+      }
+    })
+    .catch(error => {
+      console.log('[googleSignIn] error', error);
+      if (errorCallback) {
+        errorCallback(error.code);
+      }
+    });
 };
 
-export const facebookSignIn = () => dispatch => {
-  signInWithPopup(auth, facebookProvider)
-    .then(response => console.log('[facebookSignIn] success', response))
-    .catch(error => console.log('[facebookSignIn] error', error));
-};
+// export const facebookSignIn = () => dispatch => {
+//   signInWithPopup(auth, facebookProvider)
+//     .then(response => console.log('[facebookSignIn] success'))
+//     .catch(error => console.log('[facebookSignIn] error', error));
+// };
 
 export const emailSignUp = ({
   email,