feat: added profile banner

2024-05-21 15:21:07 +02:00 · 2024-05-21 15:21:07 +02:00 · 6eedfb8f3f
commit 6eedfb8f3f
parent 008dc98c0e
7 changed files with 162 additions and 101 deletions
--- a/src/index.css
+++ b/src/index.css
@ -71,7 +71,7 @@ button {
 }

 .main {
-  padding: 64px 0;
+  padding: 60px 0;
 }

 .hide-mobile {
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@ -16,12 +16,11 @@ import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import styles from './style.module.scss'
 import { useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
-import { getRoboHashPicture, shorten } from '../../utils'
+import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
 import { truncate } from 'lodash'
 import { getProfileSettingsRoute } from '../../routes'
 import EditIcon from '@mui/icons-material/Edit';
 import LinkIcon from '@mui/icons-material/Link';
-import RestoreIcon from '@mui/icons-material/Restore';
 import { LoadingSpinner } from '../../components/LoadingSpinner'

 export const ProfilePage = () => {
@ -107,7 +106,13 @@ export const ProfilePage = () => {
    }
  }, [isUsersOwnProfile, metadataState, pubkey, metadataController])

-  const textElementWithCopyIcon = (text: string) => {
+  /**
+   * Rendering text with button which copies the provided text
+   * @param text to be visible
+   * @param sx props (MUI) to customize style
+   * @returns HTML rendered text
+   */
+  const textElementWithCopyIcon = (text: string, sx?: SxProps<Theme>, shortenOffset?: number) => {
    const onClick = () => {
      navigator.clipboard.writeText(text)

@ -118,19 +123,13 @@ export const ProfilePage = () => {
    }

    return (
-      <Typography variant="caption" className={styles.npubNipItem}>
-        <span onClick={onClick}>{shorten(text)}</span>
+      <Typography variant="caption" sx={sx} className={styles.npubNipItem}>
+        <span onClick={onClick}>{shorten(text, shortenOffset)}</span>
        <ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
      </Typography>
    )
  }

-  const titleElement = (text: string, sx?: SxProps<Theme>) => (
-    <Typography sx={sx} variant="h6" className={styles.bold}>
-      {text}
-    </Typography>
-  )
-
  /**
   * Handles the logic for Image URL.
   * If no picture in kind 0 found - use robohash avatar
@ -154,97 +153,94 @@ export const ProfilePage = () => {
      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
      {pubkey && (
        <Box className={styles.container}>
-          <Box className={styles.upper}>
-            <Box className={styles.left}>
-              <div
-                style={{
-                  borderWidth: '2px',
-                  borderStyle: pubkey ? 'solid' : 'none',
-                  borderColor: `#${pubkey?.substring(0, 6)}`
-                }}
-                className={styles.imageWrapper}
-              >
-                <img
-                  className={styles['image-placeholder']}
-                  src={getProfileImage(profileMetadata!)}
-                />
-              </div>
-            </Box>
-            <Box>
-              <Box className={styles.head}>
-                <Box className={styles.npubNip}>
-                  <Box
-                    sx={{
-                      display: 'flex'
-                    }}
-                  >
-                    {profileMetadata &&
-                      titleElement(
-                        truncate(
-                          profileMetadata.display_name ||
-                            profileMetadata.name ||
-                            pubkey,
-                          {
-                            length: 16
-                          }
-                        ),
-                        { marginRight: 1 }
-                      )}
-                  </Box>
-                  <Box>
-                    {textElementWithCopyIcon(pubkey || '')}
-                  </Box>
-                  <Box>
-                    {profileMetadata?.nip05 &&
-                      textElementWithCopyIcon(profileMetadata.nip05)}
-                  </Box>
-                </Box>
+          <Box className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}>
+            {profileMetadata && profileMetadata.banner ? <img src={profileMetadata.banner}/> : ''}
+          </Box>

-                <Box>
-                  {profileMetadata?.website && (
-                    <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
-                      <LinkIcon className={styles.captionIcon}/>
-                      {profileMetadata.website}
-                    </Typography>
-                  )}
-                </Box>
-
-                <Box>
-                  {nostrJoiningBlock && (
-                    <Typography
-                      variant='caption'
-                      sx={{
-                        color: theme.palette.getContrastText(
-                          theme.palette.background.paper
-                        )
-                      }}
-                      className={styles.captionWrapper}
-                      component={Link}
-                      to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
-                      target="_blank"
-                    >
-                      <RestoreIcon className={styles.captionIcon}/>
-                      On nostr since {nostrJoiningBlock.block.toLocaleString()}
-                    </Typography>
-                  )}
-                </Box>
+          <Box className={styles.belowBanner}>
+            <Box className={styles.upper}>
+              <Box className={styles.left}>
+                <div
+                  style={{
+                    borderWidth: '2px',
+                    borderStyle: pubkey ? 'solid' : 'none',
+                    borderColor: `#${pubkey?.substring(0, 6)}`
+                  }}
+                  className={styles.imageWrapper}
+                >
+                  <img
+                    className={styles['image-placeholder']}
+                    src={getProfileImage(profileMetadata!)}
+                  />
+                </div>
+              </Box>
+              <Box className={styles.middle}>
+                <Typography 
+                  component={Link}
+                  to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
+                  target="_blank" 
+                  sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }} 
+                  variant='caption'>
+                    {nostrJoiningBlock ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}` : 'On nostr since: unknown'}
+                </Typography>
+              </Box>
+              <Box className={styles.right}>
+                {isUsersOwnProfile && (
+                  <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
+                    <EditIcon/>
+                  </IconButton>
+                )}
              </Box>
            </Box>
-            <Box className={styles.right}>
-              {isUsersOwnProfile && (
-                <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
-                  <EditIcon/>
-                </IconButton>
+            <Box className={styles.head}>
+                  <Box className={styles.npubNip}>
+                    <Box
+                      sx={{
+                        display: 'flex'
+                      }}
+                    >
+                      {profileMetadata &&
+                        <Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}>
+                          {truncate(
+                            profileMetadata.display_name ||
+                              profileMetadata.name ||
+                              hexToNpub(pubkey),
+                            {
+                              length: 16
+                            }
+                          )}
+                        </Typography>}
+                    </Box>
+                    <Box>
+                      {textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
+                    </Box>
+                    <Box>
+                      {profileMetadata?.nip05 &&
+                        textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
+                    </Box>
+                    <Box>
+                      {profileMetadata?.lud16 &&
+                        textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
+                    </Box>
+                  </Box>
+
+                  <Box>
+                    {profileMetadata?.website && (
+                      <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+                        <Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{profileMetadata.website}</Typography>
+                        <LinkIcon className={styles.captionIcon}/>
+                      </Typography>
+                    )}
+                  </Box>
+                </Box>
+            <Box>
+              {profileMetadata?.about && (
+                <Typography mt={1} className={styles.about}>
+                  {profileMetadata.about}
+                </Typography>
              )}
            </Box>
          </Box>
-          <Box>
-            {profileMetadata?.about && (
-              <Typography mt={1} className={styles.about}>
-                {profileMetadata.about}
-              </Typography>
-            )}
-          </Box>
        </Box>
      )}
    </>
--- a/src/pages/profile/style.module.scss
+++ b/src/pages/profile/style.module.scss
@ -1,6 +1,26 @@
-.upper {
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 210px;
+
+  img {
+    width: 100%;
+  }
+
+  &.noImage {
+    background-color: rgb(219, 219, 219);
+  }
+}
+
+.belowBanner {
+  padding: 0 15px;
+}
+
+.upper {
+  width: 100%;
  display: flex;
-  padding-top: 15px;
 }

 .container {
@ -9,6 +29,11 @@

 .left {
  margin-right: 10px;
+  margin-top: -35px;
+}
+
+.middle {
+  flex: 1;
 }

 .right {
@ -35,7 +60,6 @@
 }

 .website {
-  // margin-top: 10px !important;
  margin-bottom: 15px 0 !important;
 }

@ -46,6 +70,6 @@

 .captionIcon {
  color: #15999b;
-  margin-right: 10px;
+  margin-left: 5px;
  font-size: 12px;
 }
--- a/src/pages/settings/profile/index.tsx
+++ b/src/pages/settings/profile/index.tsx
@ -1,5 +1,6 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import {
+  Box,
  IconButton,
  InputProps,
  List,
@ -283,6 +284,24 @@ export const ProfileSettingsPage = () => {
        >
          {profileMetadata && (
            <div>
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  display: 'flex',
+                  flexDirection: 'column'
+                }}
+              >
+                {profileMetadata.banner ? (
+                  <img
+                    className={styles.bannerImg}
+                    src={profileMetadata.banner}
+                    alt="Banner Image"
+                  />
+                ): <Box className={styles.noBanner}> No banner found </Box>}
+              </ListItem>
+
+              {editItem('banner', 'Banner URL', undefined, undefined)}
+
              <ListItem
                sx={{
                  marginTop: 1,
--- a/src/pages/settings/profile/style.module.scss
+++ b/src/pages/settings/profile/style.module.scss
@ -21,3 +21,17 @@
  margin-left: 10px;
  color: #34495e;
 }
+
+.noBanner {
+  width: 100%;
+  height: 180px;
+  background: rgb(219, 219, 219);
+  color: rgb(88, 88, 88);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bannerImg {
+  width: 100%;
+}
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@ -2,6 +2,7 @@ export interface ProfileMetadata {
  name?: string
  display_name?: string
  picture?: string
+  banner?: string
  about?: string
  website?: string
  nip05?: string
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@ -1,3 +1,10 @@
+/**
+ * Function will replace the middle of the string with 3 dots if length greater then
+ * offset value
+ * @param str string to shorten
+ * @param offset of how many chars to keep in the beginning and the end
+ * eg. 3 will keep first 3 chars and last 3 chars between the dots
+ */
 export const shorten = (str: string, offset = 9) => {
  // return original string if it is not long enough
  if (str.length < offset * 2 + 4) return str