Merge pull request #81 from abozanona/add-separate-pages-for-create-a…

…nd-join-party add separate pages for create and join party
abozanona · Sep 17, 2023 · bcd342c · bcd342c
2 parents b4bc08e + 139703e
commit bcd342c
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 58 deletions.
diff --git 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": "انقر هنا لإنشاء غرفة جديدة"
     }
 }
diff --git 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"
     }
 }
diff --git a/src/assets/imgs/plus.svg b/src/assets/imgs/plus.svg
diff --git 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;
+    }
+}
diff --git 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 ? (
             <React.Fragment>
                 <div className="page__container">
                     <div className="dashboard__container d-flex-col">
+                        <div className="dashboard__info d-flex-col d-jcc d-aic">
+                            <h1>{UtilsEngine.translate('DASHBOARD_CREATE_ROOM_HEADER')}</h1>
+                        </div>
+                        <div className="room__action">
+                            <div onClick={this.createRoom} className="create__room__container d-flex-col d-aic">
+                                <img src={Plus} alt="" />
+                                {UtilsEngine.translate('DASHBOARD_CREATE_ROOM')}
+                            </div>
+                        </div>
+                        <div className="dashboard__notice d-flex-col d-jcc d-aic">
+                            <p onClick={this.toggleCreateParty}>{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_LINK')}</p>
+                        </div>
+                    </div>
+                </div>
+            </React.Fragment>
+        ) : (
+            <React.Fragment>
+                <div className="page__container">
+                    <div className="dashboard__container d-flex-col">
+                        <div className="dashboard__info d-flex-col d-jcc d-aic">
+                            <h1>{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_HEADER')}</h1>
+                            <p>{UtilsEngine.translate('DASHBOARD_JOIN_ROOM_DESCRIPTION')}</p>
+                        </div>
                         <div className="room__action">
                             <div className="input__container">
                                 <label htmlFor="roomid">{UtilsEngine.translate('DASHBOARD_ROOM_ID')}</label>
                                 <div className="input__room">
                                     <img src={RoomId} alt="" />
                                     <input
-                                        onChange={this.handleOnChange}
                                         onKeyDown={this.handleOnKeyDown}
                                         type="text"
                                         name="roomid"
@@ -75,19 +97,14 @@ class DashboardPage extends React.Component<{ navigate: NavigateFunction }, { cr
                             <div className="d-aic d-flex-col">
                                 <label htmlFor="">‎‎&nbsp;</label>
                                 <GeneralButton
-                                    name={
-                                        this.state.createRoom
-                                            ? UtilsEngine.translate('DASHBOARD_CREATE')
-                                            : UtilsEngine.translate('DASHBOARD_JOIN')
-                                    }
+                                    name={UtilsEngine.translate('DASHBOARD_JOIN')}
                                     icon={Arrow}
-                                    click={this.handleOnClick}
+                                    click={this.joinRoom}
                                 />
                             </div>
                         </div>
-                        <div className="dashboard__info d-flex-col d-jcc d-aic">
-                            <h1>{UtilsEngine.translate('DASHBOARD_GET_STARTED_CREATE_OR_JOIN')}</h1>
-                            <p>{UtilsEngine.translate('DASHBOARD_GET_STARTED_CREATE_OR_JOIN_NOTICE')}</p>
+                        <div className="dashboard__notice d-flex-col d-jcc d-aic">
+                            <p onClick={this.toggleCreateParty}>{UtilsEngine.translate('DASHBOARD_CREATE_ROOM_LINK')}</p>
                         </div>
                     </div>
                 </div>

diff --git 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;