feat: updated

src/app/slices/auth.data.js

@@ -2,6 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
   user: null,
+  usersVersion: 0,
   token: null,
   refreshToken: null,
 };
@@ -21,7 +22,15 @@ const authDataSlice = createSlice({
       state.token = null;
       state.refreshToken = null;
     },
+    setUsersVersion(state, action) {
+      const { version } = action.payload;
+      state.usersVersion = version;
+    },
   },
 });
-export const { setAuthData, clearAuthData } = authDataSlice.actions;
+export const {
+  setAuthData,
+  clearAuthData,
+  setUsersVersion,
+} = authDataSlice.actions;
 export default authDataSlice.reducer;

src/common/component/ChannelModal/styled.js

@@ -10,13 +10,17 @@ const StyledWrapper = styled.div`
   transition: all 0.5s ease;
   .left {
     width: 260px;
-    height: 100%;
+    /* height: 100%; */
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     overflow-y: scroll;
     .search {
+      position: sticky;
+      top: 0;
+      z-index: 99;
+      background: #fff;
       box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
       padding: 8px;
-      width: -webkit-fill-available;
+      width: calc(100% - 1px);
       input {
         outline: none;
         width: -webkit-fill-available;
@@ -29,9 +33,9 @@ const StyledWrapper = styled.div`
     .users {
       display: flex;
       flex-direction: column;
-      height: 260px;
+      /* height: 260px; */
       padding-bottom: 20px;
-      overflow-y: scroll;
+      /* overflow-y: scroll; */
       .user {
         cursor: pointer;
         display: flex;

src/common/component/NotificationHub.js

@@ -10,18 +10,20 @@ import {
   addChannel,
   deleteChannel,
 } from "../../app/slices/channels";
-import { clearAuthData } from "../../app/slices/auth.data";
+import { clearAuthData, setUsersVersion } from "../../app/slices/auth.data";
 
 import { addChannelMsg } from "../../app/slices/message.channel";
 import { addUserMsg } from "../../app/slices/message.user";
 
-const NotificationHub = ({ token }) => {
+const NotificationHub = ({ token, usersVersion = 0 }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   useEffect(() => {
     let sse = null;
     if (token) {
-      sse = new EventSource(`${BASE_URL}/user/events?api-key=${token}`);
+      sse = new EventSource(
+        `${BASE_URL}/user/events?api-key=${token}&users_version=${usersVersion}`
+      );
       sse.onopen = () => {
         console.info("sse opened");
       };
@@ -33,7 +35,7 @@ const NotificationHub = ({ token }) => {
       };
     }
     return () => {
-      console.log("re-run see init");
+      console.log("re-run sse init");
       if (sse) {
         sse.close();
       }
@@ -46,6 +48,13 @@ const NotificationHub = ({ token }) => {
       case "heartbeat":
         console.log("heartbeat");
         break;
+      case "users_snapshot":
+        {
+          console.log("users snapshot");
+          const { version } = data;
+          dispatch(setUsersVersion({ version }));
+        }
+        break;
       case "kick":
         {
           console.log("kicked");
@@ -66,7 +75,7 @@ const NotificationHub = ({ token }) => {
         }
         break;
       case "related_groups":
-        console.log("joined group list", data);
+        console.log("related group list", data);
         dispatch(setChannels(data.groups));
         break;
       case "joined_group":
@@ -74,7 +83,7 @@ const NotificationHub = ({ token }) => {
         dispatch(addChannel(data.group));
         break;
       case "kick_from_group":
-        console.log("joined group list", data.gid);
+        console.log("kicked from group", data.gid);
         dispatch(deleteChannel(data.gid));
         break;
       case "chat":

src/routes/home/index.js

@@ -16,8 +16,12 @@ 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 { menuExpand, token, usersVersion } = useSelector((store) => {
+    return {
+      token: store.authData.token,
+      usersVersion: store.authData.usersVersion,
+      menuExpand: store.ui.menuExpand,
+    };
   });
   const { data, error, success } = usePreload();
   const toggleExpand = () => {
@@ -26,7 +30,7 @@ export default function HomePage() {
   console.log({ data, error, success });
   return (
     <>
-      <NotificationHub token={token} />
+      <NotificationHub token={token} usersVersion={usersVersion} />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList

src/routes/login/index.js

@@ -55,12 +55,21 @@ export default function LoginPage() {
   return (
     <StyledWrapper>
       <div className="form">
+        <div className="tips">
+          <img
+            src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
+            alt="logo"
+            className="logo"
+          />
+          <h2 className="title">Login to Rustchat</h2>
+          <span className="desc">Please enter your details.</span>
+        </div>
         <form onSubmit={handleLogin}>
           <input
             name="email"
             value={email}
             required
-            placeholder="email"
+            placeholder="Enter your email"
             data-type="email"
             onChange={handleInput}
           />
@@ -71,10 +80,16 @@ export default function LoginPage() {
             required
             data-type="password"
             onChange={handleInput}
-            placeholder="password"
+            placeholder="Enter your password"
           />
-          <button type="submit">login</button>
+          <button className="btn" type="submit">
+            Sign in
+          </button>
         </form>
+        <hr className="or" />
+        <a href="#" className="btn google">
+          Sign in with Google
+        </a>
       </div>
     </StyledWrapper>
   );

src/routes/login/styled.js

@@ -1,22 +1,95 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- .form{
-     padding: 30px 15px;
-     border: 1px solid #eee;
-     form{
-         display: flex;
-         flex-direction: column;
-         gap: 5px;
-         input{
-             padding:4px 6px
-             
-         }
-     }
- }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    padding: 36px 40px 32px 40px;
+    /* border: 1px solid #eee; */
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border-radius: 12px;
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 24px;
+      .logo {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 28px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #667085;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      input {
+        width: 360px;
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        padding: 10px 14px;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+    .or {
+      border: none;
+      position: relative;
+      height: 1px;
+      background-color: #e4e7ec;
+      margin: 26px 0;
+      &:after {
+        padding: 4px;
+        background-color: #fff;
+        content: "OR";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        font-size: 14px;
+        line-height: 20px;
+        color: #667085;
+      }
+    }
+    .btn {
+      display: inline-block;
+      text-align: center;
+      width: 100%;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #ffffff;
+      padding: 10px;
+      background: #1fe1f9;
+      border: 1px solid #1fe1f9;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      &.google {
+        color: #344054;
+        border-color: #d0d5dd;
+        background: none;
+      }
+    }
+  }
 `;
 
 export default StyledWrapper;