Merge pull request #36 from Student-Labs-2023/develop

Develop

src/app/App.tsx

@@ -4,20 +4,19 @@ import "./index.css";
 
 import Join from "../pages/Join/Join";
 import Lobby from "../pages/Lobby/Lobby";
-import LobbyAccess from "../pages/Lobby/LobbyAccess";
-import LobbyMy from "../pages/Lobby/LobbyMy";
 import JoinCall from "../pages/JoinCall/JoinCall";
 import CallPage from "../pages/CallPage/CallPage";
 import CallPageUI from "../pages/CallPageCustomUI/CallPage";
 import Loader from "../shared/ui/loader/Loader";
 import { useAuth0 } from "@auth0/auth0-react";
+import Profile from "../pages/Profile/Profile";
 
 const App: React.FC = () => {
   const { loginWithRedirect, isAuthenticated, isLoading } = useAuth0();
 
   useEffect(() => {
     if (!isAuthenticated && !isLoading) {
-      loginWithRedirect(); 
+      loginWithRedirect();
     }
   }, [isLoading]);
 
@@ -29,11 +28,10 @@ const App: React.FC = () => {
         <Routes>
           <Route path="/" element={<Join />} />
           <Route path="/lobby" element={<Lobby />} />
-          <Route path="/lobby/access" element={<LobbyAccess />} />
-          <Route path="/lobby/my" element={<LobbyMy />} />
           <Route path="/joinlesson/:id" element={<JoinCall />} />
           <Route path="/lesson/:id" element={<CallPage />} />
-          <Route path="/lesson-ui" element={<CallPageUI/>} />
+          <Route path="/lesson-ui" element={<CallPageUI />} />
+          <Route path="/profile" element={<Profile />} />
         </Routes>
       )}
     </>

src/entities/room/ui/RoomCard.tsx

@@ -13,7 +13,6 @@ const Container = styled.div`
   display: flex;
   width: calc(100% - 20px);
   padding: 24px;
-  justify-content: space-between;
   align-items: center;
 
   border-radius: 10px;
@@ -24,13 +23,13 @@ const Container = styled.div`
 
 const Info = styled.div`
   display: flex;
-  width: 329px;
-  justify-content: space-between;
+  width: 392px;
+  gap: 24px;
   align-items: center;
 `;
 
 const Title = styled.h3`
-  width: 259px;
+  width: 100%;
   font-family: var(--font);
   font-size: 20px;
   font-style: normal;
@@ -41,7 +40,7 @@ const Title = styled.h3`
 `;
 
 const Teacher = styled.h4`
-  min-width: 251px;
+  min-width: 360px;
   font-family: var(--font);
   font-size: 18px;
   font-style: normal;
@@ -56,6 +55,7 @@ const Access = styled.div`
   width: 229px;
   justify-content: space-between;
   align-items: center;
+  margin-left: 129px;
 `;
 
 let Path = styled.path``;
@@ -100,7 +100,7 @@ const RoomCard: React.FC<Props> = ({ room }) => {
       ) : (
         <img src={callDisabled} alt="недоступен" />
       )}
-      <Access style={room.owner_fullname === user?.name ? {width: "249px"} : {}} >
+      <Access>
         <JoinButton href={`https://network-class-videosdk-client.pages.dev/?roomId=${room.id}&email=${user?.email}`} />
         <Tooltip active={tooltipActive}>
           <Button onClick={copyLink}>

src/entities/user/ui/UserCard.tsx

