refactor: manage members
This commit is contained in:
Tristan Yang
+13
-113
@@ -1,119 +1,18 @@
|
|||||||
import { useEffect, FC } from "react";
|
import { useEffect, FC } from "react";
|
||||||
import styled from "styled-components";
|
|
||||||
import Tippy from "@tippyjs/react";
|
import Tippy from "@tippyjs/react";
|
||||||
import { hideAll } from "tippy.js";
|
import { hideAll } from "tippy.js";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
import { useUpdateUserMutation } from "../../app/services/user";
|
import { useUpdateUserMutation } from "../../../app/services/user";
|
||||||
import User from "./User";
|
import User from "../User";
|
||||||
import StyledMenu from "./styled/Menu";
|
import StyledWrapper from "./styled";
|
||||||
import InviteLink from "./InviteLink";
|
import StyledMenu from "../styled/Menu";
|
||||||
import moreIcon from "../../assets/icons/more.svg?url";
|
import InviteLink from "../InviteLink";
|
||||||
import IconOwner from "../../assets/icons/owner.svg";
|
import moreIcon from "../../../assets/icons/more.svg?url";
|
||||||
import IconArrowDown from "../../assets/icons/arrow.down.mini.svg";
|
import IconOwner from "../../../assets/icons/owner.svg";
|
||||||
import IconCheck from "../../assets/icons/check.sign.svg";
|
import IconArrowDown from "../../../assets/icons/arrow.down.mini.svg";
|
||||||
import useUserOperation from "../hook/useUserOperation";
|
import IconCheck from "../../../assets/icons/check.sign.svg";
|
||||||
import { useAppSelector } from "../../app/store";
|
import useUserOperation from "../../hook/useUserOperation";
|
||||||
|
import { useAppSelector } from "../../../app/store";
|
||||||
const StyledWrapper = styled.section`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
.intro {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
color: #616161;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.members {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
width: 512px;
|
|
||||||
margin-bottom: 176px;
|
|
||||||
.member {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: var(--br);
|
|
||||||
&:hover {
|
|
||||||
background: #f9fafb;
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
.info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.name {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #52525b;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.email {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
color: #52525b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 28px;
|
|
||||||
.role {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
text-align: right;
|
|
||||||
color: #616161;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
> .icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
/* override */
|
|
||||||
.menu {
|
|
||||||
min-width: 120px;
|
|
||||||
.item .icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.opts {
|
|
||||||
position: relative;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
.dots {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.menu {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
cid?: number;
|
cid?: number;
|
||||||
@@ -148,9 +47,9 @@ const ManageMembers: FC<Props> = ({ cid }) => {
|
|||||||
if (ignore) return;
|
if (ignore) return;
|
||||||
updateUser({ id: uid, is_admin: isAdmin });
|
updateUser({ id: uid, is_admin: isAdmin });
|
||||||
};
|
};
|
||||||
|
|
||||||
const channel = cid ? channels.byId[cid] : null;
|
const channel = cid ? channels.byId[cid] : null;
|
||||||
const uids = channel ? (channel.is_public ? users.ids : channel.members) : users.ids;
|
const uids = channel ? (channel.is_public ? users.ids : channel.members) : users.ids;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper>
|
<StyledWrapper>
|
||||||
{loginUser?.is_admin && <InviteLink />}
|
{loginUser?.is_admin && <InviteLink />}
|
||||||
@@ -160,6 +59,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
|
|||||||
Disabling your account means you can recover it at any time after taking this action.
|
Disabling your account means you can recover it at any time after taking this action.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul className="members">
|
<ul className="members">
|
||||||
{uids.map((uid) => {
|
{uids.map((uid) => {
|
||||||
const currUser = users.byId[uid];
|
const currUser = users.byId[uid];
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
const StyledWrapper = styled.section`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
.intro {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.members {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
width: 512px;
|
||||||
|
margin-bottom: 176px;
|
||||||
|
.member {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: var(--br);
|
||||||
|
&:hover {
|
||||||
|
background: #f9fafb;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #52525b;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.email {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #52525b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 28px;
|
||||||
|
.role {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: right;
|
||||||
|
color: #616161;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
> .icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* override */
|
||||||
|
.menu {
|
||||||
|
min-width: 120px;
|
||||||
|
.item .icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.opts {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
.dots {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
export default StyledWrapper;
|
||||||
Reference in New Issue
Block a user