Skip to content

Commit

Permalink
Merge pull request #41 from Student-Labs-2023/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
Emil307 authored Aug 20, 2023
2 parents 78344b0 + ccd98f6 commit ad0650e
Show file tree
Hide file tree
Showing 22 changed files with 332 additions and 68 deletions.
2 changes: 1 addition & 1 deletion .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz"
VITE_API='https://network-class-server.ru'
VITE_WS_API='wss://network-class-server.ru'
VITE_VIDEOSDK_HREF=''
VITE_VIDEOSDK_APP='http://localhost:3000/react-rtc-demo'
2 changes: 1 addition & 1 deletion .env.production
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o"
VITE_API='https://network-class-server.ru'
VITE_WS_API='wss://network-class-server.ru'
VITE_VIDEOSDK_HREF=''
VITE_VIDEOSDK_APP='https://network-class-videosdk-client.pages.dev'
4 changes: 2 additions & 2 deletions src/entities/room/ui/RoomCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@ const RoomCard: React.FC<Props> = ({ room }) => {
<img src={callDisabled} alt="недоступен" />
)}
<Access>
<JoinButton href={`https://network-class-videosdk-client.pages.dev/?roomId=${room.id}&email=${user?.email}`} />
<Tooltip active={tooltipActive}>
<JoinButton href={`${import.meta.env.VITE_VIDEOSDK_APP}/?roomId=${room.id}&email=${user?.email}`} />
<Tooltip active={tooltipActive} message="Ссылка скопирована!">
<Button onClick={copyLink}>
<svg
width="18"
Expand Down
25 changes: 0 additions & 25 deletions src/entities/user/api/addUser.ts

This file was deleted.

34 changes: 34 additions & 0 deletions src/entities/user/api/useAddUser.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useState, useEffect } from 'react';

export const useAddUser = (fullname: any, photo_url: string, email: any) => {
const API = String(import.meta.env.VITE_API);
const [user, setUser] = useState({});

const newUser = {
full_name: fullname,
photo_url: photo_url,
email: email
}

async function createUser() {
await fetch(`${API}/users`, {
method : 'POST',
headers: {
'Content-type': 'application/json',
},
body : JSON.stringify(newUser),
})
.then(response => response.text())
.then(response => {
response = JSON.parse(response);
console.log(response);
setUser(response);
})
}

useEffect(() => {
createUser();
}, [])

return user;
}
37 changes: 15 additions & 22 deletions src/entities/user/ui/UserCard.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
import { useAuth0 } from "@auth0/auth0-react";
import React, { useState } from "react";
import React 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;
`;
import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
import profileFormState from "../../../pages/Profile/store/profileFormState";
import { observer } from "mobx-react-lite";

const User = styled.div`
height: 100%;
Expand Down Expand Up @@ -69,16 +59,19 @@ const AccessText = styled.a`
}
`;

