From 139703eebd16ad49f4740e872369379829c0846d Mon Sep 17 00:00:00 2001 From: abdulhamid Date: Sun, 17 Sep 2023 06:07:44 +0200 Subject: [PATCH] add separate pages for create and join party --- public/_locales/ar/messages.json | 23 +++++-- public/_locales/en/messages.json | 23 +++++-- src/assets/imgs/plus.svg | 8 +++ src/pages/DashboardPage/DashboardPage.scss | 35 +++++++++- src/pages/DashboardPage/DashboardPage.tsx | 79 +++++++++++++--------- src/style/vendor/_default.scss | 12 ---- 6 files changed, 122 insertions(+), 58 deletions(-) create mode 100644 src/assets/imgs/plus.svg diff --git a/public/_locales/ar/messages.json b/public/_locales/ar/messages.json index 1348fc4..32a2659 100644 --- a/public/_locales/ar/messages.json +++ b/public/_locales/ar/messages.json @@ -183,16 +183,25 @@ "DASHBOARD_ROOM_ID": { "message": "معرف الغرفة" }, - "DASHBOARD_CREATE": { - "message": "إنشاء" - }, "DASHBOARD_JOIN": { "message": "انضمام" }, - "DASHBOARD_GET_STARTED_CREATE_OR_JOIN": { - "message": "ابدأ ، من خلال إنشاء / الانضمام إلى غرفة!" + "DASHBOARD_CREATE_ROOM_HEADER": { + "message": "كل ما تتطلبه لإنشاء غرفة جديدة هو نقرة واحدة" + }, + "DASHBOARD_CREATE_ROOM": { + "message": "إنشاء غرفة" + }, + "DASHBOARD_JOIN_ROOM_LINK": { + "message": "انقر هلا للإنضمام لغرفة موجودة" + }, + "DASHBOARD_JOIN_ROOM_HEADER": { + "message": "الانضمام لغرفة موجودة" + }, + "DASHBOARD_JOIN_ROOM_DESCRIPTION": { + "message": "أدخل معرف الغرفة للإنضمام لغرفة موجودة بالفعل" }, - "DASHBOARD_GET_STARTED_CREATE_OR_JOIN_NOTICE": { - "message": "انقر فوق إنشاء لبدء حفلة جديدة أو أدخل معرف الغرفة للانضمام إلى حفلة موجودة بالفعل." + "DASHBOARD_CREATE_ROOM_LINK": { + "message": "انقر هنا لإنشاء غرفة جديدة" } } \ No newline at end of file diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index b1c2346..a841a6d 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -183,16 +183,25 @@ "DASHBOARD_ROOM_ID": { "message": "Room ID" }, - "DASHBOARD_CREATE": { - "message": "Create" - }, "DASHBOARD_JOIN": { "message": "Join" }, - "DASHBOARD_GET_STARTED_CREATE_OR_JOIN": { - "message": "Get Started, by Create/Join Room!" + "DASHBOARD_CREATE_ROOM_HEADER": { + "message": "It only takes one click to create a new party" + }, + "DASHBOARD_CREATE_ROOM": { + "message": "Create Room" + }, + "DASHBOARD_JOIN_ROOM_LINK": { + "message": "Click here to join an existing party" + }, + "DASHBOARD_JOIN_ROOM_HEADER": { + "message": "Join an existing Luca room" + }, + "DASHBOARD_JOIN_ROOM_DESCRIPTION": { + "message": "Enter a room id to join an already existing party" }, - "DASHBOARD_GET_STARTED_CREATE_OR_JOIN_NOTICE": { - "message": "Click on create to start a new party or enter a room id to join an already existing party." + "DASHBOARD_CREATE_ROOM_LINK": { + "message": "Click here to create a new party" } } \ No newline at end of file diff --git a/src/assets/imgs/plus.svg b/src/assets/imgs/plus.svg new file mode 100644 index 0000000..6a7ed7d --- /dev/null +++ b/src/assets/imgs/plus.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/src/pages/DashboardPage/DashboardPage.scss b/src/pages/DashboardPage/DashboardPage.scss index 13959b5..b6e60c8 100644 --- a/src/pages/DashboardPage/DashboardPage.scss +++ b/src/pages/DashboardPage/DashboardPage.scss @@ -1,7 +1,7 @@ .dashboard__container { height: fit-content; margin-top: 2rem; - gap: 2rem; + gap: 1.5rem; } .dashboard__info { @@ -17,3 +17,36 @@ color: var(--text-primary-color); } } + +.room__action { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin: auto; + label { + font-size: 0.875rem; + font-weight: 500; + color: var(--secondary-color); + margin-bottom: 0.5rem; + } + .create__room__container { + padding: 30px 50px; + background-color: $gray-700; + border-radius: $radius; + color: $text-primary-clr; + gap: 0.5rem; + cursor: pointer; + } +} + + +.dashboard__notice { + gap: 0.5rem; + p { + font-size: 0.6rem; + font-weight: 400; + color: var(--primary-color); + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx index 750cbc9..57d014c 100644 --- a/src/pages/DashboardPage/DashboardPage.tsx +++ b/src/pages/DashboardPage/DashboardPage.tsx @@ -3,6 +3,8 @@ import { NavigateFunction } from 'react-router-dom'; import GeneralButton from '../../components/GeneralButton/GeneralButton'; import UtilsEngine from '../../js/luca/utils-engine'; import PopUpEngine from '../../js/popup-engine'; +import { toast } from 'react-toastify'; +const Plus = require('../../assets/imgs/plus.svg'); const RoomId = require('../../assets/imgs/room-id.svg'); const Arrow = require('../../assets/imgs/arrow.svg'); class DashboardPage extends React.Component<{ navigate: NavigateFunction }, { createRoom: boolean; roomId: string }> { @@ -23,49 +25,69 @@ class DashboardPage extends React.Component<{ navigate: NavigateFunction }, { cr }); } - handleOnClick = () => { + createRoom = () => { let popupEngine: PopUpEngine = new PopUpEngine(); - if (this.state.createRoom) { - popupEngine.createRoom(); - } else { - popupEngine.joinRoom(this.state.roomId); - } + popupEngine.createRoom(); this.props.navigate('/selectvideo'); }; - handleOnChange = (e: ChangeEvent) => { - this.setState({ roomId: (e.target as HTMLInputElement).value }); - if ((e.target as HTMLInputElement).value) { - this.setState({ createRoom: false }); - } else { - this.setState({ createRoom: true }); + joinRoom = () => { + if (!this.state.roomId) { + toast.error('Room name can\'t be empty', { + toastId: 'error:joinRoom:emptyRommId', + }); + return; } + let popupEngine: PopUpEngine = new PopUpEngine(); + popupEngine.joinRoom(this.state.roomId); + this.props.navigate('/selectvideo'); }; handleOnKeyDown = (e: any) => { - if (e.key === 'Enter' && (e.target as HTMLInputElement).value) { - let popupEngine: PopUpEngine = new PopUpEngine(); - if (this.state.createRoom) { - popupEngine.createRoom(); - } else { - popupEngine.joinRoom(this.state.roomId); - } - this.props.navigate('/selectvideo'); + this.setState({ roomId: (e.target as HTMLInputElement).value }); + if (e.key === 'Enter') { + this.joinRoom(); } }; + toggleCreateParty = () => { + this.setState({ createRoom: !this.state.createRoom }); + } + render() { - return ( + return this.state.createRoom ? (
+
+

{UtilsEngine.translate('DASHBOARD_CREATE_ROOM_HEADER')}

+
+
+
+ + {UtilsEngine.translate('DASHBOARD_CREATE_ROOM')} +
+
+
+

{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_LINK')}

+
+
+
+ + ) : ( + +
+
+
+

{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_HEADER')}

+

{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_DESCRIPTION')}

+
-
-

{UtilsEngine.translate('DASHBOARD_GET_STARTED_CREATE_OR_JOIN')}

-

{UtilsEngine.translate('DASHBOARD_GET_STARTED_CREATE_OR_JOIN_NOTICE')}

+
+

{UtilsEngine.translate('DASHBOARD_CREATE_ROOM_LINK')}

diff --git a/src/style/vendor/_default.scss b/src/style/vendor/_default.scss index a0f380a..6021840 100644 --- a/src/style/vendor/_default.scss +++ b/src/style/vendor/_default.scss @@ -117,18 +117,6 @@ } } } -.room__action { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - label { - font-size: 0.875rem; - font-weight: 500; - color: var(--secondary-color); - margin-bottom: 0.5rem; - } -} .page__container { flex: 1;