feat: leave channel

src/common/component/LeaveChannel/LeaveConfirmModal.js

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+import useLeaveChannel from "../../hook/useLeaveChannel";
+import Modal from "../Modal";
+import StyledModal from "../styled/Modal";
+import Button from "../styled/Button";
+
+export default function LeaveConfirmModal({ id, closeModal, handleNextStep }) {
+  const navigateTo = useNavigate();
+  const { isOwner, leaving, leaveChannel, leaveSuccess } = useLeaveChannel(id);
+
+  useEffect(() => {
+    if (leaveSuccess) {
+      toast.success("Leave channel successfully!");
+      closeModal();
+      navigateTo("/chat");
+    }
+  }, [leaveSuccess]);
+  if (!id) return null;
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        className="compact"
+        title="Leave Channel"
+        description={
+          isOwner
+            ? "You have to transfer the ownership first"
+            : "Are you sure want to leave this channel?"
+        }
+        buttons={
+          <>
+            <Button
+              onClick={closeModal.bind(null, undefined)}
+              className="cancel"
+            >
+              Cancel
+            </Button>
+            {isOwner ? (
+              <Button onClick={handleNextStep} className="main">
+                Next
+              </Button>
+            ) : (
+              <Button onClick={leaveChannel} className="danger">
+                {leaving ? "Leaving" : `Leave`}
+              </Button>
+            )}
+          </>
+        }
+      ></StyledModal>
+    </Modal>
+  );
+}

src/common/component/LeaveChannel/TransferOwnerModal.js

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import Modal from "../Modal";
+import useLeaveChannel from "../../hook/useLeaveChannel";
+import StyledModal from "../styled/Modal";
+import Button from "../styled/Button";
+import Contact from "../Contact";
+const UserList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  max-height: 260px;
+  padding: 16px 0;
+  overflow-y: scroll;
+  .user {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    width: -webkit-fill-available;
+    &:hover,
+    &.selected {
+      background: rgba(116, 127, 141, 0.1);
+    }
+    > a {
+      width: 100%;
+    }
+  }
+`;
+export default function TransferOwnerModal({
+  id,
+  closeModal,
+  withLeave = true,
+}) {
+  const {
+    transferOwner,
+    otherMembers,
+    leaving,
+    leaveChannel,
+    leaveSuccess,
+    transferSuccess,
+    transfering,
+  } = useLeaveChannel(id);
+
+  const [uid, setUid] = useState(null);
+  const navigateTo = useNavigate();
+
+  const handleSelectUser = (uid) => {
+    setUid(uid);
+  };
+  const handleTransferAndLeave = async () => {
+    if (!uid) return;
+    await transferOwner(uid);
+    if (withLeave) {
+      await leaveChannel();
+    }
+  };
+
+  useEffect(() => {
+    if (transferSuccess && leaveSuccess) {
+      toast.success("Leave channel successfully!");
+      closeModal();
+      navigateTo("/chat");
+    }
+  }, [leaveSuccess, transferSuccess, withLeave]);
+
+  if (!id) return null;
+  const operating = leaving || transfering;
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        className="compact"
+        title="Transfer Ownership"
+        description={"This cannot be undone."}
+        buttons={
+          <>
+            <Button
+              onClick={closeModal.bind(null, undefined)}
+              className="cancel"
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={!uid}
+              onClick={handleTransferAndLeave}
+              className="danger"
+            >
+              {operating ? "Assigning" : `Assign and Leave`}
+            </Button>
+          </>
+        }
+      >
+        <UserList>
+          {otherMembers.map((id) => {
+            // const { uid } = u;
+            return (
+              <li
+                key={id}
+                className={`user ${uid == id ? "selected" : ""}`}
+                onClick={handleSelectUser.bind(null, id)}
+              >
+                <Contact uid={id} interactive={false} />
+              </li>
+            );
+          })}
+        </UserList>
+      </StyledModal>
+    </Modal>
+  );
+}

src/common/component/LeaveChannel/index.js

@@ -0,0 +1,23 @@
+import { useState } from "react";
+// import styled from "styled-components";
+import TransferOwnerModal from "./TransferOwnerModal";
+import LeaveConfirmModal from "./LeaveConfirmModal";
+export default function LeaveChannel({
+  id = null,
+  isOwner = false,
+  closeModal,
+}) {
+  const [transferOwner, setTransferOwner] = useState(isOwner);
+  const handleNextStep = () => {
+    setTransferOwner(true);
+  };
+  if (transferOwner)
+    return <TransferOwnerModal id={id} closeModal={closeModal} />;
+  return (
+    <LeaveConfirmModal
+      id={id}
+      closeModal={closeModal}
+      handleNextStep={handleNextStep}
+    />
+  );
+}

src/common/component/StyledSettingContainer.js

@@ -115,6 +115,7 @@ export default function StyledSettingContainer({
         {dangers.length ? (
           <ul className="items danger">
             {dangers.map((d) => {
+              if (!d) return null;
               const { title, handler } = d;
               return (
                 <li key={title} onClick={handler} className="item">

src/common/component/styled/Button.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 const StyledButton = styled.button`
   cursor: pointer;
-  padding: 10px 18px;
+  padding: 8px 14px;
   border: none;
   box-sizing: border-box;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

src/common/component/styled/Modal.js

@@ -6,6 +6,14 @@ const Styled = styled.div`
   border-radius: 8px;
   background-color: #fff;
   min-width: 440px;
+  &.compact {
+    padding: 16px;
+    min-width: 406px;
+    .title,
+    .desc {
+      text-align: left;
+    }
+  }
   .title {
     text-align: center;
     font-weight: 600;
@@ -19,10 +27,10 @@ const Styled = styled.div`
     font-size: 14px;
     line-height: 20px;
     color: #6b7280;
-    padding-bottom: 32px;
+    margin-bottom: 8px;
   }
   .btns {
-    padding-top: 32px;
+    padding-top: 16px;
     width: 100%;
     display: flex;
     justify-content: flex-end;

src/common/hook/useLeaveChannel.js

@@ -0,0 +1,39 @@
+// import React from 'react'
+import { useSelector } from "react-redux";
+import {
+  useUpdateChannelMutation,
+  useLazyLeaveChannelQuery,
+} from "../../app/services/channel";
+export default function useLeaveChannel(cid = null) {
+  const { channel, loginUid } = useSelector((store) => {
+    return { channel: store.channels.byId[cid], loginUid: store.authData.uid };
+  });
+  const [
+    update,
+    { isLoading: transfering, isSuccess: transferSuccess },
+  ] = useUpdateChannelMutation();
+  const [
+    leave,
+    { isLoading: leaving, isSuccess: leaveSuccess },
+  ] = useLazyLeaveChannelQuery();
+  const transferOwner = (uid = null) => {
+    if (!uid) return;
+    update({ id: cid, owner: uid });
+  };
+  const leaveChannel = () => {
+    if (!cid) return;
+    leave(cid);
+  };
+  const isOwner = loginUid == channel.owner;
+  const otherMembers = channel.members.filter((m) => m != loginUid);
+  return {
+    otherMembers,
+    transferOwner,
+    leaveChannel,
+    leaving,
+    leaveSuccess,
+    isOwner,
+    transfering,
+    transferSuccess,
+  };
+}