ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lots updates

Browse Source
This commit is contained in:
zerosoul
2022-01-30 21:30:12 +08:00
parent e18c7323a6
commit ceb02d834f
38 changed files with 1943 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/home/CurrentUser.js
+24 -5
View File
@@ -1,15 +1,20 @@
// import React from 'react';
import { useEffect } from "react";
import styled from "styled-components";
import { AiOutlineCaretDown, AiOutlineSound } from "react-icons/ai";
import { MdOutlineKeyboardVoice } from "react-icons/md";
import { useSelector } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearAuthData } from "../../app/slices/auth.data";
import { useLazyLogoutQuery } from "../../app/services/auth";
const StyledWrapper = styled.div`
position: absolute;
bottom: 0;
left: 0;
padding: 16px 12px;
width: -webkit-fill-available;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
@@ -37,14 +42,28 @@ const StyledWrapper = styled.div`
}
}
`;
export default function CurrentUser({ collaspe = false }) {
export default function CurrentUser({ expand = true }) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [logout, { isSuccess }] = useLazyLogoutQuery();
const { user } = useSelector((store) => store.authData);
const handleLogout = () => {
logout();
};
useEffect(() => {
if (isSuccess) {
dispatch(clearAuthData());
navigate("/login");
}
}, [isSuccess]);
if (!user) return null;
const { name } = user;
return (
<StyledWrapper>
<div className="profile" title={name}>
<img
onDoubleClick={handleLogout}
title={name}
src={`https://avatars.dicebear.com/api/adventurer-neutral/${name}.svg`}
alt="user avatar"
@@ -52,7 +71,7 @@ export default function CurrentUser({ collaspe = false }) {
/>
<AiOutlineCaretDown className="toggle" width={20} color="#C4C4C4" />
</div>
{!collaspe && (
{expand && (
<div className="settings">
<AiOutlineSound className="icon" size={15} color="#1C1C1E" />
<MdOutlineKeyboardVoice className="icon" size={15} color="#1C1C1E" />
src/routes/home/ServerDropList.js
+10 -8
View File
@@ -5,12 +5,13 @@ import { HiChevronDoubleLeft } from "react-icons/hi";
const StyledWrapper = styled.div`
height: 56px;
padding: 0 16px;
padding-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
&.collaspe {
padding-right: 5px;
&.expand {
padding-right: 16px;
}
.server {
display: flex;
@@ -44,26 +45,27 @@ const StyledWrapper = styled.div`
display: flex;
width: 15px;
height: 15px;
transform: rotate(180deg);
.icon {
width: 100%;
height: 100%;
}
&.collaspe {
transform: rotate(180deg);
&.expand {
transform: rotate(0deg);
}
}
`;
export default function ServerDropList({ data, toggle, collaspe = false }) {
export default function ServerDropList({ data, toggle, expand = true }) {
if (!data) return null;
return (
<StyledWrapper className={collaspe ? "collaspe" : ""}>
<StyledWrapper className={expand ? "expand" : ""}>
<div className="server">
<div className="logo">
<img src={data.logo} alt="logo" />
</div>
{!collaspe && <h2 className="title">{data.name}</h2>}
{expand && <h2 className="title">{data.name}</h2>}
</div>
<div onClick={toggle} className={`arrow ${collaspe ? "collaspe" : ""}`}>
<div onClick={toggle} className={`arrow ${expand ? "expand" : ""}`}>
<HiChevronDoubleLeft className="icon" color="#BFBFBF" />
</div>
</StyledWrapper>
src/routes/home/Tools.js
+4 -4
View File
@@ -60,7 +60,7 @@ const StyledWrapper = styled.div`
}
}
`;
export default function Tools({ collaspe = false }) {
export default function Tools({ expand = true }) {
return (
<StyledWrapper>
<hr />
@@ -73,19 +73,19 @@ export default function Tools({ collaspe = false }) {
alt="logo"
/>
</div>
{!collaspe && <h2 className="title">Webrowse</h2>}
{expand && <h2 className="title">Webrowse</h2>}
</li>
<li className="tool">
<div className="logo">
<IoLogoGithub size={40} className="icon" />
</div>
{!collaspe && <h2 className="title">Github</h2>}
{expand && <h2 className="title">Github</h2>}
</li>
<li className="tool add">
<div className="logo">
<RiAddFill className="icon" size={40} color="#4B5563" />
</div>
{!collaspe && <h2 className="title">Add new app</h2>}
{expand && <h2 className="title">Add new app</h2>}
</li>
</ul>
</StyledWrapper>
src/routes/home/index.js
+18 -13
View File
@@ -1,7 +1,9 @@
// import React from 'react';
import { useState } from "react";
import StyledWrapper from "./styled";
// import { useState } from "react";
import { Outlet, NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { toggleMenuExpand } from "../../app/slices/ui";
import StyledWrapper from "./styled";
import ServerDropList from "./ServerDropList";
import Tools from "./Tools";
import usePreload from "./usePreload";
@@ -13,33 +15,36 @@ import ContactIcon from "../../assets/icons/contact.svg";
import NotificationHub from "../../common/component/NotificationHub";
export default function HomePage() {
const dispatch = useDispatch();
const { menuExpand, token } = useSelector((store) => {
return { token: store.authData.token, menuExpand: store.ui.menuExpand };
});
const { data, error, success } = usePreload();
const [collaspe, setCollaspe] = useState(false);
const toggleCollaspe = () => {
setCollaspe((prev) => !prev);
const toggleExpand = () => {
dispatch(toggleMenuExpand());
};
console.log({ data, error, success });
return (
<>
<NotificationHub />
<NotificationHub token={token} />
<StyledWrapper>
<div className={`col left ${collaspe ? "collaspe" : ""}`}>
<div className={`col left ${menuExpand ? "expand" : ""}`}>
<ServerDropList
data={data?.server}
collaspe={collaspe}
toggle={toggleCollaspe}
expand={menuExpand}
toggle={toggleExpand}
/>
<nav className="nav">
<NavLink className="link" to={"/chat"}>
<img src={ChatIcon} alt="chat icon" /> {!collaspe && `Chat`}
<img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
</NavLink>
<NavLink className="link" to={"/contacts"}>
<img src={ContactIcon} alt="contact icon" />{" "}
{!collaspe && `Contacts`}
{menuExpand && `Contacts`}
</NavLink>
</nav>
<Tools collaspe={collaspe} />
<CurrentUser collaspe={collaspe} />
<Tools expand={menuExpand} />
<CurrentUser expand={menuExpand} />
</div>
<div className="col right">
<Outlet />
src/routes/home/styled.js
+3 -3
View File
@@ -11,11 +11,11 @@ const StyledWrapper = styled.div`
&.left {
position: relative;
/* background: #0891B2; */
width: 180px;
width: 64px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in;
&.collaspe {
width: 64px;
&.expand {
width: 180px;
}
}
&.right {
src/routes/home/usePreload.js
+10 -11
View File
@@ -1,6 +1,6 @@
// import React from 'react';
import { useGetContactsQuery } from "../../app/services/contact";
import { useGetChannelsQuery } from "../../app/services/channel";
// import { useGetChannelsQuery } from "../../app/services/channel";
import { useGetServerQuery } from "../../app/services/server";
// pollingInterval: 0,
const querySetting = {
@@ -19,21 +19,20 @@ export default function usePreload() {
isError: serverError,
data: server,
} = useGetServerQuery(undefined, querySetting);
const {
isLoading: groupsLoading,
isSuccess: groupsSuccess,
isError: groupsError,
data: groups,
} = useGetChannelsQuery(undefined, querySetting);
// const {
// isLoading: groupsLoading,
// isSuccess: groupsSuccess,
// isError: groupsError,
// data: groups,
// } = useGetChannelsQuery(undefined, querySetting);
return {
loading: contactsLoading && groupsLoading && serverLoading,
error: contactsError && groupsError && serverError,
success: contactsSuccess && groupsSuccess && serverSuccess,
loading: contactsLoading && serverLoading,
error: contactsError && serverError,
success: contactsSuccess && serverSuccess,
data: {
contacts,
server,
groups,
},
};
}