#355 fix Avatar uploader jank

.config/headers.config.js

@@ -20,7 +20,11 @@ module.exports = (env) => {
             'style-src': ["'self'", "'unsafe-inline'", 'fonts.googleapis.com'],
             'img-src': ["'self'", '*.wp.com', 'blob:', 'data:'],
             'frame-src': ['https://js.stripe.com'],
+            'child-src': false,
+            'prefetch-src': false,
+            'worker-src': false,
           },
+          xssProtection: '1; mode=block;',
         }),
       },
     ]

CHANGELOG.md

@@ -11,6 +11,7 @@ For detailed rules of this file, see  [Changelog Rules](#changelog-rules)
 ### ✨ Added
 * A new page to assist with editing QMS locale files has been added. - [#370][]
 * A general purpose JSON object editor has been implemented. this should come in handy at some point! - [#370][]
+* User avatars are now customizable through our new Avatar uploader! - [#332][], [#375][]
 
 ### ⚡ Changed
 * Error readout for unknown API Errors has been improved. - [#328][]
@@ -40,9 +41,11 @@ For detailed rules of this file, see  [Changelog Rules](#changelog-rules)
 [#328]: https://github.com/FuelRats/fuelrats.com/pull/328
 [#329]: https://github.com/FuelRats/fuelrats.com/pull/329
 [#330]: https://github.com/FuelRats/fuelrats.com/pull/330
+[#332]: https://github.com/FuelRats/fuelrats.com/pull/332
 [#333]: https://github.com/FuelRats/fuelrats.com/pull/333
 [#370]: https://github.com/FuelRats/fuelrats.com/pull/370
 [#373]: https://github.com/FuelRats/fuelrats.com/pull/373
+[#375]: https://github.com/FuelRats/fuelrats.com/pull/375
 [Unreleased]: https://github.com/FuelRats/fuelrats.com/compare/v2.13.0...HEAD
 
 

src/components/MessageBox/MessageBox.js

@@ -31,7 +31,7 @@ function MessageBox (props) {
   }
 
   return (
-    <div className={[styles.message, styles[type], 'message', className]}>
+    <div className={[styles.message, styles[type], className]}>
       <FontAwesomeIcon
         className={styles.icon}
         icon={icon}

src/components/MessageBox/MessageBox.module.scss

@@ -2,6 +2,7 @@
 
 .message {
   --message-color: #{$red};
+  composes: message from global;
 
   position: relative;
 
@@ -12,26 +13,35 @@
   border: 1px solid var(--message-color);
 
   background: rgba($red, 0.15);
+}
+
+.error {
+  --message-color: #{$red};
+  composes: error from global;
+
+  background: rgba($red, 0.15);
+}
+
+.success {
+  --message-color: #{$green};
+  composes: success from global;
+
+  background: rgba($green, 0.15);
+}
+
+.info {
+  --message-color: #{$blue};
+  composes: info from global;
+
+  background: rgba($blue, 0.15);
+}
+
+.warn {
+  --message-color: #{$yellow};
+
+  composes: warn from global;
 
-  &.error {
-    --message-color: #{$red};
-    background: rgba($red, 0.15);
-  }
-
-  &.success {
-    --message-color: #{$green};
-    background: rgba($green, 0.15);
-  }
-
-  &.info {
-    --message-color: #{$blue};
-    background: rgba($blue, 0.15);
-  }
-
-  &.warn {
-    --message-color: #{$yellow};
-    background: rgba($yellow, 0.15);
-  }
+  background: rgba($yellow, 0.15);
 }
 
 .icon {

src/components/ProfileHeader/ProfileHeader.js

@@ -49,7 +49,7 @@ function ProfileHeader () {
             <UnverifiedUserBanner />
           )
         }
-        <ProfileUserAvatar />
+        <ProfileUserAvatar canEdit />
         <div className="profile-basic-info">
           <div className="rat-name">
             {displayRat?.attributes?.name ?? email.split('@')[0]}

src/components/ProfileUserAvatar/ProfileUserAvatar.js

@@ -1,15 +1,22 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Image from 'next/image'
-import { useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { useState, useCallback, useMemo } from 'react'
 
 import useSelectorWithProps from '~/hooks/useSelectorWithProps'
-import { selectAvatarByUserId, withCurrentUserId } from '~/store/selectors'
+import { selectAvatarUrlByUserId, withCurrentUserId } from '~/store/selectors'
 
 import UploadAvatarModal from '../UploadAvatarModal'
 import styles from './ProfileUserAvatar.module.scss'
 
-function ProfileUserAvatar () {
-  const userAvatar = useSelectorWithProps({ size: 170 }, withCurrentUserId(selectAvatarByUserId))
+const faIconLgSize = 100
+const faIconMdSize = 64
+
+function ProfileUserAvatar ({
+  canEdit,
+  size = 170,
+}) {
+  const userAvatarUrl = useSelectorWithProps({ size }, withCurrentUserId(selectAvatarUrlByUserId))
 
   const [showUploadAvatar, setShowUploadAvatar] = useState(false)
 
@@ -19,29 +26,61 @@ function ProfileUserAvatar () {
     })
   }, [])
 
+  const handleAvatarModalClose = useCallback(() => {
+    return setShowUploadAvatar(false)
+  }, [])
+
+  const sizeMeta = useMemo(() => {
+    let icon = undefined
+
+    if (size >= faIconLgSize) {
+      icon = '3x'
+    } else if (size >= faIconMdSize) {
+      icon = '2x'
+    }
+
+    return {
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+      },
+      icon,
+    }
+  }, [size])
+
   return (
     <>
       <div className={styles.userAvatar}>
-        <div className="avatar xl">
+        <div className="avatar" style={sizeMeta.style}>
           <Image
             unoptimized
             alt="User's avatar"
-            height={170}
-            src={userAvatar}
-            width={170} />
-        </div>
-        <div className={styles.userAvatarEdit}>
-          <div className={[styles.userAvatarEdit, styles.editBack]} />
-          <button className={[styles.userAvatarEdit, styles.editFace]} type="button" onClick={handleToggleUploadAvatar}>
-            <FontAwesomeIcon icon="upload" size="3x" />
-          </button>
+            height={size}
+            src={userAvatarUrl}
+            width={size} />
+          {
+            canEdit && (
+              <button
+                aria-label="Edit your avatar"
+                className={[styles.userAvatarEdit, styles.editFace]}
+                type="button"
+                onClick={handleToggleUploadAvatar}>
+                <FontAwesomeIcon icon="upload" size={sizeMeta.icon} />
+              </button>
+            )
+          }
         </div>
       </div>
       <UploadAvatarModal
         isOpen={showUploadAvatar}
-        onClose={handleToggleUploadAvatar} />
+        onClose={handleAvatarModalClose} />
     </>
   )
 }
 
+ProfileUserAvatar.propTypes = {
+  canEdit: PropTypes.bool,
+  size: PropTypes.number,
+}
+
 export default ProfileUserAvatar

src/components/ProfileUserAvatar/ProfileUserAvatar.module.scss

@@ -1,18 +1,30 @@
 @import '../../scss/colors';
 
 .userAvatar {
-  position: relative;
-
   grid-area: avatar;
+
+  :global(.avatar) {
+    position: relative;
+  }
 }
 
 .userAvatarEdit {
+  --background-color: #{rgba($black, 0.7)};
+  --background-color-hover: var(--background-color);
+  backdrop-filter: blur(5px);
+
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
 
-  width: 170px;
-  height: 170px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  border: 0.2rem solid $red;
+  border-radius: 50%;
 
   opacity: 0;
   transition: opacity 0.2s;
@@ -24,28 +36,6 @@
   }
 }
 
-.editBack {
-  border: 0.2rem solid $red;
-  border-radius: 50%;
-
-  background: $white;
-  opacity: 0.8;
-}
-
-.editFace {
-  margin: 0;
-  padding: 0;
-
-  border: none;
-
-  color: $black;
-  background: none;
-}
-
 .editFace svg {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-
-  color: $black;
+  color: $red;
 }

src/components/Slider/Slider.js

@@ -0,0 +1,74 @@
+/***
+ * The renderSliderHandle function within the following component is based on the default handle prop value in .
+ * https://github.com/react-component/slider/blob/master/src/common/createSlider.tsx#L32
+ *
+ * It is licensed under the MIT License below.
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import RCSlider, { Handle } from 'rc-slider'
+import { useCallback } from 'react'
+
+
+
+
+
+export default function Slider (props) {
+  const {
+    Component = RCSlider,
+    handleIcon: iconId,
+    iconProps = {},
+    ...restProps
+  } = props
+
+  const renderSliderHandle = useCallback((sliderProps) => {
+    const { index, ...restSliderProps } = sliderProps
+    delete restSliderProps.dragging
+    if (restSliderProps.value === null) {
+      return null
+    }
+
+    return (
+      <Handle key={index} {...restSliderProps}>
+        {
+          iconId && (
+            <FontAwesomeIcon
+              fixedWidth
+              className="rc-slider-handle-icon"
+              {...iconProps}
+              icon={iconId} />
+          )
+        }
+      </Handle>
+    )
+  }, [iconProps, iconId])
+
+  return (
+    <Component
+      handle={renderSliderHandle}
+      {...restProps} />
+  )
+}

src/components/Slider/index.js

@@ -0,0 +1 @@
+export { default } from './Slider'

src/components/Switch/Switch.module.scss

@@ -75,6 +75,8 @@
 
     border-radius: 50%;
 
+    color: $black;
+
     will-change: transform;
 
     background: $red;

src/components/UploadAvatarModal/UploadAvatarMessageBox.js

@@ -19,23 +19,27 @@ function getErrorText (error) {
 }
 
 function UploadAvatarMessageBox (props) {
-  const { result } = props
+  const { result, className } = props
 
   return result.success
     ? (
-      <MessageBox type="success">
-        {'Avatar Updated!'}
+      <MessageBox className={className} title="Success!" type="success">
+        {'You avatar has been updated!'}
+        <br />
+        {'This window will now automatically close...'}
       </MessageBox>
     )
     : (
       <ApiErrorBox
+        className={className}
         error={result.error}
         renderError={getErrorText} />
     )
 }
 
 UploadAvatarMessageBox.propTypes = {
-  result: PropTypes.object,
+  className: PropTypes.string,
+  result: PropTypes.object.isRequired,
 }
 
 export default UploadAvatarMessageBox