import React, { useState, useEffect } from 'react'; import { api, ShareWith, ShareType, RoomShare, Room, Permission } 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 [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(() => { api.searchShareWith(search).then(result => { setSearchResults(result); }); }, [search]); useEffect(() => { api.getRecommendedShareWith().then(result => setRecommendations(result)); }, []); 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) { return (
    {[ ...options.users.filter(user => !sharedUserIds.includes(user.value.shareWith)), ...options.groups.filter(group => !sharedGroupIds.includes(group.value.shareWith)), ].map(option => { return (
  • addRoomShare(option.value.shareWith, option.value.shareType, option.label, permission)}> {option.label}{option.value.shareType === ShareType.Group ? ` (${t('bbb', 'Group')})` : ''}
  • ); })}
); } 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={() => setTimeout(() => setFocus(false), 100)} placeholder={t('bbb', 'Name, group, ...')} /> : {t('bbb', 'You are not allowed to change this option, because this room is shared with you.')}} {hasFocus && (searchResults ? renderSearchResults(searchResults) : (recommendations ? renderSearchResults(recommendations) : loading))}
); }; export default ShareWith;