From 42497432df553ddf8ba46a23aeff9635cc229fed Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Sat, 18 Jan 2020 12:11:22 -0800 Subject: [PATCH] stub home and rooms sidebar components --- .../src/components/Button/Archive/Archive.js | 12 +++++ .../Archive/Archive.scss} | 0 .../src/components/Button/Library/Library.js | 12 +++++ .../Library/Library.scss} | 0 .../src/components/Button/NewGame/NewGame.js | 12 +++++ .../NewGame/NewGame.scss} | 0 .../src/components/Button/NewRoom/NewRoom.js | 12 +++++ .../components/Button/NewRoom/NewRoom.scss | 0 .../{ => Error}/FormError/FormError.js | 0 .../components/Error/FormError/FormError.scss | 5 ++ .../{ => Error}/FormError/FormError.test.js | 0 .../src/components/Form/FindGame/FindGame.js | 12 +++++ .../components/Form/FindGame/FindGame.scss | 0 .../src/components/Form/FindRoom/FindRoom.js | 12 +++++ .../components/Form/FindRoom/FindRoom.scss | 0 .../src/components/{ => Form}/Login/Login.js | 4 +- .../src/components/Form/Login/Login.scss | 0 .../components/{ => Form}/Login/Login.test.js | 0 .../components/{ => Form}/Signup/Signup.js | 4 +- .../src/components/Form/Signup/Signup.scss | 0 .../{ => Form}/Signup/Signup.test.js | 0 .../src/components/FormError/FormError.scss | 5 -- play-node-go/src/components/Logo/Logo.js | 12 +++++ play-node-go/src/components/Logo/Logo.scss | 0 .../components/MainWrapper/MainWrapper.scss | 39 -------------- play-node-go/src/pages/Home/HomeSidebar.js | 27 +++++++--- .../Layout}/MainWrapper/MainWrapper.js | 12 +++-- .../pages/Layout/MainWrapper/MainWrapper.scss | 51 +++++++++++++++++++ .../src/pages/Layout/NavBar/NavBar.js | 29 +++++++++++ .../src/pages/Layout/NavBar/NavBar.scss | 5 ++ .../src/pages/Layout/NavBar/NavBar.test.js | 15 ++++++ .../Layout}/Sidebar/Sidebar.js | 0 .../src/pages/Layout/Sidebar/Sidebar.scss | 0 .../Layout}/Sidebar/Sidebar.test.js | 0 play-node-go/src/pages/Room/RoomSidebar.js | 6 +++ 35 files changed, 226 insertions(+), 60 deletions(-) create mode 100644 play-node-go/src/components/Button/Archive/Archive.js rename play-node-go/src/components/{Login/Login.scss => Button/Archive/Archive.scss} (100%) create mode 100644 play-node-go/src/components/Button/Library/Library.js rename play-node-go/src/components/{Sidebar/Sidebar.scss => Button/Library/Library.scss} (100%) create mode 100644 play-node-go/src/components/Button/NewGame/NewGame.js rename play-node-go/src/components/{Signup/Signup.scss => Button/NewGame/NewGame.scss} (100%) create mode 100644 play-node-go/src/components/Button/NewRoom/NewRoom.js create mode 100644 play-node-go/src/components/Button/NewRoom/NewRoom.scss rename play-node-go/src/components/{ => Error}/FormError/FormError.js (100%) create mode 100644 play-node-go/src/components/Error/FormError/FormError.scss rename play-node-go/src/components/{ => Error}/FormError/FormError.test.js (100%) create mode 100644 play-node-go/src/components/Form/FindGame/FindGame.js create mode 100644 play-node-go/src/components/Form/FindGame/FindGame.scss create mode 100644 play-node-go/src/components/Form/FindRoom/FindRoom.js create mode 100644 play-node-go/src/components/Form/FindRoom/FindRoom.scss rename play-node-go/src/components/{ => Form}/Login/Login.js (95%) create mode 100644 play-node-go/src/components/Form/Login/Login.scss rename play-node-go/src/components/{ => Form}/Login/Login.test.js (100%) rename play-node-go/src/components/{ => Form}/Signup/Signup.js (96%) create mode 100644 play-node-go/src/components/Form/Signup/Signup.scss rename play-node-go/src/components/{ => Form}/Signup/Signup.test.js (100%) delete mode 100644 play-node-go/src/components/FormError/FormError.scss create mode 100644 play-node-go/src/components/Logo/Logo.js create mode 100644 play-node-go/src/components/Logo/Logo.scss delete mode 100644 play-node-go/src/components/MainWrapper/MainWrapper.scss rename play-node-go/src/{components => pages/Layout}/MainWrapper/MainWrapper.js (80%) create mode 100644 play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss create mode 100644 play-node-go/src/pages/Layout/NavBar/NavBar.js create mode 100644 play-node-go/src/pages/Layout/NavBar/NavBar.scss create mode 100644 play-node-go/src/pages/Layout/NavBar/NavBar.test.js rename play-node-go/src/{components => pages/Layout}/Sidebar/Sidebar.js (100%) create mode 100644 play-node-go/src/pages/Layout/Sidebar/Sidebar.scss rename play-node-go/src/{components => pages/Layout}/Sidebar/Sidebar.test.js (100%) diff --git a/play-node-go/src/components/Button/Archive/Archive.js b/play-node-go/src/components/Button/Archive/Archive.js new file mode 100644 index 0000000..70e5d34 --- /dev/null +++ b/play-node-go/src/components/Button/Archive/Archive.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Archive.scss'; + +const ArchiveButton = () => { + return ( + <> + Archive + + ); +} + +export default ArchiveButton; \ No newline at end of file diff --git a/play-node-go/src/components/Login/Login.scss b/play-node-go/src/components/Button/Archive/Archive.scss similarity index 100% rename from play-node-go/src/components/Login/Login.scss rename to play-node-go/src/components/Button/Archive/Archive.scss diff --git a/play-node-go/src/components/Button/Library/Library.js b/play-node-go/src/components/Button/Library/Library.js new file mode 100644 index 0000000..d5eba68 --- /dev/null +++ b/play-node-go/src/components/Button/Library/Library.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Library.scss'; + +const LibraryButton = () => { + return ( + <> + Library + + ); +} + +export default LibraryButton; \ No newline at end of file diff --git a/play-node-go/src/components/Sidebar/Sidebar.scss b/play-node-go/src/components/Button/Library/Library.scss similarity index 100% rename from play-node-go/src/components/Sidebar/Sidebar.scss rename to play-node-go/src/components/Button/Library/Library.scss diff --git a/play-node-go/src/components/Button/NewGame/NewGame.js b/play-node-go/src/components/Button/NewGame/NewGame.js new file mode 100644 index 0000000..de0d1eb --- /dev/null +++ b/play-node-go/src/components/Button/NewGame/NewGame.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './NewGame.scss'; + +const NewGameButton = () => { + return ( + <> + New Game + + ); +} + +export default NewGameButton; \ No newline at end of file diff --git a/play-node-go/src/components/Signup/Signup.scss b/play-node-go/src/components/Button/NewGame/NewGame.scss similarity index 100% rename from play-node-go/src/components/Signup/Signup.scss rename to play-node-go/src/components/Button/NewGame/NewGame.scss diff --git a/play-node-go/src/components/Button/NewRoom/NewRoom.js b/play-node-go/src/components/Button/NewRoom/NewRoom.js new file mode 100644 index 0000000..e16239a --- /dev/null +++ b/play-node-go/src/components/Button/NewRoom/NewRoom.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './NewRoom.scss'; + +const NewRoomButton = () => { + return ( + <> + New Room + + ); +} + +export default NewRoomButton; \ No newline at end of file diff --git a/play-node-go/src/components/Button/NewRoom/NewRoom.scss b/play-node-go/src/components/Button/NewRoom/NewRoom.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/FormError/FormError.js b/play-node-go/src/components/Error/FormError/FormError.js similarity index 100% rename from play-node-go/src/components/FormError/FormError.js rename to play-node-go/src/components/Error/FormError/FormError.js diff --git a/play-node-go/src/components/Error/FormError/FormError.scss b/play-node-go/src/components/Error/FormError/FormError.scss new file mode 100644 index 0000000..6ae3f66 --- /dev/null +++ b/play-node-go/src/components/Error/FormError/FormError.scss @@ -0,0 +1,5 @@ +@import '../../../../public/stylesheets/partials/variables'; + +span.FormError { + color: map-get($colors, "error");; +} \ No newline at end of file diff --git a/play-node-go/src/components/FormError/FormError.test.js b/play-node-go/src/components/Error/FormError/FormError.test.js similarity index 100% rename from play-node-go/src/components/FormError/FormError.test.js rename to play-node-go/src/components/Error/FormError/FormError.test.js diff --git a/play-node-go/src/components/Form/FindGame/FindGame.js b/play-node-go/src/components/Form/FindGame/FindGame.js new file mode 100644 index 0000000..31f1a5e --- /dev/null +++ b/play-node-go/src/components/Form/FindGame/FindGame.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './FindGame.scss'; + +const FindGameForm = () => { + return ( + <> + Find Game + + ); +} + +export default FindGameForm; \ No newline at end of file diff --git a/play-node-go/src/components/Form/FindGame/FindGame.scss b/play-node-go/src/components/Form/FindGame/FindGame.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/Form/FindRoom/FindRoom.js b/play-node-go/src/components/Form/FindRoom/FindRoom.js new file mode 100644 index 0000000..17aca22 --- /dev/null +++ b/play-node-go/src/components/Form/FindRoom/FindRoom.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './FindRoom.scss'; + +const FindRoomForm = () => { + return ( + <> + Find Room + + ); +} + +export default FindRoomForm; \ No newline at end of file diff --git a/play-node-go/src/components/Form/FindRoom/FindRoom.scss b/play-node-go/src/components/Form/FindRoom/FindRoom.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/Login/Login.js b/play-node-go/src/components/Form/Login/Login.js similarity index 95% rename from play-node-go/src/components/Login/Login.js rename to play-node-go/src/components/Form/Login/Login.js index 17cb123..4b1500e 100644 --- a/play-node-go/src/components/Login/Login.js +++ b/play-node-go/src/components/Form/Login/Login.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import './Login.scss'; -import authServices from '../../services/authServices'; -import FormError from '../FormError/FormError'; +import authServices from '../../../services/authServices'; +import FormError from '../../Error/FormError/FormError'; const Login = (props) => { const [username, setUsername] = useState(''); diff --git a/play-node-go/src/components/Form/Login/Login.scss b/play-node-go/src/components/Form/Login/Login.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/Login/Login.test.js b/play-node-go/src/components/Form/Login/Login.test.js similarity index 100% rename from play-node-go/src/components/Login/Login.test.js rename to play-node-go/src/components/Form/Login/Login.test.js diff --git a/play-node-go/src/components/Signup/Signup.js b/play-node-go/src/components/Form/Signup/Signup.js similarity index 96% rename from play-node-go/src/components/Signup/Signup.js rename to play-node-go/src/components/Form/Signup/Signup.js index 0add6ae..4f848cb 100644 --- a/play-node-go/src/components/Signup/Signup.js +++ b/play-node-go/src/components/Form/Signup/Signup.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import './Signup.scss'; -import authServices from '../../services/authServices'; -import FormError from '../FormError/FormError'; +import authServices from '../../../services/authServices'; +import FormError from '../../Error/FormError/FormError'; const Signup = (props) => { const [ username, setUsername ] = useState(''); diff --git a/play-node-go/src/components/Form/Signup/Signup.scss b/play-node-go/src/components/Form/Signup/Signup.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/Signup/Signup.test.js b/play-node-go/src/components/Form/Signup/Signup.test.js similarity index 100% rename from play-node-go/src/components/Signup/Signup.test.js rename to play-node-go/src/components/Form/Signup/Signup.test.js diff --git a/play-node-go/src/components/FormError/FormError.scss b/play-node-go/src/components/FormError/FormError.scss deleted file mode 100644 index 2c1129c..0000000 --- a/play-node-go/src/components/FormError/FormError.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../public/stylesheets/partials/variables'; - -span.FormError { - color: map-get($colors, "error");; -} \ No newline at end of file diff --git a/play-node-go/src/components/Logo/Logo.js b/play-node-go/src/components/Logo/Logo.js new file mode 100644 index 0000000..0c35a75 --- /dev/null +++ b/play-node-go/src/components/Logo/Logo.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Logo.scss'; + +const Logo = () => { + return ( + <> + Logo + + ); +} + +export default Logo; \ No newline at end of file diff --git a/play-node-go/src/components/Logo/Logo.scss b/play-node-go/src/components/Logo/Logo.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/MainWrapper/MainWrapper.scss b/play-node-go/src/components/MainWrapper/MainWrapper.scss deleted file mode 100644 index e7678c7..0000000 --- a/play-node-go/src/components/MainWrapper/MainWrapper.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../../public/stylesheets/partials/mixins'; - -div.main-wrapper { - display: flex; - justify-content: flex-start; - @include fullspan; - - aside { - display: flex; - flex-direction: column; - flex-grow: 1; - max-width: 20vw; - a { - display: block; - } - } - - main { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 4; - } -} - -div.Game { - display: flex; - justify-content: space-between; - @include fullspan; - aside { - @include flexAround(column); - flex-grow: 1; - } - - div.game-area { - @include flexAround(column); - flex-grow: 2; - } -} \ No newline at end of file diff --git a/play-node-go/src/pages/Home/HomeSidebar.js b/play-node-go/src/pages/Home/HomeSidebar.js index ca4b8b4..7c078aa 100644 --- a/play-node-go/src/pages/Home/HomeSidebar.js +++ b/play-node-go/src/pages/Home/HomeSidebar.js @@ -1,19 +1,30 @@ import React, { useState } from 'react'; -import Signup from '../../components/Signup/Signup'; -import Login from '../../components/Login/Login'; +import Signup from '../../components/Form/Signup/Signup'; +import Login from '../../components/Form/Login/Login'; +import NewRoomButton from '../../components/Button/NewRoom/NewRoom'; +import FindRoomForm from '../../components/Form/FindRoom/FindRoom'; +import LibraryButton from '../../components/Button/Library/Library'; const HomeSidebar = (props) => { const [ showForm, setShowForm ] = useState(''); + const ifUser = <> + + + + + + const ifNoUser = <> +

{setShowForm('login')}}>Login

+ {showForm === 'login' ? : <>} +

{setShowForm('signup')}}>Signup

