From 91b532b6cd22e138674bbc33e0c6d82f1ebb5dec Mon Sep 17 00:00:00 2001 From: JP1998 Date: Thu, 29 Nov 2018 16:19:02 +0100 Subject: [PATCH] Add api calls with persistent user data Added login and registration api calls to the function pool, while the application state is persistet through localStorage. Also (if signed in) the username will be displayed in the navigation bar of the website. --- js/CommonComponents.js | 51 +- js/api.js | 203 +++ js/components/BigImage.js | 9 + js/constants.js | 11 + js/redux/reduxStoreBinder.js | 50 + package.json | 6 +- pages/_app.js | 25 + pages/index.js | 33 +- yarn.lock | 2710 +++++++++++++++++++++++++++++++++- 9 files changed, 3039 insertions(+), 59 deletions(-) create mode 100644 js/api.js create mode 100644 js/components/BigImage.js create mode 100644 js/constants.js create mode 100644 js/redux/reduxStoreBinder.js create mode 100644 pages/_app.js diff --git a/js/CommonComponents.js b/js/CommonComponents.js index ef8c39a..b8407ae 100644 --- a/js/CommonComponents.js +++ b/js/CommonComponents.js @@ -10,6 +10,9 @@ import { NavItem, NavLink } from 'reactstrap'; + +import { connect } from 'react-redux' + import React from "react"; export function BigImage(props) { @@ -26,6 +29,7 @@ export class TurniereNavigation extends React.Component { super(props); this.toggle = this.toggle.bind(this); + this.state = { collapsed: true }; @@ -68,15 +72,48 @@ function Betabadge() { return (BETA); } -function LoginLogoutButtons() { - return ( - - - - - ); +class InvisibleLoginLogoutButtons extends React.Component { + + logoutClick() { + console.log("Logged out."); + + /* + /users/sign_out <- DELETE Token invalidieren + /users/validate_token <- GET Token valide? + */ + } + + render() { + const { isSignedIn, username, logout } = this.props + + if(isSignedIn) { + return ( + + + + + ); + } else { + return ( + + + + + ); + } + } + } +const mapStateToLoginLogoutButtonProperties = (state) => { + const { isSignedIn, username } = state.userinfo; + return { isSignedIn, username } +} + +const LoginLogoutButtons = connect( + mapStateToLoginLogoutButtonProperties +)(InvisibleLoginLogoutButtons) + export function Footer() { return (