Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Wired up user cover and profile image actions

Browse source 
refs. https://github.com/TryGhost/Team/issues/3351
This commit is contained in:
Peter Zimon 2023-06-05 11:45:07 +02:00
parent c86859d0a7
commit 2fe6ccbc22
1 changed files with 36 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
View file

@ -13,7 +13,7 @@ import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupCon
import TextField from '../../../../admin-x-ds/global/TextField';
import Toggle from '../../../../admin-x-ds/global/Toggle';
import useRoles from '../../../../hooks/useRoles';
import {ServicesContext} from '../../../providers/ServiceProvider';
import {FileService, ServicesContext} from '../../../providers/ServiceProvider';
import {User} from '../../../../types/api';
import {isOwnerUser} from '../../../../utils/helpers';
@ -420,6 +420,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
const {api} = useContext(ServicesContext);
const [userData, setUserData] = useState(user);
const [saveState, setSaveState] = useState('');
const {fileService} = useContext(ServicesContext) as {fileService: FileService};
const confirmSuspend = (_user: User) => {
let warningText = 'This user will no longer be able to log in but their posts will be kept.';
@ -446,6 +447,34 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
});
};
const handleImageUpload = async (image: string, file: File) => {
try {
const imageUrl = await fileService.uploadImage(file);
switch (image) {
case 'cover_image':
setUserData?.({...user, cover_image: imageUrl});
break;
case 'profile_image':
setUserData?.({...user, profile_image: imageUrl});
break;
}
} catch (err: any) {
// handle error
}
};
const handleImageDelete = (image: string) => {
switch (image) {
case 'cover_image':
setUserData?.({...user, cover_image: ''});
break;
case 'profile_image':
setUserData?.({...user, profile_image: ''});
break;
}
};
let suspendUserLabel = user?.status === 'inactive' ? 'Un-suspend user' : 'Suspend user';
const menuItems = [
@ -514,10 +543,10 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
imageClassName='absolute inset-0 bg-cover group'
imageURL={userData.cover_image || ''}
onDelete={() => {
alert('deleted');
handleImageDelete('cover_image');
}}
onUpload={() => {
alert('uploaded');
onUpload={(file: File) => {
handleImageUpload('cover_image', file);
}}
>Upload cover image</ImageUpload>
<div className="absolute bottom-12 right-12">
@ -534,10 +563,10 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
imageURL={userData.profile_image}
width='80px'
onDelete={() => {
alert('deleted');
handleImageDelete('profile_image');
}}
onUpload={() => {
alert('uploaded');
onUpload={(file: File) => {
handleImageUpload('profile_image', file);
}}
>
<Icon color='white' name='user-add' size='lg' />