@@ -1,9 +1,111 @@
-import React from 'react'
+import { useAuth0 } from "@auth0/auth0-react";
+import React, { useState } from "react";
+import { styled } from "styled-components";
+import avatar from "../../../../public/icons/avatar.svg";
+import CardButton from "../../../shared/ui/cardButton/CardButton";
+
+const Container = styled.div`
+  font-family: var(--font);
+  color: #000;
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  background: var(--white, #fff);
+  box-shadow: 0px 0px 4px 0px #e5eaf8;
+`;
+
+const User = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+
+const Avatar = styled.img`
+  width: 86px;
+  height: 86px;
+  border-radius: 10px;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+`;
+
+const Name = styled.div`
+  font-size: 22px;
+  font-weight: 500;
+`;
+
+const Email = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+const EmailText = styled.div`
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+`;
+
+const AccessEmail = styled.a`
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+`;
+
+const AccessText = styled.a`
+  color: var(--red, #f95a39);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
+
+const UserCard: React.FC = () => {
+  const [isEmailConfirmed, setIsEmailConfirmed] = useState(false);
+  const { user } = useAuth0();
+
+  const sendAccess = () => {
+    setIsEmailConfirmed(true);
+  };
 
-const UserCard: React.FC= () => {
   return (
-    <div>UserCard</div>
-  )
-}
+    <Container>
+      <User>
+        <Avatar src={avatar && user?.picture} />
+        <Info>
+          <Name>{user?.name}</Name>
+          <Email>
+            <EmailText>{user?.email}</EmailText>
+            {!user?.email_verified ? (
+              <AccessEmail>
+                {isEmailConfirmed ? (
+                  <div style={{ color: "var(--green, #5bc259)" }}>
+                    На вашу почту выслано письмо с подтверждением
+                  </div>
+                ) : (
+                  <AccessText onClick={sendAccess}>
+                    Подтвердите почту
+                  </AccessText>
+                )}
+              </AccessEmail>
+            ) : (
+              ""
+            )}
+          </Email>
+        </Info>
+      </User>
+      <CardButton>Изменить</CardButton>
+    </Container>
+  );
+};
 
-export default UserCard
+export default UserCard;

src/features/EnterProfile/index.ts

@@ -0,0 +1 @@
+export { EnterProfileButton } from "./ui/EnterProfileButton";

src/features/EnterProfile/ui/EnterProfileButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { styled } from "styled-components";
+import settingsIcon from "../../../../public/icons/setting-mini.svg";
+import Paragraph from "../../../shared/ui/Paragraph";
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: inherit;
+`;
+
+export const EnterProfileButton: React.FC = () => {
+  function enterProfile() {
+    window.location.href = "/profile";
+  }
+
+  return (
+    <Container onClick={enterProfile}>
+      <img src={settingsIcon} alt="Настройки" />
+      <Paragraph>Настройки профиля</Paragraph>
+    </Container>
+  );
+};

src/features/logout/ui/LogoutButton.tsx

@@ -1,20 +1,32 @@
-import React from 'react';
+import React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
-import Paragraph from '../../../shared/ui/Paragraph';
+import Paragraph from "../../../shared/ui/Paragraph";
+import logoutIcon from "../../../../public/icons/logout.svg";
+import { styled } from "styled-components";
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: inherit;
+`;
 
 export const LogoutButton: React.FC = () => {
-    const { logout } = useAuth0();
+  const { logout } = useAuth0();
 
-    function logoutFunc(event : any) {
-        event.preventDefault();
-        logout({ logoutParams: { returnTo: window.location.origin } });
-    }
+  function logoutFunc(event: any) {
+    event.preventDefault();
+    logout({ logoutParams: { returnTo: window.location.origin } });
+  }
 
   return (
-    <button onClick={logoutFunc}>
-      <Paragraph>
-        Выйти
-      </Paragraph>
-    </button>
-  )
-}
+    <Container onClick={logoutFunc}>
+      <img src={logoutIcon} alt="Выйти" />
+      <button>
+        <Paragraph>Выйти</Paragraph>
+      </button>
+    </Container>
+  );
+};

src/pages/Lobby/Lobby.tsx

@@ -1,21 +1,26 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
+import navbarState from './store/navbarState';
+import roomsFormState from './store/roomsFormState';
 import { useRoomsList } from '../../entities/room/api/useRoomsList';
 import Header from '../../widgets/layout/Header';
 import Navbar from '../../widgets/layout/Navbar';
+import { CreateRoomForm } from '../../features/createRoom';
 import RoomsList from '../../widgets/RoomsList';
-import user from './store/userState';
 
-const Lobby: React.FC = () => {
+const Lobby: React.FC = observer(() => {
   const { rooms, loading, error } = useRoomsList();
-  console.log(user.state);
+
+  const roomsFormStateLS = localStorage.getItem("trigger");
 
   return (
     <>
       <Header/>
-      <Navbar activeLink='all' allLength={121}/>
+      <Navbar/>
+      {roomsFormState.state || roomsFormStateLS === 'create' && navbarState.state === 'my' ? <CreateRoomForm/> : null}
       <RoomsList rooms={rooms} loading={loading} error={error}/>
     </>
   )
-}
+})
 
 export default Lobby;