From f137cad2a0800d24940a4c4e5accd4e59637bb2d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 24 Aug 2022 11:37:25 +1000 Subject: [PATCH] feat: add the BlockedList component in Settings --- stylesheets/_rtl.scss | 3 +- stylesheets/_session.scss | 13 -- ts/components/MemberListItem.tsx | 4 +- ts/components/basic/SessionToggle.tsx | 6 +- ts/components/settings/BlockedList.tsx | 162 ++++++++++++++++++ .../settings/SessionSettingListItem.tsx | 5 +- ts/components/settings/SessionSettings.tsx | 23 ++- .../section/CategoryConversations.tsx | 60 +------ ts/hooks/useSet.ts | 9 +- ts/state/selectors/conversations.ts | 8 - ts/util/blockedNumberController.ts | 23 +++ 11 files changed, 227 insertions(+), 89 deletions(-) create mode 100644 ts/components/settings/BlockedList.tsx diff --git a/stylesheets/_rtl.scss b/stylesheets/_rtl.scss index 63b400bc6..264d2fee0 100644 --- a/stylesheets/_rtl.scss +++ b/stylesheets/_rtl.scss @@ -6,8 +6,7 @@ body.rtl { .group-settings-item, .contact-selection-list, .group-member-list__selection, - .react-contexify__item, - .session-settings-list { + .react-contexify__item { direction: rtl; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 1e2ae815a..296690068 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -800,19 +800,6 @@ label { display: flex; flex-direction: column; - &-list { - overflow-y: auto; - overflow-x: hidden; - } - - &-view { - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: space-between; - overflow: hidden; - } - &__password-lock { display: flex; align-items: center; diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 46a5bf949..02bba9272 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -64,6 +64,7 @@ export const MemberListItem = (props: { // this bool is used to make a zombie appear with less opacity than a normal member isZombie?: boolean; inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker + disableBg?: boolean; isAdmin?: boolean; // if true, we add a small crown on top of their avatar onSelect?: (pubkey: string) => void; onUnselect?: (pubkey: string) => void; @@ -77,6 +78,7 @@ export const MemberListItem = (props: { onSelect, onUnselect, inMentions, + disableBg, dataTestId, } = props; @@ -89,7 +91,7 @@ export const MemberListItem = (props: { isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey); }} style={ - !inMentions + !inMentions && !disableBg ? { backgroundColor: 'var(--color-cell-background)', } diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 8b008427d..47f98ed96 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -22,7 +22,7 @@ const StyledKnob = styled.div<{ active: boolean }>` const StyledSessionToggle = styled.div<{ active: boolean }>` width: 51px; height: 25px; - border: 1.5px solid #e5e5ea; + border: 1px solid #e5e5ea; border-radius: 16px; position: relative; @@ -31,8 +31,8 @@ const StyledSessionToggle = styled.div<{ active: boolean }>` transition: var(--default-duration); background-color: ${props => - props.active ? 'var(--color-accent)' : 'var(--color-cell-background)'}; - border-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')}; + props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'}; + border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')}; `; type Props = { diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx new file mode 100644 index 000000000..9021f1554 --- /dev/null +++ b/ts/components/settings/BlockedList.tsx @@ -0,0 +1,162 @@ +import React, { useState } from 'react'; + +// tslint:disable-next-line: no-submodule-imports +import useUpdate from 'react-use/lib/useUpdate'; +import styled, { CSSProperties } from 'styled-components'; +import { useSet } from '../../hooks/useSet'; +import { ToastUtils } from '../../session/utils'; +import { BlockedNumberController } from '../../util'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SpacerLG } from '../basic/Text'; +import { SessionIconButton } from '../icon'; +import { MemberListItem } from '../MemberListItem'; +import { SettingsTitleAndDescription } from './SessionSettingListItem'; +// tslint:disable: use-simple-attributes + +const BlockedEntriesContainer = styled.div` + flex-shrink: 1; + overflow: auto; + min-height: 40px; + max-height: 100%; + background: var(--blocked-contact-list-bg); +`; + +const BlockedEntriesRoundedContainer = styled.div` + overflow: hidden; + border-radius: 16px; + padding: var(--margins-lg); + background: var(--blocked-contact-list-bg); +`; + +const BlockedContactsSection = styled.div` + display: flex; + flex-direction: column; + min-height: 0; +`; + +const BlockedContactListTitle = styled.div` + display: flex; + justify-content: space-between; + min-height: 45px; + align-items: center; +`; + +const BlockedContactListTitleButtons = styled.div` + display: flex; + align-items: center; +`; + +export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>` + font-size: var(--font-size-md); + padding: var(--margins-lg); + + background: var(--color-cell-background); + color: var(--color-text); + border-bottom: var(--border-session); + + cursor: ${props => (props.clickable ? 'pointer' : 'unset')}; +`; + +const BlockedEntries = (props: { + blockedNumbers: Array; + selectedIds: Array; + addToSelected: (id: string) => void; + removeFromSelected: (id: string) => void; +}) => { + const { addToSelected, blockedNumbers, removeFromSelected, selectedIds } = props; + return ( + + + {blockedNumbers.map(blockedEntry => { + return ( + + ); + })} + + + ); +}; + +const NoBlockedContacts = () => { + return
{window.i18n('noBlockedContacts')}
; +}; + +export const BlockedContactsList = () => { + const [expanded, setExpanded] = useState(false); + const { + uniqueValues: selectedIds, + addTo: addToSelected, + removeFrom: removeFromSelected, + empty: emptySelected, + } = useSet([]); + + const forceUpdate = useUpdate(); + + const hasAtLeastOneSelected = Boolean(selectedIds.length); + const blockedNumbers = BlockedNumberController.getBlockedNumbers(); + const noBlockedNumbers = !blockedNumbers.length; + + function toggleUnblockList() { + if (blockedNumbers.length) { + setExpanded(!expanded); + } + } + + async function unBlockThoseUsers() { + if (selectedIds.length) { + await BlockedNumberController.unblockAll(selectedIds); + emptySelected(); + ToastUtils.pushToastSuccess('unblocked', window.i18n('unblocked')); + forceUpdate(); + } + } + + return ( + + + + + {noBlockedNumbers ? ( + + ) : ( + + {hasAtLeastOneSelected && expanded ? ( + + ) : null} + + + + + )} + + + {expanded && !noBlockedNumbers ? ( + + ) : null} + + ); +}; diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index 11bc76060..bb4976bda 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -38,10 +38,9 @@ const StyledDescriptionContainer = styled(StyledDescription)` align-items: center; `; -const StyledSettingItem = styled.div` +export const StyledSettingItem = styled.div` font-size: var(--font-size-md); padding: var(--margins-lg); - margin-bottom: 20px; background: var(--color-cell-background); color: var(--color-text); @@ -62,7 +61,7 @@ const StyledSettingItemClickable = styled(StyledSettingItemInline)` } `; -const SettingsTitleAndDescription = (props: { +export const SettingsTitleAndDescription = (props: { title?: string; description?: string; childrenDescription?: React.ReactNode; diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index 9c87242f6..7cc054aba 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -172,6 +172,21 @@ const SettingInCategory = (props: { } }; +const StyledSettingsView = styled.div` + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; +`; + +const StyledSettingsList = styled.div` + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; +`; + export class SessionSettingsView extends React.Component { public settingsViewRef: React.RefObject; @@ -248,23 +263,23 @@ export class SessionSettingsView extends React.Component -
+ {shouldRenderPasswordLock ? ( ) : ( -
+ -
+ )} -
+ ); } diff --git a/ts/components/settings/section/CategoryConversations.tsx b/ts/components/settings/section/CategoryConversations.tsx index fe47ec700..530831226 100644 --- a/ts/components/settings/section/CategoryConversations.tsx +++ b/ts/components/settings/section/CategoryConversations.tsx @@ -1,18 +1,16 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; +// tslint:disable-next-line: no-submodule-imports import useUpdate from 'react-use/lib/useUpdate'; import { SettingsKey } from '../../../data/settings-key'; -import { useSet } from '../../../hooks/useSet'; import { ToastUtils } from '../../../session/utils'; import { toggleAudioAutoplay } from '../../../state/ducks/userConfig'; -import { getBlockedPubkeys } from '../../../state/selectors/conversations'; import { getAudioAutoplay } from '../../../state/selectors/userConfig'; -import { MemberListItem } from '../../MemberListItem'; -import { - SessionSettingsItemWrapper, - SessionToggleWithDescription, -} from '../SessionSettingListItem'; +import { BlockedContactsList } from '../BlockedList'; +// tslint:disable: use-simple-attributes + +import { SessionToggleWithDescription } from '../SessionSettingListItem'; async function toggleCommunitiesPruning() { try { @@ -83,60 +81,14 @@ const AudioMessageAutoPlaySetting = () => { ); }; -const NoBlockedContacts = () => { - return ( - - ); -}; - -const BlockedContactsList = (props: { blockedNumbers: Array }) => { - const { - uniqueValues: selectedIds, - addTo: addToSelected, - removeFrom: removeFromSelected, - } = useSet([]); - - const blockedEntries = props.blockedNumbers.map(blockedEntry => { - return ( - - ); - }); - - return ( - <> - - - ); -}; - export const CategoryConversations = () => { - const blockedNumbers = useSelector(getBlockedPubkeys); - return ( <> - {blockedNumbers?.length ? ( - - ) : ( - - )} + ); }; diff --git a/ts/hooks/useSet.ts b/ts/hooks/useSet.ts index 07f34ab34..2c361ee57 100644 --- a/ts/hooks/useSet.ts +++ b/ts/hooks/useSet.ts @@ -23,5 +23,12 @@ export function useSet(initialValues: Array = []) { [uniqueValues, setUniqueValues] ); - return { uniqueValues, addTo, removeFrom }; + const empty = useCallback(() => { + if (uniqueValues.length) { + setUniqueValues([]); + return; + } + }, [uniqueValues, setUniqueValues]); + + return { uniqueValues, addTo, removeFrom, empty }; } diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index b5cff9693..91148c766 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -51,14 +51,6 @@ export const getConversationsCount = createSelector(getConversationLookup, (stat return Object.values(state).length; }); -export const getBlockedPubkeys = createSelector( - // make sure to extends this selector to we are rerun on conversation changes - getConversationLookup, - - (_state): Array => { - return BlockedNumberController.getBlockedNumbers(); - } -); export const getSelectedConversationKey = createSelector( getConversations, diff --git a/ts/util/blockedNumberController.ts b/ts/util/blockedNumberController.ts index 530658fdc..e49a1424e 100644 --- a/ts/util/blockedNumberController.ts +++ b/ts/util/blockedNumberController.ts @@ -87,6 +87,29 @@ export class BlockedNumberController { } } + /** + * Unblock all thope users. + * This will only unblock the primary device of the user. + * + * @param user The user to unblock. + */ + public static async unblockAll(users: Array): Promise { + await this.load(); + let changes = false; + users.forEach(user => { + const toUnblock = PubKey.cast(user); + + if (this.blockedNumbers.has(toUnblock.key)) { + this.blockedNumbers.delete(toUnblock.key); + changes = true; + } + }); + + if (changes) { + await this.saveToDB(BLOCKED_NUMBERS_ID, this.blockedNumbers); + } + } + public static async setBlocked(user: string | PubKey, blocked: boolean): Promise { if (blocked) { return BlockedNumberController.block(user);