From 54ea1f7ac58c607695e0d730f03f51d64513f4f8 Mon Sep 17 00:00:00 2001 From: Thomas Berrod Date: Fri, 21 Jun 2019 15:55:33 +0200 Subject: [PATCH] login drawer --- nextjs/actions.js | 52 ----- nextjs/actions/auth.js | 16 +- nextjs/actions/user.js | 2 - nextjs/components/organisms/BottomToolbar.js | 78 ------- nextjs/components/organisms/DetailAppBar.js | 94 -------- nextjs/components/organisms/Header.js | 107 +++++++-- .../organisms/HorizontalAdScroller.js | 11 + nextjs/components/organisms/PSABHeader.js | 26 --- .../organisms/PrimarySearchAppBar.js | 164 -------------- .../components/organisms/ShortVideoHooker.js | 4 +- nextjs/components/templates/LayoutDetail.js | 63 ------ nextjs/components/templates/PSABHeader.js | 26 --- nextjs/components/templates/layoutAuth.js | 208 ------------------ nextjs/components/templates/page.js | 25 --- nextjs/components/templates/signin.js | 103 --------- nextjs/data/api.js | 5 +- nextjs/next-auth.config.js | 13 +- nextjs/pages/Company.js | 16 +- nextjs/pages/Help.js | 44 ++++ nextjs/pages/Login.js | 2 +- nextjs/pages/Offre.js | 6 +- nextjs/pages/Reponse.js | 2 +- nextjs/pages/Territoires.js | 43 ---- nextjs/pages/_app.js | 10 + nextjs/pages/auth/callback.js | 57 ----- nextjs/pages/auth/check-email.js | 40 ---- nextjs/pages/auth/credentials.js | 115 ---------- nextjs/pages/auth/error.js | 67 ------ nextjs/reducers/user.js | 46 +++- nextjs/rootSaga.js | 4 +- nextjs/sagas/userSaga.js | 56 +++-- nextjs/store.js | 2 +- nextjs/types.js | 4 + webRTC/server.js | 4 +- 34 files changed, 263 insertions(+), 1252 deletions(-) delete mode 100644 nextjs/actions.js delete mode 100644 nextjs/components/organisms/BottomToolbar.js delete mode 100644 nextjs/components/organisms/DetailAppBar.js delete mode 100644 nextjs/components/organisms/PSABHeader.js delete mode 100644 nextjs/components/organisms/PrimarySearchAppBar.js delete mode 100644 nextjs/components/templates/LayoutDetail.js delete mode 100644 nextjs/components/templates/PSABHeader.js delete mode 100644 nextjs/components/templates/layoutAuth.js delete mode 100644 nextjs/components/templates/page.js delete mode 100644 nextjs/components/templates/signin.js create mode 100644 nextjs/pages/Help.js delete mode 100644 nextjs/pages/Territoires.js delete mode 100644 nextjs/pages/auth/callback.js delete mode 100644 nextjs/pages/auth/check-email.js delete mode 100644 nextjs/pages/auth/credentials.js delete mode 100644 nextjs/pages/auth/error.js diff --git a/nextjs/actions.js b/nextjs/actions.js deleted file mode 100644 index c508349c7..000000000 --- a/nextjs/actions.js +++ /dev/null @@ -1,52 +0,0 @@ -// export const actionTypes = { -// FAILURE: 'FAILURE', -// INCREMENT: 'INCREMENT', -// DECREMENT: 'DECREMENT', -// RESET: 'RESET', -// LOAD_DATA: 'LOAD_DATA', -// LOAD_DATA_SUCCESS: 'LOAD_DATA_SUCCESS', -// START_CLOCK: 'START_CLOCK', -// TICK_CLOCK: 'TICK_CLOCK' -// } - -// export function failure (error) { -// return { -// type: actionTypes.FAILURE, -// error -// } -// } - -// export function increment () { -// return { type: actionTypes.INCREMENT } -// } - -// export function decrement () { -// return { type: actionTypes.DECREMENT } -// } - -// export function reset () { -// return { type: actionTypes.RESET } -// } - -// export function loadData () { -// return { type: actionTypes.LOAD_DATA } -// } - -// export function loadDataSuccess (data) { -// return { -// type: actionTypes.LOAD_DATA_SUCCESS, -// data -// } -// } - -// export function startClock () { -// return { type: actionTypes.START_CLOCK } -// } - -// export function tickClock (isServer) { -// return { -// type: actionTypes.TICK_CLOCK, -// light: !isServer, -// ts: Date.now() -// } -// } diff --git a/nextjs/actions/auth.js b/nextjs/actions/auth.js index 9884d798b..52e8ab6f2 100644 --- a/nextjs/actions/auth.js +++ b/nextjs/actions/auth.js @@ -1,20 +1,26 @@ import { USER_LOGGED_IN, USER_LOGGED_OUT, REQUEST_LOGIN, REQUEST_LOGIN_FAILURE, - REQUEST_OAUTH_LOGIN, REQUEST_OAUTH_LOGIN_FAILURE + REQUEST_OAUTH_LOGIN, REQUEST_OAUTH_LOGIN_FAILURE, + REQUEST_LOGOUT } from "../types"; +export const requestLogin = data => ({ + type: REQUEST_LOGIN, + data +}); + export const userLoggedIn = user => ({ type: USER_LOGGED_IN, user }); +export const requestLogout = data => ({ + type: REQUEST_LOGOUT, +}); + export const userLoggedOut = () => ({ type: USER_LOGGED_OUT }); -export const requestLogin = data => ({ - type: REQUEST_LOGIN, - data -}); export const requestLoginFailure = errors => ({ type: REQUEST_LOGIN_FAILURE, diff --git a/nextjs/actions/user.js b/nextjs/actions/user.js index b10fac39e..0d574b88a 100644 --- a/nextjs/actions/user.js +++ b/nextjs/actions/user.js @@ -1,6 +1,4 @@ import { - CREATE_USER_REQUEST, - CREATE_USER_FAILURE, FETCH_CURRENT_USER_REQUEST, FETCH_CURRENT_USER_SUCCESS, FETCH_CURRENT_USER_FAILURE, diff --git a/nextjs/components/organisms/BottomToolbar.js b/nextjs/components/organisms/BottomToolbar.js deleted file mode 100644 index 3150afdeb..000000000 --- a/nextjs/components/organisms/BottomToolbar.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/IconButton'; -import { withStyles } from '@material-ui/core/styles'; -import SvgIcon from '@material-ui/core/SvgIcon'; - - -const styles = theme => ({ - root: { - width: '100%', - display: 'flex', - }, - grow: { - flexGrow: 1, - }, - sectionDesktop: { - justifyContent: 'center', - display: 'flex', - }, - sectionMobile: { - // display: 'flex', - }, -}); - -class BottomToolBar extends React.Component { - state = { - anchorEl: null, - mobileMoreAnchorEl: null, - }; - - render() { - const { classes } = this.props; - - return ( -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- ); - } -} - -BottomToolBar.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(BottomToolBar); diff --git a/nextjs/components/organisms/DetailAppBar.js b/nextjs/components/organisms/DetailAppBar.js deleted file mode 100644 index f91e5577f..000000000 --- a/nextjs/components/organisms/DetailAppBar.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; -import Input from '@material-ui/core/Input'; -import Badge from '@material-ui/core/Badge'; -import MenuItem from '@material-ui/core/MenuItem'; -import Menu from '@material-ui/core/Menu'; -import { fade } from '@material-ui/core/styles/colorManipulator'; -import { withStyles } from '@material-ui/core/styles'; -import SearchIcon from '@material-ui/icons/Search'; -import AccountCircle from '@material-ui/icons/AccountCircle'; -import MailIcon from '@material-ui/icons/Mail'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import MoreIcon from '@material-ui/icons/MoreVert'; -import SvgIcon from '@material-ui/core/SvgIcon'; - -import Router from 'next/router' - -const styles = theme => ({ - root: { - width: '100%', - }, - grow: { - flexGrow: 1, - }, - logo: { - width: '48px', - height: '48px' - }, - sectionMobile: { - display: 'flex', - }, -}); - -class PrimarySearchAppBar extends React.Component { - state = { - anchorEl: null, - mobileMoreAnchorEl: null, - }; - - render() { - const { classes } = this.props; - - return ( -
- - - { - this.props.backLink != "" ? - - Router.push(this.props.backLink)}> - - - - - - : - Router.push('/')}> - - - - - - } -
- - -
-
-
- - - - - - -
- - -
- ); - } -} - -PrimarySearchAppBar.propTypes = { - classes: PropTypes.object.isRequired, - backLink: PropTypes.string, - logo: PropTypes.string, -}; - -export default withStyles(styles)(PrimarySearchAppBar); diff --git a/nextjs/components/organisms/Header.js b/nextjs/components/organisms/Header.js index 35b9c527f..526a0ad1e 100644 --- a/nextjs/components/organisms/Header.js +++ b/nextjs/components/organisms/Header.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -19,7 +19,11 @@ import AccountCircle from '@material-ui/icons/AccountCircle'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import { ListItemText } from '@material-ui/core'; - +import CircularProgress from '@material-ui/core/CircularProgress'; +import { connect } from 'react-redux' +import { fetchCurrentUserRequest } from "../../actions/user"; +import { requestLogout } from "../../actions/auth"; +import Button from '@material-ui/core/Button'; const styles = theme => ({ root: { @@ -82,6 +86,10 @@ class Header extends React.Component { toggle: true }; + componentDidMount() { + + } + toggleDrawer = (side, open) => () => { this.setState({ [side]: open, @@ -180,42 +188,87 @@ class Header extends React.Component { role="button" onClick={this.toggleDrawer('right', false)} onKeyDown={this.toggleDrawer('right', false)} - > -
- - - - - - - + >{!!this.props.loading && + (
Chargement...
+ )} + {!!!this.props.loading && !!!this.props.fetched + && +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
} + {!!!this.props.loading && !!this.props.fetched && + + {this.props.user.firstname} + {this.props.user.lastname} + {this.props.user.email} - + {/* TODO:real links */} + - + - + - + - - + - + - -
+ + + + + + + }
@@ -251,5 +304,17 @@ Header.propTypes = { classes: PropTypes.object.isRequired, }; +function mapStateToProps(state) { + + console.log("Header") + console.log(state) + console.log("Header") + + return { + user: state.user, + fetched: !!state.user.fetched, + loading: !!state.user.loading + }; +} +export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, requestLogout })(Header)); -export default withStyles(styles)(Header) \ No newline at end of file diff --git a/nextjs/components/organisms/HorizontalAdScroller.js b/nextjs/components/organisms/HorizontalAdScroller.js index c5855df53..7d2d4e55e 100644 --- a/nextjs/components/organisms/HorizontalAdScroller.js +++ b/nextjs/components/organisms/HorizontalAdScroller.js @@ -13,11 +13,22 @@ const styles = theme => ({ overflow: 'hidden', backgroundColor: theme.palette.background.paper, }, + //TODO: great horizontal scrolling + //hidding scroll bar + //https://stackoverflow.com/questions/53772429/material-ui-how-can-i-style-the-scrollbar-with-css-in-js + //https://css-tricks.com/pure-css-horizontal-scrolling/ + //http://qnimate.com/javascript-scroll-by-dragging/ + //https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6 + // -> https://stackoverflow.com/questions/40926181/react-scrolling-a-div-by-dragging-the-mouse gridList: { flexWrap: 'nowrap', // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. transform: 'translateZ(0)', height: '400px', + '&::-webkit-scrollbar': { + width: '0 !important' + }, + '-webkit-overflow-scrolling': 'touch' }, gridListTile:{ height: '400px', diff --git a/nextjs/components/organisms/PSABHeader.js b/nextjs/components/organisms/PSABHeader.js deleted file mode 100644 index 0c4eda02b..000000000 --- a/nextjs/components/organisms/PSABHeader.js +++ /dev/null @@ -1,26 +0,0 @@ -// import Link from 'next/link' -// import PropTypes from "prop-types"; -// import { withStyles } from '@material-ui/core/styles' -// import PSAB from './PrimarySearchAppBar' - - -// const styles = theme => ({ -// root: { -// position: 'relative', -// height: '10vh' -// }, -// }); - -// function Header(props) { -// return ( -// -// ); - -// } -// Header.defaultProps = { -// backLink : "" -// } -// Header.propTypes = { -// backLink : PropTypes.string -// } -// export default withStyles(styles)(Header) \ No newline at end of file diff --git a/nextjs/components/organisms/PrimarySearchAppBar.js b/nextjs/components/organisms/PrimarySearchAppBar.js deleted file mode 100644 index ac3ca0826..000000000 --- a/nextjs/components/organisms/PrimarySearchAppBar.js +++ /dev/null @@ -1,164 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; -import Input from '@material-ui/core/Input'; -import Badge from '@material-ui/core/Badge'; -import MenuItem from '@material-ui/core/MenuItem'; -import Menu from '@material-ui/core/Menu'; -import { fade } from '@material-ui/core/styles/colorManipulator'; -import { withStyles } from '@material-ui/core/styles'; -import SearchIcon from '@material-ui/icons/Search'; -import AccountCircle from '@material-ui/icons/AccountCircle'; -import MailIcon from '@material-ui/icons/Mail'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import MoreIcon from '@material-ui/icons/MoreVert'; -import SvgIcon from '@material-ui/core/SvgIcon'; - -import Router from 'next/router' -import WhatshotIcon from '@material-ui/icons/Whatshot'; -import Button from '@material-ui/core/Button'; -import dynamic from 'next/dynamic' - -const PWAInstallSnack = dynamic(() => import('./PWAInstallSnack.js'), { - ssr: false -}); -const styles = theme => ({ - root: { - width: '100%', - }, - grow: { - flexGrow: 1, - }, - search: { - position: 'relative', - borderRadius: theme.shape.borderRadius, - backgroundColor: fade(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: fade(theme.palette.common.white, 0.25), - }, - marginRight: theme.spacing(2), - marginLeft: 0, - width: '100%', - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(3), - width: 'auto', - }, - }, - searchIcon: { - width: theme.spacing(9), - height: '100%', - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - inputRoot: { - color: 'inherit', - width: '100%', - }, - inputInput: { - paddingTop: theme.spacing(1), - paddingRight: theme.spacing(1), - paddingBottom: theme.spacing(1), - paddingLeft: theme.spacing(1), - transition: theme.transitions.create('width'), - width: '100%', - [theme.breakpoints.up('md')]: { - width: 500, - }, - }, - sectionDesktop: { - display: 'flex', - }, - sectionMobile: { - display: 'flex', - }, -}); - -class PrimarySearchAppBar extends React.Component { - state = { - anchorEl: null, - mobileMoreAnchorEl: null, - }; - - render() { - const { classes } = this.props; - - return ( -
- - - { - this.props.backLink != "" ? - - Router.push(this.props.backLink)}> - - - - - - : - Router.push('/')}> - - - - - - } - - -
- - -
-
-
- - {({ initInstall }) => - - - - } - - -
-
- - - - - - -
- - - - -
- ); - } -} - -PrimarySearchAppBar.propTypes = { - classes: PropTypes.object.isRequired, - backLink: PropTypes.string, -}; - -export default withStyles(styles)(PrimarySearchAppBar); diff --git a/nextjs/components/organisms/ShortVideoHooker.js b/nextjs/components/organisms/ShortVideoHooker.js index 9862e4e7a..9de2c07e9 100644 --- a/nextjs/components/organisms/ShortVideoHooker.js +++ b/nextjs/components/organisms/ShortVideoHooker.js @@ -60,7 +60,7 @@ class ShortVideoHooker extends Component { } tick() { - console.log(this.state) + // console.log(this.state) if (new Date() - this.state.startDate >= 8000) { if (this.state.i == 2) @@ -82,7 +82,7 @@ class ShortVideoHooker extends Component { render() { let { classes } = this.props; let videoId = videoList[0].vimeoId; - console.log(videoId) + // console.log(videoId) return (
{/* config at : https://github.com/xDae/react-plyr */} diff --git a/nextjs/components/templates/LayoutDetail.js b/nextjs/components/templates/LayoutDetail.js deleted file mode 100644 index 2914fdc22..000000000 --- a/nextjs/components/templates/LayoutDetail.js +++ /dev/null @@ -1,63 +0,0 @@ -import PropTypes from "prop-types"; - -import { withStyles } from '@material-ui/core/styles' -import DetailAppBar from '../organisms/DetailAppBar' - -const styles = theme => ({ - root: { - height: '100%' - }, - head: { - width: '100%', - - height: '56px', - background: 'silver', - position: 'fixed', - - [theme.breakpoints.up('sm')]: { - height: '64px' - } - - }, - content: { - top: '56px', - height: 'calc(100vh - 56px)', - [theme.breakpoints.up('sm')]: { - top: '64px', - height: 'calc(100vh - 64px)', - }, - position: 'relative', - overflow: 'auto', - - } -}); - -function LayoutDetail(props) { - - const { classes } = props; - - return ( -
-
-
- -
-
-
- {props.children} -
- -
- ) -} - -LayoutDetail.defaultProps = { - backLink:"/", - logo: "default.svg" -} -LayoutDetail.propTypes = { - backLink : PropTypes.string, - logo: PropTypes.string, -} - -export default withStyles(styles)(LayoutDetail) \ No newline at end of file diff --git a/nextjs/components/templates/PSABHeader.js b/nextjs/components/templates/PSABHeader.js deleted file mode 100644 index 62fc2a8dd..000000000 --- a/nextjs/components/templates/PSABHeader.js +++ /dev/null @@ -1,26 +0,0 @@ -import Link from 'next/link' -import PropTypes from "prop-types"; -import { withStyles } from '@material-ui/core/styles' -import PSAB from '../organisms/PrimarySearchAppBar' - - -const styles = theme => ({ - root: { - position: 'relative', - height: '10vh' - }, -}); - -function Header(props) { - return ( - - ); - -} -Header.defaultProps = { - backLink : "" -} -Header.propTypes = { - backLink : PropTypes.string -} -export default withStyles(styles)(Header) \ No newline at end of file diff --git a/nextjs/components/templates/layoutAuth.js b/nextjs/components/templates/layoutAuth.js deleted file mode 100644 index 1d2ed0d9a..000000000 --- a/nextjs/components/templates/layoutAuth.js +++ /dev/null @@ -1,208 +0,0 @@ -import React from 'react' -import Router from 'next/router' -import Head from 'next/head' -import Link from 'next/link' -import { Container, Row, Col, Nav, NavItem, Button, Form, NavLink, Collapse, - Navbar, NavbarToggler, NavbarBrand, Modal, ModalHeader, ModalBody, - ModalFooter, ListGroup, ListGroupItem } from 'reactstrap' -import Signin from './signin' -import { NextAuth } from 'next-auth/client' -import Cookies from 'universal-cookie' - -export default class extends React.Component { - - static propTypes() { - return { - session: React.PropTypes.object.isRequired, - providers: React.PropTypes.object.isRequired, - children: React.PropTypes.object.isRequired, - fluid: React.PropTypes.boolean, - navmenu: React.PropTypes.boolean, - signinBtn: React.PropTypes.boolean - } - } - - constructor(props) { - super(props) - this.state = { - navOpen: false, - modal: false, - providers: null - } - this.toggleModal = this.toggleModal.bind(this) - } - - async toggleModal(e) { - if (e) e.preventDefault() - - // Save current URL so user is redirected back here after signing in - if (this.state.modal !== true) { - const cookies = new Cookies() - cookies.set('redirect_url', window.location.pathname, { path: '/' }) - } - - this.setState({ - providers: this.state.providers || await NextAuth.providers(), - modal: !this.state.modal - }) - } - - render() { - return ( - - - {this.props.children} - - ) - } -} - -export class MainBody extends React.Component { - render() { - if (this.props.container === false) { - return ( - - {this.props.children} - - ) - } else if (this.props.navmenu === false) { - return ( - - {this.props.children} - - ) - } else { - return ( - - - - {this.props.children} - - -
Examples
- - - Auth - - - Async - - - Layout - - - Routing - - - Styling - - - - - - ) - } - } -} - -export class UserMenu extends React.Component { - constructor(props) { - super(props) - this.handleSignoutSubmit = this.handleSignoutSubmit.bind(this) - } - - async handleSignoutSubmit(event) { - event.preventDefault() - - // Save current URL so user is redirected back here after signing out - const cookies = new Cookies() - cookies.set('redirect_url', window.location.pathname, { path: '/' }) - - await NextAuth.signout() - Router.push('/') - } - - render() { - if (this.props.session && this.props.session.user) { - // If signed in display user dropdown menu - const session = this.props.session - return ( -