martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling membership modal

Browse Source
This commit is contained in:
Roland Osborne 2022-05-24 22:02:25 -07:00
parent a53a3d4847
commit 03bcaa03b0
3 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'
import { Avatar } from 'avatar/Avatar';
import { MemberItemWrapper } from './MemberItem.styled';
import { MemberItemWrapper, CheckIcon, UncheckIcon } from './MemberItem.styled';
import { useMemberItem } from './useMemberItem.hook';
import { Button } from 'antd';
@ -13,9 +13,11 @@ export function MemberItem({ readonly, item }) {
return <></>
}
if (item.member) {
return <Button type="primary" size="small" danger onClick={() => actions.clearMembership()}>Remove</Button>
return <Button type="link" icon={<CheckIcon />} loading={state.busy}
onClick={() => actions.clearMembership()} />
}
return <Button type="primary" size="small" onClick={() => actions.setMembership()}>Add</Button>
return <Button type="link" icon={<UncheckIcon />} loading={state.busy}
onClick={() => actions.setMembership()} />
}
return (

8
net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
View File

@ -1,4 +1,5 @@
import styled from 'styled-components';
import { CheckSquareOutlined, BorderOutlined } from '@ant-design/icons';
export const MemberItemWrapper = styled.div`
display: flex;
@ -37,3 +38,10 @@ export const MemberItemWrapper = styled.div`
}
`;
export const CheckIcon = styled(CheckSquareOutlined)`
font-size: 20px;
`;
export const UncheckIcon = styled(BorderOutlined)`
font-size: 20px;
`;

25
net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js
View File

@ -7,7 +7,8 @@ export function useMemberItem({ item }) {
const [state, setState] = useState({
imageUrl: null,
name: null,
handle: null
handle: null,
busy: false,
});
const card = useContext(CardContext);
@ -27,10 +28,28 @@ export function useMemberItem({ item }) {
const actions = {
setMembership: async () => {
conversation.actions.setChannelCard(item.card.id);
if (!state.busy) {
updateState({ busy: true });
try {
conversation.actions.setChannelCard(item.card.id);
}
catch(err) {
window.alert(err);
}
updateState({ busy: false });
}
},
clearMembership: async () => {
conversation.actions.clearChannelCard(item.card.id);
if (!state.busy) {
updateState({ busy: true });
try {
conversation.actions.clearChannelCard(item.card.id);
}
catch(err) {
window.alert(err);
}
updateState({ busy: false });
}
},
};