From 7af73898fa0669960d8792faca00161068af86f6 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 30 Nov 2023 15:18:00 +0100 Subject: [PATCH 01/11] style(account bar): add dropdown styling for switching account --- .../account-bar/account-bar.module.css | 27 ++++++++ src/components/account-bar/account-bar.tsx | 69 ++++++++++--------- 2 files changed, 65 insertions(+), 31 deletions(-) diff --git a/src/components/account-bar/account-bar.module.css b/src/components/account-bar/account-bar.module.css index cfc0b94a..e1e2cdaa 100644 --- a/src/components/account-bar/account-bar.module.css +++ b/src/components/account-bar/account-bar.module.css @@ -76,4 +76,31 @@ .selectedTextButton { color: var(--text-secondary); +} + +.dropdown { + float: left; + cursor: pointer; + position: relative; +} + +.dropChoices { + top: 16px; + position: absolute; + left: 0px; + border: 1px solid var(--border-text); + background-color: var(--background); + color: var(--text-primary) ; + white-space: nowrap; + line-height: normal; +} + +.dropdownChoice { + cursor: pointer; + padding: 2px 3px 1px 3px; + display: block; +} + +.dropdownChoice:hover { + background-color: var(--background-primary); } \ No newline at end of file diff --git a/src/components/account-bar/account-bar.tsx b/src/components/account-bar/account-bar.tsx index a8d6cd05..c9a71206 100644 --- a/src/components/account-bar/account-bar.tsx +++ b/src/components/account-bar/account-bar.tsx @@ -22,9 +22,11 @@ const AccountBar = () => { const searchBarRef = useRef(null); const searchBarButtonRef = useRef(null); - const [accountSelectVisible, setAccountSelectVisible] = useState(false); - const toggleAccountSelectVisible = () => setAccountSelectVisible(!accountSelectVisible); - const accountSelectRef = useRef(null); + const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false); + const toggleAccountDropdown = () => setIsAccountDropdownOpen(!isAccountDropdownOpen); + const accountDropdownRef = useRef(null); + const accountDropdownChoicesRef = useRef(null); + const accountDropdownClass = isAccountDropdownOpen ? styles.visible : styles.hidden; const accountSelectButtonRef = useRef(null); let submitLink; @@ -41,17 +43,21 @@ const AccountBar = () => { const isOutsideSearchBar = searchBarRef.current && !searchBarRef.current.contains(target) && searchBarButtonRef.current && !searchBarButtonRef.current.contains(target); - const isOutsideAccountSelect = - accountSelectRef.current && !accountSelectRef.current.contains(target) && accountSelectButtonRef.current && !accountSelectButtonRef.current.contains(target); + const isOutsideAccountDropdown = + accountDropdownRef.current && !accountDropdownRef.current.contains(target) && + accountDropdownChoicesRef.current && !accountDropdownChoicesRef.current.contains(target); + const isOutsideAccountSelectButton = + accountSelectButtonRef.current && !accountSelectButtonRef.current.contains(target); + + if (isOutsideAccountSelectButton && isOutsideAccountDropdown) { + setIsAccountDropdownOpen(false); + } if (isOutsideSearchBar) { setSearchVisible(false); } - if (isOutsideAccountSelect) { - setAccountSelectVisible(false); - } }, - [searchBarRef, accountSelectRef], + [searchBarRef, accountSelectButtonRef, accountDropdownRef, accountDropdownChoicesRef], ); useEffect(() => { @@ -61,39 +67,40 @@ const AccountBar = () => { }; }, [handleClickOutside]); - const accountsOptions = accounts.map((account) => ( - + const accountDropdownOptions = accounts.map((account, index) => ( + setActiveAccount(account?.name)} + > + {`u/${account?.author?.shortAddress?.toLowerCase()?.substring(0, 8) || ''}`} + )); - accountsOptions[accountsOptions.length] = ( - + ); - const onAccountSelectChange = async (e: React.ChangeEvent) => { - if (e.target.value === 'createAccount') { - createAccount(); - } else { - setActiveAccount(e.target.value); - } - }; - return (
e.preventDefault()}> {account?.author?.shortAddress} - - {accountSelectVisible && ( - - - + + {isAccountDropdownOpen && ( +
+
+ {accountDropdownOptions} +
+
)} From c4edf32ca1eb730c74de35f73bf256fe9cca90d7 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 30 Nov 2023 15:50:09 +0100 Subject: [PATCH 02/11] feat(settings): add functionality to username setting --- src/components/account-bar/account-bar.tsx | 26 +++---- src/components/post/post.tsx | 15 ++-- src/components/reply/reply.tsx | 8 +-- src/components/sidebar/sidebar.tsx | 6 +- src/views/settings/settings.tsx | 81 ++++++++++++++++------ 5 files changed, 79 insertions(+), 57 deletions(-) diff --git a/src/components/account-bar/account-bar.tsx b/src/components/account-bar/account-bar.tsx index c9a71206..f5712252 100644 --- a/src/components/account-bar/account-bar.tsx +++ b/src/components/account-bar/account-bar.tsx @@ -44,11 +44,12 @@ const AccountBar = () => { const isOutsideSearchBar = searchBarRef.current && !searchBarRef.current.contains(target) && searchBarButtonRef.current && !searchBarButtonRef.current.contains(target); const isOutsideAccountDropdown = - accountDropdownRef.current && !accountDropdownRef.current.contains(target) && - accountDropdownChoicesRef.current && !accountDropdownChoicesRef.current.contains(target); - const isOutsideAccountSelectButton = - accountSelectButtonRef.current && !accountSelectButtonRef.current.contains(target); - + accountDropdownRef.current && + !accountDropdownRef.current.contains(target) && + accountDropdownChoicesRef.current && + !accountDropdownChoicesRef.current.contains(target); + const isOutsideAccountSelectButton = accountSelectButtonRef.current && !accountSelectButtonRef.current.contains(target); + if (isOutsideAccountSelectButton && isOutsideAccountDropdown) { setIsAccountDropdownOpen(false); } @@ -68,24 +69,15 @@ const AccountBar = () => { }, [handleClickOutside]); const accountDropdownOptions = accounts.map((account, index) => ( - setActiveAccount(account?.name)} - > + setActiveAccount(account?.name)}> {`u/${account?.author?.shortAddress?.toLowerCase()?.substring(0, 8) || ''}`} )); accountDropdownOptions.push( - createAccount()} - > + createAccount()}> +create - + , ); return ( diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 9a8cce3e..ae2583de 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -126,10 +126,11 @@ const Post = ({ post, index }: PostProps) => { {(isAuthorOwner || isAuthorAdmin || isAuthorModerator) && ( - {' '}[ - - {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')} - + {' '} + [ + + {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')} + ] )} @@ -140,11 +141,9 @@ const Post = ({ post, index }: PostProps) => { {' '} p/{subplebbit?.shortAddress || subplebbitAddress} - - )} - {pinned && ( - - {t('announcement')} + )} + {pinned && - {t('announcement')}}

diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx index 9a0adaba..566141c6 100644 --- a/src/components/reply/reply.tsx +++ b/src/components/reply/reply.tsx @@ -71,7 +71,7 @@ const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, l const Reply = ({ reply, depth }: ReplyProps) => { const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, removed, spoiler, subplebbitAddress, timestamp, upvoteCount } = reply || {}; - const subplebbit = useSubplebbit({subplebbitAddress}); + const subplebbit = useSubplebbit({ subplebbitAddress }); const isAuthorOwner = subplebbit?.roles?.[reply.author.address]?.role === 'owner'; const isAuthorAdmin = subplebbit?.roles?.[reply.author.address]?.role === 'admin'; @@ -159,9 +159,9 @@ const Reply = ({ reply, depth }: ReplyProps) => { {(isAuthorOwner || isAuthorAdmin || isAuthorModerator) && ( [ - - {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')} - + + {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')} + ]{' '} )} diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index a975197a..729f7447 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -48,11 +48,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role const rulesList = (
Rules -
    - {rules?.map((rule, index) => ( -
  1. {rule}
    2. - ))} -
+
    {rules?.map((rule, index) =>
  1. {rule}
    2. )}
); diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx index 53fc2e0a..6e6f176d 100644 --- a/src/views/settings/settings.tsx +++ b/src/views/settings/settings.tsx @@ -44,21 +44,53 @@ const ThemeSettings = () => { }; const ProfileSettings = () => { + const account = useAccount(); + const [username, setUsername] = useState(''); + const [saved, setSaved] = useState(false); + const cryptoAddressInfo = () => { - alert('A crypto address is more readable than a long string of characters. It can be used to send you crypto directly.\n\nChange your account address to an ENS name you own: in your ENS name page on ens.domains, click on "Records", "Edit Records", "Add record", add "plebbit-author-address" as record name, add your full address as value (you can copy it from your account data) and save.'); + alert( + 'A crypto address is more readable than a long string of characters. It can be used to send you crypto directly.\n\nChange your account address to an ENS name you own: in your ENS name page on ens.domains, click on "Records", "Edit Records", "Add record", add "plebbit-author-address" as record name, add your full address as value (you can copy it from your account data) and save.', + ); + }; + + useEffect(() => { + if (saved) { + setTimeout(() => { + setSaved(false); + }, 2000); + } + }, [saved]); + + const saveUsername = async () => { + try { + await setAccount({ ...account, author: { ...account?.author, displayName: username } }); + } catch (error) { + if (error instanceof Error) { + alert(error.message); + console.log(error); + } else { + console.error('An unknown error occurred:', error); + } + } + setSaved(true); }; return ( username
- - - Saved. + setUsername(e.target.value)} /> + + {saved && Saved.}
crypto address - +
@@ -68,7 +100,7 @@ const ProfileSettings = () => {
); -} +}; const AccountSettings = () => { const account = useAccount(); @@ -76,7 +108,7 @@ const AccountSettings = () => { const [text, setText] = useState(''); const [switchToLastAccount, setSwitchToLastAccount] = useState(false); - const accountJson = useMemo(() => stringify({account: {...account, plebbit: undefined, karma: undefined, unreadNotificationCount: undefined}}), [account]) + const accountJson = useMemo(() => stringify({ account: { ...account, plebbit: undefined, karma: undefined, unreadNotificationCount: undefined } }), [account]); const accountsOptions = accounts.map((account) => (