import React, { useState, useEffect } from 'react'; import { api, ShareWith, ShareType, RoomShare, Room, Permission, ShareWithOption } from './Api'; import './ShareWith.scss'; type Props = { room: Room; permission: Permission.User | Permission.Moderator; shares: RoomShare[] | undefined; setShares: (shares: RoomShare[]) => void; } const ShareWith: React.FC = ({ room, permission, shares: allShares, setShares }) => { const [search, setSearch] = useState(''); const [hasFocus, setFocus] = useState(false); const [showSearchResults, setShowSearchResults] = useState(false); const [recommendations, setRecommendations] = useState(); const [searchResults, setSearchResults] = useState(); const isOwner = room.userId === OC.currentUser; const shares = (allShares && permission === Permission.Moderator) ? allShares.filter(share => share.permission !== Permission.User) : allShares; const sharedUserIds = shares ? shares.filter(share => share.shareType === ShareType.User).map(share => share.shareWith) : []; const sharedGroupIds = shares ? shares.filter(share => share.shareType === ShareType.Group).map(share => share.shareWith) : []; useEffect(() => { setSearchResults(undefined); const searchQuery = search; api.searchShareWith(searchQuery).then(result => { if (searchQuery === search) { setSearchResults(result); } }); }, [search]); useEffect(() => { api.getRecommendedShareWith().then(result => setRecommendations(result)); }, []); useEffect(() => { setTimeout(() => setShowSearchResults(hasFocus), 100); }, [hasFocus]); async function addRoomShare(shareWith: string, shareType: number, displayName: string, permission: Permission) { const roomShare = await api.createRoomShare(room.id, shareType, shareWith, permission); roomShare.shareWithDisplayName = displayName; console.log('addRoomShare', allShares, roomShare); const newShares = allShares ? [...allShares] : []; const index = newShares.findIndex(share => share.id === roomShare.id); if (index > -1) { newShares[index] = roomShare; } else { newShares.push(roomShare); } console.log('newroomshares', newShares); setShares(newShares); } async function deleteRoomShare(id: number) { console.log('deleteRoomShare', id); await api.deleteRoomShare(id); setShares((allShares ? [...allShares] : []).filter(share => share.id !== id)); } async function toggleAdminShare(share: RoomShare) { const newPermission = share.permission === Permission.Admin ? Permission.Moderator : Permission.Admin; return addRoomShare(share.shareWith, share.shareType, share.shareWithDisplayName || share.shareWith, newPermission); } function renderSearchResults(options: ShareWith|undefined) { const results = options ? [ ...options.users.filter(user => !sharedUserIds.includes(user.value.shareWith)), ...options.groups.filter(group => !sharedGroupIds.includes(group.value.shareWith)), ] : []; const renderOption = (option: ShareWithOption) => { return (
  • addRoomShare(option.value.shareWith, option.value.shareType, option.label, permission)}> {option.label}{option.value.shareType === ShareType.Group ? ` (${t('bbb', 'Group')})` : ''}
  • ); }; return (
      {!options ?
    • {t('bbb', 'Searching')}
    • : ( (results.length === 0 && search) ?
    • {t('bbb', 'No matches')}
    • : results.map(renderOption) )}
    ); } function renderShares(shares: RoomShare[]) { const currentUser = OC.getCurrentUser(); const ownShare = { id: -1, roomId: room.id, shareType: ShareType.User, shareWith: currentUser.uid, shareWithDisplayName: currentUser.displayName, permission: Permission.Admin, }; return ( ); } const loading = <> {t('bbb', 'Loading')}; return ( <> {shares ? renderShares(shares) : loading}
    {isOwner ? setSearch(ev.currentTarget.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} placeholder={t('bbb', 'Name, group, ...')} /> : {t('bbb', 'You are not allowed to change this option, because this room is shared with you.')}} {showSearchResults && renderSearchResults((search && searchResults) ? searchResults : ((recommendations && !search) ? recommendations : undefined))}
    ); }; export default ShareWith;