+ {showForm === 'signup' ? : <>} + + return ( ); } diff --git a/play-node-go/src/components/MainWrapper/MainWrapper.js b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js similarity index 80% rename from play-node-go/src/components/MainWrapper/MainWrapper.js rename to play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js index 37ca5b7..215e86a 100644 --- a/play-node-go/src/components/MainWrapper/MainWrapper.js +++ b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import './MainWrapper.scss'; +import NavBar from '../NavBar/NavBar'; import Sidebar from '../Sidebar/Sidebar'; import Account from '../../pages/Account/Account'; import Game from '../../pages/Game/Game'; @@ -14,10 +15,13 @@ const MainWrapper = (props) => { if (props.page === 'game') return selectPage(props) return (
- -
- {selectPage(props)} -
+ +
+ +
+ {selectPage(props)} +
+
) } diff --git a/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss new file mode 100644 index 0000000..da9f4e0 --- /dev/null +++ b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss @@ -0,0 +1,51 @@ +@import '../../../public/stylesheets/partials/mixins'; + +div.main-wrapper { + display: flex; + justify-content: flex-start; + flex-flow: column nowrap; + @include fullspan; + + div.NavBar { + max-height: 10vh; + min-height: 5vh; + } + + div.content-wrapper { + display: flex; + justify-content: flex-start; + @include fullspan; + + aside { + display: flex; + flex-direction: column; + flex-grow: 1; + max-width: 20vw; + a { + display: block; + } + } + + main { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 4; + } + } +} + +div.Game { + display: flex; + justify-content: space-between; + @include fullspan; + aside { + @include flexAround(column); + flex-grow: 1; + } + + div.game-area { + @include flexAround(column); + flex-grow: 2; + } +} \ No newline at end of file diff --git a/play-node-go/src/pages/Layout/NavBar/NavBar.js b/play-node-go/src/pages/Layout/NavBar/NavBar.js new file mode 100644 index 0000000..015a090 --- /dev/null +++ b/play-node-go/src/pages/Layout/NavBar/NavBar.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import './NavBar.scss'; +import Logo from '../Logo/Logo'; + +const NavBar = (props) => { + + return ( +
+ +
+ + + +
Find a Game
+ + + +
News
+ + + +
{props.user ? props.user.username : <>}
+ +
+ ); +} + +export default NavBar; \ No newline at end of file diff --git a/play-node-go/src/pages/Layout/NavBar/NavBar.scss b/play-node-go/src/pages/Layout/NavBar/NavBar.scss new file mode 100644 index 0000000..cf72b9c --- /dev/null +++ b/play-node-go/src/pages/Layout/NavBar/NavBar.scss @@ -0,0 +1,5 @@ +div.NavBar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; +} \ No newline at end of file diff --git a/play-node-go/src/pages/Layout/NavBar/NavBar.test.js b/play-node-go/src/pages/Layout/NavBar/NavBar.test.js new file mode 100644 index 0000000..4d2478c --- /dev/null +++ b/play-node-go/src/pages/Layout/NavBar/NavBar.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import { render } from '@testing-library/react'; +import NavBar from './NavBar'; +import { initState } from '../../reducers/init/stateReducer.init'; + +test('renders NavBar without crashing', () => { + const { getByTestId } = render( + + + + ); + const NavBarDiv = getByTestId('NavBar'); + expect(NavBarDiv).toBeInTheDocument(); +}); diff --git a/play-node-go/src/components/Sidebar/Sidebar.js b/play-node-go/src/pages/Layout/Sidebar/Sidebar.js similarity index 100% rename from play-node-go/src/components/Sidebar/Sidebar.js rename to play-node-go/src/pages/Layout/Sidebar/Sidebar.js diff --git a/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss b/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss new file mode 100644 index 0000000..e69de29 diff --git a/play-node-go/src/components/Sidebar/Sidebar.test.js b/play-node-go/src/pages/Layout/Sidebar/Sidebar.test.js similarity index 100% rename from play-node-go/src/components/Sidebar/Sidebar.test.js rename to play-node-go/src/pages/Layout/Sidebar/Sidebar.test.js diff --git a/play-node-go/src/pages/Room/RoomSidebar.js b/play-node-go/src/pages/Room/RoomSidebar.js index f35348b..3729a08 100644 --- a/play-node-go/src/pages/Room/RoomSidebar.js +++ b/play-node-go/src/pages/Room/RoomSidebar.js @@ -1,8 +1,14 @@ import React from 'react'; +import FindGameForm from '../../components/Form/FindGame/FindGame'; +import NewGameButton from '../../components/Button/NewGame/NewGame'; +import ArchiveButton from '../../components/Button/Archive/Archive'; const RoomSidebar = () => { return ( <> + + + ); }