const UserCard: React.FC = () => {
const [isEmailConfirmed, setIsEmailConfirmed] = useState(false);
const UserCard: React.FC = observer(() => {
const { user } = useAuth0();

const sendAccess = () => {
setIsEmailConfirmed(true);
profileFormState.confirmEmail();
};

const openForm = () => {
profileFormState.openEditForm();
};

return (
<Container>
<ProfileFormLayout>
<User>
<Avatar src={avatar && user?.picture} />
<Info>
Expand All @@ -87,7 +80,7 @@ const UserCard: React.FC = () => {
<EmailText>{user?.email}</EmailText>
{!user?.email_verified ? (
<AccessEmail>
{isEmailConfirmed ? (
{profileFormState.isEmailConfirmed ? (
<div style={{ color: "var(--green, #5bc259)" }}>
На вашу почту выслано письмо с подтверждением
</div>
Expand All @@ -103,9 +96,9 @@ const UserCard: React.FC = () => {
</Email>
</Info>
</User>
<CardButton>Изменить</CardButton>
</Container>
<CardButton onClick={openForm}>Изменить</CardButton>
</ProfileFormLayout>
);
};
});

export default UserCard;
2 changes: 1 addition & 1 deletion src/features/Copy/ui/CopyLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const CopyLink: React.FC = () => {
}

return (
<Tooltip active={tooltipActive}>
<Tooltip active={tooltipActive} message="Ссылка скопирована!">
<Button onClick={copyLink}>
<svg
width="18"
Expand Down
4 changes: 2 additions & 2 deletions src/features/createRoom/model/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { IUser } from "../../../shared/api/models";
import { AddUserThunk } from "../../../entities/user/api/addUser";

export const CreateThunk = (event: any, title: string, isPublic: boolean, user: IUser) => {
event.preventDefault();
AddUserThunk(user?.name, 'test', user?.email);
const API = String(import.meta.env.VITE_API);

console.log(user?.email);

const newRoom = {
title: title,
url: 'https://network-class.pages.dev/joinlesson/1',
Expand Down
1 change: 1 addition & 0 deletions src/features/editUser/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { EditUserForm } from "./ui/EditUserForm";
112 changes: 112 additions & 0 deletions src/features/editUser/ui/EditUserForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React, { useState } from "react";
import styled from "styled-components";
import styles from "./styles.module.css";
import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
import { useAuth0 } from "@auth0/auth0-react";
import avatarDefault from "../../../../public/icons/avatar.svg";
import FormButton from "../../../shared/ui/formButton/FormButton";
import profileFormState from "../../../pages/Profile/store/profileFormState";
import { observer } from "mobx-react-lite";

const Form = styled.form`
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&::before {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
border-radius: 12px;
background: linear-gradient(
223deg,
rgba(255, 178, 64, 0.9) 0%,
rgba(216, 97, 196, 0.9) 50.52%,
rgba(23, 94, 241, 0.9) 100%
);
z-index: -1;
}
`;

export const EditUserForm: React.FC = observer(() => {
const { user } = useAuth0();
const [avatar, setAvatar] = useState(user?.picture || avatarDefault);
const [name, setName] = useState(user?.name);

const sendAccess = () => {
profileFormState.confirmEmail();
};

const saveChanges = () => {
profileFormState.closeEditForm();
};

const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
setAvatar(URL.createObjectURL(event.target.files[0]));
}
};

return (
<ProfileFormLayout>
<Form
action=""
autoComplete="off"
method="post"
encType="multipart/form-data"
onSubmit={saveChanges}
>
<div className={styles.user}>
<div className={styles.avatar}>
<img
src={avatar}
alt=""
style={{ width: "100%", height: "100%", borderRadius: "7px" }}
/>
<input
className={styles.inputAvatar}
type="file"
title=" "
onChange={onImageChange}
/>
</div>
<div className={styles.info}>
<input
className={styles.name}
type="text"
value={name}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setName(e.target.value)
}
autoFocus
/>
<div className={styles.email}>
<div className={styles.emailText}>{user?.email}</div>
{!user?.email_verified ? (
<a className={styles.accessEmail}>
{profileFormState.isEmailConfirmed ? (
<div style={{ color: "var(--green, #5bc259)" }}>
На вашу почту выслано письмо с подтверждением
</div>
) : (
<a className={styles.accessText} onClick={sendAccess}>
Подтвердите почту
</a>
)}
</a>
) : (
""
)}
</div>
</div>
</div>
<FormButton>Сохранить</FormButton>
</Form>
</ProfileFormLayout>
);
});
71 changes: 71 additions & 0 deletions src/features/editUser/ui/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.user {
height: 100%;
display: flex;
align-items: center;
gap: 20px;
}

.avatar {
width: 86px;
height: 86px;
border-radius: 10px;
border: 2px dashed #175ef1;
position: relative;
}

.inputAvatar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: transparent;

&:hover {
cursor: pointer;
}

&::file-selector-button {
display: none;
}
}

.info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.name {
width: 100%;
font-size: 22px;
font-weight: 500;
}

.email {
display: flex;
align-items: center;
gap: 12px;
}

.emailText {
font-size: 20px;
font-weight: 300;
line-height: normal;
}

.accessEmail {
font-size: 20px;
font-weight: 300;
line-height: normal;
}

.accessText {
color: var(--red, #f95a39);

&:hover {
text-decoration: underline;
cursor: pointer;
}
}
13 changes: 11 additions & 2 deletions src/pages/Join/Join.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,24 @@ import { EnterClassForm } from "../../features/EnterClass/index.ts";
import FunctionsList from "../../widgets/FunctionsList/FunctionsList.tsx";
import functions from "../../widgets/FunctionsList/functionsObject.tsx";
import ProfilePanel from "../../widgets/ProfilePanel/ProfilePanel.tsx"
import { useAuth0 } from "@auth0/auth0-react";
import { useAddUser } from "../../entities/user/api/useAddUser.ts";

const Join: React.FC = () => {
const { isAuthenticated, user } = useAuth0();

if (isAuthenticated) {
useAddUser(user?.name, 'test', user?.email);
}

return (
<div className={styles.Join}>
<div className={styles.leftSide}>
<header className={styles.header}>
<img src={logo} alt="Логотип" />
<div className={styles.titleApp}>Сетевой учебный класс</div>
<div className={styles.logo}>
<img src={logo} alt="Логотип" />
<div className={styles.titleApp}>Сетевой учебный класс</div>
</div>
<ProfilePanel />
</header>
<main className={styles.main}>
Expand Down
Loading

0 comments on commit ad0650e

Please sign in to comment.