File: examples/react/src/Components/Header.js

Recommend this page to a friend!
  Classes of Arturs Sosins   Countly Web SDK   examples/react/src/Components/Header.js   Download  
File: examples/react/src/Components/Header.js
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: Countly Web SDK
Track site accesses and errors the Countly API
Author: By
Last change: Stylinted Web SDK (#243)

* added stylelint

* some codacy changes

* lf

* duplicate
Date: 7 months ago
Size: 2,628 bytes
 

Contents

Class file image Download
import React from 'react'; import { Link, useHistory } from "react-router-dom"; import Users from './Users'; import Countly from 'countly-sdk-web'; import './styles.css'; const Header = (props) => { let loginState = props.loginState; let history = useHistory(); const onSignIn = () => { let login = window.confirm("Do you want to login ?"); if(login) { let userIndex = getRandomUserIndex(); let user = Users[userIndex]; localStorage.setItem("clydemo-user", userIndex); localStorage.setItem("clydemo-login-state", true); //Change user's device on login - He is now an identified user Countly.q.push(['change_id', user.device_id]); props.setLoginState(true); setUserData(user); history.push("/"); } } const onSignOut = () => { localStorage.removeItem("clydemo-login-state"); localStorage.removeItem("clydemo-user"); //Change user's device on logout - He is now an anonymous user Countly.q.push(['change_id', "cly-device-demo-id"]); props.setLoginState(false); history.push("/"); } const getRandomUserIndex = () => { return getRandomNumber(0, Users.length - 1); } const setUserData = (user) => { Countly.q.push(['user_details', { "name": user.name, "username": user.username, "email": user.email, "organization": user.organization, "phone": user.phone, "gender": user.gender, "byear": user.byear }]); } const getRandomNumber = (min, max) => { return parseInt(Math.random() * (max - min) + min, 10); } return ( <div className="header"> <div> <Link className="link" to="/">Home</Link> </div> <div> <h1 style={{textTransform: 'uppercase'}}>Countly React Demo</h1> </div> <div style={{display:'flex', padding: '10px'}}> <p> <Link className="link" to="/contact">Contact</Link> </p> { !loginState && <p onClick={onSignIn} style={{cursor:'pointer'}}> Sign in </p> } { loginState && <p onClick={onSignOut} style={{cursor:'pointer'}}> Sign out </p> } </div> </div> ); } export default Header;