Merge pull request #216 from RobzLegz/staging

Staging

components/containers/menu/MenuContainer.tsx

@@ -0,0 +1,40 @@
+import { useRouter } from 'next/dist/client/router';
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { setNotification } from '../../../redux/slices/notificationSlice';
+import { selectUser } from '../../../redux/slices/userSlice';
+
+function MenuContainer() {
+    const userInfo = useSelector(selectUser);
+
+    const dispatch = useDispatch();
+    const router = useRouter();
+
+    return (
+        <div className="menu__container">
+            <h1>MATHROOM</h1>
+
+            <div className="menu__container__options">
+                <button className="button button__play" onClick={() => {if(!userInfo.loggedIn || !userInfo.token){return dispatch(setNotification({type: "error", message: "You must be logged in to play games!"}))}router.push("/rooms")}}>Play</button>
+                <button className="button" onClick={() => router.push("/instructions")}>Instructions</button>
+                {!userInfo.loggedIn || !userInfo.token && (<button className="button" onClick={() => router.push("/auth/login")}>Authorize</button>)}
+            </div>
+
+            <div className="menu__container__decorations">
+                <img className="image image1" src="/svg/sandClock.svg" alt="sand clock ticking in blue color slightly rotated to right side" />
+                <img className="image image2" src="/svg/clock.svg" alt="clock with two arrows in red color slightly rotated to left side" />
+                <img className="image image3" src="/svg/timer.svg" alt="purple timer ticking" />
+                <div className="line line1"></div>
+                <div className="line line2"></div>
+                <div className="line line3"></div>
+                <div className="line line4"></div>
+                <div className="line line5"></div>
+                <div className="line line6"></div>
+                <div className="line line7"></div>
+                <div className="line line8"></div>
+            </div>
+        </div>
+    )
+}
+
+export default MenuContainer

components/containers/rooms/RoomContainer.tsx

@@ -92,7 +92,7 @@ const RoomContainer: React.FC = () => {
     return (
         <div className="roomPage__container">
             <header className="roomPage__container__header">
-                <button className="roomPage__container__header__back" onClick={() => router.push("/")}>Back</button>
+                <button className="roomPage__container__header__back" onClick={() => router.push("/menu")}>Back</button>
                 <div className="roomPage__container__header__title">
                     <h2>Join room</h2>
                 </div>

pages/index.tsx

@@ -1,35 +1,14 @@
 import { useRouter } from "next/dist/client/router";
 import Head from "next/head"
 import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import Notification from "../components/notifications/Notification";
-import { getSocket, selectSocket, setSocket } from "../redux/slices/socketSlice";
-import { selectUser } from "../redux/slices/userSlice";
-import { checkForLogin } from "../requests/auth/requests";
 
 export default function Home() {
-  const userInfo = useSelector(selectUser);
-  const socketInfo = useSelector(selectSocket);
-  const dispatch = useDispatch();
   const router = useRouter();
 
   useEffect(() => {
-    const socket = getSocket();
-
-    if(!socketInfo.connected || !socket){
-      dispatch(setSocket(true));
-    }
-  }, [socketInfo.connected]);
-
-  useEffect(() => {
-    if(!userInfo.loggedIn || !userInfo.token){
-      const token = window.localStorage.getItem("refreshtoken");
-
-      if(token){
-        checkForLogin(dispatch, router);
-      }
-    }
-}, [userInfo.loggedIn, dispatch, userInfo.token, router]);
+    router.push("/menu");
+  }, []);
 
   return (
     <div>

pages/instructions.tsx

@@ -0,0 +1,14 @@
+import Head from "next/head"
+import Notification from "../components/notifications/Notification";
+
+export default function Instructions() {
+  return (
+    <div>
+      <Head>
+        <title>MathRoom | Instructions</title>
+      </Head>
+
+      <Notification />
+    </div>
+  )
+}

pages/menu.tsx

@@ -0,0 +1,46 @@
+import { useRouter } from "next/dist/client/router";
+import Head from "next/head"
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import MenuContainer from "../components/containers/menu/MenuContainer";
+import Notification from "../components/notifications/Notification";
+import { getSocket, selectSocket, setSocket } from "../redux/slices/socketSlice";
+import { selectUser } from "../redux/slices/userSlice";
+import { checkForLogin } from "../requests/auth/requests";
+
+export default function Menu() {
+    const userInfo = useSelector(selectUser);
+    const socketInfo = useSelector(selectSocket);
+    const dispatch = useDispatch();
+    const router = useRouter();
+
+    useEffect(() => {
+        const socket = getSocket();
+
+        if(!socketInfo.connected || !socket){
+            dispatch(setSocket(true));
+        }
+    }, [socketInfo.connected]);
+
+    useEffect(() => {
+        if(!userInfo.loggedIn || !userInfo.token){
+            const token = window.localStorage.getItem("refreshtoken");
+
+            if(token){
+                checkForLogin(dispatch, router);
+            }
+        }
+    }, [userInfo.loggedIn, dispatch, userInfo.token, router]);
+
+    return (
+        <div className="menu">
+            <Head>
+                <title>MathRoom | Menu</title>
+            </Head>
+
+            <Notification />
+
+            <MenuContainer />
+        </div>
+    )
+}

styles/main.scss

@@ -3,4 +3,5 @@
 @import "./notifications/notifications.scss";
 
 @import "./rooms/index.scss";
-@import "./auth/auth.scss";
+@import "./auth/auth.scss";
+@import "./menu/menu.scss";